偽元素
CSS偽元素是用來添加一些選擇器的特殊效果。
1.語法
偽元素的語法：
selector:pseudo-element {property:value;}
CSS類也可以使用偽元素：
selector.class:pseudo-element {property:value;}
2.:first-line 偽元素
first-line" 偽元素用于向文本的首行設(shè)置特殊樣式。
在下面的例子中，瀏覽器會(huì)根據(jù) "first-line" 偽元素中的樣式對(duì) p 元素的第一行文本進(jìn)行格式化：
p:first-line
{
color:#FF0000;
font-variant:small-caps;
}
注意："first-line" 偽元素只能用于塊級(jí)元素。
注意： 下面的屬性可應(yīng)用于 "first-line" 偽元素：
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
- :first-letter 偽元素
"first-letter" 偽元素用于向文本的首字母設(shè)置特殊樣式：
實(shí)例
p:first-letter { color:#ff0000; font-size:xx-large; }
注意： "first-letter" 偽元素只能用于塊級(jí)元素。
注意： 下面的屬性可應(yīng)用于 "first-letter" 偽元素：
- font properties
- color properties
- background properties
- margin properties
- padding properties
- border properties
- text-decoration
- vertical-align (only if "float" is "none")
- text-transform
- line-height
- float
- clear
4.偽元素和CSS類
偽元素可以結(jié)合CSS類：
p.article:first-letter {color:#ff0000;}
<p class="article">文章段落</p>
上面的例子會(huì)使所有 class 為 article 的段落的首字母變?yōu)榧t色。
5.CSS-:before元素
":before" 偽元素可以在元素的內(nèi)容前面插入新內(nèi)容。
下面的例子在每個(gè) <h1>元素前面插入一幅圖片：
h1:before
{
content:url(???.gif)img;
}
6.CSS - :after 偽元素
":after" 偽元素可以在元素的內(nèi)容之后插入新內(nèi)容。
下面的例子在每個(gè) <h1> 元素后面插入一幅圖片：
實(shí)例
h1:after
{
content:url(smiley.gif);
}
:lang(language) p:lang(it) 為<p>元素的lang屬性選擇一個(gè)開始值
導(dǎo)航欄
導(dǎo)航欄=鏈接列表
作為標(biāo)準(zhǔn)的HTML基礎(chǔ)一個(gè)導(dǎo)航欄是必須的
。在我們的例子中我們將建立一個(gè)標(biāo)準(zhǔn)的HTML列表導(dǎo)航欄。
導(dǎo)航條基本上是一個(gè)鏈接列表，所以使用 <ul> 和 <li>元素非常有意義：
垂直導(dǎo)航條實(shí)例
創(chuàng)建一個(gè)簡(jiǎn)單的垂直導(dǎo)航條實(shí)例，在鼠標(biāo)移動(dòng)到選項(xiàng)時(shí)，修改背景顏色：
實(shí)例
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* 鼠標(biāo)移動(dòng)到選項(xiàng)上修改背景顏色 */
li a:hover {
background-color: #555;
color: white;
}
激活/當(dāng)前導(dǎo)航條實(shí)例
在點(diǎn)擊了選項(xiàng)后，我們可以添加 "active" 類來標(biāo)準(zhǔn)哪個(gè)選項(xiàng)被選中：
實(shí)例
.active {
background-color: #4CAF50;
color: white;
}
創(chuàng)建鏈接并添加邊框
可以在 <li> or <a> 上添加text-align:center 樣式來讓鏈接居中。
可以在 border <ul> 上添加 border 屬性來讓導(dǎo)航欄有邊框。如果要在每個(gè)選項(xiàng)上添加邊框，可以在每個(gè) <li> 元素上添加border-bottom :
水平導(dǎo)航欄
有兩種方法創(chuàng)建橫向?qū)Ш綑?。使用?nèi)聯(lián)(inline)或浮動(dòng)(float)的列表項(xiàng)。
這兩種方法都很好，但如果你想鏈接到具有相同的大小，你必須使用浮動(dòng)的方法。
