Web前端學習——CSS
阿新 • • 發佈：2017-12-05
sheet adding row edi 優先級 blue 層級 空格 tex
一、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、邊框
6、背景
7、float
8、display
9、padding margin
10、text-align
11、height、width、line-height、color、font-size、font-weight
三、
Web前端學習——CSS