CSS 勉強 - PHP/Javascript/JQuery/CSSの勉強

前置き

CSS苦手。

あまり触ってこなかったのもあって
スタイル指定しても反映されなかったり
変な余白が出来たり、四苦八苦している。

なので、基礎についてしっかり把握しておこうと思う。

基礎　セレクタ

命名について

・英数字や、「-（ハイフン）」で作成しましょう。
・特殊文字や、機種依存文字は、使わないようにしましょう。
　「_（アンダーバー）」も古いブラウザでは、使えない場合があります。
・漢字も、もちろん使えません。
・先頭の文字は、英字ではじめましょう。
・長過ぎると鬱陶しいので、端的な長さにしましょう。
・用途や位置が推測できる名前にしましょう。（header、navi、wrap、menu、main、entry、footerなど）
・小文字を推奨します。

優先順の指定は間違えやすいところ。初心者が陥りそうなCSSの7の間違い

ブラウザ初期設定CSS

chromeの開発者ツールの「Element　→　Styles」で「useragent stylesheet」が設定してもないのに、はじめからついてるのが気になった。

デフォルトスタイルシートから考える、リセットCSSの留意点

ブラウザには、デフォルトスタイルシートというのがあり、
ブラウザによってあらかじめスタイルシートが定義されています。

これによって、文章をHTMLで適切にマークアップをすれば、
適度な間隔を保つようになっています。

なるほど。

ブラウザごとにデフォルトスタイルシートがある
↓
ブラウザごとの誤差はこのせい
↓
デフォルトスタイルシート　リセット要

CSS指定の優先順位について、まとめ

・CSSは後に書かれた指定ほど優先順位が上
　外部ファイルCSSを読み込んだ場合も、後指定されたものが優先

・条件付きセレクタ・!important付き指定が例外となる
　(1)詳細さにより優先度が決定
　　 #outline #side #sidesubspace li a{略} こちらが優先
　　 ↓
　　 #sidesubspace li a{略}

　(2)「!important」を付けると優先度は増す。

・HTML上のCSSと、ユーザのCSS設定、ブラウザの初期設定との優先順位
　「HTML内のCSS」＞「ユーザ設定」＞「ブラウザの初期設定」
　
　※!importantをつけたユーザ指定
　「!important付きユーザ指定」＞「!important付きHTML内のCSS指定」＞「HTML内のCSS指定」

前置き

基礎 セレクタ

命名について

ブラウザ初期設定CSS

CSS指定の優先順位について、まとめ

基礎　セレクタ