CSS構造と規則

 

スタイルの優先度

CSSにおけるスタイルの優先度とは、複数のスタイルが同一の箇所に適用されていた場合に、その競合の解決に用いられる仕組みのことです。

ブラウザのデフォルト・スタイルシート、次に閲覧者のスタイルシート、制作者の作成したスタイルシートの順に優先度は高くなります。

さらに、要素に対するスタイル、class属性に対するスタイル、id属性に対するスタイルの順で優先度は高くなります。

同一のセレクタであれば、後から読み込まれた記述された内容が有効となります。

ただし「!important」キーワードが用いられた場合の優先順位は、必ずしもこの限りではありません。

基本構文

セレクター（Selectors）

CSSにおけるセレクタとは、スタイルを適用する箇所のことです。

カンマで区切って併記することで、複数のセレクタに同一のスタイルを適用することができます。

セレクタは要素名、id識別子やclass属性値、または属性名と属性値の組み合わせなどを用いて指定します。

どのようなHTML要素でもCSS1セレクターになり得ます。

セレクターは、単に特別なスタイルと結び付いた要素です。

セレクタ
Selector { Property : value:値 ; }
定義するTAG { スタイル要素 : 定義 ; }
p { font-size : 12pt ; }

selector { property: value:値 }
 一つのセレクターでの複数のスタイル宣言は、セミコロン;でつなぎます。

selector { property1: value:値1; property2: value:値2 }

<style type="text/css">
<!--
P { text-indent: 3em }
CODE,PRE { text-indent: 6em } /* CODE要素と PRE要素は テキストインデントを 6em取る */
-->
</style>

Pです。

セレクタの詳細へ

up

クラス・セレクター

一つのセレクターは異なるクラスを持つことができ、かくて要素は異なったスタイルを持つことができます。

要素（タグ）を指定することも、指定しないで使用することも可能です。

IDセレクターと違って１ページ内で繰り返し使用できます。

<style type="text/css">
<!--
code.html { color: #191970 }
code.css { color: #4b0082 }
-->
</style>

上の例は二つのクラス、HTMLのCODE要素に cssとhtml、を作り上げています。

CLASS属性は、HTMLで要素のクラスを示唆するのに使われ、CLASS="クラス名"を使って指定します。

名前に先行して同定子 "." を使って指定します、

<P CLASS="warning">1つのクラスだけが1つのセレクター当たり許可されます。

例えば、code.html.proprietaryは無効です。

</p>

クラスは、伴う要素がなくても宣言されます。

<style type="text/css">
<!--
.note { font-size: small }
/* class="note" で指定された要素内は smallを適用*/
-->
</style>

このケースでは、 noteクラスは要素と一緒に使われていません。

見え方でなく機能によってクラスに名前を付けるのが実践的です。

上の例でのnoteクラスは、smallと名付けられていますが、制作者がこのクラスのスタイルを変えることにしたら文字サイズは小さくなく、意味がなくなります。

全ての<spanclass="note">html要素</span>で使用可能です

クラスセレクタ（Class selectors）

up

IDセレクター

ID selectorsは、要素毎に定義する目的で一つ一つに割り当てられます。

このセレクター・タイプは、継承制限に従って限られるときだけに使用されるべきです。

IDセレクターは、名前に先行して同定子"#"を使って指定します。

例えば、以下のように指定され得ます：。

基本的に１ページに１回だけ使用するようにします。

<style type="text/css">
<!--
#svp94O { text-indent: 3em }
-->
</style>

これは、HTML内ではID属性によって参照されます：

<PID=svp94O>Text indented 3em</P>

IDセレクタ（ID selectors）

up


文脈セレクター（Contextual selectors）

文脈セレクターは、空白スペースで区切られた二つ以上の単純なセレクターの単なる文字列です。

これらのセレクターは、普通のプロパティーに割り振れられ、カスケード序列規則に従って単純なセレクターより優先されます。

例えば、以下の文脈セレクター

<style type="text/css">
<!--
P EM { background: yellow }
/* P要素の中の EM は背景が黄色です */ -->
</style>

この規則によれば段落
内の強調文は背景が黄色です；見出しの強調文は影響されません。

子孫セレクタ（Descendant selectors）

up

宣言（定義）

プロパティー（固有性）

プロパティーには、スタイル（様式）を扱うためにセレクターに指定されます。

propertiesの例としては、color・marginそしてfontがあります。

値

値宣言は、プロパティーが受ける役割です。

例えばcolorプロパティーは値redを受け取ることもあります。

up

グループ化

スタイル・シートの声明の繰り返しを減らすために、セレクターや宣言のグループ化ができます。

例えば、文書内の全ての見出しをグループ化によって一つの宣言にすることができます：

h1〜h6を赤色で書体はsans-serif と規定する

<style type="text/css">
<!--
H1, H2, H3, H4, H5, H6 { color: red; font-family: sans-serif }
-->
</style>

up


継承

セレクター内で入れ子化された全てのセレクターは、修正されないなら、外側（親）のセレクターに割り当てられたプロパティ値を実質的に引き継ぎます。

例えば ボディ用に定義された色は、段落
内のテキストにも適応させられます。

内側のセレクターがそれを囲むセレクターを継承しないケースもありますが、これらは論理的には例外であるべきです。

例えばmargin-topプロパティーは、引き継がれません；段落
は文書ボディとして同じ上部余白（マージン）を持たないと直観的にわかります。

up

コメント

コメントは、Cプログラム言語で使われると同じ慣例でスタイル・シート内で*印で示されます。

CSS1の例は以下のような形式です：

/* COMMENTS CANNOT BE NESTED */

up

擬似クラスと擬似要素

擬似クラス（Pseudo-classes）と擬似要素（pseudo-elements）は、CSSサポート・ブラウザが自動的に認識する特別な"クラス"と"要素"です。

擬似クラスは色々な要素タイプ（例えば、訪問済のリンクと作動時のリンクはアンカーの二つタイプを表現します）の中から区別されます。

擬似要素は、段落
の最初の文字といった、要素のサブ部分を参照します。

擬似クラスまたは擬似要素は形式をともなう規則は、一定の形式を取ります

selector:pseudo-class { property: value:値 }

または

selector:pseudo-element { property: value:値 }

擬似クラスと擬似要素は、HTMLのCLASS属性とともに特定されるべきではありません。

普通のクラスは、以下の様に擬似クラスと擬似要素とともに使いましょう：

selector.class:pseudo-class { property: value:値 }

または

selector.class:pseudo-element { property: value:値 }

疑似クラス（Pseudo-classes）

疑似要素（Pseudo-elements）

up


アンカー擬似クラス

擬似クラスで、リンク・訪問済リンク・作動時リンクを異なって表示するように A要素を割り当てることができます。

アンカー要素は、 link・ visitedまたは active擬似クラスを与えることができます。

訪問済リンクは色々な色や色々な文字サイズ・スタイルで表示するように定義されます。

今選ばれた（作動時）のリンクを色々な色のやや大きい文字で画面に表わされるといった面白い効果が得られます。

擬似要素

A:link { color: red }
A:active { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }

up


最初の行の擬似要素

新聞記事、Wall Street Journalなど、ではよく記事のテキストの最初の行が太文字で全て大文字になっています。

CSS1は擬似要素としてこの能力を持っています。

最初の行の擬似要素は、ブロック−レベル要素（ P・ H1など）内でつかいましょう。

最初の行の擬似要素の例は：

P:first-line { font-variant: small-caps; font-weight: bold }

up


最初の文字の擬似要素

最初の文字の擬似要素は、大文字やその他効果を作りだすのに使われます。

割り当てられたセレクター内のテキストの最初の文字は割り当てられた値に従って表示されます。

最初の文字の擬似要素は、如何なるブロック−レベル要素内でも使われます。

例えば：

P:first-letter { font-size: 300%; float: left }

は、大文字を文字サイスで普通の三倍に作り上げます。

up

カスケード（滝状）序列

多元スタイル・シートが使われる場合そのスタイル・シートは、特殊なセレクターの制御とぶつかり合います。

この状況下で、どのスタイル・シートの規則が勝るのかという規則があります。

以下の特徴が、

  1. ! important

    ! importantを特定することで、規則が重要なものとして指定され得ます。

    重要なものとして指定されたスタイルは、それがなけれが同等の重みの矛盾するスタイルを凌駕します。

    おなじように、制作者とユーザーの両者が重要な規則を特定するかもしれないので、重要なケースでは制作者の規則が読み手のものを上書きします。

    BODY {
    background: url(bar.gif) white;
    background-repeat: repeat-x ! important }
  2. 規則の元（制作者のそれ対読み手のそれ）

    前に述べたように制作者と読み手の両者はスタイル・シートを特定できます。

    二つの間の規則が衝突する場合、制作者の規則がそれがなければ同等の重みのある読み手の規則より優先します。

    制作者と読み手の両者のスタイル．シートは、ブラウザに組み込まれているスタイル・シートを上書きします。

    制作者は ! important規則を使うことに慎重になるべきで、というのは如何なるユーザーの! important規則をも上書きするからです。

    例えばユーザーは視覚的な問題から大きな文字または特別な色を必要としているのかも知れなく、そのようなユーザーはスタイルはページを読むことができるユーザーにとって不可欠である故にある種の ! importantスタイル規則を宣言したいわけです。

    如何なる ! important規則も、普通の規則を上書きし、だから特別なスタイル要求のあるユーザーがそのページを読むことができるのを確実にするためにもっぱら普通の規則を使うように、と制作者は忠告されます。

  3. セレクター規則：特殊性の計算

    スタイル・シートは特殊性のレベルに基づいて衝突するスタイル・シートを上書きもし、一層特徴的なスタイルが必ずより特徴がないものに優先します。

    これは簡単な計算ゲームで、セレクターの特殊性を計算します。

    1. セレクター内のID属性の数をかぞえる。
    2. セレクター内のCLASS属性の数をかぞえる。
    3. セレクター内のHTMLタグ名の数をかぞえる。

    最後に三つの数値をえるために、正確な順位で三つの数を空白がないコンマで記載します（注意、三文字で終わるために数値をより大きな基準に置き代える必要があるかもしれません）。

    最終的なセレクターに対応する数値リストが低い数値に優先する高い数値で容易に特殊性が決められます。

    以下は、特殊性によって並べ代えられたセレクターのリストです：

    #id1 {xxx} /* a=1 b=0 c=0 --> specificity = 100 */
    UL UL LI.red {xxx} /* a=0 b=1 c=3 --> specificity = 013 */
    LI.red{xxx} /* a=0 b=1 c=1 --> specificity = 011 */
    LI    {xxx} /* a=0 b=0 c=1 --> specificity = 001 */
  4. 特殊性の序列

    容易にするために、二つの規則が同じ重みを持っている場合最後の特殊化された規則が優先します。

    a:hover {
    color:#ff0000;
    background-color:#ECF8FF;
    font-weight:bold;
    font-family:'MS PGothic', 'Hiragino Kaku Gothic Pro W3', Osaka, sans-serif;
    font-size:10pt;
    }

    ブックマーク がマウスホバーさせたときにリンク属性で反応してしまう事を制御する場合の例 a要素のattributeでname=""が指定されている場合のスタイル

    a[name]:hover {
    color: #004060;
    font-weight: bold;
    font-family:'MS PGothic', 'Hiragino Kaku Gothic Pro W3', Osaka, sans-serif;
    font-size:11pt;
    background-color:#ffffff;
    }

    リンク文字でもリスト要素のクラスimg_tipsが指定されたリンク文字のみに別のスタイルを指定する 。

    bold（太字)させない指定となっています。

    ul.img_tips a:link {
    color:#0000ee;
    font-weight:normal;
    text-decoration:none;
    font-family:'MS PGothic', 'Hiragino Kaku Gothic Pro W3', Osaka, sans-serif;
    font-size:10pt;
    }

    table要素（タグ）にclass="non"が指定された子要素のtr,tdに対するスタイルを定義する場合。

    table.non tr td {}

    p要素（タグ）内に書かれた入れ子のstrong要素に対するスタイルを定義する場合

    p > strong {  }

up

HOMEの次スタイルシートの次構造と規則


目的別属性

広告