Web フロントエンドの基本 1 -- CSS_html/css_WEB-ITnose

W3C 標準:
1. 構造標準 (xHTML)
2. アクション標準 (JavaScript)


CSS の記述方法: 1. ; 2. インライン スタイル: タグに記述します。
3. ;
4. スタイルのインポート: @Import 属性を使用して複数の CSS ファイルをインポートします。

CSS の優先順位: 近接性の原則 インライン スタイル > インライン スタイル > リンク スタイル > スタイルのインポート



CSS セレクター:
1. タグセレクター: 例 p{background:#900;} ページ内のすべての p タグの背景色を設定します。 2. ID セレクター: 例 #nvg{background:#900;ページ内の ID nvg のラベルの背景色を赤に設定します。
3. クラス セレクター: Example.nvg{background:#900;} ページ内のクラス nvg のラベルの背景色を赤に設定します。例 *{background:#900} ページ内のすべてのタグの背景色を赤に設定します。

補足:
1. タグは複数のクラスに属することができます。例:

class

2. 複数のタグを区切るにはカンマを使用します (例: body,div,p,a,ul,li{margin:0})。例: #div1 p a{color:#900;} IDを持つpタグ内のリンクaタグの文字色を赤に変更します


CSSセレクター関連の最適化:

あるCSSファイルに以下のコードがあります:
#header {フォントサイズ:14px; 背景:#ccc;}div{フォントサイズ:14px; 幅:960px;}.blue{フォントサイズ:#009;}
.h1{ :14px; font-weight:normal;}
同じ部分を抽出します: fount-size:14px
#header,div,.blue,.h1{fount:14px;}
#header{background:#ccc; {width:960px;}
.blue{color:#009;}
.h1{font-weight:normal;}
同じ部分がまとめて定義されるため、統一されたスタイルが維持され、変更が容易になります。



CSS セレクターの命名:

1. Camel の命名法。複数の単語を組み合わせた名前。最初の単語の最初の文字は小文字で、次の単語の最初の文字は大文字になります。例: # navMenuRedButton
2. パスカルの命名法、すべての単語の最初の文字が大文字になります。例: #NavMenuRedButton
3. ハンガリー語の命名法。同じタグのグループを区別するために使用される単語が前に書かれます。例: #red_navMenuButton 1 と 2 がより一般的に使用されます


ページモジュールの一般的な名前:

ヘッダー: header
Content: content/container
Tail: footerNavigation: navSidebar: Sidebar
Column: column
ページ周辺制御全体レイアウト幅: ラッパー
左右: 左右中央
ログインバー: ログインバー
ロゴ: ロゴ
広告: バナー
ページ本体: メイン
ホットスポット: ホット
ニュース: ニュース
ダウンロード: ダウンロード
サブナビゲーション: サブナビ
メニュー: メニュー
サブメニュー: サブメニュー
検索: 検索
フレンドリーリンク: フレンドリンク
フッター: footer
著作権: copyright
スクロール: スクロール
ヒント: ヒント