CSS 3とセレクタ
2939 ワード
一、CSS
1、CSS全称積層スタイルシート、通常はスタイルスタイルシートと呼ばれるものがある.Cascading Style Sheetはカスケードスタイルシートとも呼ばれます.
2.CSS第1版のリリース時期1996年12月、2010年にCSS 3をリリースした.0バージョン、つまり現在使用されているCSS 3.です.
3.CSS使用のメリット:内容と表現の分離 表現統一、修正しやすい には豊富なスタイルがあり、ページレイアウトをより柔軟にします. Webページのコードを減らし、閲覧速度を高め、ネットワークブロードバンドを節約し、コードの再利用を高める. は独立したcssを運用し、ウェブページが検索エンジンに収録されるのに有利である.
4.CSS 3の基本文法:
5.スタイルラベル:スタイルラベル、<head>タブにあります.</p>
<p>6.CSSスタイルには、行内スタイル、内部スタイル、外部スタイルシートの3種類があります.</p>
<p>行内スタイル:</p>
<pre class="has"><code class="language-css"><p style="color:red;">
これはテキストです.
</p>
注記:行内スタイルとは、HTMLタグに直接書くことです.</code></pre>
<p>内部スタイル:</p>
<pre class="has"><code class="language-css"><style>
p{
font-size:30px;
}
注記:内部スタイルはheadラベルに書かれており、元のページにのみ適用されます.
外部スタイル:
スタイルの優先度:
二、CSS 3のセレクタ(共通のセレクタ)
1.基本セレクタ:ラベルセレクタ、クラスセレクタ、IDセレクタ
注意:基本セレクタには優先度があります.IDセレクタ>classクラスセレクタ>ラベルセレクタは、近接の原則に従いません.
2.CSS 3アドバンスドセレクタ:階層セレクタ
3.構造擬似クラスセレクタ:
注意:body p:nth-child(n)は親要素の中で最初の要素から探して、一部のタイプ、つまりp要素だけが見つかります!
body p:nth-of-type(n)親要素の中でまずタイプを見て、位置を見て、タイプに合わない要素を直接排除します!
4.属性セレクタ:
1、CSS全称積層スタイルシート、通常はスタイルスタイルシートと呼ばれるものがある.Cascading Style Sheetはカスケードスタイルシートとも呼ばれます.
2.CSS第1版のリリース時期1996年12月、2010年にCSS 3をリリースした.0バージョン、つまり現在使用されているCSS 3.です.
3.CSS使用のメリット:
4.CSS 3の基本文法:
h1{
font-size:15px;
color:red;
}
：color,font-size ，red ， 。h1 。
5.スタイルラベル:スタイルラベル、<head>タブにあります.</p>
<p>6.CSSスタイルには、行内スタイル、内部スタイル、外部スタイルシートの3種類があります.</p>
<p>行内スタイル:</p>
<pre class="has"><code class="language-css"><p style="color:red;">
これはテキストです.
</p>
注記:行内スタイルとは、HTMLタグに直接書くことです.</code></pre>
<p>内部スタイル:</p>
<pre class="has"><code class="language-css"><style>
p{
font-size:30px;
}
注記:内部スタイルはheadラベルに書かれており、元のページにのみ適用されます.
外部スタイル:
： ， CSS， .css 。 head ！
。
rel ，type ，href css 。
p{
color:blue;
}
， ！
スタイルの優先度:
「行内スタイル」>「内部スタイル」>「外部スタイル」
また、この優先度は近接原則を遵守しています。つまり、李ラベルが近いほどスタイル優先度が高くなります。
二、CSS 3のセレクタ(共通のセレクタ)
1.基本セレクタ:ラベルセレクタ、クラスセレクタ、IDセレクタ
： h1~h6, 。
ラベルセレクタ
:
.class{
font-size:15px;
color:red;
}
// ： .class 。font-size ， 。
id ：
#id{
font-size:20px;
}
// :id , # ， ，ID 。
注意:基本セレクタには優先度があります.IDセレクタ>classクラスセレクタ>ラベルセレクタは、近接の原則に従いません.
2.CSS 3アドバンスドセレクタ:階層セレクタ
《1》 ：
body p{
background-color:yellow;
}
// ： ， P ， body p ！
《2》 ：
body>p{
color:red;
}
// ：body ，p 。 body P.
《3》 ：
.active+p{
color:yellow;
}
// ：.active p ， p ， ！
《4》 ：
.active~p{
color:blue;
}
// ： ， p ， p ， ，
3.構造擬似クラスセレクタ:
body p:first-child{
}
// ： p
body p:last-child{
}
//
body p:nth-child(n){
}
// n p
body p:last-of-type{
}
//
body p:first-of-type{
}
//
body p:nth-of-type(n){
}
// n
注意:body p:nth-child(n)は親要素の中で最初の要素から探して、一部のタイプ、つまりp要素だけが見つかります!
body p:nth-of-type(n)親要素の中でまずタイプを見て、位置を見て、タイプに合わない要素を直接排除します!
4.属性セレクタ:
p[id]{
}
// id p
p[id=val]{
}
// id=val p
p[id*=val]{
}
// class val p
p[id^=val]{
}
// id val p
p[id$=val]{
}
// id val p