CSS技術特點重點知識歸納總結
1 CSS 入門
CSS是層疊樣式表（Cascading Style Sheets）：用來定義網頁的顯示效果。
作用：把樣式添加到HTML中，爲了將網頁內容與顯示相分離。
可以解決html代碼對樣式定義的重複，提高了後期樣式代碼的可維護性，並增強了網頁的現實效果功能。
一個HTML元素可以被不同位置的樣式進行修飾，多個樣式根據一定規則層疊爲一個。
div與span的區別：
相同點：都是空元素，即佔位符。（空元素：就是單獨在頁面上插入此元素，不會對頁面產
生影響的元素；都能處理任意大小的片斷；都沒有對標籤內的內容進行任何格式化
渲染，主要用於應用樣式表。）
不同點：DIV是塊元素，可自動換行。（塊元素：以另起一行開始渲染的元素）
SPAN是行內元素(也譯作內嵌元素) ，不能自動換行。（行內元素：不需另起一行）
注：通過display:block可以使任意元素變成塊元素
小結：
塊級標籤：div h1-h6 dl ol ul li table tr
行內標籤：span font a td input
2 CSS與HTML的結合方式
2.1 內部關聯
內聯樣式、style屬性的方式：利用標籤中style屬性來改變每個標籤的顯示樣式。
即在stytle 屬性中寫css代碼。
如：<div style="css代碼">黑馬</div>
<pstyle="background-color:#FF0000;color:#FFFFFF">
p標籤段落內容。
</p>
特點：該方式比較靈活，但是對於多個相同標籤的同一樣式定義比較麻煩，適合局部修改。
2.2 內嵌的方式
內嵌方式：在head標籤中加入style標籤，在style標籤中書寫css代碼。對多個標籤進行統一修改。
格式：
<head>
<style type=”text/css”>
/* 註釋 */
p { color:#FF0000;}
</style>
</head>
特點：該方式可以對頁面的樣式進行統一設置，但對於局部不夠靈活。
如果多個頁面樣式相同，代碼也不復用。
2.3 鏈接外部樣式表
通過head標籤中link標籤來實現，前提也是先要有一個已定好的CSS文件。
格式：<linkrel="stylesheet" type="text/css" href="url" />
例：
<linkrel="stylesheet" type="text/css" href="css_3.css"/>
<linkrel="stylesheet" type="text/css"href="http://www.itheima.com/css_3.css" />
注：可以通過多個link標籤鏈接進來多個CSS文件。重複樣式以最後鏈接進來的CSS樣式爲準。
也可以用來聯接互聯網上的樣式文件。
2.4 CSS樣式引用優先級
1 內聯樣式（在 HTML 元素內部style屬性）
2 內嵌樣式表（位於 <style> 標籤內部）
3 外部樣式表（用<link 聯接外部樣式表）
4 瀏覽器缺省設置
樣式引用優先級： 1> 2 > 3 > 4
優先級總結：由下到上，由外到內。優先級由低到高。
3 CSS選擇器
3.1 標籤名選擇器
標籤名選擇器：CSS通過標籤名稱設置樣式——定義通用屬性
例如：
body{
color: blue;
}
3.2 類選擇器
class選擇器：選擇器的名稱需要. 開頭，名稱應用在標籤的的class屬性中——類別區分
例如：
css樣式
.hello { ...}
html代碼
<h1 class="hello"> ... </h1>
特點：可以讓不同的標籤顯示相同的效果，也可以讓相同的標籤顯示不同的效果。
3.3 ID選擇器
id選擇器：選擇器的名稱需要 # 開頭，名稱應用在標籤的id屬性中——針對元素
例如：
css樣式
#itcast { ... }
html代碼
<span id="itcast"> ... </span>
3.4 選擇器擴展
1 派生選擇器----->層層遞進關係，更深入
派生選擇器：依據元素在其位置的上下文關係來定義樣式。
上下文關係及父子標籤，使用空格分隔
通過合理地使用派生選擇器，我們可以使 HTML 代碼變得更加整潔
例如：
html代碼
<ul>
<li>
css樣式
ul li { ...} 給標籤<ul>下面的<li>標籤設置樣式
2 組合選擇器----->並列關係
組合選擇器：對多個不同選擇器使用相同樣式
例如：
css樣式
p,div { color:#FF0000;}
html代碼
<p>P標籤顯示段落。</p>
<div>DIV標籤顯示段落</div>
注：多個不同選擇器要用逗號分隔開。
3 僞元素選擇器
僞元素選擇器：其實就在html中預先定義好的一些選擇器。稱爲僞元素。是因爲CSS的術語。主要針對a標籤。
格式：標籤名：僞元素。類名|標籤名：僞元素。都可以。
a:link 超鏈接未點擊狀態。
a:visited 被訪問後的狀態。
a:hover 光標移到超鏈接上的狀態（未點擊）。
a:active 點擊超鏈接時的狀態。
使用順序 L – V – H – A
值得一提： 僞元素 :hover 在css1中只對a標籤有效，在css2中對所有標籤有效。
4 CSS樣式屬性
4.1 字體
font 簡寫屬性。作用是把所有針對字體的屬性設置在一個聲明中
格式：{font ： 風格 異體 粗細 尺寸/行間距字體系列}
例如：
p { font: italicsmall-caps bolder 12px/18px 宋體; }
按順序設置如下屬性：
font-style 風格（italic斜體、oblique 傾斜）
font-variant 異體
font-weight 粗細
font-size/line-height 尺寸/行間距
font-family 字體系列
4.2 文本
通過文本屬性，可以改變文本的顏色、字符間距，對齊文本，裝飾文本，對文本進行縮進等。
<1> color設置文本顏色
值：①顏色名稱：red ②十六進制顏色：#FF9900 ③RGB代碼：color :rgb(0,100,255);
<2> text-align元素中的文本的水平對齊方式
值：①left ②right ③center ④justify 兩端對齊
<3> text-decoration向文本添加修飾
值：①none 默認 ②underline③overline ④line-through ⑤blink
<4> direction設置文本方向
值：①ltr 默認 (Left-to-right) ②rtl
<5> text-indent 首行文本縮進
<6> line-height設置行高(行間距)
<7> letter-spacing設置中文字符的間距
<8> word-spacing設置英文單詞的間距
<9> text-transform控制文本的大小寫
值：①none 默認 ②capitalize每個單詞以大寫字母開頭 ③uppercase僅有大寫字母 ④lowercase定義無大寫字母，僅有小寫字母
<10>white-space 設置元素中空白的處理方式。
4.3 背景樣式
background 複合屬性，作用是將背景屬性設置在一個聲明中。
格式：{background:顏色 url(圖片路徑) 重複滾動 位置}
按順序設置屬性：background-color、background-image、background-repeat、background-attachment、background-position
例如：background:#00FF00 url(bgimage.gif) no-repeat fixed top;
<1> background-color設置元素的背景顏色
值：transparent默認 透明，其他 ①名稱②十六進制③RGB
<2> background-image把圖像設置爲背景
值：url("imageURL"):圖片路徑
<3> background-repeat設置背景圖像是否及如何重複
<4> background-attachment背景圖像是否固定或者隨着頁面的其餘部分滾動。
值：scroll 默認值滾動、fixed 不移動
<5> background-position設置背景圖像的起始位置。
格式：{background-position ：參數1 參數2}
固定單詞：
參數1：取值，top、center、bottom
參數2：取值，left、center、right ，默認值center
百分比：
參數1表示水平位置；參數2表示垂直位置，參數2的默認值爲50%
左上角是 0% 0%。右下角是 100% 100%。
像素：
參數1表示水平位置；參數2表示垂直位置，參數2的默認值爲50%
左上角是 0 0
5 CSS框模型
CSS 框模型 (Box Model) 規定了元素框處理元素內容、內邊距、邊框和 外邊距 的方式。
5.1 邊框屬性
元素的邊框 (border)是圍繞元素內容和內邊距的一條或多條線。
border 複合屬性，用於設置四個邊的樣式、寬度和顏色
格式：{border: width style color}
具體來說，各屬性詳解如下：
<1> border-width 簡寫屬性，用於設置元素邊框寬度
格式：{border-width : top right bottom left}
<2> border-style 簡寫屬性，用於設置元素邊框樣式
格式：{border-style : top right bottom left}
<3> border-color 簡寫屬性，用於設置元素邊框顏色
格式：{border-color : top right bottom left}
類似的，更細來講，可以通過下面的屬性來確定每條框線的樣式，用法同上：
border-top border-right border-bottom border-left
5.2 CSS外邊距
margin 簡寫屬性。用於設置所有外邊距屬性，依次是上、右、下、左。
格式：{margin : top right bottom left}
例如：p {margin:2cm 4cm 3cm 4cm; }
規律：
下邊沒有，找上邊。
右邊沒有，找上邊。
左邊沒有，找右邊。
5.3 CSS內邊距
元素的內邊距在邊框和內容區之間
padding 複合屬性。作用是在一個聲明中設置元素的所有內邊距屬性
格式{padding:top right bottom left}，分別設置上、右、下、左內邊距
例如：h1{padding: 10px 20px 30px 40px;}
規律同上。
6 列表樣式
<1> list-style簡寫屬性。用於設置列表的屬性
格式：{list-style : type position image}
例如：{list-style : square inside url('/i/arrow.gif')}
<2> list-style-type設置列表項標誌的類型。
值：none 無標記。
disc 默認。標記是實心圓。
circle 標記是空心圓。
square 標記是實心方塊。
decimal 標記是數字。 ....等
<3> list-style-position設置列表中列表項標誌的位置。
值：inside 列表項目標記放置在文本以內，且環繞文本根據標記對齊。
outside 默認值。保持標記位於文本的左側。列表項目標記放置在文本以外，且環
繞文本不根據標記對齊。
<4> list-style-image將圖象設置爲列表項標誌。
如：list-style-image:url("li.gif");
7 分類樣式
7.1 鼠標樣式
cursor 規定當指向某元素之上時顯示的指針類型。
格式：{cursor : 參數}
例如：{cursor :pointer}
取值：
default 默認光標（通常是一個箭頭）
pointer 光標呈現爲指示鏈接的指針（一隻手）
crosshair 光標呈現爲十字線。
wait 此光標指示程序正忙（通常是一隻表或沙漏）。
help 此光標指示可用的幫助（通常是一個問號或一個氣球） ....
注意：如果使用URL定義圖片，請在此列表的末端始終定義一種普通的光標，以防沒有由 URL 定義的可用光標。
7.2 顯示樣式
<1> display設置是否及如何顯示元素。
值：none 此元素不會被顯示。
block 此元素將顯示爲塊級元素，此元素前後會帶有換行符。
inline 默認。此元素會被顯示爲內聯元素，元素前後沒有換行符。
<2> visibility設置元素是否可見或不可見。
值：visible 默認值。元素是可見的。
hidden 元素是不可見的。
collapse 當在表格元素中使用時，此值可刪除一行或一列，但是它不會影響表格的
佈局。被行或列佔據的空間會留給其他內容使用。如果此值被用在其他的元素上，
會呈現爲 “hidden”。
對比：
visibility 不可見元素，但會佔據頁面上的空間
display 不可見元素，不佔據頁面空間
7.3 浮動樣式
float 定義元素在哪個方向浮動。
值：left 元素向左浮動。
right 元素向右浮動。
none 默認值。元素不浮動，並會顯示在其在文本中出現的位置。
7.4 取消浮動
clear 設置一個元素的側面是否允許其他的浮動元素。
格式：{clear : 參數 }
例如：{clear :both }
取值：
left 在左側不允許浮動元素。
right 在右側不允許浮動元素。
both 在左右兩側均不允許浮動元素。
none 默認值。允許浮動元素出現在兩側。
7.5 定位樣式
position 把元素放置到一個靜態的、相對的、絕對的、或固定的位置中
取值：
① absolute 生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。
元素的位置通過 "left","top", "right" 以及 "bottom" 屬性進行規定。
② fixed 生成絕對定位的元素，相對於瀏覽器窗口進行定位。
元素的位置通過 "left","top", "right" 以及 "bottom" 屬性進行規定。
③ relative 生成相對定位的元素，相對於其正常位置進行定位。
因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。
④ static 默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者
z-index 聲明）。
left、top、right、bottom 設置元素的位置
z-index 設置層疊的次序，較大的值會覆蓋在較小的上面