CSS作用 & 介紹
式樣定義 如何顯示 HTML內容
通常存儲在式樣表中
作用 : 解決內容與表現分離的問題 ( MVC 模型 , model : html , view : css , control : JavaScript )
外部式樣表可以極大的提高效率 , 例如要修改網頁中標題的表現形式 , 如果網頁中有100個標題, 如果使用HTML進行修改, 則需要修改100次, 如果使用CSS進行修改, 則只需要修改1次就OK了, 因為內容與表現分離了, 所以可以將表現(式樣表)保存起來, 未了以后使用
式樣表可以 層疊出現 , 后邊的式樣會將前邊的式樣覆蓋 , 比如規定標題式樣為 a , 而其中幾個頁面想改變這種式樣, 就可以再加入式樣表, 只是針對這些進行修改 .
層疊次序 : 1. 瀏覽器默認
2. 外部式樣表
3. 內部式樣表(位於 <head>標簽內部 )
4. 內聯式樣(在 html元素內部)
基本格式
css規則是由兩部分組成 : 選擇器 以及 一條或多條聲明. selector { declaration1 , declaration2 ......} 選擇器通常是一個html元素, 每條屬性是一個屬性和一個值組成.屬性和值用:號分開.例如 : h1{ color:red ; font-size:14px ; }
選擇器可以分組: 組內設置同樣的樣式. 例如 : h1, h2, h3 {} 這樣的作用是, h1, h2, h3 中的式樣是相同的.
繼承及問題: 子元素可以從父元素繼承屬性, 所以，父元素在定義屬性時，要注意，不能太細節化，導致有的子元素不需要該細節，也被繼承過來。 例如 body { font-family : Verdana ;} 那么body內的子元素, 例如 p, td, ul 等等全部會使用 verdana 字體. (部分)
css派生選擇器: 是指多個元素標簽在一起作用的css樣式 , 后代選擇器 , 子元素選擇器 , 相鄰兄弟選擇器 (全部都有,誰先誰后, 必須有順序 )
后代選擇器 : 例如 h1 em { color : red ;} <h1> This is a <em>heading</em></h1> 其中的heading式樣不同, 因為是 h1 與em的共同作用.
子元素選擇器 : h1 >strong { color : red ;} 注意此處的 > 號 , 表示在 h1內部的所有的 strong標簽內部的式樣, 請看如下例子
<h1> This is a <strong> very </strong> important</h1> --> 此時的 very滿足式樣規則 ( 中間再有別的標簽也不要緊 )
<h1>This is a<em>really<strong>very</strong></em>important</h1> -->此時不滿足如上規則 h1>strong, 因為在strong外層還有一個em標簽. 即 必須strong直接跟着h1. ( 有順序的 )
后代選擇器 與 子選擇器的區別 : 后代選擇器是指所有后代，即 如上例子， <h1> 與 <em> 之間可以由其他標簽都沒關系， 而子選擇器僅指它的直接后代，標簽之中不能再有其他標簽，后代選擇器使用 空格，而子選擇器使用 > 大於號。
相臨兄弟選擇器 : 如果選擇緊接在另一個元素后的元素, 或者二者有相同的父元素, 例如 : h1 +p { margin-top : 50px ; } 這個選擇器讀作 : "緊接在h1元素后出現的段落元素p, h1和p擁有共同的父元素 " , 用一個結合符 + 只能針對兩個兄弟中的第2個以后進行式樣變更, 即+號后邊的內容.
例如一個標題h1元素后面緊跟了兩個段落p元素，我們想定位第一個段落p元素，對它應用樣式。我們就可以使用相鄰同胞選擇器 。 這也就是緊接在另一個元素后的含義。
id選擇器: 可以為標有特定 id 的 HTML 元素指定特定的樣式 . 以 # 號定義 . #red { color : red ; } #blue { color : blue ; } <p id = "red"> 這個段落是紅的</p> <p id= "green">這個段落是綠的</p> , 可以組合使用 , #sidebar p { color : red ;} 此時 在標記了 id = "sidebar" 元素內部的 p 就會有特殊的意義, 跟別的 段落 p 就會不同 .
類選擇器 : .center {text -align : center ; } <h1class="center"> this is a center </h1> 類選擇器是以 . 點開頭定義的, 同樣可以組合使用, 例如 .center p { color : red ; }其意義就是class是center的元素內的所有的段落 p 都和別的段落 p 不一樣 .
css屬性選擇器: 對帶有指定屬性的 HTML 元素設置式樣, [title] { color : blue ;} 這樣的話, 對於所有帶 title 屬性的 html 元素都會 設置相應樣式 , 還可以設置 : [title = W3C] { color : blue ; } 這樣就是不是所有的帶title屬性的html元素都變更, 而只是 title = W3C 的那個些 html 元素式樣會相應變更 . 再例如 input [type = "text"] 組合使用... 另外, 這種屬性選擇器例如 input[type = "text"] , 其中input與[type="text"]之間不能有空格, 因為它們在HTML中表示一個整體.
css偽類 : CSS 偽類用於向某些選擇器添加特殊的效果。
錨偽類
1 a:link {color: #FF0000} /* 未訪問的鏈接 */ 2 a:visited {color: #00FF00} /* 已訪問的鏈接 */ 3 a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */ 4 a:active {color: #0000FF} /* 選定的鏈接 */
偽類可以與 CSS 類配合使用：
a.red: visited {color: #FF0000} <a class="red" href="css_syntax.asp">CSS Syntax</a>
一般偽類只能作用於 <a> 這個標簽使用。
如何插入式樣表
外部式樣表: 當式樣需要應用於多個頁面時, 這種辦法很好 , 使用 <link>標簽, 來鏈接到式樣表, <link>標簽應該在文檔頭部 : <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /></head> ( 屬性值與其單位之間不要有空格 , 例如 20px )
<link rel=”stylesheet” href=”style.css”type=”text/css”>
內部式樣表: 當單個文檔需要特殊的樣式時, 可以使用 <style>標簽在文檔頭部定義內聯式樣表, 例如 : <head><style type= "text/css" > hr { color : blue ;} </style></head>, 慎用內聯式樣表.
多重式樣 : 如果某些屬性在不同的式樣表中被同樣的選擇器定義, 那么屬性值將從更具體的樣式表中被繼承過來. 其實就是重疊的功能, 例如 : 外部式樣表 : h3 { color : blue ; text-align : left ; font-size : 8pt ;} 而內部式樣表針對 h3的選擇器 : h3{ text-aglin:right ; font-size:20pt;} 所以最后得到的結果為 { color : blue ; text-again:right ; font-size : 20pt ;} 即外部式樣的內容會先使用, 然后再用內部式樣表的進行覆蓋, 相同屬性覆蓋掉了, 外部多余屬性保留 .
顏色不同表示法 :
1) red -- 英文單詞
2) #ff0000 -- 16進制
3) rgb(255,0,0) --3元色
4) rgb(100%, 0%, 0%) --百分比
CSS 例子
轉型 例子
CSS 框模型概述
塊級元素( 例如 div , p )
浮動和定位( 布局 )
實施
首先定義 基本的CSS，例如統一的小標題，html標簽，body標簽，p標簽，等等，還有比如統一的鼠標內容 a:hover，a:active 等等
然后定義 div 區域，和各個區域的細節屬性
收尾，查看需要調整的情況。