CSSの書き方について
本日の教材動画はこちら
前回はCSSの概要的なものを確認しましたが、今回はもう少し突っ込んだCSSの書き方についてみていきたいと思います。
＜CSSの適用・優先順位＞について
HTMLは書いた箇所に書いた通り適応されましたが、CSSは基本別ヵ所（headや外部ファイル）に書くことになるため、どれを適応・優先するのか決まりがあります。
・書いた順番によって優先される
CSSは基本「あとに書いたものが優先」されます。つまり同じような指定を何回も書いていた場合は最後に書いたものが優先されます。
例えば、外部CSSファイルでの指定は「文字色：赤」、style要素で文章単位の指定を「黄色」、style属性で「青く」指定した場合は、最後に書いた「青」が優先される形になります。
・セレクタの書き方によって優先度が変わる
セレクタとは、「どこの」を指定するために使われるものです。セレクタで指定した場合、書き方によって以下のような優先順位になります。
1. 要素を特定したIDセレクタ（HTMLタグとIDの塀用）
2. 要素を特定しないIDセレクタ（IDのみの利用）
3. 要素を特定したclassセレクタ（HTMLタグとclassの塀用）
4. 要素を特定しないclassセレクタ（classのみの利用）
5. タイプセレクタ（HTMLタグのみの利用）
6. 全称セレクタ（*を利用した指定）
・＜!important＞で優先順位をつける
指定した内容の後ろに !important をつけて記載した場合は、無条件に最優先される。（意図的に順位を変えることができる）
・指定したスタイルなども優先度に含まれる
スタイルは以下の順で優先・適応されます
1. ページ制作者の指定したCSS
2. ブラウザ毎にユーザーが指定したスタイル（ツールオプションなどから独自に指定しているなど）
3. ブラウザ独自のスタイル
・CSS構造に使われる用語
前回CSSの構造は「どこの」「何を」「どうするか」という3点セットで作られるということを勉強しましたが、以下がその指定の際に使われる用語となります。
・セレクタ→「どこの」を指定する際に使用する
・プロパティ→「何を」を指定する際に使用する
・値→「どうするか」を指定する際に使用する
＜CSS3＞について
CSSの最新バージョンは＜CSS3＞です。ただこちらはまだ策定中で、一部勧告されていますが全体はまだの状態。また、最新とはいっても完全に別バージョンになったわけではなく、従来のCSSと互換性があります。「新しいCSS」というよりは「便利な仕様が増えたCSS」という扱い。
現在策定中ではあるが、ブラウザ毎に一部機能が先行実装されている場合がある。そういった先行機能を使う場合には「プレフィックス」が必要になる。「これは先行の拡張機能ですよ」と示すためのつける識別子のこと。例えばFirefox系なら-moz-、ChromeやSafari系なら-webkit-など、ブラウザ毎に識別子が決まっている。
主要ブラウザのベンダープレフィックス
-moz- …… Firefox
-webkit- …… Google Chrome、Safari
-o- …… Opera
-ms- …… Internet Explorer
なんだか小難しいですが、やってるうちに覚えることを期待して本日はここまで！CSS3が従来のCSS（2.1）と互換性があるのが救いですね！
【参照元】
