H5知识点大总结勾起你的欲望

来源：互联网发布：java个人简历自我评价编辑：程序博客网时间：2024/04/29 15:58

第 13 章CSS 选择器[下]

学习要点：1.伪类选择器总汇2.结构性伪类选择器 3.UI伪类选择器4.动态伪类选择器5.其他伪类选择器

本章主要探讨 HTML5 中CSS 选择器中的伪类选择器，和伪元素选择器一样，面向某种共同特征来选择元素。

一．伪类选择器总汇

伪类选择器分为四种类型：结构性伪类、UI 伪类、动态伪类和其他伪类选择器，具体如下：

选择器

名称

说明

CSS 版本

:root

根元素选择器

选择文档中的根元素

:first-child

子元素选择器

选择元素中第一个子元素

:last-child

子元素选择器

选择元素中最后一个子元素

:only-child

子元素选择器

选择元素中唯一子元素

:only-of-type

子元素选择器

选择指定类型的唯一子元素

:nth-child(n)

子元素选择器

选择指定 N 个子元素

:enabled

UI 选择器

选择启用状态的元素

:disabled

UI 选择器

选择禁用状态的元素

:checked

UI 选择器

选择被选中 input 勾选元素

:default

UI 选择器

选择默认元素

:valid

UI 选择器

验证有效选择 input 元素

:invalid

UI 选择器

验证无效选择 input 元素

:required

UI 选择器

有 required 属性选择元素

:optional

UI 选择器

无 required 属性选择元素

:link

动态选择器

未访问的超链接元素

:visited

动态选择器

已访问的超链接元素

:hover

动态选择器

悬停在超链接上的元素

:active

动态选择器

激活超链接上的元素

:foucs

动态选择器

获取焦点的元素

:not

其他选择器

否定选择的元素

:empty

其他选择器

选择没有任何内容的元素

:lang

其他选择器

选取包含 lang 属性的元素

:target

其他选择器

选取 URL 片段标识指向元素

二．结构性伪类选择器

结构性伪类选择器能够根据元素在文档中的位置选择元素。这类元素都有一个前缀（:）。

1.根元素选择器

:root {

border: 1px solid red;

}

解释：匹配文档中的根元素，基本不怎么用，因为总是返回<html>元素。

2.子元素选择器

ul > li:first-child {

color: red;

}

解释：选择第一个子元素。

ul > li:last-child {

color: red;

}

解释：选择最后一个子元素。

ul > li:only-child {

color: red;

}

解释：选择只有一个子元素的那个子元素。

div > p:only-of-type {

color: red;

}

解释：选择只有一个指定类型的子元素的那个子元素。

3.:nth-child(n)系列

ul > li:nth-child(2) {

color: red;

}

解释：选择子元素的第二个元素。

ul > li:nth-last-child(2) {

color: red;

}

解释：选择子元素倒数第二个元素。

div > p:nth-of-type(2) {

color: red;

};

解释：选择特定子元素的第二个元素。

div > p:nth-last-of-type(2) {

color: red;

};

解释：选择特定子元素的倒数第二个元素。

二．UI 伪类选择器

UI 伪类选择器是根据元素的状态匹配元素。

1.:enabled

:enabled {

border: 1px solid red;

}

解释：选择启用状态的元素。

2.:disabled

:disabled {

border: 1px solid red;

}

解释：选择禁用状态的元素。

3.:checked

:checked {

display: none;

}

解释：选择勾选的 input 元素。

4.:default

:default {

display: none;

}

解释：从一组类似的元素中选择默认元素。比如input 被勾选的即默认的。

5.:valid 和:invalid

input:valid {

border: 1px solid blue;

}

input:invalid {

border: 1px solid green;

}

解释：输入验证合法与不合法显示时选择的元素。

6.:required 和:optional

input:required {

border: 1px solid blue;

}

input:optional {

border: 1px solid green;

}

解释：根据是否具有 required 属性选择元素。

三．动态伪类选择器

动态伪类选择器根据条件的改变匹配元素。

1.:link 和 visited

a:link { color: red;

}

a:visited { color: orange;

}

解释：:link 表示未访问过的超链接，:visited 表示已访问过的超链接。

2.:hover

a:hover {

color: blue;

}

解释：表示鼠标悬停在超链接上。

3.:active

a:active {

color: green;

}

解释：表示鼠标按下激活超链接时。

4.:focus

input:focus {

border: 1px solid red;

}

解释：表示获得焦点时。

四．其他伪类选择器

1.:not

a:not([href*="baidu"]) {

color: red;

}

解释：否定选择器，反选。

2.:empty

:empty {

display: none;

}

解释：匹配没有任何内容的元素。

3.:lang

:lang(en) {

color: red;

}

解释：选择包含 lang 属性，属性值前缀为en 的元素。和属性选择器匹配结果一致。

4.:target

:target {

color: red;

}

解释：定位到锚点时，选择此元素。

5.::selection

::selection {

color: red;

}

解释：这是一个伪元素选择器，当选择文字时触发选择。CSS3 版本下的选择器。

第 14 章CSS 颜色与度量单位

学习要点：1.颜色表方案2.度量单位

本章主要探讨 HTML5 中CSS 颜色和度量单位等问题，包括颜色的选取方式、相对长度和绝对长度等。

一．颜色表方案

颜色的表现形式主要有三种方式：颜色名称、十六进制代码和十进制代码。

p {

color: red;

}

解释：这是将一个段落内的文字设置为红色，采用的是英文颜色名称。问题是，其他各种颜色我们将如何设置？

在古老的 HTML4 时，颜色名称只有16 种。

颜色名称

十六进制代码

十进制代码

含义

black

#000000

0,0,0

黑色

silver

#c0c0c0

192,192,192

银灰色

gray

#808080

128,128,128

灰色

white

#ffffff

255,255,255

白色

maroon

#800000

128,0,0

栗色

red

#ff0000

255,0,0

红色

purple

#800080

128,0,128

紫色

fuchsia

#ff00ff

255,0,255

紫红

green

#008000

0,128,0

绿色

lime

#00ff00

0,255,0

闪光绿

olive

#808000

128,128,0

橄榄色

yellow

#ffff00

255,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.html

http://finle.me/colors.html

http://www.w3school.com.cn/tags/html_ref_colornames.asp

在上面的表格中，我们也罗列出对应的十六进制和十进制颜色表示方法。使用方法如下：//红色的十六进制方案

p {

color: #ff0000;

}

十进制表示方法就比较多样化，有四种方案：

函数

说明

示例

rgb(r,g,b)

用 RGB 模型表示颜色

rgb(0,128,128)

rgba(r,g,b,a)

同上，a 表示透明度0~1 之间

rgba(0,128,128,0.5)

hsl(h,s,l)

用 HSL 模型（色相、饱和度

hsl(120,100%,30%)

和透明度）来表示颜色

hsla(h,s,l,a)

同上，a 表示透明度0~1 之间

hsla(120,100%,30%,0.5)

p {

color: rgb(112, 128, 114); color: rgba(0, 128, 128, 0.5); color: hsl(120, 100%, 30%);

color: hsla(120, 100%, 30%, 0.5);

}

目前又有一个疑问，这些值从哪里获取。除了颜色表之外，想要微调自己的颜色值。我们可以使用 photoshop 等平面设计软件的调色板获取相应的值。

二．度量单位

在 CSS 长度设置中，我们经常需要使用到度量单位，即以什么样的单位设计我们的字体或边框长度。而在CSS 中长度单位又分为绝对长度和相对长度。

绝对长度指的是现实世界的度量单位，CSS 支持五种绝对长度单位。

绝对长度单位

单位标识符

说明

英寸

厘米

毫米

磅

pica

相对长度指的是依托其他类型的单位，也是五种。

相对长度单位

单位标识符

说明

与元素字号挂钩

与元素字体的“x 高度”挂钩

rem

与根元素的字号挂钩

像素，与分辨率挂钩

相对另一值的百分比

下面我们使用一些常用的单位作为演示，而不做演示的基本用不到了。

//em 相对单位 p {

margin: 0;

padding: 0;

background: silver;

font-size: 15px;

height: 2em;

}

解释：em 是相对单位，与字号大小挂钩，会根据字体大小改变自己的大小，灵活性很

高。

//px 相对单位，绝对特性

p {

margin: 0;

padding: 0;

background: silver;

font-size: 15px;

height: 55px;

}

解释：虽然 px 也是相对单位，但由于和分辨率挂钩，导致他其实就变成一个绝对单位了，自然灵活性没有em 高，但是使用难度较低，且大量的开发者习惯性使用它。

//%百分比 p {

margin: 0; padding: 0;

background: silver; font-size: 200%; width: 50%;

}

解释：长度比较好理解，就是挂钩它所在区块的宽度。而 font-size 则是继承到的原始大小的百分比。

第 15 章CSS 文本样式[上]

学习要点：1.字体总汇2.字体设置

3.Web 字体

本章主要探讨 HTML5 中CSS 文本样式，通过文本样式的设置，更改字体的大小、样式以及文本的方位。

一．字体总汇

本节课，我们重点了解一下 CSS 文本样式中字体的一些设置方法，样式表如下：

属性名

说明

CSS 版本

font-size

设置字体的大小

font-variant

设置英文字体是否转换为小型大写

font-style

设置字体是否倾斜

font-weight

设置字体是否加粗

font-family

设置 font 字体

font

设置字体样式复合写法

1 ~ 2

@font-face

设置 Web 字体

二．字体设置

我们可以通过 CSS 文本样式来修改字体的大小、样式以及形态。

1.font-size

p {

font-size: 50px;

}

解释：设置文本的大小。属性值如下表：

值

说明

xx-small

x-small

small

_medium设置字体大小。每个值从小到大的固定值。

large

x-large

xx-large

smaller

设置字体相对于父元素字体的大小

larger

数字+px

使用 CSS 像素长度设置字体大小

数字+%

使用相对于父元素字体的百分比大小

//先设置父元素字体大小

body {

font-size: 50px;

}

//再设置相对小一些

p {

font-size: smaller;

}

2.font-variant

p {

font-variant: small-caps;

}

解释：设置字体是否以小型大写字母显示。

值

说明

normal

表示如果以小型大写状态，让它恢复小写状态。

small-caps

让小写字母以小型大写字母显示。

//先让父元素设置小型大写

body {

font-variant: small-caps;

}

//让子元素设置恢复小写 p {

font-size: 50px; font-variant: normal;

}

3.font-style

p {

font-style: italic;

}

解释：设置字体是否倾斜。

值

说明

normal

表示让倾斜状态恢复到正常状态。

italic

表示使用斜体。

oblique

表示让文字倾斜。区别在没有斜体时使用。

4.font-weight

p {

font-weight: bold;

}

解释：设置字体是否加粗。

值

说明

normal

表示让加粗的字体恢复正常。

bold

粗体

bolder

更粗的字体

lighter

轻细的字体

100 ~ 900 之间的数字

600 及之后是加粗，之前不加粗

在目前计算机和浏览器显示中，只有 bold 加粗，其他更粗更细，目前体现不出来。

5.font-family

p {

font-family: 微软雅黑;

}

解释：使用指定字体名称。这里使用的字体是浏览者系统的字体。有时为了兼容很多浏览者系统的字体，可以做几个后备字体。

//备用字体

p {

font-family: 楷体,微软雅黑,宋体;

}

6.font

p {

font: 50px 楷体;

}

解释：字体设置简写组合方式。格式如下：[是否倾斜|是否加粗|是否转小型大写] 字体大小字体名称；

三．Web 字体

虽说可以通过备用字体来解决用户端字体缺失问题，但终究用户体验不好，且不一定备用字体所有用户都安装了。所以，现在CSS 提供了 Web 字体，也就是服务器端字体。

//服务器提供字体

@font-face { font-family: abc;

src: url('BrushScriptStd.otf');

}

p {

font-size: 50px; font-family: abc;

}

英文字体文件比较小，而中文则很大。所以，中文如果想用特殊字体可以使用图片。大面积使用特殊中文字体，就不太建议了。

第 15 章CSS 文本样式[下]

学习要点：1.文本总汇2.文本样式3.文本控制

本章主要探讨 HTML5 中CSS 文本样式，通过文本样式的设置，更改字体的大小、样式以及文本的方位。

一．文本总汇

本节课，我们重点了解一下 CSS 文本样式中文本内容的一些设置方法，样式表如下：

属性名

说明

CSS 版本

text-decoration

装饰文本出现各种划线。

text-transform

将英文文本转换大小写。

text-shadow

给文本添加阴影

text-align

设置文本对齐方式

1,3

white-space

排版中的空白处理方式

letter-spacing

设置字母之间的间距

word-spacing

设置单词之间的间距

line-height

设置行高

word-wrap

控制段词

text-indent

设置文本首行的缩进

二．文本样式

CSS 文本样式有三种：文本装饰、英文大小写转换和文本阴影。

1.text-decoration

p {

text-decoration: underline;

}

解释：设置文本出现下划线。属性值如下表：

值

说明

none

让本身有划线装饰的文本取消掉

underline

让文本的底部出现一条下划线

overline

让文本的头部出现一条上划线

line-through

让文本的中部出现一条删除划线

blink

让文本进行闪烁，基本不支持了

//让本来有下划线的超链接取消 a {

text-decoration: none;

}

2.text-transform p {

text-transform: uppercase;

}

解释：设置英文文本转换为大小写。

值

说明

none

将已被转换大小写的值恢复到默认状态

capitalize

将英文单词首字母大写

uppercase

将英文转换为大写字母

lowercase

将英文转换为小写字母

3.text-shadow

p {

text-shadow : 5px 5px 3px black;

}

解释：给文本添加阴影。其中四个值，第一个值：水平偏移；第二个值：垂直偏移；第三个值：阴影模糊度（可选）；第四个值：阴影颜色（可选）。

三．文本控制

CSS 文本样式中还有一组对文本进行访问、形态进行控制的样式。

1.text-align

p {

text-align: center;

}

解释：指定文本的对齐方式。

值

说明

left靠左对齐，默认

right靠右对齐

center居中对齐

justify

内容两端对齐

start

让文本处于开始的边界

end

让文本处于结束的边界

start 和 end属于 CSS3 新增的功能，但目前 IE 和 Opera 尚未支持。

2.white-space

p {

white-space: nowrap;

}

解释：处理空白排版方式。

值

说明

normal

默认值，空白符被压缩，文本自动换行

nowrap

空白符被压缩，文本不换行

pre

空白符被保留，遇到换行符则换行

pre-line

空白符被压缩，文本会在排满或遇换行符换行

pre-wrap

空白符被保留，文本会在排满或遇换行符换行

3.letter-spacing p {

letter-spacing: 4px;

}

解释：设置文本之间的间距。

值

说明

normal设置默认间距

长度值比如：“数字”+“px”

4.word-spacing

p {

word-spacing: 14px;

}

解释：设置英文单子之间的间距。

值

说明

normal设置默认间距

长度值比如：“数字”+“px”

5.line-height p {

line-height: 200%;

}

解释：设置段落行高。

值

说明

normal

设置默认间距

长度值

比如：“数字”+“px”

数值

比如：1,2,3

比如：200%

6.word-wrap p {

word-wrap: break-word;

}

解释：让过长的英文单词断开。

值

说明

normal

单词不断开

break-word

断开单词

7.text-indent

p {

text-indent: 20px;

}

解释：设置文本首行的缩进。

值

说明

normal

设置默认间距

长度值

比如：“数字”+“px”

第 16 章CSS 盒模型[上]

学习要点：1.元素尺寸2.元素内边距3.元素外边距4.处理溢出

本章主要探讨 HTML5 中CSS 盒模型，学习怎样了解元素的外观配置以及文档的整体布局。

一．元素尺寸

CSS 盒模型中最基础的就是设置一个元素的尺寸大小。有三组样式来配置一个元素的尺寸大小，样式表如下：

属性

值

说明

CSS 版本

width

auto、长度值或百分比

设置元素的宽度

height

auto、长度值或百分比

设置元素的高度

min-width

auto、长度值或百分比

设置元素最小宽度

min-height

auto、长度值或百分比

设置元素最小高度

max-width

auto、长度值或百分比

设置元素最大宽度

max-height

auto、长度值或百分比

设置元素最大高度

//设置元素尺寸

div {

width: 200px;

height: 200px;

}

解释：设置元素的固定尺寸。

//限制元素尺寸 div {

min-width: 100px; min-height: 100px; max-width: 300px; max-height: 300px;

}

解释：这一组主要是应对可能动态产生元素尺寸变大变小的问题，从而限制它最大和最

小的值。

//auto 自适应 div {

width: auto;

height: auto;

}

解释：auto 是默认值，width 在auto 下是 100%的值；height 在auto 下是自适应。

//百分比方式

#a {

background: silver; width: 200px; height: 200px;

}

#b {

background: gray; width: 80%; height: 80%;

}

解释：百分比就是相对于父元素长度来衡定的。

二．元素内边距

CSS 盒模型中可以设置元素内部边缘填充空白的大小，我们成为内边距。样式表如下：

属性

值

说明

CSS 版本

padding-top

长度值或百分比

设置顶部内边距

padding-bottom

长度值或百分比

设置底部内边距

padding-left

长度值或百分比

设置左边内边距

padding-right

长度值或百分比

设置右边内边距

padding

1 ~ 4 个长度值或百分比

简写属性

//设置四个内边距 div {

padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px;

}

//简写形式，分别为上 10px、右 10px、下 10px、左 10pxdiv {

padding: 10px 10px 10px 10px;

}

//简写形式，分别为上 10px，左右 50px，下 200pxdiv {

padding: 10px 50px 200px;

}

//简写形式，分别是上下 10px，左右 20pxdiv {

padding: 10px 20px;

}

//简写形式：上下左右均 10pxdiv {

padding: 10px;

}

三．元素外边距

CSS 盒模型中可以设置元素外部边缘填充空白的大小，我们成为外边距。样式表如下：

属性

值

说明

CSS 版本

margin-top

长度值或百分比

设置顶部内边距

margin-bottom

长度值或百分比

设置底部内边距

margin-left

长度值或百分比

设置左边内边距

margin-right

长度值或百分比

设置右边内边距

margin

1 ~ 4 长度值或百分比

简写属性

//设置四个内边距 div {

margin-top: 10px; margin-bottom: 10px; margin-left: 10px; margin-right: 10px;

}

//简写形式，分别为上 10px、右 10px、下 10px、左 10pxdiv {

margin: 10px 10px 10px 10px;

}

//简写形式，分别为上 10px，左右 50px，下 200pxdiv {

margin: 10px 50px 200px;

}

//简写形式，分别是上下 10px，左边 20pxdiv {

margin: 10px 20px;

}

//简写形式：上下左右均 10pxdiv {

margin: 10px;

}

四．处理溢出

当设置了元素固定尺寸且内容过大时，就会出现溢出的问题。溢出主要朝两个方向：右侧和底部。我们可以通过 overflow 系列样式来控制它。

属性

值

说明

CSS 版本

overflow-x

溢出值

设置水平方向的溢出

overflow-y

溢出值

设置垂直方向的溢出

overflow

溢出值

简写属性

溢出处理主要有四种处理值：

值

说明

浏览器自行处理溢出内容。如果有溢出内容，就显示滚动条，否

auto

则就不显示滚动条。

hidden如果有溢出的内容，直接剪掉。

不管是否溢出，都会出现滚动条。但不同平台和浏览器显示方式 scroll_不同。

visible默认值，不管是否溢出，都显示内容。

//设置溢出为 auto值 div {

overflow-x: auto;

}

0 0