?CSS(Cascade Style Sheet)，即層級樣式表。
?HTML可以說只是給網頁填充了內容，CSS則是對網頁進行化妝、修飾，比如給文字設置字體、顏色、大小等。
?以前在HTML標簽中能夠通過設置屬性的方式(比如<div width="80px">)為標簽定義樣式（類似CSS的功能），但是現在推薦使用CSS設置(div{width:80px;})，即"HTML與CSS分離"，在web中還有“頁面展示與邏輯處理分離”等概念。
?一般來說目前實現網頁時不需要從零做起，網上有很多好的CSS代碼可以使用但是為了能看懂那些代碼（或更好地學習CSS框架），我們需要學習CSS的基本知識。
CSS的基本結構如下：
<selector>{ <attr1>:<value1>; <attr2>:<value2>; <attr3>:<value3>; ...... <attrN>:<valueN>;}解釋：
?<selector>的中文名叫“選擇器”，表示對哪個元素設置樣式。<selector>大括號內部設置具體的樣式，如字體等。
?設置樣式的方法是通過多對<attr>:<value>組合而成，中間用分號( ; )分隔。
這里舉個簡單的例子：
body{ //對<body>內的元素進行設置 font-size:12px; //設置字體大小為12px,px是pixel的縮寫，表示像素 font-family:sans-serif,Georgia; //設置首選字體為sans-serif,如果本機內沒安裝此字體，則使用Georgia}CSS的規則
1.繼承原則：如果父標簽定義了某樣式，則默認對應的子標簽也應用該樣式。
2.就近原則：離修飾標簽越近的CSS樣式優先級越高。
引入CSS樣式的方法
這里只介紹兩種最常用的：
1.內部樣式表：在<head></head>內部添加：<style type="text/css">......</style>
2.外部樣式表：將CSS放在文件(如home.css)中，并在<head></head>內部添加：<link rel="stylesheet" type="text/css" href="home.css"/>
?在CSS中不可避免會遇到顏色設置，因此這里我們需要學習怎么表示顏色。
?共有4種顏色表示法：
1.預定義顏色：例如“color:black”中的black就是預定義的顏色。
2.十六進制表示法：#ABCDEF，其中AB、CD、EF分別對應R、G、B。例子：#FFFFFF 表示白色。
3.短十六進制表示法：這是對第二種表示法的特例，當A=B時A和B只寫一個(同樣地，C=D、E=F 時也類似)。例子：#FF00CC 可簡寫為 #F0C.
4.rgb表示法：rgb(255,255,255) 表示白色。
CSS Reset
?起因：在不同瀏覽器中的默認CSS樣式可能是不同的，比如按鈕，在IE中可能是樣式A，在Chrome中是樣式B，在Firefox中是樣式C，這種不一致性會讓開發者不爽。因此就需要CSS Reset來統一不同瀏覽器的默認樣式。
?CSS reset 通俗地說就是“一段CSS代碼，這段代碼能夠初始化基本的標簽，使得在不同瀏覽器中，各標簽的顯示樣式是一樣的。”
?還有一個更加應用廣泛的替代CSS Reset的代碼：Normalize.css，他被很多框架使用。
?最常用的CSS Reset代碼是 Eric Meyer 寫的“CSS Reset 2.0”，代碼如下：
/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }* : 選擇任何元素。格式為：*{...}
?標簽選擇器：選擇指定標簽。格式為：<tag>{...}
?id選擇器：選擇指定 id 的元素。某個 id 在一個頁面中是唯一的。格式為：#<id>{...}
?class選擇器：選擇指定class的元素。格式為：.<class>{...}。值得一提的是，class選擇器的變型：
與標簽選擇器一起使用，格式為：<tag>.<class>。表示只選擇具有class=<class>的<tag>標簽。
多個class一起使用，格式為：.<class1>.<class2>。表示class同時屬于<class1>和<class2>的元素。
?后代選擇器：選擇指定元素的指定后代元素（后代和子元素是不同的，并不一定要緊跟在父元素里面）。格式為：<father> <空格><descendent> ，例如 div h3 解釋為“div元素的所有<h3>標簽”。
?子元素選擇器：選擇指定元素的子元素（子元素指的是孩子，并不包含孫子...）。格式為：<father> > <child>。
?屬性選擇器: 選擇具有指定屬性或指定屬性具有特定值的元素。格式為：<selector>[<attribute1>][<attribute2>]或<selector>[<attribute1>="<value1>"][<attribute2>="<value2>"]。
?部分匹配屬性值：<selector>[<attribute>*="<value>"] 表示只要<attribute>屬性中包含<value>值即可。
?相鄰兄弟選擇器：選擇(緊挨著的)相鄰的兄弟的元素。格式為：<selector1> + <selector2>。表示選擇緊跟在selector1后面的selector2。
?偽類選擇器：
?<selector>:first-child{...} . 當<selector>為某個元素的第一個子元素時應用樣式。
?<selector>:focus{...} . 當<selector>擁有鍵盤輸入焦點時應用樣式。
?a:link{...} . 當<a>未被訪問過時應用樣式。
?a:visited{...}. 當<a>已被訪問時應用樣式。
?a:hover{...} . 當鼠標懸浮在<a>上時應用樣式。（隨著移動設備的越來越流行，我們發現移動設備是沒有鼠標的，因此沒有hover這個概念，hover變得不那么重要了。）
?a:active{...}. 當<a>被激活(激活指的是鼠標按下且未松開的這段時間)時應用樣式。
?注意：在css中一定要以：link -> visited -> hover -> active 的順序進行聲明！！！！
?偽元素選擇器：
?<selector>:first-line{...}. 選擇<selector>的第一行。注意：<selector>必須是塊級元素。
?<selector>:first-letter{...}. 選擇<selector>的第一個字母。注意：<selector>必須是塊級元素。
?<selector>:before{content:"..."}. 在<selector>的前面插入內容。例如：h1:before{content:url(1.jpg)}表示在<h1>前面插入一張圖片。
?<selector>:after{content:"..."}. 在<selector>的后面插入內容。
?選擇器分組：多個選擇器可以用逗號（,）隔開，表示同時對多個選擇器設置樣式。格式為：<selector1>,<selector2>,<selector3>{...}
應用：
1.選擇一個有序列表中的第三行：ol > li:first-child + li + li
2.選擇class="c1"的div：div.c1
選擇器定義準則：
1.最常用的選擇器：id選擇器、class選擇器。
2.盡量少使用復雜層級關系。
新聞熱點
疑難解答
