級(jí)聯(lián)樣式
級(jí)聯(lián)樣式（Cascading Style Sheet）英文縮寫即為CSS，主要作用于網(wǎng)頁(yè)的風(fēng)格設(shè)計(jì)或說(shuō)網(wǎng)頁(yè)的布局，可以設(shè)置字體大小、顏色、以及元素的位置等。
常用的級(jí)聯(lián)樣式有三種：外部級(jí)聯(lián)、內(nèi)部級(jí)聯(lián)和內(nèi)聯(lián)。
- 外部樣式，使用link連接外部CSS，如下在head標(biāo)簽中使用href（類似于iOS中的url）連接一個(gè)外部CSS樣式。外部樣式的好處時(shí)，可以復(fù)用此CSS樣式。
HTML文件如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部樣式選擇器</title>
<link href="CSS%20樣式選擇器.css" rel="stylesheet" type="text/css">
</head>
<body>
<table>
<tr>
<td> table的行內(nèi)容</td>
</tr>
<tr>
<td> tr就是table每一行的內(nèi)容,和iOS中不同,table的一個(gè)復(fù)用就有許多行,h5看起來(lái)是一行一行寫進(jìn)去的</td>
</tr>
<tr>
<td>不加css時(shí)就是空白的一行</td>
</tr>
</table>
</body>
</html>
外部CSS文件如下：
/* 通過(guò)table元素這個(gè)關(guān)鍵字作為選擇器, 起到選擇的作用。 是級(jí)聯(lián)選擇器的一種 */
table{
background-color: #003366;
width: 400px;
}
/* 關(guān)鍵字(或說(shuō)元素)作為選擇器, 起到查找定位的作用 */
/* 設(shè)置table每行的屬性 */
td{
background-color: #ffffff;
font-size: 20pt;
text-shadow: -2px 2px 2px #333;
}
外部樣式.png
- 內(nèi)部級(jí)聯(lián)樣式，在head標(biāo)簽中使用Style標(biāo)簽直接設(shè)置整個(gè)頁(yè)面的樣式，當(dāng)前頁(yè)面生效，不需要CSS文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>內(nèi)部樣式</title>
<style type="text/css">
// . + 類名title作為選擇器，決定div這個(gè)元素有外觀效果
.title{
font-size: 18px;
color: #60c;
height: 30px;
width: 200px;
border-top: 3px solid #cccccc;
border-left: 3px solid #cccccc;
border-bottom: 3px solid #000000;
border-right: 3px solid #000000;
}
table{
background-color: #003366;
}
td{
background-color: #ffffff;
font-size: 20pt;
}
</style>
</head>
<body>
<div class="title">
瘋狂Java體系圖書
</div>
<table>
<tr>
<td>瘋狂Java講義</td><td>我并不會(huì)換行</td>
</tr>
<tr>
<td>瘋狂Android講義</td><td>經(jīng)典Java EE企業(yè)應(yīng)用實(shí)戰(zhàn)</td>
</tr>
<tr>
<td>瘋狂Ajax講義</td><td>瘋狂XML講義</td>
</tr>
</table>
</body>
</html>
內(nèi)部樣式.png
- 內(nèi)聯(lián)樣式，直接在標(biāo)簽后面使用Style設(shè)置，可以精準(zhǔn)控制當(dāng)前元素的外觀表現(xiàn)，不需要CSS文件， 不需要選擇器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML內(nèi)聯(lián)樣式</title>
</head>
<body>
<div style="font-size: 18px;
color:#60C;
height: 30px;
width: 200px;
border-top: 3px solid #cccccc;
border-left: 3px solid #cccccc;
border-bottom: 3px solid #000000;
border-right: 3px solid #000000;
">
瘋狂Java體系圖書
</div>
<table style="background-color: #0099bb;">
<tr>
<td style="background-color: #ffffff; font-size: 20px; font-family: '楷體_GB2312;">經(jīng)典Java EE企業(yè)應(yīng)用實(shí)戰(zhàn)</td>
</tr>
</table>
/* 內(nèi)聯(lián)方式直接指定到了具體的HTML元素,因此無(wú)需指定selector部分 */
</body>
</html>
內(nèi)聯(lián)樣式.png
選擇器Selector
選擇器決定該樣式定義對(duì)哪些元素起作用（類比iOS中的tag值，設(shè)置一個(gè)tag，然后通過(guò)tag去查找對(duì)應(yīng)的控件，并修改該控件的屬性），常用的選擇器有：
- 標(biāo)簽（類比于關(guān)鍵字，即系統(tǒng)定義的，非自定義的變量）， 如table這個(gè)系統(tǒng)的關(guān)鍵字就是一個(gè)標(biāo)簽選擇器。作用是table這個(gè)元素對(duì)應(yīng)的外觀有效。
table{
background-color: #003366;
width: 400px;
}
- . + 類名，使用. 加上元素class名作為選擇器，設(shè)置Div這個(gè)元素外觀效果
// . + 類名title作為選擇器，決定div這個(gè)元素有外觀效果
.title{
font-size: 18px;
color: #60c;
height: 30px;
width: 200px;
border-top: 3px solid #cccccc;
border-left: 3px solid #cccccc;
border-bottom: 3px solid #000000;
border-right: 3px solid #000000;
}
- id 選擇器， 使用#+id號(hào)作為選擇器（xx為元素的id號(hào)）
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html"; charset="UTF-8">
<title>ID選擇器</title>
<style type="text/css">
/* 對(duì)所有Div元素都其作用的CSS樣式 */
div {
width: 200px;
height: 30px;
background-color: #ddd;
padding: 3px;
}
/* 對(duì)id為xx的元素起作用的CSS樣式 */
#xx{
border: 2px dotted black;
background-color: #900;
}
</style>
</head>
<body>
<div>沒(méi)有任何屬性的Div元素</div>
<div id="xx">id屬性值為30的Div元素</div>
</body>
</html>
效果如下：
ID選擇器.png
- 包含選擇器， div元素下面查找包含屬性a的元素，設(shè)置它的外觀效果（類似于深層次查找某個(gè)元素，先找到父元素，再找子元素，最后找孫輩的元素....）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>包含選擇器</title>
<style type="text/css">
/* 對(duì)所有的div元素起作用的CSS樣式 */
div{
width: 350px;
height: 60px;
background-color: #dddddd;
/*設(shè)置兩個(gè)div之間的間隔為5px,如果不設(shè)置兩個(gè)div就挨在一起*/
margin: 5px;
}
/* 對(duì)處于div之內(nèi)且類名為a的元素起作用的CSS樣式 */
div .a{
width: 200px;
height: 35px;
border: 2px dotted black;
background-color: #888888;
}
</style>
</head>
<body>
<div>沒(méi)有任何屬性的div元素</div>
<div>
<section>
<div class="a">處于div內(nèi)且class屬性為a的元素</div>
</section>
</div>
<p class="a">沒(méi)有處于div內(nèi),但class屬性為a的元素</p>
</body>
</html>
效果如下：
包含選擇器.png
