知識點(diǎn)
字體綜合設(shè)計(jì)
font屬性用于對字體樣樣式進(jìn)行綜合設(shè)置，其基本語法格式如下：
選擇器{font：font-style font-weight font-size/line-height font-family;}
使用font屬性時，必須按上面語法格式中的順序書寫，不能更換順序，各個屬性以空格隔開。
注意：其中不需要設(shè)置的屬性可以省略（取默認(rèn)值），但必須保留font-size和font-family屬性，否則font屬性將不起作用。
調(diào)試工具chrome使用
F12或者shift+ctrl+i打開開發(fā)者工具。
選擇器
標(biāo)簽選擇器（元素選擇器）
標(biāo)簽選擇器是指用HTML標(biāo)簽名稱作為選擇器，按標(biāo)簽名稱分類，為頁面中某一類標(biāo)簽指定統(tǒng)一的css樣式，其基本語法格式如下：
標(biāo)簽名 {屬性1：屬性值1；屬性2，屬性值2；屬性3，屬性值3；}
元素名 {屬性1：屬性值1；屬性2，屬性值2；屬性3，屬性值3；}
標(biāo)簽選擇器最大的優(yōu)點(diǎn)是能快速為頁面中同類型的標(biāo)簽統(tǒng)一樣式，同時這也是他的缺點(diǎn)，不能設(shè)計(jì)差異化樣式。
類選擇器
類選擇器使用"."（英文點(diǎn)號）進(jìn)行標(biāo)識，后面緊跟類名，其基本語法格式如下：
.類名 {屬性1：屬性值1；屬性2，屬性值2；屬性3，屬性值3；}
標(biāo)簽調(diào)用的時候用class=“類名”即可。
類選擇器最大的優(yōu)勢是可以為元素對象定義單獨(dú)或相容的樣式。
小技巧：
1.長名稱或詞組可以使用中橫線來為選擇器命名。
2.不建議使用“_”下劃線來命名css選擇器。
id選擇器
id選擇器使用“#”進(jìn)行標(biāo)識，后面緊跟id名，其基本語法格式如下：
id {屬性1：屬性值1；屬性2，屬性值2；屬性3，屬性值3；}
該語法中，id名即為HTML元素的id屬性值，大多數(shù)HTML元素都可以定義id屬性，元素的id值是唯一的，只能對應(yīng)文檔中某一個具體的元素。
用法基本和類選擇器相同。
id選擇器和類選擇器區(qū)別
類選擇器（class）好比人的名字，是可以多次重復(fù)使用的，比如 張偉 王偉 李偉 李娜
id選擇器 好比人的身份證號碼，全中國是唯一的，不得重復(fù)。
通配符選擇器
通配符選擇器用“*”號表示，他是所有選擇器中作用范圍最廣的，能匹配頁面中所有的元素。其基本語法格式如下：
- {屬性1：屬性值1；屬性2，屬性值2；屬性3，屬性值3；}
偽類選擇器
首先，這也是一個選擇器，偽類選擇器用于向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果，比如可以選擇第一個，第n個元素。
為了和我們剛才學(xué)的類選擇器相區(qū)別，類選擇器是一個點(diǎn)比如 .demo {}而我們的偽類 用兩個點(diǎn)就是冒號 比如：link{}
鏈接偽類選擇器
：link /* 未訪問的鏈接/
：visited / 已訪問的鏈接/
：hover / 鼠標(biāo)移動到鏈接上/
：active /選定的鏈接 */
注意寫的時候，他們的順序盡量不要顛倒，按照lvha的順序。love hate或者lv寶寶非常ha。
結(jié)構(gòu)（位置）偽類選擇器（css3）
：first-child：選取屬于其父元素的首個子元素的指定選擇器
：last-child：選取屬于其父元素的最后一個子元素的指定選擇器
：nth-child（n）：匹配屬于其父元素的第N個子元素，不論元素的類型
：nth-last-child（n）：選擇器匹配屬于其元素的第n個子元素的每個元素，不論元素的類型，從最后一個子元素開始計(jì)數(shù)。
n可以是數(shù)字、關(guān)鍵詞或公式
代碼
<style>
h4 {
color: aqua;
font: italic bold 14px "微軟雅黑"; /* font綜合寫法更簡潔 */
}
h1 {
color: chartreuse;
font-size: 40px;
}
.lingwai { /* 聲明類樣式 */
color: chocolate;
}
.jingdong {
color: orange;
}
.jinxiang {
color: pink;
}
.bugan {
color: purple;
}
.c-blue {
color: blue;
}
.c-green {
color: green;
}
.c-red {
color: red;
}
.c-yellow {
color: yellow;
}
span {
font-size:100px
}
.blue {
color:deepskyblue;
}
.red1{
color: orangered;
}
.orange {
color: orange;
}
.green1 {
color: green;
}
#big { /* id選擇器和類選擇器結(jié)合使用更好 */
color: coral;
}
a:link { /* 未訪問的鏈接 */
font-size: 17px;
color: gray;
font-weight: 700;
}
a:visited { /* 已訪問的鏈接 */
font-size: 17px;
color:orange;
font-weight: 700;
}
a:hover { /* 鼠標(biāo)移動到鏈接上 */
font-size: 17px;
color:red;
font-weight: 700;
}
a:active { /* 選定的鏈接 */
font-size: 17px;
color:green;
font-weight: 700;
}
li:first-child {
color: pink;
}
li:last-child {
color: orangered;
}
/*p、div、h1、span、em、i都可以作為標(biāo)簽選擇器*/
/* */
</style>
</head>
<body>
<h4>嶺外音書絕</h4>
<h1>經(jīng)冬復(fù)歷春</h1>
<hr>
<p class="lingwai">嶺外音書絕</p><!--class 引用類樣式 類 別的意思-->
<p class="jingdong">經(jīng)冬復(fù)歷春</p>
<p class="jinxiang">近鄉(xiāng)情更怯</p>
<p class="bugan">不敢問來人</p>
<div class="c-blue">北斗七星高</div>
<div class="c-green">哥舒夜帶刀</div>
<div class="c-red">至今窺牧馬</div>
<div class="c-yellow">不敢過臨洮</div>
<hr>
<span class="blue">G</span>
<span class="red1">o</span>
<span class="orange ">o</span>
<span class="blue">g</span>
<span class="green1">l</span>
<span class="red1">e</span>
<hr>
<div id="big">熊大熊二光頭強(qiáng)</div>
<hr>
偽類選擇器其中的 鏈接偽類選擇器 主要針對于a
<div><a href="#">秒殺</a>
<a href="#">閃購</a>
</div>
<hr>
<ul>
<li>第一個葫蘆娃</li>
<li>第二個葫蘆娃</li>
<li>第三個葫蘆娃</li>
<li>第四個葫蘆娃</li>
<li>第五個葫蘆娃</li>
<li>第六個葫蘆娃</li>
<li>第七個葫蘆娃</li>
</ul>
結(jié)果
