(註：帶*號的屬性是CSS3新增屬性)
一、基本規則
1.css通常儲存在樣式表(style)中,用於定義如何顯示HTML元素；
2.css主要由兩個部分構成：選取器和一條或多條聲明。
選取器通常是需要改變的樣式的HTML元素，聲明需要用花括弧包圍起來，每條聲明包括一個屬性和一個相應的值，每條聲明都以分號結束；
樣本：p {color:red; text-align:center}
3.注釋：/*這裡邊的是注釋*/
4.css樣式插入方法：
（1）外部樣式，即從外部css檔案讀取格式應該於網頁；當樣式需要應用於多個頁面時，可用這種方法；
例：
<head><link rel="stylesheet" type="text/css" href="abc.css"></head>
（2）內部樣式，在頭部檔案中用style標籤進行css格式定義，當單個文檔需要特殊樣式時可使用此法；
例：
<head><style>p {margin-left:20px;}#x {color:yellow;}</style></head>
（3）內聯樣式,即在單個元素標籤內部寫入style的方法；
優先順序：（3）>（2）>（1）,但是如果外部樣式的引入寫在內部樣式的後邊，那麼外部樣式將會覆蓋內部樣式；
二、聲明屬性
1.背景(backgroud)
backgroud-color 背景色，值可以是十六進位顏色值、RGB顏色標記法（如rgb(255,255,0)）、顏色名稱（如：red））、transparent(透明，預設） backgroud-image 背景圖，預設是平鋪樣式；如：body {backgroud-image:url('ba.jpg');} backgroud-repeat 背景圖重複方式，值有repeat-x(水平方向平鋪)、repeat-y(豎直方向平鋪)、no-repeat(不平鋪) backgroud-attachment 背景圖固定還隨頁面其餘部分滾動設定，值有fixed（固定)、scroll(滾動，預設) backgroud-position 背景圖起始位置，由x,y兩個方向組成，預設都是center，x方向值有left、right、center,y方向值有top、center、bottom;如果只指定了一個值，其他的值會是center;也可用座標，可以是有單位的(0px0px)或者是百分比的(0%0%) backgroud 合并簡寫，把以上的所有屬性按以上順序都寫在這一起（可以省略不需要的屬性）；如：body {backgroud:red url('p.png') no-repeat right top;} backgroud-clip* 背景的繪製地區，值：border-box(預設),padding-box(襯距方框內)，content-box(內容方框內)； backgroud-origin* 背景圖片定位地區，padding-box(相對邊框)，border-box(相對於外邊距)，content-box(相對於內容框體)； backgroud-size* 背景圖片尺寸，值有高寬兩個，如省略一個，另一個會按比例自動計算，值可以是長度單位和%
2.文本(text)
color 文本顏色，值為CSS顏色值，可有多種表達方式； direction 文本書寫方向，值有rtl(從右至左)、ltr（預設從左至右）； letter-spacing 字元間距，值為以px像素為單位的值，可以使用負值； line-height 行間距，值可以使用像素(px),也可使用數字，也可使用百分比（是在當前字型尺寸上進行百分比縮放）； text-align 對齊，值有left、right、center、justify（左右對齊）； text-decoration 修飾，值有underline(底線)、overline(上劃線)、line-through(刪除線)、blink(閃爍)、none(預設無); text-indent 縮排，值為像素值； text-shadow* 陰影，值有四個參數：h-shadow(垂直陰影)、v-shadow(水平陰影)、blur(模糊距離)、color(陰影顏色)前兩個為必填項，值為像素px，後兩個為可選 text-transform 文字大小寫轉換，值有capitalize(capitalize)、uppercase(全部為大寫)、lowercase(全部小寫)、none(預設無) unicode-bidi 文本是否重寫，值有normal(預設不使用附加嵌入層)、embed(建立一個附加嵌入層)、bidi-override(建立，重新排序取決於direction屬性)、iniitial(設定屬性為它的預設屬性) vertical-align 垂直對齊，值有baseline(預設)、sub(下標)、super(上標)、top(元素頂端與最高元素頂端對齊)、bottom(底端與最低元素底端對齊)、text-top(父元素頂端對齊)、middle(父元素置中)、text-bottom(父元素底端對齊)、%(使用line-height值百分比排列) white-space 空白處理方式,值有normal(預設忽略空白)、pre(保留空白)、nowrap(文本不換行，直到<br>)、pre-wrap(保留空白符，也能正常換行)、pre-line(合并空白序列，保留換行) word-spacing 欄位單詞間距，值為像素px; hanging-punctuation*設定標點字元是否位於線框外，值none(不在框外放置),first(放在行首邊緣外),last(行尾邊緣),allow-end,force-end; punctuation-trim* 對標點進行修剪，值：none,start(在開頭放置標點）,end(在行尾修剪結束標點),allow-end,adjacent; text-align-last* 最後一行對齊，值：auto(預設左）,left,right,center,justify（左右對齊），start,end,initial,inherit; text-emphasis* 重點標記文本，包括兩個值，風格和顏色； text-justify* 規定當 text-align 設定為 "justify" 時所使用的對齊方法。值：auto,none,inter-word（增減單詞間距）,inter-ideograph(用表意文本來排齊),inter-cluster(對不包含內部單詞間隔內容對齊，如漢語）,kashida(對字元進行展開來對齊),distribute; text-outline* 文本輪廓,包含三個值：thickness,blur,color;第一個為必需的，後兩個為可選的； text-overflow* 文本溢出時處理；值：clip(修剪),ellipsis（顯示省略符號），string(用給定字元來顯示）； text-wrap* 換行規則，值：normal,none(不換行),unrestricted(在任意兩個字元間換行),suppress((壓縮元素中的換行）； word-break* 非中日韓文本換行規則，值：normal,break-all(允許在單詞內換行),keep-all(只能在半形空格或連字號處換行); word-wrap* 對長的不可分割單詞進行分割並換到一下行；值：normal,break-word(可在單詞內進行換行);
3.字型(font)
font-family 類型，如果字型名字超過一個單詞需要用引號包圍起來，可以同時指定多個字型，用於瀏覽器不支援一種字型，會繼續嘗試下一種字型 font-size 大小，預設是16px,值可以使用絕對大小px，也可以使用相對大小em，此單位在當前瀏覽器的16px基礎上進行縮放；還有：xx-samll,x-small,small,medium,large,x-large,xx-large,samller,larger; font-style 樣式，值有normal(預設)、italic（斜體）、oblique(傾斜)； font-variant 字型大小，值small-caps小型大寫字母字型，即雖然是大寫字母，但大小會比普通的小； font-weight 粗細，值有normal(預設,400)，bold(加粗，700)，lighter(更細)，也可以設為100-900的整百數值； font 字型所有屬性集合；
4.列表(ul)
list-style-image 清單項目標記映像，值為url('anypicture.png')； list-style-position 清單項目標記位置，值有inside(文本內)，outside(文本外，位於左側)； list-style-type 列表標記類型，值有none(無標記),disc(預設實心圓),circle(空心圓),square(實心方塊)，decimal(數字),以及羅馬英文拉丁等； list-style 列表所有屬性集合；順序依次為type,position,image;如果是對其子項進行選擇，只需使用ul li樣式選擇
5.邊框(border)
border 邊框所有屬性合集；對所有邊框設定統一格式，值為width style color的值；可預設，無順序要求； border-style 邊框所有樣式合集；一個值表示四邊，兩個值依次為上下、左右，三個值依次為上、左右、下，四個值為上、右、下、左； border-width 邊框所有寬度合集；賦值順序同上； border-color 邊框所有顏色合集；賦值順序同上； border-bottom 下邊框所有屬性合集；值為width style color的值；可預設，無順序要求； border-bottom-color 下邊框顏色，值為css顏色； border-bottom-style 下邊框樣式，值有none(無邊框)，hidden(同none，但在用於表格時除外)，dotted(點狀),dashed(虛線),solid(實線),double(雙線),groove(定義雙線，寬度為border-width),ridge(三維菱形),inset(三維凹邊框),outset(三維凸邊框)； border-bottom-width 下邊框寬度，值有medium(預設),thick,thin,像素值px; border-left 左邊框所有屬性合集； border-left-color 左邊框顏色； border-left-style 左邊框樣式； border-left-width 左邊框寬度； border-right 右邊框所有屬性合集； border-right-color 右邊框顏色； border-right-style 右邊框樣式； border-right-width 右邊框寬度； border-top 上邊框所有屬性合集； border-top-color 上邊框顏色； border-top-style 上邊框樣式； border-top-width 上邊框寬度； border-image* 以圖片為邊框樣式合集；例：{ -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */ -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */ border-image: url(border.png) 30 round;} border-image-source* 圖片源，值為url(源)； border-image-slice* 映像的邊界向內位移度，值為px,%,fill（保留映像的中間部分）； border-image-width* 映像邊界寬度，值為：auto,數字(border-width倍數)，%； border-image-outset* 設定在邊框外部繪製圖片的量，包括上右下左四個值（例：1 1 1 1 ），兩個值為上下、左右，三個值為上、左右、下；值為：數字（border-width倍數）,長度單位值； border-image-repeat* 圖片鋪陳樣式，值有stretch(預設展開)，repeat(平鋪)，round(平鋪，但如能完整平鋪則會進行縮放)，space(如不能完整平鋪，擴充空間分布在圖片周圍),initial,inherit; border-radius* 指定從左上方開始順時針四個角的圓角度，四個值，值可預設；值：長度單位，%； box-shadow* 把一個或多個下拉陰影添加到框上，例：h-shadow v-shadow blur spread color inset除了顏色外值都是長度單位值，前兩個是必填的，其他為可選；
6.輪廓(outline)
輪廓是位於邊框外圍的一條線，可起到突出元素的作用；
outline 所有輪廓屬性合集；無順序要求； outline-color 顏色；值為css顏色； outline-style 樣式；值有none(無邊框)，dotted(點狀),dashed(虛線),solid(實線),double(雙線),groove(定義雙線，寬度為outline-width),ridge(三維菱形),inset(三維凹邊框),outset(三維凸邊框) outline-width 寬度；值有medium(預設),thick,thin,像素值px;
7.外邊距(margin)
margin 四邊屬性合集，值可以是像素、厘米、百分比（相對父元素）；一個值表示四邊，兩個值依次為上下、左右，三個值依次為上、左右、下，四個值為上、右、下、左； margin-bottom 下外邊距；值可以是像素、厘米、百分比（相對父元素）； margin-left 左外邊距；值可以是像素、厘米、百分比（相對父元素）； margin-right 右外邊距；值可以是像素、厘米、百分比（相對父元素）； margin-top 上外邊距；值可以是像素、厘米、百分比（相對父元素）；
8.內邊距(padding)
padding 四邊屬性合集，值可以是像素、厘米、百分比（相對父元素）；一個值表示四邊，兩個值依次為上下、左右，三個值依次為上、左右、下，四個值為上、右、下、左； padding-bottom 下內邊距；值可以是像素、厘米、百分比（相對父元素）； padding-left 左內邊距；值可以是像素、厘米、百分比（相對父元素）； padding-right 右內邊距；值可以是像素、厘米、百分比（相對父元素）； padding-top 上內邊距；值可以是像素、厘米、百分比（相對父元素）；
9.元素尺寸(demension)
用於控制元素的高度和寬度，也可用於增加行間距；
height 元素高度；值為px、cm等單位定義高度，也可是%（基於包含它的塊級對象）； max-height 元素最大高度；值為px、cm等單位定義高度，也可是%（基於包含它的塊級對象）； min-height 元素最小高度；值為px、cm等單位定義高度，也可是%（基於包含它的塊級對象）； width 元素寬度；值為px、cm等單位定義高度，也可是%（基於包含它的塊級對象）； max-width 元素最大寬度；值為px、cm等單位定義高度，也可是%（基於包含它的塊級對象）； min-width 元素最小寬度；值為px、cm等單位定義高度，也可是%（基於包含它的塊級對象）；7 line-height 行高；值為px、cm等單位定義高度，也可是%（基於包含它的塊級對象）；
10.定位(position)
position 指定元素的定位類型；值有static(預設),absolute(絕對位置，相對static以外的第一個父元素進行定位),fixed(相對瀏覽器定位),relative(相對正常位置進行定位) bottom 定位元素下邊距邊界與其包含塊下邊界之間的位移，值為css單位值； left 定位元素左邊距邊界與其包含塊左邊界之間的位移，值為css單位值； right 定位元素右邊距邊界與其包含塊右邊界之間的位移，值為css單位值； top 定位元素上邊距邊界與其包含塊上邊界之間的位移，值為css單位值； clip 剪輯一個絕對位置的元素；值為rect(top,righ,bottom,left)座標的正方形，如果先有overflow,visible，那麼clip屬性則不起作用； cursor 顯示光線標移動到元素地區的顯示類型；值有url('picture'),default(預設),auto(瀏覽器預設),crosshair,pointer,move,e-resize,ne-resize,nw-resize,n-resize,se-resize,sw-resize,s-resize,w-resize,text,wait,help; overflow 元素內容溢出其地區時的處理;值有visible(預設呈現在元素框外),hidden(隱藏溢出部分),scroll(滾動顯示)； overflow-x 元素內容溢出左右地區時的處理;值有visible(預設呈現在元素框外),hidden(隱藏溢出部分),scroll(滾動顯示),auto(如果溢出，則提供滾動機制)，no-display(如果內容不適合框體，則刪除整個框),no-content(如果內容不適合框體，則隱藏整個內容)； overflow-y 元素內容溢出上下地區時的處理;值有visible(預設呈現在元素框外),hidden(隱藏溢出部分),scroll(滾動顯示),auto(如果溢出，則提供滾動機制)，no-display(如果內容不適合框體，則刪除整個框),no-content(如果內容不適合框體，則隱藏整個內容)； z-index 元素的堆疊順序；值為數字，可為負，數字越高越顯示在前邊；
11.浮動(float)
使元素會向左或右移動，其周圍的元素也會重新排列；清除這種效果需要使用clear屬性； float 值有left(向左浮動),right(向右浮動),none(不可浮動) clear 指定段落的左側或右側不允許浮動的元素；值有left,right,both,none;
12.其他屬性
opacity 透明度
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
詳解Vue列表渲染
在HTML中如何用<a>標籤編寫個人收藏夾
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
