CSS3 选择器、颜色与度量单位、文本、边框、背景

一．选择器总汇

本节课主要涉及到三种选择器：基本选择器、复合选择器和伪元素选择器，具体如下：
选择器 名称 说明 CSS 版本
* 通用选择器 选择所有元素 2
<type> 元素选择器 选择指定类型的元素 1
#<id> id 选择器 选择指定 id 属性的元素 1
.<class> class 选择器 选择指定 class 属性的元素 1
[attr]系列 属性选择器 选择指定 attr 属性的元素 2 ~ 3
s1,s2,s3... 分组选择器 选择多个选择器的元素 1
s1 s2 后代选择器 选择指定选择器的后代元素 1
s1 > s2 子选择器 选择指定选择器的子元素 2
s1 + s2 相邻兄弟选择器 选择指定选择器相邻的元素 2
s1 ~ s2 普通兄弟选择器 选择指定选择器后面的元素 3
::first-line 伪元素选择器 选择块级元素文本的首行 1
::first-letter 伪元素选择器 选择块级元素文本的首字母 1
::before 伪元素选择器 选择元素之前插入内容 2

::after 伪元素选择器 选择元素之后插入内容 2

二 . 伪类选择器总汇

伪类选择器分为四种类型：结构性伪类、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

三 、CSS  颜色与度量单位

十进制颜色函数

函数	说明	示例
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)

度量单位

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

绝对单位长度

单位标识符	说明
in	英寸
cm	厘米
mm	毫米
pt	磅
pc	pica

相对长度单位

单位标识符	说明
em	与元素字号挂钩
ex	与元素字体的“x 高度”挂钩
rem	与根元素的字号挂钩
px	像素，与分辨率挂钩
%	相对另一值的百分比

                                                                                   文本总汇
   

 

word-wrap

p {

word-wrap: break-word;

}

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

值 说明

normal 单词不断开

break-word 断开单 词

white-space
p {
white-space: nowrap;
}
解释：处理空白排版方式。
值 说明
normal 默认值，空白符被压缩，文本自动换行
nowrap 空白符被压缩，文本不换行
pre 空白符被保留，遇到换行符则换行
pre-line 空白符被压缩，文本会在排满或遇换行符换行
pre-wrap 空白符被保留，文本会在排满或遇换行符换行

CSS3边框

CSS3 提供了一个非常实用的圆角边框的设置。使用 border-radius 属性，就可以达

到这种效果，样式表如下：

属性 值 说明 CSS 版本

border-radius 长度值或百分数 四条边角 3

border-top-left-radius 长度值或百分数 左上边角 3

border-top-right-radius 长度值或百分数 右上边角 3

border-bottom-left-radius 长度值或百分数 左下边角 3

border-bottom-right-radius 长度值或百分数 右下边角 3

//设置圆角矩形

div {

border: 10px solid red;

border-radius: 10px;

}

//四条边分别设置

div {

border: 10px solid red;

border-radius: 10px 20px 30px 40px;

}

背景

CSS3线性渐变使用语法

background: linear-gradient(direction, color-stop1, color-stop2, ...);

CSS3径向渐变使用语法

                         background: radial-gradient(center, shape size, start-color, ..., last-color);

背景图片与线性渐变同时使用

background:linear-gradient(to top ,#ff6600 0%,rgba(56,56,89,0.1) 100%) , url(aa.png) 0 0 no-repeat;

盒模型