CSS3-01 簡介
概述
HTML 文檔由包含 HTML 標籤的 HTML 元素組成，HTML 標籤被用於定義文檔的內容。HTML 文檔內容沒有額外的樣式，以純文本流的方式渲染到瀏覽器頁面。須要藉助層疊樣式表（CSS）來賦予 HTML 文檔絢爛奪目的樣式。 CSS（Cascading Style Sheets），又叫層疊樣式表。其定義了 HTML 元素的樣式，且多個樣式會層疊爲一（最終的效果須要視狀況而定，一般遵循「就近原則」）。CSS 可使用 style 屬性定義在開標籤內部（即內聯樣式表）。但一般狀況下，咱們會將 HTML5 樣式使用 CSS 定義在單獨的 CSS 文件中（即外部樣式表）。而在 HTML 文檔中連接指定的 CSS 文件，瀏覽器會根據 CSS 文件來渲染 HTML 文檔的內容。還有一種是使用 <style> 標籤訂義在 HTML 文檔頭部的樣式表（即內部樣式表）
使用外部樣式表
- 步驟
- 建立 CSS 文件 mystyle.css
- 一般 CSS 文件會有不少，咱們會將其放到指定的文件夾中。具體由項目架構而定（如有機會會分享相關知識）。
在 HTML 文檔中連接外部樣式表css
<link rel="stylesheet" href="mystyle.css">
- 建立 CSS 文件 mystyle.css
- 示例
CSS 文件html
body { background-color: yellow; }HTML 文檔算法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 連接到外部樣式表 --> <link rel="stylesheet" href="mystyle.css"> </head> <body> This is body of HTML document. </body> </html>效果圖瀏覽器
如何去選擇 HTML 元素
使用 CSS 的目的是爲 HTML 元素設置樣式，那麼前提是：先選擇指定的元素。CSS 使用 id 和 class 選擇器來選擇指定的元素，即在定義 HTML 元素時，須要指定 id 或 class 屬性。也能夠經過 HTML 標籤來選擇指定的元素。
- 使用 id 和 class 選擇器選擇 HTML 元素
- id 選擇器
- 使用方法
- 使用 # 來定義
- 不能有兩個相同 id 的元素
- 使用方法
- class 選擇器
- 使用方法
- 使用 . 來定義
- class 屬性能夠在多個元素中使用
- 使用方法
- 示例
HTML 文檔ruby
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 連接到外部樣式表 --> <link rel="stylesheet" href="mystyle.css"> </head> <body> <h1 id="mainhead">這是一個標題</h1> <p class="paragraph">這是一個段落</p> <p class="paragraph">這是另外一個段落</p> </body> </html>CSS 文件架構
#mainhead { text-align: center; } .paragraph { color: red; }
效果圖app
- id 選擇器
- 使用組合選擇符選擇 HTML 元素
- 四種組合方式
- 後代選擇器，使用空格分隔
- 子元素選擇器，使用大於號分隔
- 相鄰兄弟選擇器，使用加號分隔
- 普通兄弟選擇器，使用破折號分隔
- 示例
HTML 文檔框架
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 連接到外部樣式表 --> <link rel="stylesheet" href="mystyle.css"> </head> <body> <div> <p>段落 1。在 div 中。（div 的子元素）</p> <span><p>段落 2。在 div 中。（div 的後代）</p></span> </div> <p>段落 3。不在 div 中。（div 的相鄰兄弟）</p> <p>段落 4。不在 div 中。（div 的普通兄弟）</p> </body> </html>CSS 文件dom
/*須要注意一下樣式表的層疊效果*/ /*後代選擇器*/ div p { background-color: red; } /*子元素選擇器*/ div>p { background-color: green; } /*普通兄弟選擇器*/ div~p { background-color: orange; } /*相鄰兄弟選擇器*/ div+p { background-color: blue; }效果圖ide
- 四種組合方式
- 使用分組和嵌套選擇器
分組選擇器
h1,h2 { color: red; }嵌套選擇器
.description p { color: blue; }
- 僞類 和 僞元素
- 做用
- 僞類 和 僞元素 都是爲增長 CSS 選擇器的特殊效果
- 僞類
- 使用方法
CSS 選擇器與僞類結合
selector: pseudo-class {property: value;}CSS 類與僞類結合
selector.class: pseudo-class {property: value;}
CSS 中全部的僞類
選擇器 示例 說明 :link a:link 選擇全部未訪問的連接 :visited a:visited 選擇全部訪問過的連接 :hover a:hover 把鼠標放在連接上的狀態 :active a:active 選擇正在活動的連接 :focus input:focus 選擇元素輸入後具備焦點 :first-child p:first-child 匹配任意元素（如：p）的第一個子元素 :lang p:lang(it) 爲 <p> 元素的 lang 屬性選擇一個開始值 示例
HTML 文檔
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- 連接到外部樣式表 --> <link rel="stylesheet" type="text/css" href="mystyles.css"> </head> <body> <p>訪問： <a href="http://www.cnblogs.com/theDesertIslandOutOfTheWorld/">世俗孤島</a></p> </body> </html>CSS 文件
/*未訪問的連接*/ a:link { color: red; } /*已訪問的連接*/ a:visited { color: blue; } /*鼠標滑過連接*/ a:hover { color: gray; } /*已選中的連接*/ a:active { color: green; }
效果圖
- 使用方法
- 僞元素
- 使用方法
CSS 選擇器與僞類結合
selector: pseudo-element {property: value;}CSS 類與僞類結合
selector.class: pseudo-element {property: value;}
CSS 中全部的僞元素
選擇器 示例 說明 :first-letter p:first-letter 選擇每一個 <p> 元素的第一個字符 :first-line p:first-line 選擇每一個 <p> 元素的第一行 :before p:before 在每一個 <p> 元素以前插入內容 :after p:after 在每一個 <p> 元素以後插入內容 - 示例
HTML 文檔
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- 連接到外部樣式表 --> <link rel="stylesheet" type="text/css" href="mystyles.css"> </head> <body> <p class="paragraph">誰的曾經不苦逼；給本身一點點時間；一生也學不會苟且；</p> <br/> <p>誰的曾經不苦逼；給本身一點點時間；一生也學不會苟且；</p> </body> </html>CSS 文件
/*做用於全部的 <p> 標籤*/ p:first-line { color: blue; } p:first-letter { color: red; font-size: 30px; } /*只做用於類標識爲 "paragraph" 的 <p> 標籤*/ p.paragraph:before { content: "世俗孤島："; } p.paragraph:after { content: " -- Island"; }
效果圖
- 使用方法
- 做用
CSS 的全部屬性
文本（Text）
屬性 說明 CSS版本 color 文本顏色 1 direction 文本方向/書寫方向 2 letter-spacing 字符間距 1 word-spacing 單詞間距 1 line-height 行高 1 text-align 文本的水平對齊方式 1 text-align-last 當 text-align 設置爲 justify 時，最後一行的對齊方式 3 text-justify 當 text-align 設置爲 justify 時指定分散對齊的方式 3 vertical-align 元素的垂直對齊方式 1 text-indent 文本塊首行的縮進 1 text-overflow 指定當文本溢出包含的元素，應該發生什麼 3 text-wrap 指定文本換行規則 3 word-break 指定非 CJK 文字的斷行規則 3 word-wrap 設置瀏覽器是否對過長的單詞進行換行 3 hanging-punctuation 指定一個標點符號是否可能超出行框 3 punctuation-trim 指定一個標點符號是否要去掉 3 white-space 設置怎樣給給一元素控件留空白 1 text-decoration 添加到文本的裝飾效果 1 text-outline 設置文字的輪廓 3 text-shadow 爲文本添加陰影 3 text-transform 控制文本的大小寫 1 顏色（Color）
屬性 說明 CSS版本 color-profile 容許使用源的顏色配置文件的默認之外的規範 3 opacity 設置一個元素的透明度級別 3 rendering-intent 容許超過默認顏色配置文件渲染意向的其餘規範 3 字體（Font）
屬性 說明 CSS版本 font 在一個聲明中設置全部字體屬性 1 font-family 規定文本的字體系列 1 font-size 規定文本的字體尺寸 1 font-style 規定文本的字體樣式 1 font-variant 規定文本的字體樣式 1 font-weight 規定字體的粗細 1 @font-face 一個規則，容許網站下載並使用其餘超過"Web- safe"字體的字體 3 font-size-adjust 爲元素規定 aspect 值 3 font-stretch 收縮或拉伸當前的字體系列 3 背景
屬性 說明 CSS版本 background 複合屬性。設置對象的背景特性 1 background-attachment 設置或檢索背景圖像是隨對象內容滾動仍是固定的。必須先指定background-image屬性 1 background-color 設置或檢索對象的背景顏色 1 background-image 設置或檢索對象的背景圖像 1 background-position 設置或檢索對象的背景圖像位置。必須先指定background-image屬性 1 background-repeat 設置或檢索對象的背景圖像如何鋪排填充。必須先指定background-image屬性 1 background-clip 指定對象的背景圖像向外裁剪的區域 3 background-origin S設置或檢索對象的背景圖像計算background-position時的參考原點(位置) 3 background-size 檢索或設置對象的背景圖像的尺寸大小 3 邊框（Border）
屬性 說明 CSS版本 border 複合屬性。設置對象邊框的特性 1 border-color 置或檢索對象的邊框顏色 1 border-style 設置或檢索對象的邊框樣式 1 border-width 設置或檢索對象的邊框寬度 1 border-radius 設置或檢索對象使用圓角邊框 3 border-image 設置或檢索對象的邊框樣式使用圖像來填充 3 border-top 複合屬性。設置對象頂部邊框的特性 1 border-right 複合屬性。設置對象右邊邊框的特性 1 border-bottom 複合屬性。設置對象底部邊框的特性 1 border-left 複合屬性。設置對象左邊邊框的特性 1 border-top-color 設置或檢索對象的頂部邊框顏色 1 border-right-color 設置或檢索對象的右邊邊框顏色 1 border-bottom-color 設置或檢索對象的底部邊框顏色 1 border-left-color 設置或檢索對象的左邊邊框顏色 1 border-top-style 設置或檢索對象的頂部邊框樣式 1 border-right-style 設置或檢索對象的右邊邊框樣式 1 border-bottom-style 設置或檢索對象的底部邊框樣式 1 border-left-style 設置或檢索對象的左邊邊框樣式 1 border-top-width 設置或檢索對象的頂部邊框寬度 1 border-right-width 設置或檢索對象的右邊邊框寬度 1 border-bottom-width 設置或檢索對象的底部邊框寬度 1 border-left-width 設置或檢索對象的左邊邊框寬度 1 border-top-left-radius 定義左上角邊框的形狀 3 border-top-right-radius 定義右上角邊框的形狀 3 border-bottom-right-radius 定義右下角邊框的形狀 3 border-bottom-right-radius 定義右下角邊框的形狀 3 border-bottom-left-radius 定義左下角邊框的形狀 3 border-image-source 規定要使用的圖像，代替 border-style 屬性中設置的邊框樣式 3 border-image-width 規定圖像邊框的寬度 3 border-image-outset 規定邊框圖像超過邊框的量 3 border-image-slice 規定圖像邊框的向內偏移 3 border-image-repeat 規定圖像邊框是否應該被重複（repeated）、拉伸（stretched）或鋪滿（rounded） 3 box-decoration-break 規定行內元素被折行 3 box-shadow 向方框添加一個或多個陰影 3 輪廓（Outline）
屬性 說明 CSS版本 outline 複合屬性。設置或檢索對象外的線條輪廓 2 outline-color 設置或檢索對象外的線條輪廓的顏色 2 outline-style 設置或檢索對象外的線條輪廓的樣式 2 outline-width 設置或檢索對象外的線條輪廓的寬度 2 彈性盒子模型（Flexible Box）
屬性 說明 CSS版本 box-align 指定如何對齊一個框的子元素 3 box-direction 指定在哪一個方向，顯示一個框的子元素 3 box-orient 指定一個框的子元素是否在水平或垂直方向應鋪設 3 box-pack 指定橫向盒在垂直框的水平位置和垂直位置 3 box-lines 每當它在父框的空間運行時，是否指定將再上一個新的行列 box-ordinal-group 指定一個框的子元素的顯示順序 3 box-flex 指定一個框的子元素是不是靈活的或固定的大小 3 box-flex-group 指派靈活的元素到Flex組 3 內邊距（Padding）
屬性 說明 CSS版本 padding 在一個聲明中設置全部填充屬性 1 padding-top 設置元素的頂部填充 1 padding-right 設置元素的右填充 1 padding-bottom 設置元素的底填充 1 padding-left 設置元素的左填充 1 外邊距（Margin）
屬性 說明 CSS版本 margin 在一個聲明中設置全部外邊距屬性 1 margin-top 設置元素的上外邊距 1 margin-right 設置元素的右外邊距 1 margin-bottom 設置元素的下外邊距 1 margin-left 設置元素的左外邊距 1 超連接（Hyperlink）
屬性 說明 CSS版本 target 簡寫屬性設置target-name, target-new,和target-position屬性 3 target-name 指定在何處打開連接（目標位置） 3 target-new 指定是否有新的目標連接打開一個新窗口或在現有窗口打開新標籤 3 target-position 指定應該放置新的目標連接的位置 3 列表（List）
屬性 說明 CSS版本 list-style 在一個聲明中設置全部的列表屬性 1 list-style-image 將圖象設置爲列表項標記 1 list-style-position 設置列表項標記的放置位置 1 list-style-type 設置列表項標記的類型 1 多列（Multi-column）
屬性 說明 CSS版本 columns 縮寫屬性設置列寬和列數 3 column-width 指定列的寬度 3 column-span 指定元素應該跨越多少列 3 column-count 指定元素應該分爲的列數 3 column-gap 指定列之間的差距 3 column-fill 指定如何填充列 3 column-rule 對於設置全部column-rule-*屬性的簡寫屬性 3 column-rule-color 指定列之間的顏色規則 3 column-rule-style 指定列之間的樣式規則 3 column-rule-width 指定列之間的寬度規則 3 表格（Table）
屬性 說明 CSS版本 caption-side 規定表格標題的位置 2 border-collapse 規定是否合併表格邊框 2 border-spacing 規定相鄰單元格邊框之間的距離 2 empty-cells 規定是否顯示錶格中的空單元格上的邊框和背景 2 table-layout 設置用於表格的佈局算法 2 網格（Grid）
屬性 說明 CSS版本 grid-columns 指定在網格中每列的寬度 3 grid-rows 指定在網格中每行的高度 3 尺寸（Dimension）
屬性 說明 CSS版本 height 設置元素的高度 1 max-height 設置元素的最大高度 2 min-height 設置元素的最小高度 2 width 設置元素的寬度 1 max-width 設置元素的最大寬度 2 min-width 設置元素的最小寬度 2 盒子（Box）
屬性 說明 CSS版本 rotation 圍繞由 rotation-point 屬性定義的點對元素進行旋轉 3 rotation-point 定義距離上左邊框邊緣的偏移點 3 overflow-style 規定溢出元素的首選滾動方法 3 overflow-x 若是內容溢出了元素內容區域，是否對內容的左/右邊緣進行裁剪 3 overflow-y 若是內容溢出了元素內容區域，是否對內容的上/下邊緣進行裁剪 3 定位（Position）
屬性 說明 CSS版本 position 規定元素的定位類型 2 display 規定元素應該生成的框的類型 1 visibility 規定元素是否可見 2 cursor 規定要顯示的光標的類型（形狀） 2 top 設置定位元素的上外邊距邊界與其包含塊上邊界之間的偏移 2 right 設置定位元素右外邊距邊界與其包含塊右邊界之間的偏移 2 bottom 設置定位元素下外邊距邊界與其包含塊下邊界之間的偏移 2 left 設置定位元素左外邊距邊界與其包含塊左邊界之間的偏移 2 float 規定框是否應該浮動 1 clear 規定元素的哪一側不容許其餘浮動元素 1 z-index 設置元素的堆疊順序 2 overflow 規定當內容溢出元素框時發生的事情 2 clip 剪裁絕對定位元素 2 線框（Linebox）
屬性 說明 CSS版本 text-height 行內框的文本內容區域設置block-progression維數 3 alignment-adjust 容許更精確的元素的對齊方式 3 alignment-baseline 其父級指定的內聯級別的元素如何對齊 3 dominant-baseline 指定scaled-baseline-table 3 baseline-shift 容許從新定位相對於dominant-baseline的dominant-baseline 3 line-stacking 一個速記屬性設置line-stacking-strategy, line-stacking-ruby,和line-stacking-shift屬性 3 line-stacking-ruby 設置包含Ruby註釋元素的行對於塊元素的堆疊方法 3 line-stacking-shift 設置base-shift行中塊元素包含元素的堆疊方法 3 line-stacking-strategy 設置內部包含塊元素的堆疊線框的堆疊方法 3 inline-box-align 設置一個多行的內聯塊內的行具備前一個和後一個內聯元素的對齊 3 drop-initial-size 控制局部的首字母下沉 3 drop-initial-value 激活一個下拉式的初步效果 1 drop-initial-before-adjust 設置下拉的輔助鏈接點的初始對齊點 3 drop-initial-before-align 校準行內的初始行的設置就是具備首字母的框使用輔助鏈接點 3 drop-initial-after-adjust 設置下拉的主要鏈接點的初始對齊點 3 drop-initial-after-align 校準行內的初始行的設置就是具備首字母的框使用初級鏈接點 3 用戶外觀（User-interface）
屬性 說明 CSS版本 appearance 定義元素的外觀樣式 3 resize 定義元素是否能夠改變大小 3 box-sizing 容許您爲了適應區域以某種方式定義某些元素 3 outline-offset 設置輪廓框架在 border 邊緣外的偏移 3 icon 爲元素指定圖標 3 nav-index 指定導航（tab）順序 3 nav-up 指定用戶按向上鍵時向上導航的位置 3 nav-down 指定用戶按向下鍵時向下導航的位置 3 nav-left 指定用戶按向左鍵時向左導航的位置 3 nav-right 指定用戶按向右鍵時向左導航的位置 3 內容生成（Generated Content）
屬性 說明 CSS版本 content 與 :before 以及 :after 僞元素配合使用，來插入生成內容 3 move-to 使元素從文檔流的一處移動到另外一處 3 crop 容許replaced元素只是做爲一個對象代替整個對象的矩形區域 3 quotes 設置嵌套引用的引號類型 3 page-policy 斷定基於頁面的給定元素的適用於計數器的字符串值 3 counter-reset 建立或重置一個或多個計數器 3 counter-increment 遞增或遞減一個或多個計數器 3 頁面媒體（Paged Media）
屬性 說明 CSS版本 page 指定一個元素應顯示的頁面的特定類型 3 size 指定含有BOX的頁面內容的大小和方位 3 image-orientation 指定用戶代理適用於圖像中的向右或順時針方向的旋轉 3 fit 若是其寬度和高度屬性都不是auto給出一個提示，如何大規模替換元素 3 fit-position 斷定方框內對象的對齊方式 3 媒體頁面內容
屬性 說明 CSS版本 hyphens 設置如何分割單詞以改善該段的佈局 3 hyphenate-character 指定了當一個斷字發生時，要顯示的字符串 3 hyphenate-lines 表示連續斷字的行在元素的最大數目 3 hyphenate-resource 外部資源指定一個逗號分隔的列表，能夠幫助肯定瀏覽器的斷字點 3 hyphenate-before 指定一個斷字的單詞斷字字符前的最少字符數 3 hyphenate-after 指定一個斷字的單詞斷字字符後的最少字符數 3 marks 將crop and/or cross標誌添加到文檔 3 bookmark-label 指定書籤的標籤 3 bookmark-level 指定了書籤級別 3 bookmark-target 指定了書籤連接的目標 3 float-offset 在相反的方向推進浮動元素，他們一直具備浮動 3 image-resolution 指定了正確的圖像分辨率 3 string-set 3 字幕（Marquee）
屬性 說明 CSS版本 marquee-style 設置內容移動的樣式 3 marquee-direction 設置內容移動的方向 3 marquee-speed 設置內容滾動的速度有多快 3 marquee-play-count 設置內容移動多少次 3 語音（Speech）
屬性 說明 CSS版本 voice-volume 語音合成是指波形輸出幅度 3 voice-rate 控制語速 3 voice-stress 指示着重力度 3 voice-pitch 指定平均說話的聲音的音調（頻率） 3 voice-pitch-range 指定平均間距的變化 3 voice-balance 指定了左，右聲道之間的平衡 3 voice-duration 指定應採起呈現所選元素的內容的長度 3 rest 一個縮寫屬性設置rest-before和rest-after屬性 3 rest-before 一個元素的內容講完以前，指定要休息一下或遵照韻律邊界 3 rest-after 一個元素的內容講完以後，指定要休息一下或遵照韻律邊界 3 mark 縮寫屬性設置mark-before和mark-after屬性 3 mark-before 容許命名的標記鏈接到音頻流 3 mark-after 容許命名的標記鏈接到音頻流 3 phonemes 指定包含文本的相應元素中的一個音標發音 3 分頁（Print）
屬性 說明 CSS版本 page-break-before 設置元素前的分頁行爲 2 page-break-after 設置元素後的分頁行爲 2 page-break-inside 設置元素內部的分頁行爲 2 orphans 設置當元素內部發生分頁時必須在頁面底部保留的最少行數 2 widows 設置當元素內部發生分頁時必須在頁面頂部保留的最少行數 2 Ruby
屬性 說明 CSS版本 ruby-position 它的base控制Ruby文本的位置 3 ruby-align 控制Ruby文本和Ruby基礎內容相對彼此的文本對齊方式 3 ruby-span 控制annotation 元素的跨越行爲 3 ruby-overhang 當Ruby文本超過Ruby的基礎寬，肯定ruby文本是否容許局部懸置任意相鄰的文本，除了本身的基礎 3 過渡（Transition）
屬性 說明 CSS版本 transition 此屬性是 transition-property、transition-duration、transition-timing-function、transition-delay 的簡寫形式 3 transition-property 設置用來進行過渡的 CSS 屬性 3 transition-duration 設置過渡進行的時間長度 3 transition-delay 指定過渡開始的時間 3 transition-timing-function 設置過渡進行的時序函數 3 2D / 3D 轉換
屬性 說明 CSS版本 transform 適用於2D或3D轉換的元素 3 transform-origin 容許您更改轉化元素位置 3 transform-style 3D空間中的指定如何嵌套元素 3 perspective 指定3D元素是如何查看透視圖 3 perspective-origin 指定3D元素底部位置 3 backface-visibility 定義一個元素是否應該是可見的，不對着屏幕時 3 動畫
屬性 說明 CSS版本 animation 複合屬性。檢索或設置對象所應用的動畫特效 3 @keyframes 定義一個動畫,@keyframes定義的動畫名稱用來被animation-name所使用 3 animation-name 檢索或設置對象所應用的動畫名稱 ,必須與規則@keyframes配合使用，由於動畫名稱由@keyframes定義 3 animation-duration 檢索或設置對象動畫的持續時間 3 animation-delay 檢索或設置對象動畫的延遲時間 3 animation-timing-function 檢索或設置對象動畫的過渡類型 3 animation-iteration-count 檢索或設置對象動畫的循環次數 3 animation-direction 檢索或設置對象動畫在循環中是否反向運動 3 animation-play-state 檢索或設置對象動畫的狀態 3
相關文章
- 1. unity3d 簡介_Unity 3D簡介
- 2. jdbc簡介_JDBC簡介
- 3. servlet簡介_Servlet簡介
- 4. mysql-front簡介_MySQL-簡介
- 5. tensorflow簡介_TensorFlow簡介
- 6. tensorflow簡介_TensorFlow-簡介
- 7. keras 簡介_Keras-簡介
- 8. webgl簡介_WebGL簡介
- 9. Linux 介紹簡介
- 10. 簡介
- 更多相關文章...
- • Scala 簡介 - Scala教程
- • AJAX 簡介 - PHP教程
- • Github 簡明教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章