CSS の概要<セレクターの概要>_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS の概要<セレクターの概要>_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:31:08

オリジナル

1209 人が閲覧しました

概要: CSS は、HTML 要素の表示方法を定義するカスケードスタイルシートを指します。スタイルシートは通常、.css ファイルに保存されます。便宜上、CSS セレクターの概要を示します。財団！

1 文法仕様:

各スタイルルールには 2 つの部分があります: セレクターとスタイル宣言

2 CSS ルールの機能: 継承、カスケード、事後定義スタイルの優先順位:

3 CSS セレクター

4.1 要素セレクター: 選択同じ名前のすべての要素

4.2 クラスセレクター: 要素内で同じクラスを定義でき、クラスセレクターは通常 ID セレクターを補完します

4.3 ID セレクター: 要素セレクター ID で異なる要素を定義できます。 ID セレクターは要素の個性を維持します

4.4 派生セレクター: 上位と下位の関係に従って要素を選択します

4.5 疑似クラスセレクター: 要素のさまざまな状態、対応するマウススライドイベントに使用されます

4.6 セレクターのグループ化、異なるID セレクターはカンマで区切られています

index.html ソースコード:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head>    <link rel ="stylesheet" href="index.css"><body><div id="header"><a>退出</a></div><div id="navi">此处显示  id "navi" 的内容</div><div class="main">此处显示    class "main" 的内容</div><div id="operate" class="subdiv">此处显示  class "operate" 的内容</div><div id="data" class="subdiv">此处显示  id "data" 的内容</div><div id="pages" class="subdiv">此处显示  id "pages" 的内容</div><div id="footer">    <p>版权所有&copy;加拿大达内IT培训公司</p></div></body></html>

ログイン後にコピー

index.css

/*元素选择器：选择所有同名的元素*/div{        border:2px solid blue;    margin:0 auto;    }/*id选择器*/#header{height:61px; text-align:right}#navi{width:100%;height:91px;}#main{width:950px; height:410px; border:5px solid#8ac1db}#footer{height:50px; }/*类选择器补充不同的样式*/.subdiv{width:910px;}#operate{height:30px}#data{height:340px}#pages{height:28px}/*选择器分组，临时发现个别元素具有相同的属性*/#header,#footer{width:960px}#header a{         text-decoration:none         color:blue;         line-height:61px /*行高等于容器高度*/        }/*选择器派生：根据上下级关系选择元素时*/#footer p{text-align:center}/*伪类：元素的不同状态*/#header a:hover{ font-size:20px}/*鼠标滑过*/#header a:active{ color:red}/*鼠标按下时候*/

ログイン後にコピー

プログラムのスクリーンショット:

その他 5 つのスタイル:

その他の細かい詳細: 1 必要に応じてset コンテナの内部は垂直方向の中央にあり、ヒントは次のとおりです。 Line-Height: 61px のように、行の高さを設定することはコンテナの高さに相当します。 /*リングの高さはコンテナの高さに相当します* /

2 対応するマウスイベントが必要な場合は、通常、疑似クラスとホストのアクションに使用されます。これは、よく使用される 2 つです。たとえば、/*疑似クラス: 要素のさまざまな状態*/ #header a: hover{ font-size:20px}/*マウスオーバー*/ #header a:active{ color:red}/*マウスを押したとき*/