1 概念
1.1 介绍
CSS:层叠样式表(英文全称:Cascading Style Sheets),是一种用于描述网页或文档样式的标记语言。它与 HTML(Hypertext Markup Language)一起被广泛用于网页设计和开发中。
层叠:多个样式可以作用在同一个html的元素上,同时生效
1.2 作用
CSS 的主要作用是为 HTML 或其他 XML(eXtensible Markup Language)文档提供样式和布局。使用 CSS,你可以定义文档的外观和风格,包括字体、颜色、大小、边距、背景等。
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
2 CSS的优势
- 分离样式和内容:CSS 允许将文档的样式与结构分离。通过将样式单独定义在 CSS 文件中,可以使 HTML 文档更加清晰、易于阅读和维护。同时,如果多个页面使用相同的样式,可以很方便地通过链接同一个外部样式表来实现样式的重用。
- 灵活性和可重用性:CSS 提供了丰富的选择器和样式属性,使得对元素的样式设计更加灵活和精确。可以轻松地对不同类型的元素应用样式,也可以根据不同的条件选择特定的元素进行样式修改。此外,通过引入外部样式表,可以在多个页面之间共享样式,实现样式的可重用性。
- 页面加载速度和性能优化:使用 CSS 可以将网页的样式信息集中管理,这样浏览器只需要下载一次样式文件即可。相比内联样式或内部样式表,外部样式表可以被浏览器缓存,从而减少数据传输量和页面加载时间,提高加载速度和用户体验。
- 响应式布局和移动优化:CSS 提供了强大的布局、定位和响应式设计功能。通过使用 CSS 媒体查询和弹性布局等技术,可以轻松实现适应不同设备尺寸和屏幕大小的响应式布局。这使得网页在不同的设备上都能够提供良好的用户体验,并优化移动设备上的显示效果。
- 可扩展性和维护性:CSS 具有层叠的特性,可以方便地进行样式的重用、继承和覆盖。这样,在修改样式时只需更新相应的 CSS 规则,而不需要逐个修改 HTML 元素。这提高了代码的可维护性,并减少了代码冗余。
3 CSS的使用
3.1 内联样式
在 HTML 元素的 style 属性中直接编写 CSS 样式。
语法:
<html标签 style="样式1:值1;样式2:值2;....样式N:值N;">hello my css</html标签>
案例:
<p style="color: red; font-size: 16px;">这是一段红色且字号为 16 像素的文本。</p>
内联样式适用于只在当前元素中应用样式且不需要复用的情况。
3.2 内部样式表
在 HTML 文档的 <head> 标签中,使用 <style> 标签来定义 CSS 样式规则。
案例:
<head>
<style>
p {
color: red;
font-size: 16px;
}
</style>
</head>
<body>
<p>这是一段红色且字号为 16 像素的文本。</p>
</body>
内部样式表适用于只在当前 HTML 文档中应用样式,但样式需要在多个元素之间共享的情况。
3.3 外部样式表
将 CSS 样式规则编写在一个独立的外部 CSS 文件中,然后通过 <link> 标签将其链接到 HTML 文档中。
3.3.1 提前定义css资源文件
lina.css文件,放在与html页面同级的css文件夹中:
div {
color: red;
}
3.3.2 在head标签内,定义link标签引入外部样式文件。
html页面中的引入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部样式</title>
<link rel="stylesheet" href="css/lina.css" />
</head>
<body>
<div>hello my css</div>
</body>
</html>
外部样式表适用于在多个 HTML 文档中共享相同样式的情况。外部样式表提供了样式的重用性和可维护性,使得样式定义与内容分离。
3.4 区分
- 作用域的范围:外部样式表>内部样式表>行内样式表
- 优先级:外部样式表<内部样式表<行内样式表;
- 同样的样式作用在同一个标签身上:就近原则;
- 不同样式作用在同一个标签身上:叠加生效。
4 CSS语法
CSS 由选择器和声明块组成。
选择器 {
属性1:值1;
属性2:值2;
...
}
选择器:筛选具有相似特征的元素
属性和属性值之间用冒号分割,不同的属性之间用分号隔开。
- 选择器(Selectors):选择器用于选择要应用样式的 HTML 元素。常见的选择器包括标签选择器(如 body、h1)、类选择器(以点.开头,如 .container)、ID 选择器(以井号#开头,如 #header)以及其他更复杂的选择器(如后代选择器、伪类选择器等)。选择器可以通过多种方式组合使用,以精确地定位要样式化的元素。
- 属性(Properties):属性用于指定要设置的样式。每个属性对应一个样式特征,例如 color(文本颜色)、font-size(字体大小)、background-color(背景颜色)等。在 CSS 规则中,属性写在选择器后面,由冒号 : 分隔。
- 值(Values):属性的值定义了样式的具体表现。不同的属性接受不同类型的值。例如,color 属性可以接受颜色名称(如 red)、十六进制颜色代码(如 #FF0000)或 RGB 颜色值(如 rgb(255, 0, 0))。在 CSS 规则中,属性值写在冒号 : 后面,以分号 ; 结束。
- CSS 规则集(Rule set):CSS 规则集由选择器、属性和值组成,表示对应的样式定义。规则集通常包含在大括号 {} 中,并且可以包含多个属性声明。
- 注释(Comments):注释用于在 CSS 代码中添加说明性信息,不会被浏览器解析为样式规则。CSS 的注释以 /* 开始,以 */ 结束。
5 基本选择器
筛选具有相似特征的元素
5.1 id选择器
ID 选择器用于通过元素的 ID 属性来选择元素。
在 HTML 中,ID 属性是唯一的,因此通过 ID 选择器可以准确地选中指定的元素。
作用:
- 选择具有相同id属性值的元素,建议html页面中的id值唯一
- id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
- HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
注意:
- ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
- ID 选择器具有很高的特异性(specificity),意味着它们的权重较高,会覆盖其他选择器对同一元素的样式定义。因此,在使用 ID 选择器时,建议仅将其用于具有唯一标识的元素上,避免滥用。
- 虽然多个元素可以使用同一个id选择器控制样式,但是不推荐。如果需要同样的样式对多个标签生效,使用class选择器。
css文件
/*
选中 ID 属性值为 header 的元素,并将其文本颜色设置为红色。
*/
#header {
color: red;
}
html文件
<!--
在 HTML 中,对应的元素可以使用以下方式定义 ID 属性
-->
<h1 id="header">Hello World</h1>
5.2 class选择器
类选择器(Class Selector)用于通过元素的 class 属性值来选择元素。
在 HTML 中,class 属性可以被多个元素共享,因此可以使用类选择器来选择具有相同 class 名称的元素。
在 CSS 中,使用类选择器时,需要在选择器前面加上 . 符号,后面跟上类名。
注意:
- 类名的第一个字符不能使用数字! 它无法在 Mozilla 或 Firefox 中起作用。
- 类选择器可以被多个元素共享,因此当多个元素具有相同的类名时,样式规则会应用到所有对应的元素上。
css文件
/*
选中所有具有 class 属性值为 alert 的元素,并将其背景色设置为黄色。
*/
.alert {
background-color: yellow;
}
html文件
<!--
在 HTML 中,对应的元素可以使用以下方式定义 class 属性
-->
<p class="alert">This is an alert message.</p>
<div class="alert">Warning: Something went wrong!</div>
除了单个类名选择之外,还可以同时使用多个类名进行选择。只需将多个类名连续写在一起,没有空格。
.highlight.bold {
color: red;
font-weight: bold;
}
5.3 元素选择器/标签选择器
元素选择器(或称为标签选择器)是 CSS 中最基本的选择器之一,通过 HTML 标签名来选择元素并应用样式。
使用元素选择器时,只需使用标签名作为选择器即可。
- 选择具有相同标签名称的元素。
- 定义选择器语法:标签名称{}
- 使用标签选择器:自动使用在所有的同名的标签上
注意:
- 标签名称必须是html提供好的标签。
- 元素选择器的特异性较低,意味着其他类型的选择器(如类选择器、ID 选择器)的优先级更高。因此,在设计样式时,可以根据需要组合使用不同类型的选择器,以实现更精确的样式控制。
css文件
/*
为所有的段落元素 <p> 设置文本颜色为红色
*/
p {
color: red;
}
html文件
<!--
在 HTML 中,对应的元素可以使用以下方式定义标签名
-->
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
5.4 通配符选择器
用 * 符号来表示,匹配所有元素。
/*
将所有元素的外边距和内边距都设置为 0
*/
* {
margin: 0;
padding: 0;
}
5.5 属性选择器
通过元素的属性值来选择元素。属性选择器有多种形式
- [attribute] 选中具有指定属性的元素
- [attribute=value] 选中具有指定属性和属性值的元素
- [attribute*=value] 选中具有包含指定字符串的属性值的元素
- [attribute^=value] 选中具有以指定字符串开头的属性值的元素
- [attribute$=value] 选中具有以指定字符串结尾的属性值的元素
/*
选中所有类型为 text 的 <input> 元素,并将其边框设为灰色
*/
input[type="text"] {
border: 1px solid gray;
}
6 优先级
6.1 选择器的优先级
- ID选择器 > 类选择器 > 标签选择器
- 当存在多个选择器具有相同优先级时,后面的规则会覆盖前面的规则。
- 当多个选择器作用在同一个标签上的时候,如果属性冲突,看优先级;如果不冲突,样式叠加生效。
6.2 样式表的优先级
- 行内样式 > 内部样式 >外部样式
- 同样,三个样式表中都有内容作用在同一个html标签的时候,如果属性冲突,看优先级;如果不冲突,样式叠加生效。
7 CSS常用样式
7.1 color :字体颜色
color 属性用于设置文本的颜色。
可以使用预定义的颜色名称或使用十六进制、RGB 或 HSL 值来指定颜色。
7.1.1 使用预定义的颜色名称
color: red; /* 红色 */
color: green; /* 绿色 */
color: blue; /* 蓝色 */
7.1.2 使用十六进制值
color: #ff0000; /* 红色 */
color: #00ff00; /* 绿色 */
color: #0000ff; /* 蓝色 */
7.1.3 使用 RGB 值
color: rgb(255, 0, 0); /* 红色 */
color: rgb(0, 255, 0); /* 绿色 */
color: rgb(0, 0, 255); /* 蓝色 */
7.1.4 使用 HSL 值
color: hsl(0, 100%, 50%); /* 红色 */
color: hsl(120, 100%, 50%); /* 绿色 */
color: hsl(240, 100%, 50%); /* 蓝色 */
7.2 width height:宽高
width 和 height 是用于设置元素的宽度和高度的 CSS 属性。
- 只有块状元素可以设置宽高,行级元素设置不生效。
7.2.1 使用像素(px)作为单位
width: 200px; /* 宽度为 200 像素 */
height: 100px; /* 高度为 100 像素 */
7.2.2 使用百分比(%)相对于父元素的宽度或高度
width: 50%; /* 宽度为父元素宽度的 50% */
height: 75%; /* 高度为父元素高度的 75% */
7.2.3 使用视窗单位(vw 和 vh)相对于视窗的宽度或高度
width: 50vw; /* 宽度为视窗宽度的 50% */
height: 25vh; /* 高度为视窗高度的 25% */
7.2.4 使用自动(auto)根据内容或布局自动确定宽度或高度
width: auto; /* 根据内容或布局自动确定宽度 */
height: auto; /* 根据内容或布局自动确定高度 */
7.3 背景样式
背景样式是用于设置元素的背景的 CSS 属性,包括背景颜色、背景图片、背景大小等。
7.3.1 设置背景颜色
background-color: #ffffff; /* 设置背景颜色为白色 */
background-color: rgba(255, 0, 0, 0.5); /* 设置带有透明度的背景颜色 */
7.3.2 设置背景图片
background-image: url("image.jpg"); /* 设置背景图片为 image.jpg */
background-image: url("image.png"), url("pattern.png"); /* 设置多个背景图片,按顺序叠加显示 */
7.3.3 设置背景大小和重复方式
background-size: cover; /* 背景图片按比例缩放填充整个元素 */
background-size: contain; /* 背景图片按比例缩放,保持完整显示在元素内部 */
background-repeat: no-repeat; /* 背景图片不重复 */
background-repeat: repeat-x; /* 背景图片在水平方向上重复 */
background-repeat: repeat-y; /* 背景图片在垂直方向上重复 */
7.3.4 设置背景位置
background-position: center; /* 背景图片居中对齐 */
background-position: top right; /* 背景图片在右上角对齐 */
background-position: 50% 25%; /* 背景图片在水平方向上居中,垂直方向上偏移 25% */
7.4 文本样式
文本样式是用于设置文本的外观和格式的 CSS 属性,包括字体、颜色、大小、对齐方式等。
7.4.1 设置字体族
font-family: Arial, Helvetica, sans-serif; /* 设置字体为 Arial,如果不可用则使用 Helvetica,最后使用 sans-serif 字体作为备选 */
7.4.2 设置字体大小
font-size: 16px; /* 设置字体大小为 16 像素 */
7.4.3 设置字体粗细
font-weight: bold; /* 设置字体粗体 */
font-weight: normal; /* 设置字体常规(非粗体) */
7.4.4 设置字体样式(斜体、下划线等)
font-style: italic; /* 设置字体为斜体 */
text-decoration: underline; /* 为文本添加下划线 */
7.4.5 设置文本颜色
color: #ff0000; /* 设置文本颜色为红色 */
7.4.6 设置文本对齐方式
text-align: center; /* 设置文本水平居中对齐 */
text-align: left; /* 设置文本左对齐 */
text-align: right; /* 设置文本右对齐 */
7.4.7 设置行高
line-height: 1.5; /* 设置行高为当前字体大小的 1.5 倍 */
7.4.8 设置字母间距
letter-spacing: 2px; /* 设置字母间距为 2 像素 */
7.5 列表样式
列表样式是用于设置无序列表(<ul>)和有序列表(<ol>)的外观和格式的 CSS 属性。
7.5.1 设置无序列表样式
list-style-type: disc; /* 使用实心圆点作为列表项标记(默认样式) */
list-style-type: circle; /* 使用空心圆圈作为列表项标记 */
list-style-type: square; /* 使用实心方块作为列表项标记 */
list-style-type: none; /* 隐藏列表项标记 */
7.5.2 设置有序列表样式
list-style-type: decimal; /* 使用十进制数字(默认样式) */
list-style-type: lower-roman; /* 使用小写罗马数字作为列表项标记 */
list-style-type: upper-roman; /* 使用大写罗马数字作为列表项标记 */
list-style-type: lower-alpha; /* 使用小写字母作为列表项标记 */
list-style-type: upper-alpha; /* 使用大写字母作为列表项标记 */
7.5.3 设置自定义图像作为列表项标记
list-style-image: url("image.jpg"); /* 使用图片 image.jpg 作为列表项标记 */
7.5.4 控制列表项标记的对齐方式
list-style-position: inside; /* 列表项标记在列表项内部对齐 */
list-style-position: outside; /* 列表项标记在列表项外部对齐(默认样式) */
7.6 边框样式
边框样式是用于设置 HTML 元素的边框外观和样式的 CSS 属性。
可以通过设置边框宽度、边框颜色和边框类型来定义元素的边框样式。
7.6.1 设置边框宽度
border-width: 1px; /* 设置边框宽度为 1 像素 */
7.6.2 设置边框颜色
border-color: #000000; /* 设置边框颜色为黑色 */
7.6.3 设置边框类型
border-style: solid; /* 设置实线边框 */
border-style: dashed; /* 设置虚线边框 */
border-style: dotted; /* 设置点线边框 */
border-style: double; /* 设置双线边框 */
border-style: none; /* 没有边框 */
7.6.4 设置所有边框属性的缩写形式
border: 1px solid #000000; /* 设置边框宽度为 1 像素、边框样式为实线、边框颜色为黑色 */
7.6.5 设置单独的边框属性(上、右、下、左)
border-top: 1px solid #000000; /* 设置上边框样式 */
border-right: 1px solid #000000; /* 设置右边框样式 */
border-bottom: 1px solid #000000; /* 设置下边框样式 */
border-left: 1px solid #000000; /* 设置左边框样式 */
8 盒子模型
概念
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
盒子模型说明图:
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。
8.2 盒子的宽度和高度
元素的实际宽度和高度:
当我们计算一个元素实际在页面占有的总宽度计算公式是这样的:
总元素宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的:
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
8.3 设置的宽度直接就是元素的实际宽度,通过box-sizing属性
9 float 浮动
9.1 概念
float 是 CSS 中的一个属性,用于控制元素在页面中的浮动位置。
当你将一个元素设置为 float 属性时,它会脱离正常文档流,向左或向右浮动到其容器中。其他内容则会围绕着浮动元素进行布局。浮动元素会尽可能地占据容器的空间,并向其中靠拢。
9.2 元素的浮动
- 元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。
- 一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 浮动元素之后的元素将围绕它。
- 浮动元素之前的元素将不会受到影响。
9.3 浮动的使用
9.3.1 float 属性
- float: left;:将元素向左浮动,其他内容会围绕在它的右侧。
- float: right;:将元素向右浮动,其他内容会围绕在它的左侧。
9.3.2 注意
- 浮动元素会破坏正常的文档流,可能会导致容器塌陷(容器无法自动撑开高度)的问题,这时可能需要清除浮动。
- 使用浮动后,需要注意元素的父容器是否具有适当的清除浮动样式,以避免布局问题。
- 在一些情况下,浮动可能会导致元素重叠或覆盖其他元素,这时可能需要通过调整 z-index 属性或使用清除浮动的技术来解决。
9.3.3 演示
通过设置 float: left; 将 .box 元素向左浮动,形成一个红色的浮动块。而 <p> 元素则围绕在浮动元素的右侧进行布局。
<style>
.box {
float: left;
width: 200px;
height: 200px;
background-color: red;
}
</style>
<div class="box"></div>
<p>这是浮动元素周围的文本内容。</p>
9.4 clear–清除浮动
clear 属性用于清除浮动元素对其后面内容布局的影响,使得后续元素不会环绕在浮动元素的周围。
9.4.1 属性取值
- clear: none;:默认值,表示不清除浮动。
- clear: left;:清除左侧的浮动元素对当前元素的影响。
- clear: right;:清除右侧的浮动元素对当前元素的影响。
- clear: both;:清除左右两侧的浮动元素对当前元素的影响,使得当前元素在浮动元素下方单独显示。
9.4.2 演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
div{
width: 400px;
height: 200px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<!--没有浮动属性的元素都属于常规文档流:从上往下从左往右依次显示
浮动的元素都脱离了常规文档流;
为了好理解:大家可以认为浮动元素属于一层,非浮动元素属于一层
如果想要非浮动元素不受浮动元素的影响,需要使用clear属性
-->
<div style="background: rgba(255,0,0,0.5); float: left;">
div1-左浮动,脱离常规文档流,紧贴父元素或者上一个同方向浮动
</div>
<div style="background: lawngreen; width: 600px; height: 350px; ">
div2-未浮动,常规文档流,
<br/>PS:此时div1在div2的上方显示,因为div1和div2是不同文档流中的元素,显示互不影响
如果不想让div2被浮动元素影响,需要添加clear属性。
添加clear: left;之后div2就会忽略div1浮动的影响,在div1层后面显示,不会重叠了,大家可以自己试验一下
</div>
<div style="background: lightblue; float: right; width: 1800px;">
div3-右浮动,脱离常规文档流,紧贴父元素或者上一个同方向浮动
</div>
<div style="background: lightcoral; width: 600px; height: 350px; ">
div4-未浮动,常规文档流,
<br/>PS:此时div3在div4的上方显示,因为div3和div4是不同文档流中的元素,显示互不影响
如果不想让div4被浮动元素影响,需要添加clear属性。
添加clear: right;之后div4就会忽略div3浮动的影响,在div3层后面显示,不会重叠了,大家可以自己试验一下
clear属性有三个取值:left、right、both;分别是取出左浮动、有浮动和所有浮动元素的影响
</div>
<div style="background: lavender;">
div5-未浮动,常规文档流,
</div>
</body>
</html>
10 overflow
overflow 属性用于控制内容溢出容器时的处理方式。
它可以应用于包含块级元素的容器,具体效果取决于属性的取值。
值 | 描述 |
---|---|
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
注意 :
- overflow 属性只工作于指定高度的块元素上。
- 在 OS X Lion ( Mac 系统) 系统上,滚动条默认是隐藏的,使用的时候才会显示 (设置 “overflow:scroll” 也是一样的)。
11 Display(显示) 与 Visibility(可见性)
display 属性和 visibility 属性都用于控制元素在网页中的显示方式
11.1 display
- display 属性控制元素在布局中占据的空间以及元素的显示方式。
- 修改 display 属性会改变元素的布局,并且可能影响相邻元素的位置。
值 | 描述 |
---|---|
display: block; | 元素将被显示为块级元素,会独占一行并撑满其父容器的宽度。 |
display: inline; | 元素将被显示为内联元素,不会独占一行,宽度由内容决定。 |
display: inline-block; | 元素将被显示为内联块级元素,不会独占一行,可以设置宽度、高度等属性。 |
display: none; | 元素将被隐藏,不会在页面上占据空间,无法与其交互。 |
11.2 visibility
- visibility 属性控制元素的可见性。
- 修改 visibility 属性不会改变元素的布局,元素仍然占据原来的空间,只是其可见性发生变化。
值 | 描述 |
---|---|
visibility: visible; | 元素是可见的,默认值。 |
visibility: hidden; | 元素是隐藏的,但仍然占据在布局中的位置。 |
visibility: collapse; | 仅适用于表格相关元素,元素被隐藏,且表格的布局会进行调整。 |
12 复合选择器
由两个或多个基础选择器,通过不同方式组合而成的。
可以更准确更精细的选择目标元素标签。
12.1 并集选择器
并集选择器(Union Selector)是CSS中的一种选择器,它可以选择同时满足多个选择器条件的元素。
并集选择器使用逗号(,)将多个选择器组合在一起,它选取了满足任意一个选择器条件的所有元素。
/*通过并集选择器 .button, .link,同时选择带有 class 为 "button" 和 "link" 的元素,并将它们的文本颜色设置为红色并加粗显示
*/
<style>
/* 选择所有带有 class 为 "button" 的元素和所有带有 class 为 "link" 的元素 */
.button, .link {
color: red;
font-weight: bold;
}
</style>
<p class="button">这是一个按钮</p>
<a class="link" href="#">这是一个链接</a>
12.2 交集选择器
交集选择器由两个选择器构成,找到的标签必须满足:既有标签一的特点,也有标签二的特点。
/*
通过 .button.special 这个选择器,选择同时具有 class 为 "button" 和 "special" 的按钮元素,并将其背景颜色设为红色,文字颜色设为白色
*/
<style>
/* 选择同时具有 class 为 "button" 和 "special" 的元素 */
.button.special {
background-color: red;
color: white;
}
</style>
<button class="button special">特殊按钮</button>
12.3 后代选择器
后代选择器(Descendant Selector)是CSS中的一种选择器,它可以选择指定元素的所有后代元素。
后代选择器使用空格( )来表示选择器之间的关系。它会匹配在指定元素内的所有后代元素,无论是子元素、孙子元素还是更深层次的后代元素。
/*
通过后代选择器 ul li,选择 <ul> 元素内的所有 <li> 元素,并将它们的文本颜色设置为蓝色
*/
<style>
/* 选择 <ul> 元素内的所有 <li> 元素 */
ul li {
color: blue;
}
</style>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
12.4 子元素选择器
子元素选择器(Child Selector)是CSS中的一种选择器,用于选择指定元素的直接子元素。
子元素选择器使用大于号(>)表示选择器之间的关系。它只会匹配指定元素的直接子元素,而不会匹配更深层次的后代元素。
/*
通过子元素选择器 ul > li,选择 <ul> 元素下的直接子元素 <li> 元素,并将它们的文本颜色设置为蓝色。
注意,在这个选择器中,嵌套在第三个 <li> 中的 <li> 元素并没有被选择,因为它们不是直接子元素。
*/
<style>
/* 选择 <ul> 元素下的直接子元素 <li> 元素 */
ul > li {
color: blue;
}
</style>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>
列表项3
<ul>
<li>嵌套列表项A</li>
<li>嵌套列表项B</li>
</ul>
</li>
</ul>
12.5 伪类选择器
伪类选择器(Pseudo-class Selector)是CSS中的一种选择器,用于选择具有特殊状态的元素。它可以针对链接、表单、鼠标事件等动态变化的样式进行设置。
伪类选择器使用冒号(:)表示选择器之间的关系。它一般用于根据元素的状态或行为来选择元素,例如选择鼠标悬停时的元素、选择被点击时的元素等。
值 | 描述 |
---|---|
:hover | 选择鼠标悬停在上面的元素。 |
:active | 选择被鼠标点击的元素。 |
:focus | 选择获取焦点的元素,例如表单中的输入框。 |
:nth-child(n) | 选择第 n 个子元素,其中 n 是一个数字,可以使用不同的表达式进行计算。 |
:first-child 和 :last-child | 选择第一个和最后一个子元素。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
/*链接伪类选择器*/
a:link{
color: red;/*默认颜色是红色*/
}
a:visited{
color: blue;/*访问过的页面是蓝色*/
}
a:hover{
color: green;/*鼠标悬浮是绿色*/
font-size: 28px;
}
a:active{
color: gold;/*按下鼠标不放手是金色*/
font-family: "微软雅黑";
}
</style>
</head>
<body>
<a href="03-常用样式.html" target="_blank">常用样式</a>
<a href="04-盒子模型1.html" target="_blank">盒子模型</a>
<a href="05-综合练习.html" target="_blank">综合练习</a>
</body>
</html>
注意
- 写的时候,他们的顺序尽量不要颠倒 按照 lvha(四类的首字母) 的顺序。否则可能引起错误。
- 因为叫链接伪类,所以都是利用交集选择器 a:link a:hover
- 因为a链接浏览器具有默认样式,所以我们实际工作中都需要给链接单独指定样式。
12.6 复合选择器比对
选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
---|---|---|---|---|
后代选择器 | 用来选择元素后代 | 是选择所有的子孙后代 | 较多 | 符号是空格 p .one |
子代选择器 | 选择 最近一级元素 | 只选亲儿子 | 较少 | 符号是 > .nav>p |
交集选择器 | 选择两个标签交集的部分 | 既是 又是 | 较少 | 没有符号 p.one |
并集选择器 | 选择某些相同样式的选择器 | 可以用于集体声明 | 较多 | 符号是逗号 .nav, .header |
链接伪类选择器 | 给链接更改状态 | 较多 | 重点记住 a{} 和 a:hover 实际开发的写法 |