CSS基礎（三）--樣式及選擇器
1、 樣式分類
在CSS的樣式中，存在內聯式、嵌入式以及外部式三種引用方式。
內聯式：<p style="color:red;"></p>
嵌入式
<title>Lable標籤的使用</title>
<style type="text/css" media="screen">
p{
color:red;
font-size: 12px;
}
.newStyle{
color:red;
font-size: 12px;
}
#newStyle2{
color:red;
font-size: 12px;
}
</style>
</head>
這種方式表示將某個html或者JSP中的CSS樣式統一放置在head標籤中
外部式：單獨建立一個css檔案，然後作為外部檔案引用到某個html檔案中
例如：
<link rel="stylesheet" type="text/css" href="<c:url value="/resources/custom/css/extends.css" />" />
<link href="style.css" rel="stylesheet" type="text/css" />
優先順序：這3中樣式存在著優先順序，那就是內聯式>嵌入式>外部式 秉承著就近原則
2、 選擇器
一般的CSS樣式會有選擇符+宣告構成；所謂選擇符指的就是選擇器(選擇器可分為標籤選擇器、類選擇器以及ID選擇器)，例如需要對網頁中的所有p標籤作樣式修改，那就會如下設定樣式
p{
color:red;
}
從上可知，p就表示選擇器，而{}中的內容就表示宣告。另外宣告中又包含屬性和值，color表示屬性，需要對p標記中的內容的顏色作設定，而值為red。
(1) 標籤選擇器：用於定義網頁內容中某個標籤所屬的樣式，例如：p{color:red;}
表示的就是將網頁中所有標籤為p的內容顏色定義為紅色。
(2) 類選擇器：表示以圓點開頭所定義的樣式，這個樣式可以用於html中任意一個標籤內
例如：
樣式定義：.newStyle{font-size:12px;}
使用方式：<span classs="newStyle"></span>
(3) ID選擇器：表示以#號開頭所定義的樣式，這個樣式同類選擇其一樣可以用於定義html中任意一個標籤內的樣式
例如：
樣式定義：#newStyle2{font-weight:bold;}
使用方式：<span id="newStyle2"></span>
(4) 區別：類選擇器和ID選擇器比較
A、類選擇器可以在文件中使用多次，而ID選擇器只能使用一次
例如：
<p>三年級時，我還是一個<span class="stress">膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評<span id="stress2">我</span>。就一直沒有這個<span class="stress">勇氣</span>來回答老師提出的問題。 </p>
B、類選擇器可以對同一個元素設定多個樣式，但是ID選擇器只能設定一個樣式
例如：
.stress{ color:red; } .bigsize{ font-size:25px; } <p>到了<span class="stress bigsize">三年級</span>下學期時，我們班上了一節公開課...</p>
總結：ID選擇器類似於ID一樣，表示一種唯一性，因此對於需要多種樣式進行引用，比較適合使用類選擇器
三者比較：ID選擇器>類選擇器>標籤選擇器
3、 補充
(1)子選擇器
a、概念
子選擇器主要可以用於對已經設定樣式的子元素再次設定樣式
b、使用方式
通過‘>’號的形式
.food{
font-size:12px;
}
.food>li{border:1px solid red;}
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>蘋果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>捲心菜</li>
</ul>
</li>
</ul>呈現：
含義：表示將"food"樣式後的第一代子元素的樣式的邊框設定為紅色(僅限於最靠近的子元素)
(2) 包含選擇器
a、概念
包含選擇器一般指的是對於選擇標籤下的後輩元素
b、使用方式
通過空格的形式
.first{
font-size:12px;
}
.first span{border:1px solid red;}
<ul class="first">
<li>水果
<ul>
<li>香蕉</li>
<li>蘋果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>捲心菜</li>
</ul>
</li>
</ul>呈現：
含義：表示將"first"樣式後的所有為li的後輩元素的樣式的邊框都設定為紅色
(3) 通用選擇器
a、 概念
從字面上看，即表示可以適用於整個HTML中的樣式
b、使用方式
*{color:red;}
(4) 偽類選擇器
a、 概念
偽類選擇器主要針對於HTML中不存在的標籤(即標籤的某種狀態，例如a標籤【滑鼠滑過、滑鼠點選等狀態】)設定樣式
b、 使用方式
a:hover{color:red;}
(5) 分組選擇器
a 、概念
對於多個不同標籤設定同樣的樣式
b、 使用方式
h1,span{color:red;}
4、 重要性【!important】
在設定樣式時，有時需要為某個樣式設定最高權值，使用!important設定樣式的權值，可以對同類型的樣式設定更高的優先順序。例如：
案例一
p{color:red;}
p{color:blue;}
<p>你們好！</p>
案例二
p{color:red !important;}
p{color:blue;}
<p>你們好！</p>
講解：按照正常的規則案例一中會根據就近原則，後面的樣式會覆蓋之前的樣式，因此在介面上會顯示藍色的字型；
案例二中由於在前一個樣式中新增!important，則對前一個樣式增加了權值，且權值高於後者樣式，因此在介面中會顯示紅色字型。
案例三
#Box div{
color:red;
}
.important_false{
color:blue;
}
.important_true{
color:blue !important;
}
<div id="Box">
<div class="important_false">這一行末使用important</div>
<div class="important_true">這一行使用了important</div>
</div>
講解：首先需要明白一點是ID選擇器的權值要高於類選擇器，因此第一行字型一定會顯示紅色字型；第二行字型中的樣式由於應用到了!important，因此即使ID選擇器高於類選擇器，但是!important的權值要高於ID選擇器，所以第二行字型會顯示藍色字型。
5、 字型樣式
1.4.1 text-indent
(1) 概念
屬性規定文字塊中首行文字的縮排
(2) 使用方式
例如為p標籤設定樣式： .p{text-indent:2em;}
1.4.2 line-height
(1) 概念
屬性規定文字塊中行間距
(2) 使用方式
例如為p標籤設定樣式：
.p{line-height:2em;}
1.4.3 letter-spacing/word-spacing
(1) 概念
以上兩個屬性表示的是文字或者單詞的間距
(2) 使用方式
<head>
<title>!important的使用方式</title>
<style type="text/css">
.test1{letter-spacing:10px;}
.test2{word-spacing:20px;}
</style>
</head>
<body>
<p class="test2">你們好</p>
<p class="test2">hello world!</p>
</body>截圖如下：
強調：此處在使用letter-spacing屬性是，對於中文間距以及字母間距，word-spacing僅僅針對於單詞間的排版，對字母使用letter-spacing屬性之後，截圖如下
