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

秒速五厘米 2022-06-10 08:29 185阅读 0赞

# 一．选择器总汇 #

本节课主要涉及到三种选择器：基本选择器、复合选择器和伪元素选择器，具体如下： 
选择器 名称 说明 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  颜色与度量单位

<table> 十进制颜色函数 
 <tbody> 
 <tr> 
 <td>函数</td> 
 <td> &nbsp;说明&nbsp;</td> 
 <td> 示例</td> 
 </tr> 
 <tr> 
 <td>rgb(r,g,b)&nbsp;</td> 
 <td>用 RGB 模型表示颜色</td> 
 <td> &nbsp;rgb(0,128,128)</td> 
 </tr> 
 <tr> 
 <td>rgba(r,g,b,a)&nbsp;</td> 
 <td>同上a 表示透明度 0~1 之间</td> 
 <td>&nbsp;rgba(0,128,128,0.5)</td> 
 </tr> 
 <tr> 
 <td>hsl(h,s,l)</td> 
 <td>用 HSL 模型（色相、饱和度 和透明度）来表示颜色</td> 
 <td>hsl(120,100%,30%)</td> 
 </tr> 
 <tr> 
 <td>hsla(h,s,l,a)</td> 
 <td>同上，a 表示透明度 0~1 之间</td> 
 <td>&nbsp; hsla(120,100%,30%,0.5)</td> 
 </tr> 
 </tbody> 
</table>

度量单位

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

<table style="text-align:center"> 绝对单位长度 
 <tbody> 
 <tr> 
 <td style="text-align:center">单位标识符</td> 
 <td style="text-align:center">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 说明</td> 
 </tr> 
 <tr> 
 <td style="text-align:center">in&nbsp;</td> 
 <td style="text-align:center">英寸</td> 
 </tr> 
 <tr> 
 <td style="text-align:center">cm&nbsp;</td> 
 <td style="text-align:center">厘米</td> 
 </tr> 
 <tr> 
 <td style="text-align:center">mm</td> 
 <td style="text-align:center">毫米</td> 
 </tr> 
 <tr> 
 <td style="text-align:center">pt&nbsp;</td> 
 <td style="text-align:center">磅</td> 
 </tr> 
 <tr> 
 <td style="text-align:center">pc</td> 
 <td style="text-align:center">&nbsp;pica</td> 
 </tr> 
 </tbody> 
</table>

<table style="text-align:center"> 相对长度单位 
 <tbody> 
 <tr> 
 <td style="text-align:center">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;单位标识符 &nbsp; &nbsp; &nbsp;</td> 
 <td style="text-align:center">说明</td> 
 </tr> 
 <tr> 
 <td style="text-align:center">em</td> 
 <td style="text-align:center">&nbsp;与元素字号挂钩</td> 
 </tr> 
 <tr> 
 <td style="text-align:center">ex&nbsp;</td> 
 <td style="text-align:center">与元素字体的“x 高度”挂钩</td> 
 </tr> 
 <tr> 
 <td style="text-align:center">rem</td> 
 <td style="text-align:center">与根元素的字号挂钩</td> 
 </tr> 
 <tr> 
 <td style="text-align:center">px</td> 
 <td style="text-align:center">像素，与分辨率挂钩</td> 
 </tr> 
 <tr> 
 <td style="text-align:center">%</td> 
 <td style="text-align:center">&nbsp;相对另一值的百分比</td> 
 </tr> 
 </tbody> 
</table>

文本总汇

![Center][]

> > > > > > 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;