CSSが適用される順序
CSS = Cascading Style Sheets
カスケード＝CSSの上書きルール
プロパティの値が、
後から出でてきたプロパティの値
又は
より詳細度の高いプロパティの値に
上書きされるルール。
強いCSSが弱いCSSを上書きするシステム。
強さの決める要素
①順序(スタイルシート上で後位のプロパティに上書き）
②詳細度(セレクタの書き方)
CSSが適用される詳細度
| 順位 | セレクタ | 強度／点数 |
| 1 | !important | 一番強く 上書きできない。 |
| 2 | HTMLに記載されたstyle属性 | 1000点 |
| 3 | idセレクタ | 100点 |
| 4 | クラスセレクタ 属性セレクタ 擬似セレクタ |
10点 |
| 5 | タイプセレクタ 疑似要素 |
1点 |
| 6 | 全称セレクタ ( * ) | 0点 |
<注意>
!important
style属性
idセレクタ
は詳細度が強いのであまり使わない方が無難。
CSSプロパティの継承
継承とは
要素に設定されたプロパティの値が、その子要素や孫要素に適用されること。
※基本的に承継ありのプロパティは少ない。
継承ありのプロパティの特徴。
フォントやテキスト関係のプロパティ
(注意)ショートハンドを使った場合は全てのサブプロパティが継承の対象となる。
継承ありのプロパティ
フォント系のプロパティ
- font-family
- font-size
- font-style
- font-variant
- font-weight
- font-size-adjust
- font-stretch
- font
- color
テキスト系のプロパティ
- text-align
- text-align-last
- text-decoration-color
- text-indent
- text-justify
- text-shadow
- text-transform
リスト系のプロパティ
- list-style-image
- list-style-position
- list-style-type
- list-style
その他
- border-collapse
- border-spacing
- caption-side
- cursor
- direction
- empty-cells
- letter-spacing
- line-height
- orphans
- quotes
- tab-size
- visibility
- white-space
- widows
- word-break
- word-spacing
- word-wrap