轉載請標明出處：http://blog.csdn.net/wu_wxc/article/details/50927867
本文出自【吳孝城的CSDN博客】
CSS全稱：層疊樣式表（Cascading Style Sheets），就是一種用來改變內容外觀的表現，例如文字的大小、顏色，或是一些背景圖片，邊框等等
在CSS中，
註釋用
/*這裏是要註釋的語句*/使用樣式可以編寫一次代碼，多個地方使用
樣式由“選擇符”和“聲明”組成，
聲明由屬性和值組成
選擇符又稱選擇器，可以自己取名字
聲明是在“{}”中的，屬性和值之間用“:”分隔，有多條聲明時，用“;”
如：
p{
font-size:10px;
color: red;
font-family: "微軟雅黑";
font-weight: bold;
font-style: italic;
text-decoration: underline;
text-decoration: line-through;
text-indent: 2em;
line-height: 20px;
letter-spacing: 20px;
word-spacing: 20px;
text-align: center;
}px爲像素
顏色由RGB，也就是R(red)、G(green)、B(blue)三原色組成
每一項取值0~255，也就是0%~100%
如：
h1{
color: rgb(10%,20%,50%);
}如：
h1{
color: #00ff55;
}font-style: italic; 斜體
text-decoration: underline; 下劃線
text-decoration: line-through; 刪除線
text-indent: 2em; 縮進
line-height: 20px; 行間距(行高)，不許使用負值
letter-spacing: 20px; 文字或字母間距
word-spacing: 20px; 單詞間距
text-align: center; 塊元素中的文字或圖片劇中
元素內容與邊框用padding-top:20px;之類設置，當只寫padding:20px,20px,20px,20px;時，爲上，右，下，左
元素與其他元素之間的邊界用margin-top:20px之類來設置，當只寫margin:20px,20px,20px,20px;時，爲上，右，下，左
font-weight: ;屬性設置文本的精細
其值有：
normal：默認值，定義標準字符
bold：粗體字符
bolder：更粗的字符
lighter：定義更細的字符
100~900：400等normal，700等bold
inherit：規定應該從父元素繼承字體的粗細
white-space:;屬性設置如何處理元素內的空白
其值有：
normal：默認，空白會被瀏覽器忽略
pre：空白會被瀏覽器保留,其行爲方式類似Html中的 <pre> 標籤
nowrap：文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標籤爲止
pre-wrap：保留空白符序列，但是正常地進行換行
pre-line：合併空白符序列，但是保留換行符
in-herit：規定應該從父元素繼承 white-space 屬性的值
visibility: ;設置元素是否可見
其值有：
visible：默認值，元素是可見的
hidden：元素不可見
collapse：當在表格元素中使用時，此值可刪除一行或一列，但是它不會影響表格的佈局。被行或列佔據的空間會留給其他內容使用。如果此值被用在其他的元素上，會呈現爲 "hidden"
inherit：規定應該從父元素繼承 visibility 屬性的值
overflow: ; 屬性規定當內容溢出元素框時發生的事情
其值有：
visible：默認值。內容不會被修剪，會呈現在元素框之外
hidden：內容會被修剪，並且其餘內容是不可見的
scroll：內容會被修剪，但是瀏覽器會顯示滾動條以便查看其餘的內容
auto：處適配，如果內容被修剪，則瀏覽器會顯示滾動條以便查看其餘的內容
inherit：規定應該從父元素繼承 overflow 屬性的值
最後的";"可以不要，建議寫上，方便以後修改添加
CSS樣式的使用可分爲三種：內聯式、嵌入式、外部式
內聯式：就是把CSS樣式代碼直接寫在Html標籤中
<p style="font-size:20px; color:red">這裏的文字大小將是20px，顏色爲紅色</p>嵌入式：必須寫在<style></style>之間，style一般寫在<head></head>之間
如：
<style type="text/css">
p{
color: red;
}
</style>style="text/css"是告訴瀏覽器這裏面的文本內容(text)要當層疊樣式(css)來解析
外部式：也稱爲外聯式，就是把CSS代碼單獨寫在一個外部文件裏，文件擴展名爲“.css”，使用<link>標籤將css樣式鏈接到Html文件內，
如：
<link href="my.css" rel="stylesheet" type="text/css" />一般寫在<head></head>標籤中
三種樣式寫法的優先級：內聯式>嵌入式>外部式
CSS選擇器：標籤選擇器、類選擇器、ID選擇器、子選擇器、通用選擇器、僞類選擇符、分組選擇符
標籤選擇器：就是Html中的標籤，如<html>、<body>、<a>、<p>、、<h1>、<img>等
類選擇器：以英文“.”開頭，名字任意，中文除外
如：
.myStyle{
color: red;
}使用時用class="類選擇器名"
如
<span class="mystyle">這裏的文字爲紅色</span>ID選擇器：以"#"開頭，名字任意，中文除外
如：
#myStyle{
color: red;
}如
<span id="myStyle">這裏的文字爲紅色</span>類選擇器可以爲一個元素設置多個樣式，而ID選擇器不行
如：
.stress{
color: green;
}
.bigSize{
font-size: 20px;
}<span class="stress bigSize">字體爲綠色，20px</span>而不能用ID
如：
#stressID{
color: green;
}
#bigSizeID{
font-size: 20px;
}<span id="stressID bigSizeID">這個用法是錯的</span>如：
.first>span{
color: red;
}<p class="first">這個沒有<span>第一個span裏字體爲紅色<span>這是第二代，所以沒有獨立的樣式</span><span>這也是第一代span，也有樣式</span></span></p>包含(後代)選擇器：就是在多個選擇器之間加空格，
如：
.first span{
color: red;
}如：
.first li{
border: 1px solid red;
}<ul class="first">
<li>一</li>
<li>二</li>
<li>三</li>
</ul>
通用行徑器：使用"*"來指定，功能最強大，作用於所有的html標籤
如：
*{
color: red;
}僞類選擇符：允許給html不存在的標籤設置樣式，如一個鏈接，在鼠標劃過時，鏈接被點擊，已選中等的顏色的改變
如：
/* 鼠標劃過*/
a:hover{
color: red;
}
/* 已選中的鏈接*/
a:active{
color: #0000ff;
}<a href="http://www.dcloud.io/">HBuilder</a>如：
h1, h2{
color: red;
}CSS的繼承性：某些樣式具有繼承性，有些沒有，如設置h1標籤的字體是紅色，那麼h1標籤下包括子元素文本都紅色，像border這個標籤就不具有繼承性
權值：當一個元素使用了多個CSS樣式時，到底使用哪個樣式就要看它們的權值了，哪個權值高就用哪個
標籤權值：1
類選擇符權值：10
ID選擇符權值：100
p{color: green;}/*權值1*/
p span{color: white;}/*權值1+1=2*/
.weight{color: red;}/*權值10*/
p span .weight{color: yellow;}/*權值1+1+10=12*/
#selete .weight p{color: blue;}/*權值100+10+1=111*/當權值相同時，樣式會用後面的覆蓋前面的
如：
p{color: red;}
p{color: yellow;}<p>文字爲黃色</p>如果我們想權值相同的樣式不被覆蓋，可以使用"!important"，來設置，注意要寫在";"之前
如：
p{color: blue !important;}
p{color: red;}<p class="first">這時顯示的內容就是藍色</p>CSS3新增的內容
屬性選擇器
也是寫在style裏
[id*=div]{
color: red;
}
[id^=div]{
color: red;
}[id$=div]{
color: red;
}
如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
[id$="div"]{
color: red;
}
</style>
</head>
<body>
<div id="div1">無樣式</div>
<div id="1div">有樣式</div>
<div id="my">無樣式</div>
</body>
</html>
結構性僞類選擇器：
允許開發者根據文檔的結構來指定元素的樣式
first-line 就是在使用該樣式的區域內的第一行使用該樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
p:first-line{
color: red;
}
</style>
</head>
<body>
<p>
第一行有樣式<br />
第二行沒有樣式
</p>
</body>
</html>
first-letter
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
p:first-letter{
color: red;
}
</style>
</head>
<body>
<p>
第一個有樣式<br />
第二行沒有樣式
</p>
</body>
</html>
如果是字母，則第一個字母有樣式
before
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
p:before{
content: "添加在前面";
color: red;
}
</style>
</head>
<body>
<p>
測試用的
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
p:after{
content: "添加在後面";
color: red;
}
</style>
</head>
<body>
<p>
測試用的
</p>
</body>
</html>
root：根元素，會對整個頁面產生影響，如果使用了body設置樣式，那麼body就只對內容部分添加樣式，而root會對整個頁面添加樣式
<style>
:root{
background: blue;
}
</style><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div *:not(h1){
color: blue;
}
</style>
</head>
<body>
<div>
<h1>h1i被排除，沒有樣式</h1>
<h2>h2有樣式</h2>
</div>
</body>
</html>
empty：在沒有內容的區域將會添加樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
:empty{
background-color: blue;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td></td>
<td>無樣式</td>
</tr>
<tr>
<td>無樣式</td>
<td></td>
</tr>
</table>
</body>
</html>
target：是設置頁內跳轉後跳轉到的內容的樣式
:target{}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
/*第一個子標籤*/
li:first-child{
color: red;
}
/*最後一個子標籤*/
li:last-child{
background-color: greenyellow;
}
/*指定位置的標籤*/
li:nth-child(3){
background-color: #19F8F8;
}
/*從後面數指定位置的標籤*/
li:nth-last-child(2){
color: blue;
}
</style>
</head>
<body>
<ul>
<li>元素一</li>
<li>元素二</li>
<li>元素三</li>
<li>元素四</li>
<li>元素五</li>
<li>元素六</li>
</ul>
</body>
</html>
還有一個奇數和偶數的標籤
例如：
/*even是正數，odd是奇數*/
/*正數偶數的li列表會有該樣式*/
li:nth-child(even){}
/*倒數偶數的li列表會有該樣式*/
li:nth-last-child(even){}
/*正數奇數的li列表會有該樣式*/
li:nth-child(odd){}
/*倒數奇數的li列表會有該樣式*/
li:nth-last-child(odd){}這種選擇器會根據類型來選擇，如只選擇h1的偶數位。nth-of-type(even)
nth-child()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--
nth-child()
括號裏的值爲一組多少項*n+這組中的第幾項，最後一個如3n+3可以寫成3n
-->
<style>
li:nth-child(3n+1){
background-color: greenyellow;
}
li:nth-child(3n+2){
background-color: wheat;
}
li:nth-child(3n+3){
background-color: cadetblue;
}
</style>
</head>
<body>
<ul>
<li>組一1</li>
<li>組一2</li>
<li>組一3</li>
<li>組二1</li>
<li>組二2</li>
<li>組二3</li>
<li>組三1</li>
<li>組三2</li>
<li>組三3</li>
</ul>
</body>
</html>
only-child：當只有一個子元素時使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
li:only-child{
color: red;
}
</style>
</head>
<body>
<ul>
<li>一個元素</li>
</ul>
<ul>
<li>一個元素</li>
</ul>
<ul>
<li>兩個元素</li>
<li>兩個元素</li>
</ul>
</body>
</html><strong>
</strong>
通用兄弟元素選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
/*這裏的div是子元素div,用“~”隔開爲兄弟元素h1*/
div ~ h1{
color: red;
}
</style>
</head>
<body>
<div>
<div>
<h1>元素</h1>
<h1>元素</h1>
</div>
<h1>元素</h1>
<h1>元素</h1>
<h1>元素</h1>
</div>
</body>
</html>
可用CSS對文字添加陰影
text-shadow:length length length color
第一個參數：正數是向右，負數是向左，px
第二個參數：正數是向下，負數是向上，px
第三個參數：模糊程度，值越大越模糊，px
第四個參數：陰影顏色
可用","分隔開設置多重陰影