CSS（Cascading Style Sheets 層疊樣式表）
允許同時控制多重頁面的樣式和佈局，能夠爲HTML元素（每個標籤）定義樣式，並將改變後的樣式顯示到頁面中。對整個html全局進行更新。
（一）設置樣式的三種方法：
（1）id選擇器
id 就是在控件或者標籤中設置的一個屬性，這個屬性叫做id，id屬性的值不能重複
#id的值；
（2）class選擇器
指代的是一個屬性，這個屬性叫做class，.class的值
（3）標籤選擇器
通過標籤來找到控件，設置樣式。通常兩種或者兩種以上的標籤共同設置選擇器
標籤 #id（混合選擇器）：input #name，select #select
一個好的CSS需要合理的混合使用這三種選擇器
div span : 表示設定div標籤中的span標籤 的樣式
span .our: 表示設定span標籤中 class名稱爲 our的標籤的樣式
a#women : 表示設定a標籤中id名稱爲women的a標籤的樣式
【class 用於元素組（類似的元素，或者可以理解爲某一類元素），而 id 用於標識單獨的唯一的元素。】
【如果設置了多個一樣的id：在網頁表現上是不會有太大問題的,但是如果你的頁面引用了js文件的話,瀏覽器就有可能報錯了.id和class對於CSS來說,其實區別不是特別大,但是網頁不是單純的HTML+CSS,還有一系列的其他元素,這些元素有自己的運行規則,ID選擇器對於它們來說,就表示指代唯一的元素.】
div：
<div></div>是通過把整個頁面分成不同的層和不同塊，帶到一個佈局的目的
<div> 可定義文檔中的分區或節。
<div> 標籤可以把文檔分割爲獨立的、不同的部分。
<div> 是一個塊級元素。這意味着它的內容自動地開始一個新行。實際上，換行是 <div> 固有的唯一格式表現。
span：
<span> 標籤被用來組合文檔中的行內元素。
（二）引入方式
（1）內聯樣式引入:不推薦
（就是把style寫在標籤裏面）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="background-color: darkturquoise;height: 50px;width: 50px;"></div>
</body>
</html>
（2）內部（內部指的是html裏面）樣式引入：
寫在head裏面，用style雙標籤，主要用到了三個選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/* id選擇器 */
#div_id {
background-color: cornflowerblue;
height: 100px;
width: 100px;
}
/* class選擇器 */
.div_class {
background-color: coral;
height: 100px;
width: 100px;
}
/* 標籤選擇器 */
span {
color: darkcyan;/*文字顏色*/
}
</style>
</head>
<body>
<div id="div_id">我是div_id1</div>
<div class="div_class">我是div_class_one</div>
只要方法正確，總會有<span>突破瓶頸，柳暗花明</span>的那一天。<br/> 人生如路，需要耐心。走着走着，說不定就會在
<span>淒涼中走出繁華的風景</span>。
</body>
</html>
（3）外部樣式引入：推薦
將css部分單獨寫成一個.css文件，然後link引入
/* new_file.css */
/* id選擇器 */
#div_id {
background-color: wheat;
height: 100px;
width: 100px;
}
/* class選擇器 */
.div_class {
background-color: coral;
height: 100px;
width: 100px;
}
/* 標籤選擇器 */
span {
color: darkcyan;
}
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/new_file.css" />
</head>
<body>
<div id="div_id">我是div_id1</div>
<div class="div_class">我是div_class_one</div>
只要方法正確，總會有<span>突破瓶頸，柳暗花明</span>的那一天。<br/> 人生如路，需要耐心。走着走着，說不定就會在
<span>淒涼中走出繁華的風景</span>。
</body>
</html>
rel表示文檔與被鏈接文檔之間的關係，比如rel="stylesheet"表示鏈接文檔爲文檔的外部樣式表，rel="contents"表示鏈接文檔爲文檔的目錄。
運行優先級：內聯樣式 > 內部樣式 > 外部樣式
（同時設置多種方式的時候，比如說同一個效果又設置了內聯又設置了內部，效果是內聯的樣式）
使用優先級：內聯樣式 < 內部樣式 < 外部樣式
backgound系列（對於背景設置）
（1）設置背景圖片：background-image:路徑
（2）設置圖片平鋪（即圖片小，就多來幾張圖片，直至鋪滿）: background-repeat: repeat;
background-repeat 屬性設置是否及如何重複背景圖像。
<!-- text.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/new_file.css" rel="stylesheet" />
</head>
<body >
</body>
</html>
/* new_file.css */
body{
background-image:url(../img/亞絲娜.png) ;
background-repeat: repeat;
}
（3）background-attachment： 屬性設置背景圖像是否固定或者隨着頁面的其餘部分滾動（默認滾動）。
background-attachment: fixed;不滾動
文字設置（字體系列）
color：設置字體顏色
font-size：設置字體大小（以px像素爲單位），可以很大，沒有限制
font-family：設置字體
text-align：設置塊級元素內文本的水平對齊方式，所以要在div裏面，center居中（left，center，right）
font-weight：加粗（100最細 - 900最粗）
font-style: italic; 傾斜（方法一）
雙標籤<i></i>：設置傾斜（方法二）
text-decoration:none;去掉下劃線（可以用在超鏈接）
超鏈接：未訪問、已訪問、懸浮和活動鏈接時候的不同狀態
初始狀態
<!-- text.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link {
background: #008B8B;
}
</style>
</head>
<body>
<a href="www.baidu.com" target="_self">言承</a>
</body>
</html>
鼠標被訪問過
a:visited {
background: #008B8B;
}
鼠標懸在上面
a:hover {
background: #008B8B;
}
鼠標點擊鏈接的一剎那
a:active {
background: #008B8B;
}
【css註釋：/* */】