講義地址：https://wizardforcel.gitbooks.io/liyanhui-tutorials/content/2.html
第十三章 CSS 選擇器[下]
一．偽類選擇器總匯
偽類選擇器分為四種類型：結構性偽類、UI 偽類、動態偽類和其他偽類選擇器，具體
如下：選擇器 名稱 說明 CSS 版本:root 根元素選擇器 選擇文檔中的根元素 3:first-child 子元素選擇器 選擇元素中第一個子元素 2:last-child 子元素選擇器 選擇元素中最后一個子元素 3:only-child 子元素選擇器 選擇元素中唯一子元素 3:only-of-type 子元素選擇器 選擇指定類型的唯一子元素 3:nth-child(n) 子元素選擇器 選擇指定 N 個子元素 3:enabled UI 選擇器 選擇啟用狀態的元素 3:disabled UI 選擇器 選擇禁用狀態的元素 3:checked UI 選擇器 選擇被選中 input 勾選元素 3:default UI 選擇器 選擇默認元素 3:valid UI 選擇器 驗證有效選擇 input 元素 3:invalid UI 選擇器 驗證無效選擇 input 元素 3:required UI 選擇器 有 required 屬性選擇元素 3:optional UI 選擇器 無 required 屬性選擇元素 3:link 動態選擇器 未訪問的超鏈接元素 1:visited 動態選擇器 已訪問的超鏈接元素 1:hover 動態選擇器 懸停在超鏈接上的元素 2:active 動態選擇器 激活超鏈接上的元素 2:foucs 動態選擇器 獲取焦點的元素 2:not 其他選擇器 否定選擇的元素 3:empty 其他選擇器 選擇沒有任何內容的元素 3:lang 其他選擇器 選取包含 lang 屬性的元素 2:target 其他選擇器 選取 URL 片段標識指向元素 3
二．結構性偽類選擇器結構性偽類選擇器能夠根據元素在文檔中的位置選擇元素。 這類元素都有一個前綴 （:） 。1.根元素選擇器
:root {border: 1px solid red;}解釋：匹配文檔中的根元素，基本不怎么用，因為總是返回<html>元素2.子元素選擇器
/**偽類都需要加上前置選擇器限制范圍*//**選擇第一個子元素*/ul>li:first-child { color : red;}/**選擇最后一個子元素*/ul > li:last-child { color:green;}/**選擇只有一個子元素的那個子元素。*/ul > li:only-child{ color:pink;}/**選擇只有一個指定類型的子元素的那個子元素*/div > p:only-of-type{ color : gray;}/**選擇子元素的第二個元素*/ul > li:nth-child(2) { color:blue;}/**選擇子元素倒數第二個元素。*/ul > li:nth-last-child(2) { color:orange;}/**選擇特定子元素的第二個元素*/div > p:nth-of-type(2) { color:red;}/**選擇特定子元素的第二個元素*/div > p:nth-last-of-type(2) { color:blue;}<body> <ul> <li>我是兒子</li> <li>我是兒子</li> <li>我是兒子</li> <li>我是兒子</li> <li>我是兒子</li> <li>我是兒子</li> <li>我是兒子</li> </ul> <hr> <ul> <li>唯一的子元素才適用</li> </ul> <hr> <div> <p>我是段落</p> <span>我不是段落</span> </div> <div> <p>我是段落</p> <p>我是段落</p> </div></body>三。UI偽類選擇器/**UI偽類選擇器*//**選擇啟用狀態的元素*//*input:enabled{ border:1px solid red;}*//**選擇禁用狀態的元素*/input:disabled{ border:1px solid blue;}/**選擇勾選的 input 元素。*//*input:checked{ display: none;}*//**從一組類似的元素中選擇默認元素。比如 input 被勾選的即默認的*/input:default{ display: none;}/**輸入驗證合法與不合法顯示時選擇的元素。需要html頁面增加驗證required屬性才有效*/input:valid{ border:1px solid green;}input:invalid{ border:1px solid red;}/**根據是否具有 required 屬性選擇元素*/input:required{ border:1px orange solid;}input:optional{ border:1px green solid;}<form> 禁用input：<input type="text" disabled=""> 可用input:<input type="text" ><br> 愛好：<input type="checkbox" name="hobby" value="sing">唱歌 valid/invalid:<input type="checkbox" name="hobby" checked="" value="dance">跳舞<br> <input type="text" required=""> <input type="email" required=""><br> required/optional:<input type="text" required=""> <input type="email" > <button>提交</button> </form>四。動態偽類選擇器/**動態偽類選擇器*//**:link 表示未訪問過的超鏈接，:visited 表示已訪問過的超鏈接。*/a:link { color:red;}a:visited { color:blue;}/**表示鼠標懸停在超鏈接上*/a:hover{ color:orange;}/**表示鼠標按下激活超鏈接時,即按住鼠標左鍵但沒松開時*/a:active{ color:green;}/**表示獲得焦點時*/input:focus{ border:2px green solid;}五。其他類型/**其他偽類選擇器*//**否定選擇器，反選*/a:not([href*="baidu"]) { color:orange;}/**匹配沒有任何內容的元素，如果去掉前置選擇器p，則hr br等標簽也會被隱藏*/p:empty{ display:none;}/**選擇包含 lang 屬性，屬性值前綴為 en 的元素。和屬性選擇器匹配結果一致*/p:lang(en) { color:green;}/**定位到錨點時，選擇此元素,如果html寫個id為mytarget，訪問頁面時加上#mytarget才可以看到效果*/b:target{ color:orange;}/**這是一個偽元素選擇器，當選擇文字時觸發選擇。CSS3 版本下的選擇器。*/::selection {color: pink;} <a href="http://www.baidu.com">百度</a> <a href="http://www.google.com">谷歌</a> <a href="http://www.haosou.com">好搜</a><br> <b id="mytarget">加粗</b> <p></p> <b>加粗</b> <p lang="en-us">abc</p>-------------------------------------------------------------------------------------------
第 14 章 CSS 顏色與度量單位
一、顏色表方案
在古老的 HTML4 時，顏色名稱只有 16 種。顏色名稱 十六進制代碼 十進制代碼 含義black #000000 0,0,0 黑色silver #c0c0c0192,192,192銀灰色gray #808080 128,128,128 灰色white #ffffff 255,255,255 白色maroon #800000128,0,0栗色red #ff0000 255,0,0 紅色purple #800080128,0,128紫色fuchsia #ff00ff255,0,255紫紅green #008000 0,128,0 綠色lime #00ff00 0,255,0 閃光綠olive #808000 128,128,0 橄欖色yellow #ffff00255,255,0黃色navy #000080 0,0,128 海軍藍blue #0000ff 0,0,255 藍色teal #008080 0,128,128 水鴨色aqua #00ffff 0,255,255 淺綠色當然，目前顏色名稱遠遠不止這些，可以搜索更多的 HTML 顏色表或 CSS 顏色表查閱。這里提供一些頁面如下：http://xh.5156edu.com/page/z1015m9220j18754.htmlhttp://finle.me/colors.htmlhttp://m.survivalescaperooms.com.cn/tags/html_ref_colornames.asp
@charset "utf-8";/**紅色的不同表示方法*/p { /*color : red;*/ /*color:#ff0000;*/ /*color:#f00;*/ /*color:rgb(255,0,0);*/ /**用 RGB 模型表示顏色*/ /*color:rgba(255,0,0,0.3);*/ /**同上，a 表示透明度 0~1 之間*/ /*color:hsl(0,100%,30%);*/ /**用 HSL 模型（色相、飽和度和透明度）來表示顏色*/ color:hsla(0,100%,30%,0.3); /**同上，a 表示透明度 0~1 之間*/}二、度量單位絕對長度指的是現實世界的度量單位，CSS 支持五種絕對長度單位。絕對長度單位單位標識符 說明in 英寸cm 厘米mm 毫米pt 磅pc pica相對長度指的是依托其他類型的單位，也是五種。相對長度單位單位標識符 說明em 與元素字號掛鉤ex 與元素字體的“x 高度”掛鉤rem 與根元素的字號掛鉤px 像素，與分辨率掛鉤% 相對另一值的百分比
body{ font-size:50px;}p{ margin: 0; padding: 0; background: gray;/**背景高度是相對的*/ /*font-size: 20px;*/ font-size:200%;/**相對于父元素而言，如body下設置為50px，則此時顯示為100px*/ /*height: 2em;*//**如果height為2em，則背景灰色高度為字體的兩倍*/ /*height:10px;*//**這個高度是絕對值，和字體大小無關*/ /*height:50%;*//**設置為多少，背景高度都不變，不知道原因。。*/ width:50%;/**背景灰色寬度為50%，相對于body元素即p的父元素而言的。*/}---------------------------------------------------------
第15章 css文本樣式
@charset "utf-8";body{ font-size: 50px;}p{ /*font-size : 30px;*/ /*font-size:xx-small;*/ /*font-size:xx-large;*/ /*font-size: small;*/ /*font-size: medium;*/ /*font-size: large;*/ /*font-size: x-small;*/ /*font-size: smaller;*//**相對于父元素的body里的設置而言*/ font-size: larger;/**相對于父元素的body里的設置而言*/ font-variant: small-caps;/**讓小寫字母以小型大寫字母顯示。。*/ /**設置字體是否傾斜：normal 表示讓傾斜狀態恢復到正常狀態。*/ /*font-style:italic;*//*表示使用斜體**/ font-style: oblique;/*表示讓文字傾斜。區別在沒有斜體時使用。*/ /**加粗：normal 表示讓加粗的字體恢復正常。bold：粗體;bolder,更粗的字體;lighter 輕細的字體;100 ~ 900 之間的數字 600 及之后是加粗，之前不加粗*,/ /*font-weight: bolder;*/ /*font-weight: lighter;*/ font-weight: 700; /**字體*/ /*font-family: 微軟雅黑,楷體,宋體;*//**從C盤里找的font字體，如果用戶沒有該字體則使用備用字體,優先級從左到右優先使用*/ /**簡寫方式*/ font:italic bolder small=small-caps 100px 楷體 ;/**大小和字體的設置放到最后，其他設置可以無序放到前面*/}一、文本匯總
| 屬性名 | 說明 | CSS 版本 |
|---|---|---|
| text-decoration | 裝飾文本出現各種劃線。 | 1 |
| text-transform | 將英文文本轉換大小寫。 | 1 |
| text-shadow | 給文本添加陰影 | 3 |
| text-align | 設置文本對齊方式 | 1,3 |
| white-space | 排版中的空白處理方式 | 1 |
| letter-spacing | 設置字母之間的間距 | 1 |
| Word-spacing | 設置單詞之間的間距 | 1 |
| line-height | 設置行高 | 1 |
| word-wrap | 控制段詞 | 3 |
| text-indent | 設置文本首行的縮進 | 1 |
@charset "utf-8";p{ font-size: 50px; /**文本裝飾*/ /*text-decoration: underline;*//*底部加一條下劃線*/ /*text-decoration: overline;*//**頭頂加下劃線*/ /*text-decoration: line-through;*//*中間貫穿線*/ /**英文大小寫轉換*/ /*text-transform: uppercase;*//*都轉為大寫*/ /*text-transform: lowercase;*//**都轉為小寫*/ text-transform: capitalize;/**將英文單詞首字母大寫*/ /**陰影：給文本添加陰影。其中四個值，第一個值：水平偏移；第二個值：垂直偏移；第三個值：陰影模糊度（可選）；第四個值：陰影顏色（可選）*/ text-shadow: 5px 5px 3px gray;}a{ text-decoration: none;/*去掉鏈接原來有的下劃線*/}三、文本控制p{/**文本控制*/ background: silver; /*text-align: left;*/ /*text-align: right;*/ /*text-align: center;*/ /*text-align: justify;*//**內容兩端對齊*/ /**處理空白排版方式*/ /*white-space: nowrap;*//**空白符被壓縮，文本不換行*/ /*white-space: PRe;*//**空白符被保留了，文本遇到換行符才換行*/ /*white-space: pre-line;*//*空白符被壓縮，文本會在排滿或遇換行符換行*/ white-space: pre-wrap;/*空白符被保留，文本會在排滿或遇換行符換行**/ letter-spacing: 4px;/**設置文本間距*/ word-spacing: 10px;/**設置英文單子之間的間距*/ line-height: 1.5;/**設置段落行高，normal-設置默認間距；長度值 比如：“數字”+“px”；數值 比如：1,2,3；% 比如：200%*/ word-wrap: break-word;/*讓過長的英文單詞斷開*/ text-indent: 100px;/*設置文本首行的縮進*/}----------------------------------第16章 css盒模型
一．元素尺寸CSS 盒模型中最基礎的就是設置一個元素的尺寸大小。有三組樣式來配置一個元素的尺寸大小，樣式表如下：屬性 值 說明CSS 版本width auto、長度值或百分比設置元素的寬度1height auto、長度值或百分比設置元素的高度1min-width auto、長度值或百分比設置元素最小寬度2min-height auto、長度值或百分比設置元素最小高度2max-width auto、長度值或百分比設置元素最大寬度2max-height auto、長度值或百分比設置元素最大高度2二．元素內邊距CSS 盒模型中可以設置元素內部邊緣填充空白的大小，我們成為內邊距。樣式表如下：屬性 值 說明CSS 版本padding-top 長度值或百分比設置頂部內邊距1padding-bottom 長度值或百分比設置底部內邊距1padding-left 長度值或百分比設置左邊內邊距1padding-right 長度值或百分比設置右邊內邊距1padding 1 ~ 4 個長度值或百分比簡寫屬性1
三．元素外邊距CSS 盒模型中可以設置元素外部邊緣填充空白的大小，我們成為外邊距。樣式表如下：屬性 值 說明CSS 版本margin-top 長度值或百分比設置頂部內邊距1margin-bottom 長度值或百分比設置底部內邊距1margin-left 長度值或百分比設置左邊內邊距1margin-right 長度值或百分比設置右邊內邊距1margin 1 ~ 4 長度值或百分比簡寫屬性1
@charset "utf-8";div{ background: silver; margin: 0; width:120px; height: 120px; /**這一組主要是應對可能動態產生元素尺寸變大變小的問題，從而限制它最大和最小的值。*/ /*min-width: 100px; min-height: 100px; max-width: 300px; max-height: 300px;*/ /**內邊距會增加總長度*/ /*padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px;*/ /*padding:10px 20px;*//**上下空出10px，左右空出20px*/ /*padding: 10px 20px 30px;*//**上10，下30，左右20*/ padding:10px 20px 30px 40px;/**順時針，上右下左*/ /**外邊距不會算到總長度里*/ margin-top: 50px; margin-left: 50px;}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css盒模型【上】</title> <link rel="stylesheet" type="text/css" href="css/style5.css"></head><body> <div>我是html5我是html5我是html5我是html5我是html5我是html5我是html5</div></body></html>四、處理溢出
當設置了元素固定尺寸且內容過大時，就會出現溢出的問題。溢出主要朝兩個方向：右側和底部。我們可以通過 overflow 系列樣式來控制它。
div{ /**處理溢出*/ /*overflow-y: visible;*//*默認值，不管是否溢出，都顯示內容*/ /*overflow-y: auto;*//*瀏覽器自行處理溢出內容，如果有溢出就顯示滾動體，否則不顯示*/ /*overflow-y: hidden;*//*如果有溢出內容，直接裁掉。*/ overflow-y: scroll;/*不管是否溢出，都會顯示滾動體，不同平臺顯示方式不一樣*/}五、元素可見性<body> <div>我是html5</div> abcde <table border="1"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table></body>@charset "utf-8";div{ background: silver; height: 200px; width: 200px; /*visibility: visible;*/ /*visibility: hidden;*//**元素不可見，但會占用空間*/}table tr:first-child { /*visibility:hidden;*/ visibility: collapse;/*元素不可見，隱藏表格的行與列，如果不是表格，則和 hidden 一樣。*/}六、元素盒類型CSS 盒模型中的 display 屬性，可以更改元素本身盒類型。那么元素有哪些盒類型呢？主要有：1.塊級元素（區塊）；2 行內元素（內聯）；3 行內-塊級元素（內聯塊）；4.隱藏元素。1.塊級元素所謂塊級元素，就是能夠設置元素尺寸、隔離其他元素功能的元素。比如：<div>、<p>等文檔元素。2.行內元素所謂行內元素，不能夠設置元素尺寸，它只能自適應內容、無法隔離其他元素，其它元素會緊跟其后。比如：<span>、<b>等文本元素。3.行內-塊元素所謂行內-塊元素，可以設置元素尺寸，但無法隔離其他元素的元素。比如<img>。
@charset "utf-8";div{ background: silver; height: 200px; width: 200px;}span{ background: yellow; height: 200px; width: 200px;}img{ height: 100px; width: 100px;}}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css盒模型（三）</title> <link rel="stylesheet" type="text/css" href="css/style7.css"></head><body> <div>我是塊級元素</div> <span>我是行內元素，不能設置高寬</span> <img src="0034TG2Qgy71wxSkoYh19&690.jpg"> adfad</body></html>有示例可知塊元素可以設置塊的高寬等，行元素設置背景高寬也不起作用，圖片可以設置大小，但不能隔離其他元素。下面的例子，展示如何互相轉換：
div{ background: silver; height: 200px; width: 200px; display: inline;}span { background: yellow; height: 200px; width: 200px; display: block;} <div>我是塊級元素，將要轉成行內元素</div> <span>我是行內元素，將要轉成塊級元素</span> adfad
下面的示例展示轉為行內塊：<div>我是塊級元素，將要轉成行內塊元素</div> <span>我是行內元素，將要轉成行內塊元素</span>div,span{ background: silver; height: 200px; width: 200px; display: inline-block;}
//將元素隱藏且不占位
div { display: none;}七、元素的浮動當一個元素盒子被浮動后，下面的元素會自動堆疊處理，導致元素不可見或部分不可見。我們可以使用 clear 屬性來處理。
屬性 值說明 CSS 版本clear none 允許兩邊均可浮動 1left 左邊界不得浮動 1right 右邊界不得浮動 1both 兩邊都不得浮動 1//兩邊均不可浮動#c { background: navy; clear: both;}
新聞熱點
疑難解答
