一、CSS簡介CSS全稱cascading style sheeding，層疊樣式列表。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。二、CSS組成1、選擇器（1）標簽選擇器 （2）ID選擇器 （3）class選擇器 （4）關聯選擇器（層級選擇器，空格）類似spa ...
一、CSS簡介
CSS全稱cascading style sheeding，層疊樣式列表。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。
二、CSS組成
1、選擇器
（1）標簽選擇器
<head> <style> p{ background-color: green; height: 48px; } </style> </head> <body> <p>中國人</p> </body>
（2）ID選擇器
<head> <style> #i1{ background-color: blue; height: 48px; } </style> </head> <body> <div id="i1"> 中國人 </div> </body>
（3）class選擇器
<head> <style> .c1{ background-color: yellow; height: 48px; } </style> </head> <body> <div class="c1"> 中國人 </div>
</body>
（4）關聯選擇器（層級選擇器，空格）
類似span標簽里的p標簽的樣式，也可以是id,class,標簽等組合
<head> <style> span p{ background-color: darkorchid; height: 48px; } </style> </head> <body> <p>中國人</p> <span> <p>中國人</p> </span> <p>中國人</p> </body>
（5）組合選擇器(逗號)
<head> <style> .c1,.c2,.c3{ background-color: yellow; height: 48px; } </style> </head> <body> <div class="c1"> 中國人 </div> <div class="c2"> 中國人 </div> <div class="c3"> 中國人 </div> </body>
（6）屬性選擇器
對選擇的標簽過濾後再通過屬性進行過濾
<head> <style> .cc[n="tom"]{ background-color: yellow; height: 48px; } </style> </head> <body> <div class="cc"> 中國人 </div> <div class="cc" n="tom"> 中國人 </div> </body>
（7）行選擇器
<body> <div style=" height: 28px;"> 中國人 </div> </body>
2、link引入外部css
通過建立專屬的css文件，在其他html導入css文件，從而使用css文件的樣式
001.css內容如下：
#i1{
background-color: blue;
height: 48px;
}
.c1{
background-color: yellow;
height: 48px;
}
p{
background-color: green;
height: 48px;
}
span p{
background-color: darkorchid;
height: 48px;
}
.cc[n="tom"]{
background-color: yellow;
height: 48px;
}
001.html內容如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="001.css"> </head> <body> <p>中國人</p> </body> </html>
3、優先順序
row style——>head style (按照編寫順序，自上而下優先)——> external style
4、css註釋
/* 註釋內容 */
5、背景、邊框
樣式、寬度、顏色、上下左右
<div style="border: 2px solid red ;width: 100px ;height: 20px"> 中國人 </div>
##下麵為邊框屬性
border-top-color: red;
border-top-style: solid;
border-top-width: 2px;
border-right-color: red;
border-right-style: solid;
border-right-width: 2px;
border-bottom-color: red;
border-bottom-style: solid;
border-bottom-width: 2px;
border-left-color: red;
border-left-style: solid;
border-left-width: 2px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background可以定義如下屬性：
background-color 規定要使用的背景顏色；
background-image 規定要使用的背景圖像；
background-repeat 規定如何重覆背景圖像；
background-attachment 規定背景圖像是否固定或者隨著頁面的其餘部分滾動；
background-position 指定背景圖像的位置；
<div style="background-image: url(001.jpg);border: 3px;height: 800px;"> chinese </div>
6、float
漂移，挨著站齊
<div style="border: 2px solid red ;width: 100px ;height: 20px;float: left"> 中國人 </div> <div style="border: 2px solid red ;width: 100px ;height: 20px;float: left;"> 中國人 </div>
7、display
塊、行標簽轉換,inline、block、inline-block、none
行內標簽：無法設置高度、寬度、padding、margin
塊級標簽：設置高度、寬度、padding、margin
<body> <span style="display: block">123</span> <div style="display: inline">456</div> </body>
8、padding margin
9、其他常用style屬性
width: 100px ; ##可以使用89%,邊框寬度
height: 20px ; ##可以使用89%,邊框高度
font-size:19px; ##字體大小
font-weight:bold ; ##加粗,80px,normal
font-family:'Microsoft YaHei'; ##字體樣式,
color:red; ##字體顏色
text-align:center; ##水平方向字體對齊方式，center/left/right
line-height:48px; ##根據div,垂直方向字體居中
background-color:red ##背景色
text-decoration ##字體裝飾
<a href="http://www.baidu.com" style="text-decoration: none">百度</a>
三、
