級聯樣式
級聯樣式（Cascading Style Sheet）英文縮寫即為CSS，主要作用于網頁的風格設計或說網頁的布局，可以設置字體大小、顏色、以及元素的位置等。
常用的級聯樣式有三種：外部級聯、內部級聯和內聯。
- 外部樣式，使用link連接外部CSS，如下在head標簽中使用href（類似于iOS中的url）連接一個外部CSS樣式。外部樣式的好處時，可以復用此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的行內容</td>
</tr>
<tr>
<td> tr就是table每一行的內容,和iOS中不同,table的一個復用就有許多行,h5看起來是一行一行寫進去的</td>
</tr>
<tr>
<td>不加css時就是空白的一行</td>
</tr>
</table>
</body>
</html>
外部CSS文件如下：
/* 通過table元素這個關鍵字作為選擇器, 起到選擇的作用。 是級聯選擇器的一種 */
table{
background-color: #003366;
width: 400px;
}
/* 關鍵字(或說元素)作為選擇器, 起到查找定位的作用 */
/* 設置table每行的屬性 */
td{
background-color: #ffffff;
font-size: 20pt;
text-shadow: -2px 2px 2px #333;
}
外部樣式.png
- 內部級聯樣式，在head標簽中使用Style標簽直接設置整個頁面的樣式，當前頁面生效，不需要CSS文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>內部樣式</title>
<style type="text/css">
// . + 類名title作為選擇器，決定div這個元素有外觀效果
.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>我并不會換行</td>
</tr>
<tr>
<td>瘋狂Android講義</td><td>經典Java EE企業應用實戰</td>
</tr>
<tr>
<td>瘋狂Ajax講義</td><td>瘋狂XML講義</td>
</tr>
</table>
</body>
</html>
內部樣式.png
- 內聯樣式，直接在標簽后面使用Style設置，可以精準控制當前元素的外觀表現，不需要CSS文件， 不需要選擇器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML內聯樣式</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;">經典Java EE企業應用實戰</td>
</tr>
</table>
/* 內聯方式直接指定到了具體的HTML元素,因此無需指定selector部分 */
</body>
</html>
內聯樣式.png
選擇器Selector
選擇器決定該樣式定義對哪些元素起作用（類比iOS中的tag值，設置一個tag，然后通過tag去查找對應的控件，并修改該控件的屬性），常用的選擇器有：
- 標簽（類比于關鍵字，即系統定義的，非自定義的變量）， 如table這個系統的關鍵字就是一個標簽選擇器。作用是table這個元素對應的外觀有效。
table{
background-color: #003366;
width: 400px;
}
- . + 類名，使用. 加上元素class名作為選擇器，設置Div這個元素外觀效果
// . + 類名title作為選擇器，決定div這個元素有外觀效果
.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號作為選擇器（xx為元素的id號）
<!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的元素，設置它的外觀效果（類似于深層次查找某個元素，先找到父元素，再找子元素，最后找孫輩的元素....）。
<!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;
/*設置兩個div之間的間隔為5px,如果不設置兩個div就挨在一起*/
margin: 5px;
}
/* 對處于div之內且類名為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內且class屬性為a的元素</div>
</section>
</div>
<p class="a">沒有處于div內,但class屬性為a的元素</p>
</body>
</html>
效果如下：
包含選擇器.png
