a:link {color:#FF0000;} / 未訪問的鏈接 / （只用于a標簽）

a:visited {color:#00FF00;} / 已訪問的鏈接 / （只用于a標簽）

a:hover {color:#FF00FF;} /* 鼠標移動到鏈接上

*/（可和其他標簽結合一起用）

a:active {color:#0000FF;} / 選定的鏈接 /

注意

偽類選擇器的排序很重要，a:link?a:visited ?a:hover a:active，記作lvha

輸入偽類選擇器（針對表單）

input:focus{color:red;} / 鍵盤輸入焦點 /

其他偽類選擇器

p:first-child{color:red;} /* 第一個p */

:before 在元素之前添加內容。

:after 在元素之后添加內容。

css優先規則

內聯樣式表-> ID 選擇器—> Class 類選擇器->標簽選擇器

背景屬性：

背景的添加 ：

背景顏色的添加:

background:red;

backgronnd-color:red;

背景圖片的添加：

background:url(“images/1.jpg”);

backgronnd-image:url(“images/1.jpg”);

背景的平鋪

什么是平鋪？平鋪就是圖片是否重復出現

不平鋪：background-repeat:no-repeat;

水平方向平鋪：background-repeat:repeat-x;

垂直方向平鋪：background-repeat:repeat-y;

完全平鋪：默認為完全平鋪

背景圖片的定位

背景圖片的定位就是可以設置顯示背景圖片的位置，通過屬性background-position來實現

background-position的取值可為英文單詞或者數值和百分值。

background-positon的英文單詞取值

top left

top center

top right

center left

center center

center right

bottom left

bottom center

ottom right

background-positon的數值取值

background-position:x y;

positon的百分值取值

background-position:x% y%;

背景圖片的大小

背景圖片的大小可以通過屬性background-size來設置background-size的取值可為數值和百分值。

background-size的數值取值

background-size:x y;

background-size的數值取值

background-size:x% y%;

背景圖片的滾動

背景圖片是否隨著內容的滾動而滾動由background-attachment設置

background-attachment:fixed; 固定，不隨內容的滾動而滾動

background-attachment:scroll; 滾動，隨內容的滾動而滾動

css文字文本屬性：

文字屬性

color:red; 文字顏色

font-size:12px; 文字大小

font-weight:“bold” 文字粗細(bold/normal)

font-family:“宋體” 文字字體

font-variant:small-caps 小寫字母以大寫字母顯示

文本屬性

text-align:center; 文本對齊(right/left/center)

line-height:10px; 行間距(可通過它實現文本的垂直居中)

text-indent:20px; 首行縮進

text-decoration:none;

文本線(none/underline/overline/line-through)

letter-spacing: 字間距

盒子模型

盒子模型就是一個有高度和寬度的矩形區域

所有html標簽都是盒子模型

div標簽自定義盒子模型

所有的標簽都是盒子模型

class和id的主要差別是：class用于元素組（類似的元素，或者可以理解為某一類元素），而id用于標識多帶帶的唯一的元素。

盒子模型的組成

盒子模型組成部分：

自身內容： width、height 寬高

內邊距： padding

盒子邊框： border 邊框線

與其他盒子距離： margin 外邊距

內容+內邊距+邊框+外邊距=面積

border 邊框

常見寫法 border:1px solid #f00;

多帶帶屬性：

border-width:

border-style:

dotted 點狀虛線

dashed（虛線）

solid（實線）

double（雙實線）

border-color (顏色)

padding 內邊距

值：像素/厘米等長度單位、百分比

padding:10px; 上下左右

padding:10px 10px; 上下 左右

padding:10px 10px 10px; 上 左右 下

padding:10px 10px 10px 10px; 上 右 下 左（設置4個點-->順時針方向）

多帶帶屬性：

- `padding-top:`
- `padding-right:`
- `padding-bottom:`
- ` padding-left:`

當設置內邊距的時候會把盒子撐大，為了保持盒子原來的大小，應該高度和寬度進行減小，根據width和height減小

margin 外邊距

值：與padding相同

多帶帶屬性：與padding相同

外邊距合并：兩個盒子同時設置了外邊距，會進行一個外邊距合并

補充盒子模型內容

標準盒子模型

盒子模型是css中一個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型有兩種，分別是 ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相同，先來看看我們熟知的標準盒子模型

從上圖可以看到標準 w3c 盒子模型的范圍包括 margin、border、padding、content，并且 content 部分不包含其他部分

IE盒子模型

從上圖可以看到 ie 盒子模型的范圍也包括 margin、border、padding、content

和標準 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 padding

IE盒子模型width = padding+border+內容

標準盒子模型 = 內容的寬度（不包含border+padding）

例：

一個盒子的 margin 為 20px，border 為 1px，padding 為 10px，content 的寬為 200px、高為 50px，假如用標準 w3c 盒子模型解釋，那么這個盒子需要占據的位置為：寬 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的實際大小為：寬 1*2+10*2+200=222px、高 1*2+10*2+50=72px；假如用ie 盒子模型，那么這個盒子需要占據的位置為：寬 20*2+200=240px、高 20*2+50=70px，盒子的實際大小為：寬 200px、高 50px

那應該選擇哪中盒子模型呢？當然是“標準 w3c 盒子模型”了。怎么樣才算是選擇了“標準 w3c 盒子模型”呢？很簡單，就是在網頁的頂部加上 doctype 聲明。

假如不加 doctype 聲明，那么各個瀏覽器會根據自己的行為去理解網頁，即 ie 瀏覽器會采用 ie 盒子模型去解釋你的盒子，而 ff 會采用標準 w3c 盒子模型解釋你的盒子，所以網頁在不同的瀏覽器中就顯示的不一樣了。

反之，假如加上了 doctype 聲明，那么所有瀏覽器都會采用標準 w3c 盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了。

用 jquery 做的例子來證實一下

　上面的代碼沒有加上 doctype 聲明，在 ie 瀏覽器中顯示 ie盒子模型，在 ff 瀏覽器中顯示“標準w3c 盒子模型”。

　代碼2 與代碼1 唯一的不同的就是頂部加了 doctype 聲明。在所有瀏覽器中都顯示“標準 w3c 盒子模型”

所以為了讓網頁能兼容各個瀏覽器，讓我們用標準 w3c 盒子模型

擴展

學會使用box-sizing布局

基本概念

塊級元素：默認情況下獨占一行的元素，可控制寬高、上下邊距；

行內元素：默認情況下一行可以擺放多個的元素，不可控制寬高和上下邊距

行塊轉換

display:none; 不顯示

display:block; 變成塊級元素

display:inline; 變成行級元素

display:inline-block; 以塊級元素樣式展示，以行級元素樣式排列

溢出

overflow:hidden; 溢出隱藏

overflow:scroll; 內容會被修剪，瀏覽器會顯示滾動條

overflow:auto; 如果內容被修剪，則產生滾動條

文本不換行：white-space:nowrap;

長單詞換行：word-wrap:break-word;

行內元素和快級元素小結

一、塊級元素：block element

每個塊級元素默認占一行高度，一行內添加一個塊級元素后無法一般無法添加其他元素（float浮動后除外）。兩個塊級元素連續編輯時，會在頁面自動換行顯示。塊級元素一般可嵌套塊級元素或行內元素；

塊級元素一般作為容器出現，用來組織結構，但并不全是如此。有些塊級元素，如只能包含塊級元素。

DIV 是最常用的塊級元素，元素樣式的display:block都是塊級元素。它們總是以一個塊的形式表現出來，并且跟同級的兄弟塊依次豎直排列，左右撐滿。

二、行內元素：inline element

也叫內聯元素、內嵌元素等；行內元素一般都是基于語義級(semantic)的基本元素，只能容納文本或其他內聯元素，常見內聯元素 “a”。比如 SPAN 元素，IFRAME元素和元素樣式的display : inline的都是行內元素。例如文字這類元素，各個字母 之間橫向排列，到最右端自動折行。

三、block（塊）元素的特點:

①、總是在新行上開始；

②、高度，行高以及外邊距和內邊距都可控制；

③、寬度缺省是它的容器的100%，除非設定一個寬度。

④、它可以容納內聯元素和其他塊元素

四、inline元素的特點

①、和其他元素都在一行上；

②、高，行高及外邊距和內邊距不可改變；

③、寬度就是它的文字或圖片的寬度，不可改變

④、內聯元素只能容納文本或者其他內聯元素

對行內元素，需要注意如下:

設置寬度width 無效。 設置高度height 無效，可以通過line-height來設置。 設置margin

只有左右margin有效，上下無效。

設置padding只有左右padding有效，上下則無效。注意元素范圍是增大了，但是對元素周圍的內容是沒影響的。

五、常見的塊狀元素

address – 地址

blockquote – 塊引用

center – 舉中對齊塊

dir – 目錄列表

div – 常用塊級容易，也是CSS layout的主要標簽

dl – 定義列表

fieldset – form控制組

form – 交互表單

h1 – 大標題

h2 – 副標題

h3 – 3級標題

h4 – 4級標題

h5 – 5級標題

h6 – 6級標題

hr – 水平分隔線

isindex – input prompt

menu – 菜單列表

noframes – frames可選內容，（對于不支持frame的瀏覽器顯示此區塊內容

noscript – 可選腳本內容（對于不支持script的瀏覽器顯示此內容）

ol – 有序表單

p – 段落

pre – 格式化文本

table – 表格

ul – 無序列表

六、常見的內聯元素

a – 錨點

abbr – 縮寫

acronym – 首字

b – 粗體(不推薦)

bdo – bidi override

big – 大字體

br – 換行

cite – 引用

code – 計算機代碼(在引用源碼的時候需要)

dfn – 定義字段

em – 強調

font – 字體設定(不推薦)

i – 斜體

img – 圖片

input – 輸入框

kbd – 定義鍵盤文本

label – 表格標簽

q – 短引用

s – 中劃線(不推薦)

samp – 定義范例計算機代碼

select – 項目選擇

small – 小字體文本

span – 常用內聯容器，定義文本內區塊

strike – 中劃線

strong – 粗體強調

sub – 下標

sup – 上標

textarea – 多行文本輸入框

tt – 電傳文本

u – 下劃線

七，可變元素

可變元素為根據上下文語境決定該元素為塊元素或者內聯元素。

applet - java applet

button - 按鈕

del - 刪除文本

iframe - inline frame

ins - 插入的文本

map - 圖片區塊(map)

object - object對象

script - 客戶端腳本

八、行內元素與塊級元素有什么不同

區別一：

塊級：塊級元素會獨占一行，默認情況下寬度自動填滿其父元素寬度

行內：行內元素不會獨占一行，相鄰的行內元素會排在同一行。其寬度隨內容的變化而變化。

區別二：

塊級：塊級元素可以設置寬高

行內：行內元素不可以設置寬高

區別三：

塊級：塊級元素可以設置margin，padding

行內：行內元素水平方向的margin-left; margin-right;

padding-left; padding-right;可以生效。但是豎直方向的margin-bottom; margin-top; padding-top; padding-bottom;卻不能生效。

區別四：

塊級：display:block;

行內：display:inline;

替換元素有如下：（和img一樣的設置方法）

<body>內容</body>