CSS簡介：Cascading Style Sheets(層疊樣式表)的縮寫，它是一種用來表現HTML或XML等檔案樣式的計算機語言。
CSS的作用：
1、它是用來定義網頁外觀（例如，字型、背景、文本、位置、布局、邊緣、清單及其他等),它也可以和JavaScript等浏覽器端腳本語言結合做出許多動态效果。
2、所謂的樣式表，是樣式化HTML的一種方法，HTML是文檔的内容，而樣式表是文檔的表現，或者說是外觀。
3、所謂的層疊，就是将一組樣式在一起層疊使用，控制某一個或多個HTML元素，按樣式表中的屬性一次顯示。
一個樣式表可以用于多個頁面，甚至整個站點，是以CSS具有良好的易用性和擴充性。
從總體來說，使用CSS不僅能夠彌補HTML對網頁格式化功能的不足，例如段落間距、行距、字型變化和大小等，還可以使用CSS動态更新頁面格式，進行排版定位等。
CSS特點如下：
（1）控制頁面中的每個元素（精确定位）。
（2）對HTML語言處理樣式的最好補充。
（3）把内容和格式相分離，減少工作量。
CSS的規則組成：CSS和HTML一樣都是由W3C制定的标準。
CSS的優勢?
1.内容與表現分離
2.網頁的表現形式高度統一，便于後期維護
3.具備極為豐富的樣式，頁面美化更加靈活
4.減少網頁的代碼量，增加網頁的浏覽速度 可以節省網絡帶寬
5.用于獨立于頁面的CSS,有利于搜尋引擎的收錄
CSS如何去寫？
選擇器:就是你要選擇誰，然後改變什麼
CSS的導入方式:
内部樣式:
位置:<head>範圍内
格式:
<style type="text/css">
...
</style>
特點:
适合同一個頁面的效果實作，其他頁面無效
行内樣式:
位置:所需要實作的标簽内
格式:
<p style="color:red">
特點:
适合某一個标簽的樣式修改
外部樣式:
獨立建立一個css檔案，這個檔案裡面不需要寫style,直接寫樣式即可
1.在head當中，<link href="css/style_demo.css" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css" />
2.在head當中的style當中,@import url("css/style_demo.css" );
一般來說隻會使用第一種，第二種幾乎不用，因為link标簽是屬于xhtml的
而@import屬于css2.1的規則，如果浏覽器不支援@import，也就意味着你的樣式無效
如果你使用的是link進行導入，先加載CSS樣式，然後再去顯示整個網頁
如果你使用的@import，是先加載網頁，再去顯示CSS樣式
适合多個頁面共享一個CSS樣式
樣式表的優先級:
行内樣式表 > 内部樣式表 > 外部樣式表
一般來說，我們隻會使用外部樣式表
格式:
選擇器{
屬性:屬性值;
}
選擇器分類:
基礎選擇器:
标簽選擇器:
标簽名{
屬性:屬性值;
}
注意:屬性值後的分号，你可以不寫的 但是W3C的标準是必須要寫的，而大部分
浏覽器都遵循了W3C的标準，如果不寫 可能會有部分浏覽器無法使用。
特點:
一旦符合規則的标簽，全部會實作同樣的CSS效果
類選擇器:
<i class="class">類選擇器</i>
.類名{
屬性:屬性值;
}
特點:
所有符合類名的标簽，都會實作同樣的效果
類名不能以數字開頭
ID選擇器:
<p id="id">ID選擇器我</p>
#ID名{
屬性:屬性值;
}
特點:
所有符合ID名的标簽，都會實作同樣的效果
但是，在同一個頁面當中，标簽不能出現同名的ID(js會出現問題)
選擇器的優先級:ID選擇器 > 類選擇器 > 标簽選擇器
練習：
望廬山瀑布:
詩正文使用14px字型，顔色為綠色
水調歌頭:
标題為紅色，字型大小為18px，
正文第一段字型大小為12px,字型為紅色
第二段字型顔色為黑色，字型大小為12px
如夢令:
使用标簽選擇器設定标題字型大小為20px
頁面當中所有段落的文字為16px
使用類選擇器設定譯文和正文内容字型顔色為綠色
想辦法将譯文字型顔色改變為藍色
複合選擇器:
指兩個及兩個以上的選擇器進行組合使用。
交集選擇器:
标簽選擇器+類(ID)選擇器{
屬性:屬性值;
}
特點:既要滿足是否使用了某個标簽選擇器，也要滿足是否使用了某個類或者ID選擇器(也就說明标簽選擇器和類或者ID選擇器必須同時滿足)
後代選擇器:
選擇器+空格+選擇器{
屬性:屬性值;
}
特點:無隔代限制，必須包含嵌套關系，例如p标簽下面的span标簽
子代選擇器:
選擇器>選擇器{
屬性:屬性值;
}
特點:子代必須是父類的直接子代，不能存在隔代關系
并集選擇器:
選擇器,選擇器,選擇器,選擇器,選擇器,選擇器{
屬性:屬性值;
}
特點:所有的選擇器都實作同一個效果。
CSS繼承性的問題:
html -> head ->title
body ->h1
p
ul -> li -> ol ->li ->ul
div
如果存在嵌套關系，父元素的屬性發生了改變，子元素也會随之改變，
但是h标簽無法繼承父元素的字型大小，a标簽無法繼承父元素的顔色
文本樣式:
background: firebrick;
color: khaki;
text-align:center;
text-indent:2em;
text-decoration:underline;
字型樣式:
font-size:20px;
font-family:"宋體";
font-style:oblique;
font-weight:bold;
超鍊僞類:
/ *滑鼠懸浮所觸發的樣式*/
.baidu:hover{
color: thistle;
font-size:10px;
}
.wangyi,
.baidu:visited {
color: darkcyan;
font-size: 50px;
}
.tencent:active{
color: green;
}
.tencent:link {
color:deepskyblue;
font-size: 180px;
}
DIV的練習：
用途:
div+css是現在主流的web設計模式
div主要的作用:
對網頁進行布局
對網頁内容進行對應的排版
div一般配合CSS，并且設定高和寬，否則無意義。
顔色的表示形式:
三原色:rgba(46,61,73,.4)
進制:#000000
單詞:red
背景顔色:background-color:red;
圖檔背景:background-image: url(img/timg.jpg);
背景重複方式:background-repeat:no-repeat;
repeat-x:沿着x軸平鋪
repeat-y:沿着y軸平鋪
no-repeat:圖像不平鋪
repeat:圖像平鋪
圖像大小:background-size: 50%;
圖像定位:
background-position-y:沿着y軸移動
background-position-x:沿着x軸移動
移動方式:
y%/x%:依照百分比來移動
ypx/xpx:依照像素移動
x軸:left/center/right
y軸:top/center/bottom
背景連寫:顔色/路徑/x軸/y軸/平鋪方式
background: red url(img/timg.jpg) 250px 150px no-repeat;
![彙編語言之基礎知識[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)