短縮属性

background短縮属性

例えば,

background:url(sample.png) #fff repeat-x fixed 0% 50%;

という記述は,

background-image(sample.png); background-color:#fff; background-repeat:repeat-x; background-attachment:fixed; background-position:0% 50%;

に相当します.

font短縮属性

指定の仕方は,

font: (文字の装飾) (font-sizeプロパティの値)/(line-heightプロパティの値) (font-familyプロパティの値);

です.font-sizefont-familyの値は必須です.

margin短縮属性

この属性には1つから4つの値が指定でき,適用のされ方はborder-styleプロパティと同じです.例えば,

margin:1em 2em;

という記述は,

margin-top:1em; margin-bottom:1em; margin-left:2em; margin-right:2em;

に相当します.

border短縮属性

margin短縮属性と同じ考え方で,枠の設定をまとめて行えます.

border-width短縮属性

border短縮属性の内,長さだけを指定するものと考えて下さい.

border-topborder-bottomborder-leftborder-right短縮属性

枠の特定の辺に設定するものです.順番に上・下・左・右の辺に使う属性です.

padding短縮属性

margin短縮属性と同じ考え方で,パディングの設定をまとめて行えます.

list-style短縮属性

箇条書きに関する属性の値をまとめて指定できます.

@import命令

@import url(hogehoge.css)

上のように書くと, hogehoge.css を読み込みます.style要素かCSSファイルの冒頭に書かないといけません.

なお,読み込んだファイルに,既に属性を指定してあるタグの属性が指定されていて重なった場合,既に指定された属性が優先されます.

! important

.a1 span {font-size:larger;} .a1 span.x {font-size:smaller;} .a2 span {font-size:larger ! important;} .a2 span.x {font-size:smaller;}

この状況下で以下の記述を考えます.

<span class="a1.x">a1の文字列</span> <span class="a2.x">a2の文字列</span>

この場合,a1の文字列はsmallerの指定が優先され,小さい文字列になります.一方,a2の文字列は! important指定により,largerの指定が優先されます(! important指定がなければa1の文字列と同じ条件になります).

分類属性

display属性を使うと,ブロック要素のタグをインライン要素のように扱ったり,その逆ができます.blockを指定するとブロック要素に,inlineを指定するとインライン要素に,list-itemを指定すると箇条書きの項目(先頭に記号のあるブロック要素),noneを指定するとその要素を非表示にできます.

ただし,みだりにこの属性を使うと,見た目と構造の対応がとれなくなる恐れがあります.