1. 簡介
用於布局與美化網頁（顏色，字型）
css語言是一種標記語言，不需編譯，可直接由瀏覽器執行
大小寫不敏感
css定義由選擇符、屬性、屬性取值組成
格式：selector
注釋：/*css
注釋*/
長度單位：
相對長度單位：px
畫素，em
相對於當前物件內文字的字型尺寸，
%百分比
絕對長度單位：pt
點，cm
厘公尺，mm
公釐顏色值：#rrggbb
，#rgb
，rgb（x
，x，x
），rgb（x
，x，x
），x為0~100
的整數值
css指定
urlbody
2. 在
html
文件中放置
css的幾種方式
2.1 內聯引用（也叫行內引用）
就是把css
樣式直接作用在
html
標籤中使用css
內聯引用表現段落
2.2 內部引用（也叫內嵌式）
使用style
標籤直接把
css檔案中的內容直接載入到
html
文件內部的
標籤中特點是適合用於乙個html
文件具有獨一無二的樣式時
2.3 外部引用
使用了外接的css
css檔案
相對於內部引用和內聯引用來說是高效的，是節省頻寬的。
實現外部引用有兩種方式：
使用link
標籤引用
css使用@import
匯入css
多重樣式表的疊加：如果在同乙個選擇器上使用幾個不同的樣式表時，這個屬性值將會疊加幾個樣式表，遇到衝突的地方會以最後定義的為準。
3. css選擇器（選擇符）
3.1 html（標籤）選擇符
即html
標籤，用來改變乙個指定標籤的樣式，任何
html
元素都可以是乙個
css的選擇符。
語法：html
標籤名p /*當中的選擇符是
p*/3.2 類選擇符
匹配文件中元素e
的class
屬性的屬性值為
classname
的元素語法：標記名.類名或
.類名類選擇符的定義需要有.
符號.note /*為
note
的類可以被用於任何元素
*/3.3 id選擇符
匹配文件中元素e的id
屬性的屬性值為
idname
的元素語法：id
名稱定義需要有#
符號#main /*id名稱
main
前加上乙個#號
*/id屬性的特殊之處在於，乙個文件中只能有乙個元素使用乙個
id選擇符（與
class
屬性正好相反），
id屬性可用來單一地標識乙個元素。
3.4 關聯選擇符
也叫包含選擇符，可單獨對某種元素包含關係定義的樣式表，元素1
包含元素
2，這種方式只對在元素
1的元素
2定義，對單獨的元素
1或元素
2無定義
語法：選擇符1
選擇符2
……如：table a
3.5 組合選擇符
也叫選擇符組，可把相同屬性和值的選擇符組合起來書寫，用逗號將選擇符分開，可減少樣式重複定義。
語法：選擇符1
，選擇符
2，……
如：h1,h2,h3,h4,h5,h6
3.6 偽元素選擇符
指對同乙個html
元素不同狀態的一種定義方式
語法：標籤：偽元素
例：a：
link /*
未訪問的鏈結
*/a：
visited /*
已訪問的鏈結
*/a：
hovor /*
滑鼠在鏈結上
*/a：
active /*
啟用鏈結*/：
hovor
必須置於a：
link和a
：visited
之後才有效；a：
active
必須置於a：
hovor
之後才有效
4. 常見屬性和值
4.1 字型和顏色
font---簡寫，把所有針對字型的屬性設定在宣告中
font-family字型系列
font----size
字型尺寸
font----style
字型風格 ……
4.2 文字屬性
color---文字顏色
text-align 對齊元素中的文字
text-indent 縮排元素中文字的首行
text-height 設定行高
text-decoration 向文字新增修飾，如
underline
下劃線4.3 背景屬性
background 簡寫，將背景屬性設定在乙個宣告中
background-color、
background-image
、background-repeat
（設定是否重複，
repeat
、repeat-x
、repeat-y
、no-repeat
）……可簡寫為一行：
background:《背景顏色
>||<
背景》||<
背景重複
>||<
背景附件
>||<
背景位置
>
4.4 邊框屬性
每個內容或元素外邊都可以有乙個邊框，分top
、bottom
、left
、right
有color
（顏色），style（樣式，一定要取值），width
（寬度）
style取值：none
無樣式
hidden
除了同**邊框發生衝突的時候，其他同
none
dotted點劃線
dashed
虛線 solid
實線 double
雙線 groove
槽狀 ridge
脊狀與groove
相反inset凹陷
outset
凸出，與
inset
相反4.5 列表屬性
list-style-type 設定引導列表項的符號型別，可設定多種符號型別，值為
disc
、circle
、square
等list-style-image 使用影象作為定製列表符號
list-style-position 決定列表專案縮排的程度
三．div+css網頁標準化布局
1. div+css對頁面布局的優勢
表現與內容相分離；**簡潔，提高頁面瀏覽速度；易於維護和改版；提高搜尋引擎對網頁的索引效率
2. 「無意義」的
html
元素div
和span
div和
span
標籤沒有任何內容上的意義，但與
css結合起來後應用十分廣泛。它們被用來組合成一大塊
html
**並賦予一定的資訊，大部分用類屬性
class
和標識屬性
id與元素聯絡起來。
span
是內聯的，用在一小塊內聯
html
中，而div
是塊級的（等同於其前後有斷行）。
3. w3c盒子模型
4. 與頁面布局有關的
css屬性
position 用於定義乙個元素是否
absolute
（絕對），
relative
（相對）
top、
left
層距離頂點縱、橫座標的距離
text-align、
line-height
z-index 決定層的先後順序和覆蓋關係
display 顯示屬性，設定
block
值以塊狀顯示；設定
inline
值則內聯顯示；設定
none
值關閉指定元素及其子元素的顯示
visibility 針對巢狀層的設定，
inherit
父層可見子層可見，
visible
父層是否可見子層都可見，
hidden
父層是否可見子層都隱藏
overflow 設定層內的內容超過曾所能容納的範圍處理方式。常用
hidden
，隱藏超出層大小的內容
float 設定區塊漂浮屬性，分
left
、right
clear 清除屬性指定乙個元素是否允許有元素漂浮在它旁邊，值有
left
、right
、none
（預設值）、
both
5. 盒子區塊框的定位
相對定位a:hovor{
position:relative;
top:1px; /*設定元素使用相對定位
*/left:1px;
絕對定位（不方便更改，少用）
CSS定位內容
div h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為 一塊內容，即 塊框 與之相反，span 和 strong 等元素稱為 行 內元素 這是因為它們的內容顯示在行中，即 行內框 css 有三種基本的定位機制 普通流 浮動和絕對定位。除非專門指定，否則所有框都在普通流中定位。也就是說，...
CSS定位內容
div h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為 一塊內容，即 塊框 與之相反，span 和 strong 等元素稱為 行 內元素 這是因為它們的內容顯示在行中，即 行內框 css 有三種基本的定位機制 普通流 浮動和絕對定位。除非專門指定，否則所有框都在普通流中定位。也就是說，...
css所有內容
選擇器 class 類選擇器 id id選擇器 p 標籤選擇器 通用選擇器 li a 後代選擇器 div p 兒子選擇器 div p 毗鄰選擇器 i1 p 弟弟選擇器 p title 屬性選擇器 p title article 屬性值選擇器 title article 有title屬性並且title...