ホームページ > 記事 > ウェブフロントエンド > CSS の概要<セレクターの概要>_html/css_WEB-ITnose
CSS の概要<セレクターの概要>_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:31:081256ブラウズ
概要: 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>版权所有©加拿大达内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}/*マウスを押したとき*/