CSS樣式概述
CSS是Cascading Style Sheet 的縮寫(xiě)。譯作“層疊樣式表單”。是用于（增強(qiáng)）控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。
作為元素的style特性的值
在<style>元素內(nèi)部，位于<head>元素中
使用<link>引用外部樣式
選擇器
指定聲明應(yīng)用于哪個(gè)或哪些元素，不同元素之間用逗號(hào)隔開(kāi)，例如：td {width:36px;}
聲明
用于設(shè)置如何樣式化在選擇器中引用的元素
屬性
它是該規(guī)則希望影響的所選元素的屬性
值
它是屬性的說(shuō)明
繼承
應(yīng)用于某個(gè)元素的屬性經(jīng)常會(huì)被它的子元素所繼承，可以針對(duì)特定的元素設(shè)置樣式來(lái)覆蓋已繼承的樣式
通用選擇器
*{}
類(lèi)型選擇器
類(lèi)型選擇器匹配以逗號(hào)隔開(kāi)的元素列表所標(biāo)識(shí)的所有元素，例如：h1,h2,h3 {}
類(lèi)選擇器
類(lèi)選擇器可用于將一條規(guī)則應(yīng)用于附帶class特性的一個(gè)元素或多個(gè)元素，其中class特性的值與類(lèi)選擇器中指定的值相匹配，前綴使用"."，例如：.classname {} 或者 td.classname {}
id選擇器
id選擇器和類(lèi)選擇器工作方式類(lèi)似，但是使用的是id特性的值，前綴使用"#"，例如：#idname {}
子選擇器
子選擇器所匹配的元素是另外一個(gè)元素的直接子元素，例如：td>b {}
派生選擇器
派生選擇器所匹配的元素類(lèi)型是另一個(gè)指定元素的派生元素或內(nèi)嵌的元素，例如：table b {}
相鄰兄弟選擇器
相鄰兄弟選擇器匹配指定元素的相鄰兄弟元素類(lèi)型。例如：h1+p {}
通用兄弟選擇器
通用兄弟選擇器匹配指定元素的任何兄弟元素類(lèi)型，即使它們不是直接的先后關(guān)系，例如：h1~p {}
特性選擇器
特性選擇器可以使用元素附帶的特性以及特性的值，例如：p[特性選擇條件] {}
偽類(lèi)
偽類(lèi)用于向某些選擇器添加特殊的效果。偽類(lèi)對(duì)元素進(jìn)行分類(lèi)是基于特征而不是它們的名字、屬性或者內(nèi)容。
:first-child向元素的第一個(gè)子元素添加樣式。
:link向未被訪問(wèn)的鏈接添加樣式。
:vistited向已被訪問(wèn)的鏈接添加樣式。
:hover當(dāng)鼠標(biāo)懸浮在元素上方時(shí)，向元素添加樣式。
:active向被激活的元素添加樣式。
:focus向擁有鍵盤(pán)輸入焦點(diǎn)的元素添加樣式。
:lang向帶有指定 lang 屬性的元素添加樣式。
偽元素
偽元素用于向某些選擇器設(shè)置特殊效果。
:first-letter向文本的第一個(gè)字母添加特殊樣式。
:first-line向文本的首行添加特殊樣式。
:before在元素之前添加內(nèi)容。
:after在元素之后添加內(nèi)容。
框模型
CSS 框模型 (Box Model) 規(guī)定了元素框處理元素內(nèi)容、內(nèi)邊距、邊框 和 外邊距 的方式。
element : 元素。
padding : 內(nèi)邊距，也有資料將其翻譯為填充。
border : 邊框。
margin : 外邊距，也有資料將其翻譯為空白或空白邊。
元素框的最內(nèi)部分是實(shí)際的內(nèi)容，直接包圍內(nèi)容的是內(nèi)邊距。內(nèi)邊距呈現(xiàn)了元素的背景。內(nèi)邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認(rèn)是透明的，因此不會(huì)遮擋其后的任何元素。背景應(yīng)用于由內(nèi)容和內(nèi)邊距、邊框組成的區(qū)域。
內(nèi)邊距、邊框和外邊距都是可選的，默認(rèn)值是零。但是，許多元素將由用戶(hù)代理樣式表設(shè)置外邊距和內(nèi)邊距。可以通過(guò)將元素的 margin 和 padding 設(shè)置為零來(lái)覆蓋這些瀏覽器樣式。這可以分別進(jìn)行，也可以使用通用選擇器對(duì)所有元素進(jìn)行設(shè)置：
* {
margin: 0;
padding: 0;
}
假設(shè)框的每個(gè)邊上有 10 個(gè)像素的外邊距和 5 個(gè)像素的內(nèi)邊距。如果希望這個(gè)元素框達(dá)到 100 個(gè)像素，就需要將內(nèi)容的寬度設(shè)置為 70 像素，請(qǐng)看下圖： 在 CSS 中，width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會(huì)影響內(nèi)容區(qū)域的尺寸，但是會(huì)增加元素框的總尺寸。
#box {
width: 70px;
margin: 10px;
padding: 5px;
}
瀏覽器兼容性 內(nèi)邊距、邊框和外邊距可以應(yīng)用于一個(gè)元素的所有邊，也可以應(yīng)用于單獨(dú)的邊。外邊距可以是負(fù)值，而且在很多情況下都要使用負(fù)值的外邊距。
一旦為頁(yè)面設(shè)置了恰當(dāng)?shù)?DTD，大多數(shù)瀏覽器都會(huì)按照上面的圖示來(lái)呈現(xiàn)內(nèi)容。然而 IE 5 和 6 的呈現(xiàn)卻是不正確的。根據(jù) W3C 的規(guī)范，元素內(nèi)容占據(jù)的空間是由 width 屬性設(shè)置的，而內(nèi)容周?chē)?padding 和 border 值是另外計(jì)算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標(biāo)準(zhǔn)模型。這些瀏覽器的 width 屬性不是內(nèi)容的寬度，而是內(nèi)容、內(nèi)邊距和邊框的寬度的總和。
雖然有方法解決這個(gè)問(wèn)題。但是目前最好的解決方案是回避這個(gè)問(wèn)題。也就是，不要給元素添加具有指定寬度的內(nèi)邊距，而是嘗試將內(nèi)邊距或外邊距添加到元素的父元素和子元素。
屬性說(shuō)明
字體屬性
font：可以設(shè)置多個(gè)字體屬性，屬性之間用空格隔開(kāi)
font-family：指定字型，可附帶多個(gè)值，第一個(gè)首選字型，然后第二選擇，最后通用字體系列
font-size：設(shè)置字體大小
font-size-adjust：設(shè)置字體的縱橫比值，也就是小寫(xiě)字母x與字體高度的比值
Cfont-stretch：設(shè)置字母的寬度
font-style：設(shè)置字體樣式
font-variant：用于創(chuàng)建與小寫(xiě)字母具有相同尺寸的大寫(xiě)字母
font-weight：設(shè)置文本粗細(xì)程度
color：字體顏色
文本屬性
letter-spacing：設(shè)置字母之間的距離
text-align：設(shè)置文本的對(duì)齊方式
text-decoration：指定字體外觀，例如：underline、overline、line-through、blink
text-indent：設(shè)置文本縮進(jìn)量
text-shadow：用于創(chuàng)建文本的陰影
text-transform：指定文本的大小寫(xiě)
white-space：指示空格的處理方式
word-spacing：指定單詞之間的距離
顏色屬性和背景屬性
background：用于設(shè)置背景，可設(shè)置多個(gè)屬性，屬性之間用空格隔開(kāi)
background-attachment：設(shè)置背景圖為固定在網(wǎng)頁(yè)中的一個(gè)位置還是隨著網(wǎng)頁(yè)滾動(dòng)
background-color：設(shè)置背景顏色
background-image：設(shè)置背景圖像
background-position：設(shè)置背景圖相對(duì)于左上角的位置
background-repeat：指定是否重復(fù)背景圖
background-positionX：指定背景圖在水平方向上的位置
background-positionY：指定背景圖在垂直方向上的位置
邊框?qū)傩?/strong>
border-style（bottom、left、top、right）：指定了邊框周?chē)�的樣式
border-width（bottom、left、top、right）：指定邊框線的寬度
border-color（bottom、left、top、right）：指定邊框線的顏色
范圍屬性
height：指定塊元素的垂直高度
width：指定元素水平寬度
line-height：指定文本的高度，可用于控制行間距
max-height：指定塊級(jí)別元素的最大高度
max-width：指定塊級(jí)別元素的最大寬度
min-height：指定塊級(jí)別元素的最小高度
min-width：指定塊級(jí)別元素的最小寬度
頁(yè)邊距屬性
margin（bottom、left、top、right）：用于設(shè)置框周?chē)?yè)邊距的寬度
內(nèi)邊距屬性
padding（bottom、left、top、right）：設(shè)置元素邊框和其內(nèi)容之間的距離
列表屬性
list-style：設(shè)置項(xiàng)目列表、編號(hào)列表和定義列表的外觀樣式
list-style-position：設(shè)置標(biāo)記符號(hào)放置在列表每一項(xiàng)的內(nèi)部還是這些項(xiàng)的左邊
list-style-type：指定項(xiàng)目列表應(yīng)當(dāng)使用的項(xiàng)目符號(hào)或編號(hào)的類(lèi)型
marker-offset：指定列表項(xiàng)和其標(biāo)記符號(hào)之間的空間
位置屬性
position：指定某個(gè)元素的定位方案
absolute 固定元素在畫(huà)布上相對(duì)于其包含元素的某個(gè)特定位置
static 固定元素在網(wǎng)頁(yè)的同一個(gè)位置，即使用戶(hù)滾動(dòng)網(wǎng)頁(yè)也保持在該位置
relative 將元素放置在距離它正常位置具有一定偏移量的位置
fixed 將元素固定在網(wǎng)頁(yè)的背景上，并且當(dāng)用戶(hù)滾動(dòng)網(wǎng)頁(yè)時(shí)元素不會(huì)移動(dòng)
top：設(shè)置元素相對(duì)于窗口或包含元素頂部的垂直位置
left：設(shè)置元素相對(duì)于窗口或包含元素左邊的水平位置
bottom：設(shè)置元素相對(duì)于窗口或包含元素底部的垂直位置
right：設(shè)置元素相對(duì)于窗口或包含元素右邊的水平位置
vertical-align：設(shè)置內(nèi)聯(lián)元素的垂直定位方式
z-index：設(shè)置多個(gè)重疊元素中哪個(gè)元素出現(xiàn)在頂部，允許使用正數(shù)和負(fù)數(shù)
clip：用于控制元素的哪一部分是可見(jiàn)的
overflow：當(dāng)內(nèi)容太大以至于包含元素?zé)o法容納時(shí)，該屬性指定容器元素顯示內(nèi)容的方式
overflow-x：與overflow屬性相同，但只能用于水平x軸
overflow-y：與overflow屬性相同，但只能用于垂直y軸
外邊框?qū)傩?/strong>
Outline：設(shè)置外邊框樣式，外邊框類(lèi)似于邊框，但是外邊框不占用任何空間，它位于畫(huà)布之上
outline-color：設(shè)置外邊框顏色
outline-style：設(shè)置外邊框線的樣式
outline-width：設(shè)置外邊框的寬度
表格屬性
border-collapse：指定表格使用的邊框模型
border-spacing：指定相鄰單元格的邊框之間的距離
caption-side：指定標(biāo)題應(yīng)當(dāng)放置在表格的哪一邊
empty-cells：指定空單元格是否顯示邊框
table-layout：指定瀏覽器如何計(jì)算表格的布局
分類(lèi)屬性
clear：設(shè)置強(qiáng)制一些元素顯示在它的下面，可指示元素的哪條邊不能接觸對(duì)齊元素
display：用于指定如何呈現(xiàn)一個(gè)元素，設(shè)置為none元素將不呈現(xiàn)并且不占用任何空間
float：指定隨后的元素應(yīng)當(dāng)換行到該元素的左邊或右邊，而不是換行到下方
visibility：設(shè)置一個(gè)元素是否應(yīng)當(dāng)顯示或隱藏
國(guó)際化屬性
direction：設(shè)置文本的方向，是從左到右還是從右到左
unicode-bidi：用于重寫(xiě)Unicode中語(yǔ)言的內(nèi)置方向設(shè)置
長(zhǎng)度
絕對(duì)長(zhǎng)度
cm
in
mm
pc
pt
相對(duì)長(zhǎng)度
em
ex
px
喜歡 
頂
難過(guò)
囧
圍觀
無(wú)聊
