css是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的子集)等檔案樣式的電腦語言。
CSS不僅可以靜態修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。
CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支援幾乎所有的字體字號樣式，擁有對網頁物件和模型樣式編輯的能力。深入學習請百度搜尋“php中文網CSS影片教學”，免費線上學習。
1.通用屬性
name：名稱，可以重複，可以一樣;class：類別名，可以重複，也可以擁有多個，給CSS用的；如<p class="one two"></p>;id：唯一標示，不能重複，一般多用在JavaScript中；命名規則與其他語言的標示命名規則一樣;
title：標題，可以在標籤中加入；如<img src="1.jpg" /title="這是圖片">;/
2.標籤關係
後代關係：父子關係（包含關係）;
兄弟關係：同父關係;
3.CSS-層疊樣式表
CSS註解：/註解內容寫在這裡，給程式設計師看，頁面上不顯示/;
CSS語法規則：所有符號都以英文輸入法狀態下輸入，要小寫，大括號裡寫屬性，每條屬性語句都以分號結束，屬性值要帶像素單位（px）；格式：屬性:屬性值;
4.CSS的引進方式
行內引入：在標籤中加樣式的引入方式；格式：<標籤style="background:red; font-size:20px;">內容</標籤>;注意：程式碼可維護性極差，CSS程式碼與html結構沒有實現分離；影響的範圍只在當前標籤;內嵌引入：在網頁頭部中加<style type="text/css">CSS樣式</style>;注意：代碼可維護性比較差，沒有實作CSS程式碼與HTML結構分離，影響範圍只在目前頁面;
外聯引入：在網頁外建立一個xx.css文件，網頁頭部中利用<link rel="stylesheet" type="text/css" href="xx.css">;注意：程式碼可維護性高， CSS程式碼與HTML結構完全分離，影響範圍整個網站所有引入CSS文件網頁中;
5.CSS核心文法：
結構格式：選擇器{屬性：屬性值；屬性：屬性值；...}；例：p{background:red;color:gray;size:20px;};選擇器：選擇頁面元素的工具;
大括號：大括號裡面寫樣式內容;
6.選擇器
基礎選擇器：
通用選擇器：用來初始化網頁預設樣式的，樣式表開頭就寫；格式：*{padding:0;margin:0;};標籤選擇器:給指定標籤加樣式；格式：p{color:green; };類別選擇器：選擇制定類別選擇器樣式；格式:.class名稱{background:pink;};注意：class名稱在標籤中定義，如class="one";如果幾個區塊內容樣式一樣，那麼給他們一樣的樣式就可以;
id選擇器：唯一標示，不能重複出現；格式：#id名{backgound-image:url(1.jpg);}注意：id名在標籤中定義id="one";id不能隨表加，幾個區塊內容樣式一樣時幾個區塊的id名都得不一樣;;
id和class的差別：注意上一點－ID必須能唯一的確定DOM節點。如果你全篇都使用ID選擇器，那麼即使兩個DOM節點樣式完全相同，那麼你也必須把節點樣式寫兩遍, 如果後期要進行維護,那麼你必須對兩處的代碼都進行維護！ ！ ！極大的增加了維護的成本;
偽類選擇器：順序LoVe HAte原則，可以跳過去，但順序不能換；分別是連結狀態(link)，訪問過的狀態(visited)，活動狀態(hover)和點擊狀態(active);
描點類別：a:link{color:yellow;} a:visited{color:blue;} a:hover{color:red;} a:active{color:pin;} 取得焦點時的樣式a:focus{};注意：屬性中可以加文字屬性，背景顏色和圖片；a{}與a:link{}實現的效果是一樣的;列表類別：li:link{color:yellow;};li:visited{color:blue ;} li:hover{color:red;} li:active{color:pin;};注意：屬性中可以加文字系列屬性，背景顏色和圖片等;
複合選擇器：
分組選擇器（並集選擇器，多重選擇器）：用來為多個元素加同一個樣式；例：.one,#one,a,span{color:red;font-size:14px;}意思是類one,#one,a標籤，span標籤有共同屬性;後代選擇器：給子類元素加屬性;例：.one a{text-decoration:none;}意思是類one的後代a標籤修飾的內容無底線;子元素選擇器（指定式選擇器）：為指定的子元素加屬性；例：#one>p{color:red;};意思是給id選擇器one的兒子p標籤休息的內容加屬性;
相鄰元素選擇器：
1.兩個緊鄰的兄弟選擇器加屬性,不給自己加屬性，只給後面的兄弟加屬性；.one+p{background:red;};2.one~p{background:green}意思是給one選擇器後面的所有p標籤元素加屬性，前提是他們擁有一個父類別;
屬性選擇器：
1.給帶有屬性的元素的加屬性;img[id]{background:red;}給帶id的元素加屬性;
給指定屬性值的元素加屬性：img[src="b.jpg"]{background:red;}給帶b.jpg的元素加屬性;
3.為帶有指定字元開頭的元素加屬性：img[src^="b"]{background:red;}給以b開頭的所有元素加屬性;4.選擇器帶有以指定屬性值為結尾的元素：img[src$="b"]{background:red;}給以b結尾的所有元素加屬性;5.選擇器帶有包含指定屬性值的元素:img[src*="b" ]{background:red;}為含b的所有元素加屬性;
7.元素包含（顯示方式的分類）
塊元素：用來排版，結構典型的有：p，p，li，h1，dt;
元素本身獨佔一行顯示（與寬度無關）;可以設定寬度和高度;
當嵌套一個區塊級元素，子元素如果不設定寬度，那麼該子元素的寬度為父元素的寬度;
行內元素： 用來加樣式的；span,a,font,strong;注意：行內元素不要給上下的margin和padding，上下會被忽略，左右起作用（一般不用）;
元素在一行上顯示;
不能直接設定寬度和高度;
行內區塊元素：image,input;
元素在一行上顯示;
可以設定寬度和高度;
轉換關係：行內包含行內；塊元素包含塊元素，塊元素可以包含行內元素;
Display: inline 將元素轉換為行內元素Display：inline-block 將元素轉換行內區塊元素
Display: block 將元素轉化為區塊元素
8.CSS的屬性
字體有關屬性：
font-size:字體大小，多少像素，px;font-weight:字體粗細，bold（700-900），normal，可以寫100-900;font-style：字體傾斜，italic，normal;font-family:字體，微軟雅黑，黑體;
屬性連寫：font: font-style font-weight font-size/line-height font-family;注意： font屬性聯寫必須有font-size 和font-family(其他屬性可以不寫)；font-size 和font -family的順序不能換;
文字:
color:顏色;text-indent：縮排【單位是em】;text-decoration：文字線【underline下劃線，overline上劃線，line-through刪除線，none取消線】;word-spacing:單字間距離;letter-spacing：字母鍵距離;text-align：水平對齊方式【預設left，center，right】;
line-height：行高，文字所在行的高度【行高和元素高度相等時文字垂直居中】;
尺寸：是塊元素的尺寸，行內元素不可以設定寬高，想設定得轉換;
width：寬度;
height：高度;
列表ul，li的屬性：list-style-type在ul中加了可以的li中不用加;
list-style-type:none;去掉符號,square方塊，circle圓，disc實體圓，加圖了後可以不寫也可以list-style-type:none;list-style-image:url(1.jpg)圖片border:1px solid red;給ul整體設定邊框
list-style-position:outside;樣式圖片定位：inside,outside
背景：
背景顏色background-color;背景圖片background-image注意：設定背景圖片的時候一定要設定寬度和高度;背景平鋪background-repeat：repeat （預設值）|no-repeat （不平鋪）|repeat-x | （橫向平鋪）repeat-y （縱向平鋪）背景位置background-position：設定具體值： left| right| top| bottom| cneter；設定具體值的時候不區分先後順序；設定具體數字的時候，第一個值代表水平方向，第二個值代表垂直方向，設定前背景圖片設定格式改成background-image;設定背景是否固定background-attachment： Scroll（預設值）捲動;fixed （圖片固定）;
屬性聯寫：沒有數量限制和先後順序限制：background:url("") red no-peat 30px 40px;
行高line-height:盒子模型：用來進行網頁佈局，必須設定寬度
盒子邊框屬性：組成部分：
邊框寬高：border-width:1px;邊框顏色：border-color:red;邊框樣式：border-style:solid實線/dotted點線/dashed虛線/none無;屬性聯寫：border:1px solid red;注意：屬性聯寫的時候沒有先後順序限制，邊框顏色可以不寫，邊框寬度可以不寫分開寫法：border邊框：padding內邊距：設定內容距離盒子邊框之間的距離
margin外邊距： 設定盒子與盒子之間的距離
p{width:300px;height:200px;border-top:1px solid red;border-left:1px solid red;border-right:1px solid red;border-bottom:1px solid red;}
單獨設定屬性法：
border-top-color:red;border-top-style:solid;border-top-width:1px;
盒子大小：
盒子大小影響的地方：繼承的盒子再父盒子寬度範圍內，padding值不會影響該盒子大小盒子大小計算： 寬度=內容寬度+左右邊框+左右內邊距
邊框可以影響盒子大小內邊距影響盒子大小
以後進行頁面盒子佈局的實現，如果給盒子設定了內邊距，對應的要將內容寬度或高度減去對應的值
margin外邊距： 設定盒子與盒子之間的距離
盒子居中：屬性聯寫：
標準流下的盒子居中:margin:0px auto;定位的盒子居中：先走父盒子的一半，再往回走自己寬度的一半Margin: 10px 上右下左10pxMargin:10px 20px 上下10px 20pxMargin: 10px 20px 30px上10px 左右20px 下30px
Margin: 10px 20px 30px 40px 上右下左
注意：
屬性聯寫：
Padding: 10px; 上，右，下，左的距離為10pxPadding: 10px 20px; 上下10px 左右20pxPadding: 10px 20px 30px；上10px 左右20px 下30px
Padding: 10px 20px 30px 40px; 上， 右， 下， 左
當兩個盒子垂直顯示的時候，外邊距以設定的最大值為準（外邊距合併的第一種情況），當兩個盒子橫排顯示時，外邊距疊加外邊距塌陷（有難問題）解決步驟：
padding內邊距：設定內容距離盒子邊框之間的距離
給父盒子設定邊框
給父盒子設定overflow:hidden;
清除邊距：
方法1：*{padding：0；margin：0；}
方法2: Body,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,p,span{margin:0px;padding:0px;}
9.CSS的三大特性
繼承性：
可繼承性：color，text-align，text-indent，font-size，font-weight，font-family不可繼承：text-decoration，border，display，margin，float，padding繼承性發生的前提是標籤之間屬於一種嵌套關係文字顏色可以實現繼承；文字大小可以實現繼承；字體可以實現繼承；與文字有關的屬性都可以實現繼承行高可以實現繼承
特殊性：
不能繼承父元素中的文字顏色（層疊了）
<h1></h1> 標題標籤不能繼承父元素中的文字大小
重疊性：層疊性是指樣式的覆蓋
樣式的層疊性與樣式的呼叫順序沒有關係，與樣式的定義順序有關。
層疊性發生的前提： 樣式衝突
優先：
權重：行內引入（1000）>id(100)>class(10)>標籤（1）>通用(0)把權重相加，值越大越有先
權重一樣，後面的樣式起作用
10.補充知識筆記
表單最佳化寫法：<lable for="one">使用者名稱：</lable><input type="text" id="one">格式化清單圖示：list-style: none表單合併：border-collapse:collapse (設定表格邊框合併，適用於表格）Bfc 「格式化上下文」overflow:
visible:預設值。內容不會被修剪，會呈現在元素框之外hidden:內容會被修剪，並且其餘內容是不可見的;當圖片改變位置時帶動父元素也改變位置，給父元素加此屬性值可使父元素位置不變scroll:內容會被修剪，但是瀏覽器會顯示捲軸以便查看其餘的內容
auto:如果內容被修剪，則瀏覽器會顯示捲軸以便查看其餘的內容
11.標準流：區塊級元素獨佔一行顯示；標準流的顯示方式：元素預設的顯示方式
12.浮動：浮動用來解決文字圖片環繞問題；用來製作導覽欄，網頁版面
用法： Float:left| right 特點：要浮動都浮動
設定了浮動的元素不佔原來的位置（脫標）可以讓區塊級元素在一行上顯示浮動可以行內元素轉換為行內塊元素
模式轉換的過程中，能用display就用display
清除浮動：
定義：清除浮動不是刪除浮動；清除浮動指的是清除浮動的影響注意使用時機：當子元素設定了浮動，父元素沒有高度的時候，造成頁面佈局混亂；這種情況下進行清除浮動。
清除浮動方法：[x]注意：在要清除浮動的元素後面添加一個空塊元素（<p></p>,標籤），在添加的空元素中加clear:both | left |right
13.定位：方位：left、right、top、bottom （詳情請移步php中文網css教學頻道）
靜態定位：靜態定位就是元素標準流的顯示方式position:static;就是預設的定位
絕對定位：相對於定位元素的父元素或祖先元素定位，如果父元素和祖先元素不存在定位，就會找到最初的包含層；不佔有先前的位置；position：absolute；
當給一個單獨的元素設定絕對定位，以瀏覽器左上角（body）為基準設定定位的。當盒子發生嵌套關係的時候，如果父盒子沒有設定定位，子盒子設定定位以瀏覽器左上角為基準設定定位。當盒子發生嵌套關係的時候，如果父盒子設定定位，子盒子設定定位父盒子左上角為基準設定定位。為盒子設定了絕對定位，該盒子不佔位置（脫標）給行內元素設定絕對定位後，該元素轉換為了行內塊元素
注意：元素設定了絕對定位後，透過特定的方位名稱可以隨便設定元素的位置
相對定位：相對於元素原位置，會佔有先前位置；position：relative；
元素設定了相對定位後佔原來的位置設定相對定位以自己的位置為參照設定位置相對定位不能進行元素的模式轉換
子絕父相（子元素設定絕對定位，父元素設定相對定位）
固定定位：相對於整個穩當固定不變；固定定位不佔位置（脫標）;將行內元素轉換為行內塊元素position:fixed
層級問題：
只有設定到定位才會有層級問題兄弟元素中存在相對，絕對等定位，誰的HTML文檔結構在後面，誰在最外層（層級高）
Z-index:設定層級，值是數字，只要有定位就會用到定位設定
14. CSS之精靈兔：選擇透明文檔
瀏覽器中的座標系圓點以右為正方向，圓點以下為正CSS精靈是一種處理網頁背景影像的方式；精靈圖也是一種背景圖片
精靈圖的使用
使用fw一定要用開啟的方式開啟精靈圖使用精靈圖作為背景圖片的時候，常與background-position配合使用測量精靈圖中的元素的座標使用矩形選擇器
或使用快捷鍵字母： k
15. CSS可見性
overflow: hidden 將超出部分進行隱藏display: none 直接將元素隱藏display：block 將元素顯示(與js配合更搭)visibility:hidden 將元素隱藏display: none; 將元素隱藏後不佔位置
visibility: hidden; 隱藏元素後佔原來的位置
16. 圖片和文字居中
每一種inlne-block元素都有一個預設的vertical-align:baseline
vertical-align:middle 垂直對齊；vertical-align與inline-block 比較搭配；
17.規避脫標流
網頁佈局過程中能用標準流就用標準流標準流不能解決浮動浮動不能解決定位
使用margin-left/margin-right 取值為auto可以將盒子自動衝到兩外一邊
18. 標籤包含規範
p可以包含任何標準流下的標籤p標籤不能包含p和標題標籤和清單標籤標題便籤可以包含其他標籤
行內元素最好不要包含其他標籤
19. 設定寬高的總結
在浮動之後，元素可以設定寬高在絕對定位後，元素可以設定寬高
在固定定位後，元素可以設定寬高
20. 提升至CSS3
CSS3和CSS2：CSS功能強大，程式碼簡潔
偽類選擇器：
第一個子元素：first-child最好一個元素：last-child第n個子元素：nth-child（n）;n給數值奇數為子元素：nth-child(odd);或（nth-child( 2n+1)）
偶數位子元素：nth-child(even)；或（nth-child(2n)）
文字陰影：text-shadow：水平，垂直，陰影盒子陰影：box-shaadow:水平，、垂直，陰影
背景：background