widthプロパティの適用優先順位について調べてみた
cssの指定が苦手なのだけど、
webアプリケーションがきちんと動いているように見える、という意味ではきっちりcssのプロパティを指定できる事が大事なので、
ちょっと気合い入れて調べてみました。
影響ないと思うけど外部ファイルcssの読み込みは
Rails4.0のapps/assets/stylesheetsディレクトリに入っている自作のcssファイルをapplication.css.scssの設定そのままで読み込ませています。
インターン先の環境がそれなので。
たぶん、普通に
< link rel="stylesheet" type="text/css" href="test.css" />
で、読み込んでも基準は変わらないと思いますが、変わっていたら追記します。
この記事で出てくるhtmlタグの一部<とelement_nameの間に半角スペースが入っているものがありますのでご注意ください。
スペース入れないとコードが表示されてくれなかったので……。
まとめ
長くなったので、先に結論を。
主にwidth属性について検討した結果、以下の優先順位でcssが適用される事が分かりました。
値が同じであることは書式を示す以外に意味は無いです。
プロパティの適用優先順位
優先順位(高)
- htmlタグの中に書いた <th style="width: 300px !important">
- 外部ファイルの中に書いた th.aaa { width: 300px !important; }
- 外部ファイルの中に書いた th { width: 300px !important; }
- htmlタグの中に書いた <th style="width: 300px">
- 外部ファイルの中に書いた th.aaa { width: 300px; } (条件付きセレクタの条件が細かい)
- <head>の内部で下の方の行で読み込まれているcss中の th { width: 300px; }
- 外部ファイルの中で上の方に書いた th { width: 300px; }
- 外部ファイルの中で下の方に書いた th { width: 300px; }
- htmlタグの中に書いた <th width="300px">
- デフォルトでブラウザごとに設定されているcss (開発者ツールで見るとuser agent stylesheetsって名前で出てくる)
優先順位(低)
優先順位を決める法則の優先順位は
優先順位(高)
- プロパティのパラメータに!important指定が入っている
- HTML中の要素のタグの中にstyle属性として書いてある>外部ファイルから読み込んでいる
(外部ファイル同士)
たぶんここらへんがBootstrapを使うとtableの幅が〜ってなる原因かも……
- 外部ファイルの読み込み順が遅い>早い
=html内で下の行のlink relで読み込まれているcssが優先
- 同一ファイル内で、下の方の行に書いてある
- HTML中のテーブルの要素のstyle属性 > width属性
- ブラウザのデフォルト設定
優先順位(低)
だいたいこんな感じ。間違っていたら、適宜修正予定(いつもの通り)。複数のcssとかは
グラフィックデザイナーのためのCSSレイアウトメモTIPS「CSS記述の優先度」
からの引用です。
background-colorで試したら、警告マークが出て挙動が違ったので、
プロパティによってなにか違うのかもしれません……。
属性とかプロパティとか用語も若干怪しいですが……。
あと、head内に< style></ style>ではさんでhtmlファイル内の直接書く方法もあるのですが、これは外部ファイルから読み込んだ場合と変わらないと思います。
使わないと思ったのできちんと調べてないですけど。
検証に使ってたコードのまとめは長くなったので、明日にします。
Bootstrapは子要素にたいする指定、この属性の子要素に対する指定……
などでわたしにはややこしいので、
table周りだけでも明日中に一度検証できればいいな……。