[はじめに]
- スタイルシートをカスケードすることはHTMLのコンピュータ言語や他の文書を表現するためのスタイルです
- スタイルは、外部の.cssファイルに定義することができます
- 作業効率を向上させます
- Webページオブジェクトは、モデルやスタイル編集する能力を持っています
- これは、スタイルシート言語であります
- CSSセレクタは、（ラベルに基づいて行動する方法を見つけるために）これらのラベルに基づいて行動することです
[基本]セレクタ
1.IDセレクタ
- セレクタは「＃」であります
- 各要素は、要素に対応する唯一のID、唯一のIDを有しています
<title>Title</title>
<style>
#p{
color:red
}
#pa{
background:red
}
</style>
</head>
<body>
<p id="p">层叠样式表</p>
<p id="pa">叠层样式表</p>
</body>ブラウザは、次のように表示されます
2.クラスセレクタ
- フォントの色を設定します。
- クラスは、種々の標識を使用して選択することができます
- ドットで表示されます
<style>
.red{
color:red
}
</style>
</head>
<body>
<p class="red">层叠</p>
<span class="red">样式</span>
<div class="red">表</div>
</body>ブラウザは、次のように表示されます
3.タグセレクタ
<title>Document</title>
<style type="text/css">
span{
color: red;
}
</style>
</head>
<body>
<p>我爱学习<span>前端</span>嘞</p>
</body>ブラウザは、次のように表示されます
[サイズ]の関係
IDセレクタ>クラスセレクタ>タグセレクタ
<link href="html.css" rel="stylesheet">
<style type="text/css">
p{
color:red
}
</style>
</head>
<body>
<p>暮然回首，那人却在灯火阑珊处</p>
</body>
外部接続CSS
#div{
color:red
}
.div{
color:pink
}div{
color:greenyellow;
}ブラウザは、次のように表示されます
4.レベルセレクタ
- スペース：同じの同じレベル
- より大きい（>）：同上、空間に>へ
- プラス記号（+）：これは、最も近い兄弟が定義された色になります
- チルダ（〜）：兄弟は、すべての色を定義されていること
前記擬似クラスセレクタの構造
6.属性セレクタ：
- アンチ三角形（^）：プロパティの文字で始まります
- （＆）：文字で終わります
<title>Title</title>
p[id$=c]{color:red}
<body>
<p id=“pa”>aa</p>
<p id=“pb”>aa</p>
<p id=“pc”>aa</p>
<p id=“pd”>aa</p>
<div id=“pa”>aa</div>
</body>
ブラウザは、次のように表示されます
- 文字pを含み[ID * = C] {色：赤}乗算（*）に等しいです
7.フォームセレクタ
8.フォントピッカー
- フォントスタイル::配置されたイタリック体のP {フォントスタイル：イタリック：}
- フォント重量：セットフォントラインの厚さのp {フォント重量：太字;}
- フォントサイズ：フォントサイズを設定します。
- フォントファミリ：フォントのいずれかの種類を使用して提供
