級(jí)聯(lián)樣式
級(jí)聯(lián)樣式（Cascading Style Sheet）英文縮寫即為CSS，主要作用于網(wǎng)頁的風(fēng)格設(shè)計(jì)或說網(wǎng)頁的布局，可以設(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看起來是一行一行寫進(jìn)去的</td>
</tr>
<tr>
<td>不加css時(shí)就是空白的一行</td>
</tr>
</table>
</body>
</html>
外部CSS文件如下：
/* 通過table元素這個(gè)關(guān)鍵字作為選擇器, 起到選擇的作用。 是級(jí)聯(lián)選擇器的一種 */
table{
background-color: #003366;
width: 400px;
}
/* 關(guān)鍵字(或說元素)作為選擇器, 起到查找定位的作用 */
/* 設(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è)頁面的樣式瓜浸，當(dāng)前頁面生效，不需要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元素,因此無需指定selector部分 */
</body>
</html>
內(nèi)聯(lián)樣式.png
選擇器Selector
選擇器決定該樣式定義對哪些元素起作用（類比iOS中的tag值锨侯，設(shè)置一個(gè)tag，然后通過tag去查找對應(yīng)的控件冬殃，并修改該控件的屬性）囚痴，常用的選擇器有：
- 標(biāo)簽（類比于關(guān)鍵字，即系統(tǒng)定義的审葬，非自定義的變量）深滚， 如table這個(gè)系統(tǒng)的關(guān)鍵字就是一個(gè)標(biāo)簽選擇器骂束。作用是table這個(gè)元素對應(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">
/* 對所有Div元素都其作用的CSS樣式 */
div {
width: 200px;
height: 30px;
background-color: #ddd;
padding: 3px;
}
/* 對id為xx的元素起作用的CSS樣式 */
#xx{
border: 2px dotted black;
background-color: #900;
}
</style>
</head>
<body>
<div>沒有任何屬性的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">
/* 對所有的div元素起作用的CSS樣式 */
div{
width: 350px;
height: 60px;
background-color: #dddddd;
/*設(shè)置兩個(gè)div之間的間隔為5px,如果不設(shè)置兩個(gè)div就挨在一起*/
margin: 5px;
}
/* 對處于div之內(nèi)且類名為a的元素起作用的CSS樣式 */
div .a{
width: 200px;
height: 35px;
border: 2px dotted black;
background-color: #888888;
}
</style>
</head>
<body>
<div>沒有任何屬性的div元素</div>
<div>
<section>
<div class="a">處于div內(nèi)且class屬性為a的元素</div>
</section>
</div>
<p class="a">沒有處于div內(nèi),但class屬性為a的元素</p>
</body>
</html>
效果如下：
包含選擇器.png
