內部樣式表:不用通過引入css檔案來設定樣式，直接在head的< style>雙標籤中設定。
內聯樣式表（行內樣式）:在html中，直接將樣式屬性寫在標籤上，優先順序高於其它所有方式設定的樣式，加了!important的除外。
外部樣式表:通過引入外部css檔案設定樣式，引入方式有兩種，一種是通過link標籤
< link rel=「stylesheet」 type=「text/css」 href=「***.css」/>
一種是在head的< style>雙標籤中引入
< style>
@import url(***.css);
這一種引入方式引入的css檔案不會和html檔案同時載入，很慢，所以一般都用link的方式引入。
css既然能設定元素的樣式，那麼首先一點就要通過某種方式將樣式與元素關聯起來，而起到關聯作用的就是選擇器
屬性選擇器:權重10 拿a標籤來舉例
a[title] 選中有title屬性的a標籤
a[title=idu] 選title屬性的屬性值完全匹配idu的a標籤
a[href*=sina] 選中href屬性裡含有sina這幾個關鍵字的a標籤
a[href*="http://"] 選中href屬性值以http://開頭的a標籤
a[href*=".com"] 選中href屬性值以.com結尾的a標籤
偽類選擇器:權重10 拿ul標籤來舉例
li:nth-child(3) 選中ul中的第三個元素，且這個元素必須是li標籤。
li:first-child() 選中ul中的第乙個元素，且這個元素必須是li標籤。
li:last-child(3) 選中ul中的最後乙個元素，且這個元素必須是li標籤。
li:nth-last-child(3) 選中ul中的倒數第三個元素，且這個元素必須是li標籤。
li:nth-child(-n+3) 通過乙個簡單的一元一次函式，可以實現選擇第1,2,3個子元素。
ui狀態偽類選擇器:權重10 拿input標籤來舉例
input:enable 選中頁面上所有可用的input標籤
input:disable 選中頁面上所有禁用的input標籤
input:checked 選中頁面上所有被選中的input標籤
偽元素選擇器:權重1 拿div標籤來舉例
div::selection 選中滑鼠拖過的元素內容的樣式，例如用滑鼠拖過div中的一行字時，這行字的樣式就會變成選擇器中對應的樣式
div::first-letter 選中元素內容的第乙個字
div:first-line 選中元素內容的第一行
層次選擇器:權重為各部分相加
xx>yy 選中xx中的子元素yy
xx+yy 選中緊跟在xx後面的yy元素
xx~yy 選中xx後面所有的yy元素
屬性屬性值
作用border
寬度(數字加畫素單位px） 樣式（solid實線/dashed虛線/dotted圓點/double雙實線） 顏色（可以是顏色的單詞或者#***）
設定某個元素的邊框樣式
height
數字加畫素單位px
設定元素的高度
width
數字加畫素單位px
設定元素的寬度
margin
數字加畫素單位px
設定容器的外邊距
padding
數字加畫素單位px
設定容器的內邊距
關於文字的一些屬性:
屬性屬性值
作用overflow
visible(預設）hidden(溢位隱藏)scroll（強行撐出滾動條）auto（自適應出現滾動條）inherit(繼承父類的overflow屬性)
控制乙個容器裡面的文字在溢位容器範圍時是否隱藏以及是否出現滾動條
white-space
normal（預設）nowrap（強制不換行）pre（輸入的文字什麼樣，渲染出來就什麼樣）pre-wrap（保留輸入文字樣式，但是超出容器會換行）pre-line（保留輸入文字換行樣式，不保留空白樣式）inherit（繼承）
控制容器內文字的換行以及文字的空格是否渲染等
text-overflow
clip（溢位不顯示任何標記）ellipsis（溢位顯示省略號）
控制文字溢位部分顯示出來的樣式
關於文字字型的一些屬性:
屬性屬性值
作用font-size
數字加畫素單位px
設定字型大小
font-family
字型型別
設定字型型別
color
#***或者顏色單詞
設定字型顏色
font-weight
bold(加粗)bolder(更粗)normal（預設正常）或者用100-900的數字，500為正常，大於500為加粗
設定字型粗細
font-style
italic以及oblique（字型傾斜）
設定字型傾斜
line-height
數字加畫素單位px
設定文字行高
text-decoration
none(預設無文字修飾)overline（上劃線）underline（下劃線）line-through（刪除線）
設定文字修飾
text-indent
數字加畫素單位px
設定首行縮排
letter-spacing
數字加畫素單位px
設定字間距
關於背景的一些屬性:
屬性屬性值
作用background-color
#***或者英文單詞
設定背景顏色
background-image
url(位址)//這個括號不是注釋的意思，而是乙個格式
設定背景
background-repeat
no-repeat（不平鋪）repeat-x（水平方向平鋪）repeat-y（豎直方向平鋪）repeat（所有方向平鋪）
設定背景平鋪
background-position
距離左xx px 距離上xx px或者是left/right/top/bottom
設定背景位置
background-attachment
fixed（固定）scroll（滾動）
背景是否固定
（css3新增）background-origin
padding-box / border-box / content-box
設定背景圖起點位置
（css3新增）background-clip
padding-box / border-box / content-box
設定背景裁切位置
（css3新增）background-size
xx px/ xx% / cover(覆蓋整個背景區域)/ contain(將擴充套件至最大尺寸)
設定背景圖起點位置
css3可以設定多個背景，具體格式在url()中寫多個位址時，用逗號隔開即可，那麼問題來了，假如設定兩個背景，如url(a.jpg,b.jpg)，乙個需要平鋪，另乙個不需要，應該怎麼設定呢？只需要在background-repeat中也設定兩個屬性值，用逗號隔開即可，屬性值和背景按書寫順序匹配。其它背景屬性，比如背景圖尺寸，有多張背景圖時，屬性值都可寫多個，用逗號隔開。
關於邊框的一些屬性:
屬性屬性值
作用border-width
xx px
設定邊框寬度
border-style
solid(實線)dashed(虛線)dotted(圓點)double(雙實線)
設定邊框樣式
border-color
#***
設定邊框顏色
（css3新增，ie不支援，某些瀏覽器必須在屬性名加上瀏覽器核心符號）border-image
url(xx.png) 50 round
用來做邊框
（css3新增）border-radius
xxpx / xx%
圓角邊框
上表中的border可替換成border-left/border-top/border-right/border-bottom,來單獨設定某乙個方向邊框的樣式。css3中還新增了border邊框設定多種顏色，格式也就是寫幾個屬性值，用空格隔開，然後如果有兩個值的話，第乙個值就指上下邊框顏色，第二個值指左右邊框顏色，如果有三個值的話，第乙個值指上邊框顏色，第二個值指左右邊框顏色，第三個值指下邊框顏色，如果有四個值的話，就分別指上，右，下，左邊框的顏色。另外上表中的邊框屬性只是簡寫，具體屬性及分析見
關於列表的一些屬性:
屬性屬性值
作用list-style-type(也可簡寫成list-style)
none(無樣式)/circle(空心圓)/disc(實心圓)/square(實心方塊)
設定列表符號樣式
list-style-image
url(『***.png』)
用替換列表符號
list-style-position
inside(列表內)/outside(列表外)
決定列表符號位置
css3新增的陰影屬性:
屬性屬性值
作用text-shadow
xxpx(水平方向陰影長度) xxpx(垂直方向陰影長度) xxpx(陰影模糊範圍) #***(陰影顏色)
設定文字陰影
box-shadow
xxpx(水平方向陰影長度) xxpx(垂直方向陰影長度) xxpx(陰影模糊範圍) #***(陰影顏色) inset(使陰影趨向容器內部)
設定容器陰影
CSS美化網頁元素
一.span標籤 能讓某幾個文字或者某個詞語凸顯出來 今天是11月份的第一天，地鐵卡不打折了 二.字型風格 font family 字型型別 font size 字型大小 font style 字型風格 font weight 字型粗細 font 風格 粗細 大小 型別 三.文字樣式 color 設...
CSS樣式美化div盒子
完整 片 font family 等線 light 字型為等線 light font size 1.5em 字型大小為預設值的2倍 line height 1.5em 行高為1.5倍 color deepskyblue 字型顏色為deepskyblue line break unset 斷句方式 t...
用CSS美化你的網頁
現在我們設計網頁已經離不開css，使用css可以美化我們的網頁，這已經是大家所共知的了！css是 cascading style sheets 的縮寫，譯為樣式表。html允許我們利用css來實現風格的顯示，舉個簡單的例子 我們可以使用標籤來使頁面的字型加粗。如 網頁教學網加粗字型顯示 如果你使我們...