http://www.cnblogs.com/moveofgod/archive/2012/09/18/2691101.html
式樣定義 如何顯示 HTML內(nèi)容
通常存儲(chǔ)在式樣表中
作用 : 解決內(nèi)容與表現(xiàn)分離的問題 ( MVC 模型 , model : html , view : css , control : JavaScript )
外部式樣表可以極大的提高效率 , 例如要修改網(wǎng)頁中標(biāo)題的表現(xiàn)形式 , 如果網(wǎng)頁中有100個(gè)標(biāo)題, 如果使用HTML進(jìn)行修改, 則需要修改100次, 如果使用CSS進(jìn)行修改, 則只需要修改1次就OK了, 因?yàn)閮?nèi)容與表現(xiàn)分離了, 所以可以將表現(xiàn)(式樣表)保存起來, 未了以后使用
式樣表可以 層疊出現(xiàn) , 后邊的式樣會(huì)將前邊的式樣覆蓋 , 比如規(guī)定標(biāo)題式樣為 a , 而其中幾個(gè)頁面想改變這種式樣, 就可以再加入式樣表, 只是針對(duì)這些進(jìn)行修改 .
層疊次序 : 1. 瀏覽器默認(rèn)
2. 外部式樣表
3. 內(nèi)部式樣表(位于 <head>標(biāo)簽內(nèi)部 )
4. 內(nèi)聯(lián)式樣(在 html元素內(nèi)部)
css規(guī)則是由兩部分組成 : 選擇器 以及 一條或多條聲明. selector { declaration1 , declaration2 ......} 選擇器通常是一個(gè)html元素, 每條屬性是一個(gè)屬性和一個(gè)值組成.屬性和值用:號(hào)分開.例如 : h1{ color:red ; font-size:14px ; }
選擇器可以分組: 組內(nèi)設(shè)置同樣的樣式. 例如 : h1, h2, h3 {} 這樣的作用是, h1, h2, h3 中的式樣是相同的.
繼承及問題: 子元素可以從父元素繼承屬性, 所以，父元素在定義屬性時(shí)，要注意，不能太細(xì)節(jié)化，導(dǎo)致有的子元素不需要該細(xì)節(jié)，也被繼承過來。 例如 body { font-family : Verdana ;} 那么body內(nèi)的子元素, 例如 p, td, ul 等等全部會(huì)使用 verdana 字體. (部分)
css派生選擇器: 是指多個(gè)元素標(biāo)簽在一起作用的css樣式 , 后代選擇器 , 子元素選擇器 , 相鄰兄弟選擇器 (全部都有,誰先誰后, 必須有順序 )
后代選擇器 : 例如 h1 em { color : red ;} <h1> This is a <em>heading</em></h1> 其中的heading式樣不同, 因?yàn)槭?h1 與em的共同作用.
子元素選擇器 : h1 >strong { color : red ;} 注意此處的 > 號(hào) , 表示在 h1內(nèi)部的所有的 strong標(biāo)簽內(nèi)部的式樣, 請(qǐng)看如下例子
<h1> This is a <strong> very </strong> important</h1> --> 此時(shí)的 very滿足式樣規(guī)則 ( 中間再有別的標(biāo)簽也不要緊 )
<h1>This is a<em>really<strong>very</strong></em>important</h1> -->此時(shí)不滿足如上規(guī)則 h1>strong, 因?yàn)樵趕trong外層還有一個(gè)em標(biāo)簽. 即 必須strong直接跟著h1. ( 有順序的 )
后代選擇器 與 子選擇器的區(qū)別 : 后代選擇器是指所有后代，即 如上例子， <h1> 與 <em> 之間可以由其他標(biāo)簽都沒關(guān)系， 而子選擇器僅指它的直接后代，標(biāo)簽之中不能再有其他標(biāo)簽，后代選擇器使用 空格，而子選擇器使用 > 大于號(hào)。
相臨兄弟選擇器 : 如果選擇緊接在另一個(gè)元素后的元素, 或者二者有相同的父元素, 例如 : h1 +p { margin-top : 50px ; } 這個(gè)選擇器讀作 : "緊接在h1元素后出現(xiàn)的段落元素p, h1和p擁有共同的父元素 " , 用一個(gè)結(jié)合符 + 只能針對(duì)兩個(gè)兄弟中的第2個(gè)以后進(jìn)行式樣變更, 即+號(hào)后邊的內(nèi)容.
例如一個(gè)標(biāo)題h1元素后面緊跟了兩個(gè)段落p元素，我們想定位第一個(gè)段落p元素，對(duì)它應(yīng)用樣式。我們就可以使用相鄰?fù)x擇器 。 這也就是緊接在另一個(gè)元素后的含義。
id選擇器: 可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式 . 以 # 號(hào)定義 . #red { color : red ; } #blue { color : blue ; } <p id = "red"> 這個(gè)段落是紅的</p> <p id= "green">這個(gè)段落是綠的</p> , 可以組合使用 , #sidebar p { color : red ;} 此時(shí) 在標(biāo)記了 id = "sidebar" 元素內(nèi)部的 p 就會(huì)有特殊的意義, 跟別的 段落 p 就會(huì)不同 .
類選擇器 : .center {text -align : center ; } <h1class="center"> this is a center </h1> 類選擇器是以 . 點(diǎn)開頭定義的, 同樣可以組合使用, 例如 .center p { color : red ; }其意義就是class是center的元素內(nèi)的所有的段落 p 都和別的段落 p 不一樣 .
css屬性選擇器: 對(duì)帶有指定屬性的 HTML 元素設(shè)置式樣, [title] { color : blue ;} 這樣的話, 對(duì)于所有帶 title 屬性的 html 元素都會(huì) 設(shè)置相應(yīng)樣式 , 還可以設(shè)置 : [title = W3C] { color : blue ; } 這樣就是不是所有的帶title屬性的html元素都變更, 而只是 title = W3C 的那個(gè)些 html 元素式樣會(huì)相應(yīng)變更 . 再例如 input [type = "text"] 組合使用... 另外, 這種屬性選擇器例如 input[type = "text"] , 其中input與[type="text"]之間不能有空格, 因?yàn)樗鼈冊(cè)贖TML中表示一個(gè)整體.
css偽類 : CSS 偽類用于向某些選擇器添加特殊的效果。
偽類可以與 CSS 類配合使用：
a.red: visited {color: #FF0000}<a class="red" href="css_syntax.asp">CSS Syntax</a>
一般偽類只能作用于 <a> 這個(gè)標(biāo)簽使用。
外部式樣表: 當(dāng)式樣需要應(yīng)用于多個(gè)頁面時(shí), 這種辦法很好 , 使用 <link>標(biāo)簽, 來鏈接到式樣表, <link>標(biāo)簽應(yīng)該在文檔頭部 : <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /></head> ( 屬性值與其單位之間不要有空格 , 例如 20px )
<link rel=”stylesheet” href=”style.css”type=”text/css”>
內(nèi)部式樣表: 當(dāng)單個(gè)文檔需要特殊的樣式時(shí), 可以使用 <style>標(biāo)簽在文檔頭部定義內(nèi)聯(lián)式樣表, 例如 : <head><style type= "text/css" > hr { color : blue ;} </style></head>, 慎用內(nèi)聯(lián)式樣表.
多重式樣 : 如果某些屬性在不同的式樣表中被同樣的選擇器定義, 那么屬性值將從更具體的樣式表中被繼承過來. 其實(shí)就是重疊的功能, 例如 : 外部式樣表 : h3 { color : blue ; text-align : left ; font-size : 8pt ;} 而內(nèi)部式樣表針對(duì) h3的選擇器 : h3{ text-aglin:right ; font-size:20pt;} 所以最后得到的結(jié)果為 { color : blue ; text-again:right ; font-size : 20pt ;} 即外部式樣的內(nèi)容會(huì)先使用, 然后再用內(nèi)部式樣表的進(jìn)行覆蓋, 相同屬性覆蓋掉了, 外部多余屬性保留 .
顏色不同表示法 :
1) red -- 英文單詞
2) #ff0000 -- 16進(jìn)制
3) rgb(255,0,0) --3元色
4) rgb(100%, 0%, 0%) --百分比
body { /* 元素 */ color:blue;}h1,h2,h3,h4,h5,h6 { color: blue; font-size: 20px; }p { color: green; font-size: 15px; font-family: "sans serif"; text-align: center; background-color: gray; /*背景色*/ padding: 10px; /*向外延伸 , 寬了*/}#myid p { /* id + 元素 */ color: red;}.center { /* class */ text-align: center; }h1.center { /*表示h1這個(gè)元素的class屬性*/ color: red; /*按照優(yōu)先級(jí),所以沒有變化*/}[dir] { /* 屬性*/ color: yellow;}
首先定義 基本的CSS，例如統(tǒng)一的小標(biāo)題，html標(biāo)簽，body標(biāo)簽，p標(biāo)簽，等等，還有比如統(tǒng)一的鼠標(biāo)內(nèi)容 a:hover，a:active 等等
然后定義 div 區(qū)域，和各個(gè)區(qū)域的細(xì)節(jié)屬性
收尾，查看需要調(diào)整的情況。
聯(lián)系客服
