一.选择器总汇
本节课主要涉及到三种选择器:基本选择器、复合选择器和伪元素选择器,具体如下:选择器 名称 说明 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;