CSS樣式
CSS是Cascading Style Sheets的簡寫，它除了可以輕松設置網頁元素的顯示位置和格式處，甚至還能產生濾鏡，圖像淡化，網頁淡入淡出的漸變效果。CSS就是要對網頁的顯示效果實現與Word一樣的排版控制一個段落、字體、顏色、背景、邊框等。
注：注釋/* */里面不能再包含注釋
1、CSS的四種設置方式
內聯樣式表：在HTML元素標簽中使用style屬性內聯，在需要相同樣式情況下，不適用
每個HTML標簽都可以加樣式，如下：
<span style="font-size:18px;"><span style="font-size:18px;"><body> <p>aaaaa</p> <p style="color:red;font-size:4cm;border:2px solid blue; text-align:center">bbbb</p> <p style="color:red;font-size:4cm;border:2px solid blue; text-align:center">cccc</p> <b style="color:blue">wwwwwww</b> </body></span></span>
嵌入樣式表：通過HTML的<style>標簽將CSS嵌入到HTML中使用
可以控制整個頁面的所有樣式
<span style="font-size:18px;"><head> <title>CSS嵌入樣式</title> <style> CSS嵌入樣式 </style> </head</span>
外部樣式表：將樣式單獨定義在一個后綴名為.css的文檔中，並在HTML中通過link元素連接到HTML中使用。
多個頁面都可以使用
<span style="font-size:18px;"><head> <title>CSS樣式</title> <link rel="stylesheet" type="text/css" href="css/layout.css" /> </head></span>
輸入樣式表：可以將一個樣式文件輸入到另外一個樣式文件的中，或將一個樣式文件輸入到<style>元素中
@import url(css文件)【片段文件組合成完整CSS文件】
<span style="font-size:18px;">p { background-color:green; } @import url(one.css); @import url(two.css); @import url(three.css);</span>
優先級別：
內聯的高於其它的， 其它的和加載的順序有關
2、樣式選擇器
Selector:當定義一條樣式規則時，必須指定受這條樣式規則作用的網頁元素，在一條規則中定義的網頁元素就是selector（選擇器），也就是選擇該樣式規則作用於的網頁元素。
1、HTML選擇器
HTML有標簽， CSS就用選擇器
選擇符就是賦予內部或外部樣式表的名字
HTML的標簽，用來改變一個指定標簽的樣式
任何一個元素都可以是一個CSS選擇符
2、類選擇器
同一個選擇器能有不同的類，因而允許同一個元素有不同的樣式定的方法
[tag].類名 （類名是自定義的,如果不加tag則代表所有HTML元素）
<tag class=“類名 類名1 類名2”> （同一個元素可以使用多個類，類名之間使用空格分開）
3、ID選擇器
在HTML頁面中， ID屬性指定了某個單一元素，id屬性就用來對單一元素定義單獨樣式
一個HTML頁面中，ID屬性值要唯一
4、關聯選擇器
關聯選擇器只不過是一個用空格隔開的兩個或更多的單一選擇器給成的字符串
因為層疊順序的規則，它們的優先權比單一的選擇符大
必須按關聯關系使用，不能有反順序
只要能保持關聯關系就可以，不管是在多少層
5、組合選擇器
為了減少樣式表的重復聲明，組合是允許的
只要使用英文逗號（,）隔開每個選擇符就可以了
6、偽元素選擇器
偽元素選擇器是指對同一個HTML元素在不同的狀態下的一種定義方式
目前只有a和p兩處HTML元素可以使用
<a> 標簽定義超鏈接，用於從一張頁面鏈接到另一張頁面。其最重要的屬性是 href 屬性，它指示鏈接的目標。
<p> 標簽定義段落。
#使用時的語法
標簽：偽元素 標簽［.類名］：偽元素
a:link 沒有任何運作前的狀態
a:hover 光標移到到超鏈接上的狀態
a:active: 選擇超鏈接的狀態
a:visited 訪問過超連接的狀態
p:first-letter 一個段落中首個字母的狀態
P:first-line 一個段落中首行的狀態
<style> a:link { color:green; font-size:1cm; } a:hover { color:red; font-size:2cm; } a:active { color:blue; font-size:2cm; } a:visited { color:yellow; font-size:1cm; } p:first-letter { color:red; font-size:3cm; } p:first-line { color:yellow; font-size:1cm; } </style> </head> <body> <a href="http://www.yyyyy.com">yyyyyyyyyy</a><br> <a href="http://www.xxxxx.com">xxxxxxxxxxxx</a><br> <a href="http://www.zzzzz.com">zzzzzzzzzzzzzz</a><br> <p>hhhhhhhhhhhhhhhhhhh<br> uuuuuuuuuuuuuuuuuuu<br> xxxxxxxxxxxxxxxxxxxxx<br> </p> <p>hhhhhhhhhhhhhhhhhhh<br> uuuuuuuuuuuuuuuuuuu<br> xxxxxxxxxxxxxxxxxxxxx<br> </p> </body>
##樣式規則的繼承
所有嵌套在某個HTML標簽中的HTML標簽都會繼承外層標簽設置的樣式規則。
##樣式規則的優先級
關聯>ID選擇器>CLASS選擇器>HTML標簽選擇器
#################################################################################
如何下載頁面中的css文件：http://www.daimami.com/HTML-CSS/188531.htm
#################################################################################
3、常見CSS的屬性和值
1、字體
font: [ <字體風格> || <字體變形> || <字體加粗> ]? <字體大小> [ / <行高> ]? <字體族科>
#根據值判斷屬性，最好按順序輸入
CSS中修飾字體的屬性
屬 性
描 述
屬 性 值
font-family
字體族科
任意字體族科名稱都可以使用例如Times、serif等，而且多個族科的賦值是可以使用的，中間用逗號分隔，以防止選擇不存在的字體族科
font-size
字體大小
可以使用絕對大小、相對大小、長度或百分比
font-style
字體風格
normal（普通），italic（斜體）或oblique（傾斜）
font-weight
字體加粗
normal、bold、bolder或lighter等
font-variant
字體變形
normal（普通）或small-caps（小型大寫字母）
2、文本
CSS中常見的控制文本的屬性
屬 性
描 述
屬 性 值
letter-spacing
字母間隔
該值必須符合長度格式，允許使用負值
word-spacing
文字間隔
該值必須符合長度格式，允許使用負值
text-decoration
文字修飾
underline（下划線），overline（上划線），line-through（刪除線），blink（閃爍），或默認地使用無
text-align
橫向排列
left、right、center或justify
text-indent
文本縮進
該值必須是一個長度或一個百分比，若百分比則視上級元素的寬度而定
line-height
行高
可以接受一個控制文本基線之間的間隔的值。當值為數字時，行高由元素字體大小的量與該數字相乘所得。百分比的值相對於元素字體的大小而定。不允許使用負值
3、背景
background: <背景顏色> || <背景圖象>|| <背景重復> || <背景附件>|| <背景位置>
CSS中常見的控制背景的屬性
屬 性
描 述
屬 性 值
background-color
背景顏色
值和color屬性值設定方式相同，或使用transparent（透明）值
background-image
背景圖象
圖片URL或none（無）
background-repeat
背景重復
repeat、repeat-x、repeat-y、no-repeat
background-attachment
背景附件
scroll（滾動）或fixed（固定）
background-position
背景位置
橫向的關鍵字（left, center, right），縱向的關鍵字（top, center, bottom）百分比和長度也可用做安排背景圖象的位置
頁面優化
應用多個圖標放到同一個圖片里【可減少服務器請求次數，到達優化目的】
多個圖標放到同一個圖片里，通過定義某區塊的背景定位，調用同一個圖片中不同位置上的小圖標，好處是可以減少對服務器的請求次數，從而加快頁面的訪問速度
4、位置
5、邊框
a.邊框屬性
任何一個元素都可以設置邊框邊框屬性是用於設置一個元素邊框風格、邊框寬度、邊框顏色的略寫，可以一起設置4邊的邊框，也可對上邊框、右邊框、下邊框和左邊框單獨設置。
b.邊框風格屬性
可以通過邊框風格屬性border-style設定上下左右邊框的風格，該屬性用於設置一個元素邊框的樣式，而且必須用於指定可見的邊框。可以使用1到4個關鍵字，如果四個值都給出了，它們分別應用於上、右、下和左邊框的式樣。如果給出一個值，它將被運用到各邊上。如果兩個或三個值給出了，省略了的值與對邊相等也可以分別使用border-top-style、border-bottom-style、border-left-style和border-right-style屬性單獨設置各邊的風格
c.各邊的風格使用的屬性值
none：沒有邊框，無論邊框寬度設為多大dotted：點線式邊框dashed：破折線式邊框solid：直線式邊框double：雙線式邊框groove：槽線式邊框ridge：脊線式邊框inset：內嵌效果的邊框outset：突起效果的邊框
d.邊框寬度屬性
可以通過邊框寬度屬性border-width設定上下左右邊框的寬度，該屬性用1到4個值來設置元素的邊界，值是一個關鍵字或長度，不允許使用負值長度。
如果四個值都給出了，它們分別應用於上、右、下和左邊框的式樣。
如果只給出一個值，它將被運用到各邊上。
如果兩個或三個值給出了，省略了的值與對邊相等。這個屬性是上邊框寬度、右邊框寬度、下邊框寬度和左邊框寬度屬性的略寫。
也可以分別使用border-top-width、border-bottom-width、border-left-width和border-right-width屬性單獨設置各邊的寬度。除了可以使用長度單位定值外，還可以用medium（是默認值）、thin（比medium細）或thick（比medium粗）值。e.邊框顏色屬性
可以通過邊框顏色屬性border-color設定上下左右邊框的顏色，可以使用1到4個關鍵字。如果四個值都給出了，它們分別應用於上、右、下和左邊框的式樣。如果給出一個值，它將被運用到各邊上。如果兩個或三個值給出了，省略了的值與對邊相等
f.略寫的邊框屬性
鼠標光標屬性CSS屬性border是邊框屬性的一個快捷的綜合寫法，是一個用於設置一個元素邊框的寬度、式樣和顏色的略寫，它包含border-width，border-style和border-color屬性。
邊框屬性border只能設置四種邊框，也只能給出一組邊框的寬度和式樣。為了給出一個元素的四種邊框的不同的值，網頁制作者必須用一個或更多的屬性，如：上邊框、右邊框、下邊框、左邊框、邊框顏色、邊框寬度、邊框式樣、上邊框寬度、右邊框寬度、下邊框寬度或左邊框寬度。
在網頁中默認的鼠標指針只有兩種，一種是最普通的箭頭，另一種是當移動到鏈接上時出現的“小手”。但現在越來越多的網頁都使用了CSS鼠標指針技術，當將鼠標移動到鏈接上時，可以看到多種不同的效果。CSS可以通過Cursor屬性實現鼠標形狀的改變，其屬性可以是默認的鼠標形狀default、小手形狀hand、交叉十字crosshair、文本選擇符號text、Windows的沙漏形狀wait、帶有問號的鼠標help以及move各個方向的箭頭屬性值。
6、列表【常用為樣式自調】
CSS中常見的控制列表的屬性
nl style：無序
ol style：有序
屬 性
描 述
list-style-type
設定引導列表項的符號類型，可以設置多種符號類型，值為disc、circle、square等
list-style-image
使用圖像作為定制列表符號
list-style-position
決定列表項目縮進的程度
7、其他