<!DOCTYPE HTML > < HTML LANG = "EN" > < 頭> < メタのcharset = "UTF-8" > < タイトル> CSS導入方法の3種類</ タイトル> <! - 内部が導入- > < スタイル> ボディ{ マージン:0 ; } </ スタイル> <! - インポート- > < リンクのrel = "このスタイルシート" のhref =「セレクタレビュー。CSS」 > </ヘッド> < 身体> <! - インラインスタイル- > < P スタイル= "色:赤は" >これはタイトルの色です。</ P > </ ボディ> </ HTML >
/ * これは、単一の行のコメントのコードの母親であることに注意してください* / / * これは、複数行のコメントである 複数行は、コメント 123 * / / * CSS各第カスケードスタイルシートからなる2つの部分から構成呼び出したCSSが第2のセレクタでありそこに分割されている免責事項は、属性と値* / / * タグセレクタ/ id要素セレクタと導入するために以下セレクタクラスセレクタユニバーサルセレクタに基地セレクタ* / / * タグセレクタ/セレクタ要素を* / DIV { 色:赤 ; } / * IDセレクタ* / #ID { 背景:赤 } / * クラスセレクタ* / の.class { フォントサイズ:は50px ; } / * ユニバーサルセレクタ * / * { フォント重量:太字 } / * パケットは、彼の兄弟セレクタに次セレクタ息子子孫セレクタセレクタセレクタに分割されている* / / * 子孫セレクタ* / / * 指定されたDIV全てスパン* / スパンDIV { 色:赤 } / * 子セレクタDIVスパンの全て* / div>スパン { 色:赤 } / * 次の隣接するセレクタdivタグラベル* / DIV +スパン { カラー:赤 } / * 兄弟セレクタのdiv同様のタグ* / DIV〜スパン { 色 :赤 } / * 要素名と反応における括弧内の値とラベル値を有する要素名と名前を有する要素に属性セレクタが見られた属性セレクタ* / [タイトル] { 色:赤 } [ =タイトル「234」] { 色:赤 } INPUT [タイトル=「234」] { 色:赤 } / * 異なる標識ネストされたグループを持つパケット同じネストされたセレクタは、一緒に異なる選択されます* / / * パケット* / DIV、スパン、P { 色:赤 } / * ネスト* / #ID、.classファイル、DIVスパン { 色:赤 ; } / * 擬似クラスセレクタ* / / * タグ:スタイルを追加* / A:リンク { 色:赤 } / * 未訪問リンクの色* / A:ホバー { 色:赤 } / * ラベル上にマウスを移動* / :アクティブ { 色:赤 } / * 選択されたリンク* / :訪問 { 色:赤 } / * リンク訪れた* / / * 入力フォーカス入力ボックス取得したパターン* / 入力:フォーカス { 概要 :なし ; 地色:#eee ; } / * 擬似要素セレクタ* / P:まずレター { フォントサイズ:は50px ; 色:赤 ;} / * 各<p>要素の内容の前に挿入/ * P:前 { 内容:"$" ; 色:赤 ; } / * 各<p>要素の後に挿入* / 後:P { 内容:"?" ; 色:ブルー ; }