ここまでで、CSSの基本的なルールに付いての説明が終わりました。個々のpropertyと其のvalueに付いての説明に入る前に、CSSの基本的なルールをまとめておきます。
selector {property1:value1; property2:value2}
property:value を宣言と呼ぶ。HTMLの全ての要素は selector になり得る。
strong { font-weight: bold }
class="CSS" を与えられた全ての要素にマッチするスタイル・シートは、
.CSS {color: #008}
class="HTML" を与えられたcode要素だけにマッチするスタイル・シートは、
code.HTML {color: #500}
p要素の子孫要素であり、且、class="CSS"を与えられたcode要素にマッチするスタイル・シートは、
p code.CSS {color: #008; font-size: .8em}
要素の状態を、擬似的なクラスを与えて区別する。href属性を持つAnchor要素に対して、未訪 :link 、既訪 :visited 、カーソルが上に乗っている状態 :hover 、アクティブ状態 :active 、text入力にフォーカスされている状態 :focus 。
a:hover {color: red; font-style: italic;
text-decoration: underline}
ここに、 A:link と :link は同じ。
ブロック・レベル要素のある一部分を区別して擬似的に要素と見なす。ブロック・レベル要素の一文字目を、 :first-letter 、一行目を、 :first-line と云う擬似的な要素と見なす。
p:first-line {font-size: 1.2em; font-variant: small-caps}擬似クラスも擬似要素も、HTMLでは対応するマークアップがされていないと云う点が「擬似的」と云う所以である。因みに、擬似要素をサポートしているブラウザは、MS I.E.5.5、Netscape6など。
複数のセレクタに共通のスタイルを宣言したい時には、セレクタをカンマで区切ってグループ化できる；
h1,h2,h3,h4,h5,h6,strong,dt,th { font-weight: bold }
div p, div table, div ul { margin: 1em 2em }
一般に親要素のスタイル宣言は子要素にまで及ぶ。子要素では、これと異なる部分だけ定義すれば良い。継承しないプロパティーも在るが、常識的に判断できる。例えば、 'background-color' や 'line-height' 、 'font-size' などは継承するが、 'margin-top' は明らかに継承しない。
<link rel="stylesheet" type="text/css" href="URL">
@import 声明
@import url(...);
複数のスタイル・シート間で競合が起こったときは、user agentの読み込み順が後ろのスタイル・シートほど、優先順位が高くなる。一般に、LINKによる外部スタイル・シートが最も低く、当該要素のstyle属性によるインライン・スタイルが最も高い。
単独のファイルの中でも、下の行に書いたスタイル宣言の方が優先順位が高い。
Copyright © 2004 SUGAI, Manabu. All rights reserved.