FrontPage > Web > CSS

CSS(Cascading Style Sheets)

http://www.a2ztutorial.com/Style/CSS/
http://www.w3.org/Style/CSS/

CSS(カスケーディング・スタイル・シート)は、
各タグには、「style属性」があり、
「ボーダー(border)」、「マージン(margin)」、「パディング(padding)」、「背景(background)」等の
値を変更する事で見た目の変更等が行える。
この「style」で個々のタグに記載するのではなく
別ファイルにしたのが、CSSである。
拡張子は、「*.css」が使用される

  • CSSを使用するメリット
    他のHTMLでも同一のスタイルで統一出来、HTMLファイルがシンプル化する。
    • 「タグ」別にスタイル指定可。
    • 「ID属性」別にスタイル指定可。
    • 「CLASS属性」別にスタイル指定可。
    • 「疑似CLASS」別にスタイル指定可。(aタグのみ!?)
      link通常リンクのスタイル
      visitedアクセス済みリンクのスタイル
      hoverポイント時のスタイル
      activeアクティブ時のスタイル
    • 上記の複数コンボも可。
  • CSSを使用するデメリット
  • 別ファイルになるので何が設定されているか分りにくくなる。

ファイルの読込設定

<html>
  <head>
    ...
    <link rel="stylesheet" href="xxxxx.css" type="text/css">
    ...
  </head>

CSSの書き方

  • 「タグ」指定 (例:divタグ)
    div {
        .... ;
    }
  • 「IDセレクタ」指定
    #id_name {
        .... ;
    }
  • 「CLASSセレクタ」指定
    .class_name {
        .... ;
    }
  • 「疑似CLASS」指定 (例:aタグ:focus[フォーカス])
    a:focus{
        .... ;
    }
  • 「タグとCLASSセレクタの複合」指定
    div.class_name {
        .... ;
    }
  • 「子供セレクタ」指定
    td > div
  • 「子孫セレクタ」指定
    td div.class_name {
        .... ;
    }
  • 全称セレクタ(ユニバーサル・セレクタ)
    *

優先順位

CSSには、表示する優先順位が存在する。
「!important」記載のある物が最優先される。

  • 全称セレクタ < タイプセレクタ < CLASSセレクタ < IDセレクタ
    * < div < .class_name < #id_name

  • タグ名指定 < タグ+α指定
    div < div.class_name
    div < div#id_name

  • 単独セレクタ < 子孫セレクタ < 子孫セレクタ(コンボ) ...
    div < td div < tr td div

メモ


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2014-11-05 (水) 10:21:22 (1051d)