標籤：san span pad 大於 不同 sid 相同 bsp selector
http://www.cnblogs.com/moveofgod/archive/2012/09/18/2691101.html
式樣定義 如何顯示 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 例子
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這個元素的class屬性*/color: red; /*按照優先順序,所以沒有變化*/}[dir] {/* 屬性*/color: yellow;}CSS 框模型概述
區塊層級元素( 例如 div , p )
浮動和定位( 布局 )
實施
首先定義 基本的CSS，例如統一的小標題，html標籤，body標籤，p標籤，等等，還有比如統一的滑鼠內容 a:hover，a:active 等等
然後定義 div 地區，和各個地區的細節屬性
收尾，查看需要調整的情況。
CSS 概念 & 作用
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
