讲义地址：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://www.Vevb.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;}
新闻热点
疑难解答
