目录
1.考点
2.css基础语法
知识点
- 选择器
- 背景样式
- 文本属性
- 字体属性
- 链接中的伪类
- 列表样式
2.1.选择器
CSS 中有以下三种基本选择器:
- 标签选择器
- 类选择器
- id 选择器
标签选择器
如果需要对页面中的某一类标签统一设定样式时,应该使用标签选择器,标签选择器的关键字以标签的名字命名。
其语法格式为:
标签名 {
属性名: 属性值;
}
类选择器
在定义类选择器时,需要用点号和类名来定义,而在使用该类选择器时,需要在使用该类选择器的元素标签中,增加 class="类名"的属性(不包括点号),表示该标签使用了指定的类选择器。
例如:蓝桥云课的一段代码。
其语法格式为:
.类名 {
属性名: 属性值;
}
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
在定义 id 选择器时,需要用 “#” 号和 id 名来定义选择器,而在使用该 id 选择器时,需要在 HTML 标签元素中,增加 id="id 名"的属性(不包括 “#” 号),指定这个 HTML 元素的 id,这个 id 在 HTML 文档中是唯一的。
它的使用与类选择器类似,语法格式如下:
#id 选择器名 {
属性: 属性值;
}
选择器的优先级
在 HTML 中选择器的优先级为:id 选择器 > 类选择器 > 标签选择器。
!important 的介绍
当你在样式声明中加入 !important 规则时,它会改变样式声明的优先级。
后代选择器
后代选择器是选择标签内部中某一标签的所有元素,其包括子元素及其他后代元素。
在使用后代选择器时,父标签名和后代标签名必须用空格隔开,这样才能识别是某个标签内部的后代元素。
我们来举个例子!😉
新建一个 index5.html
文件,在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#paragraph p {
color: lightskyblue;
}
</style>
</head>
<body>
<div id="paragraph">
<p>这是一个段落</p>
</div>
</body>
</html>
点击预览页面,实验效果如下:
在上面代码中,使用 #paragraph p
可以获取到 class
名为 paragraph
的 div
元素中的子元素 p
标签,我们给该标签中的文字内容设置了字体颜色。
群组选择器
群组选择器是用于同时对几个选择器进行相同的样式设置。
在使用群组选择器时,两个选择器之间必须要用英文逗号隔开。
新建一个 index6.html
文件,在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div,
span {
color: lightskyblue;
}
</style>
</head>
<body>
<div>段落一</div>
<span>段落二</span>
</body>
</html>
点击预览页面,实验效果如下:
在上面代码中,使用 div,span
给 div
标签和 span
标签设置了相同的字体颜色。
2.2.背景样式
背景样式属性用于定义 HTML 元素的背景色、背景图片,同时还可以进行背景定位、背景图片重复、背景图片固定。
在本节实验中会学到以下几种背景属性:
- background-color
- background-image
- background-size
- background-position
- background-repeat
background-color
属性可以给指定标签元素设置背景色。
background-image
属性可以把图像插入背景。
background-size
属性可以给背景图设置大小。
通过 background-position
属性,可以改变图像在背景中的位置。
background-repeat
属性是用来设置背景图像是否平铺。
下表列出了 background-repeat
属性的一些可取值以及每个可取值的含义。
可 取 值 | 描 述 |
---|---|
repeat | 背景图像将在垂直方向和水平方向重复(默认值) |
repeat-x | 背景图像将在水平方向重复 |
repeat-y | 背景图像将在垂直方向重复 |
no-repeat | 背景图像将仅显示一次 |
我们规定应该从父元素继承
background-repeat
属性的设置。
2.3.文本属性
文本属性用于定义文本的样式,通过文本属性,可以改变文本的颜色、字间距、对齐方式、文本修饰和文本缩进等。常用文本属性如下表所示:
属 性 | 可 取 值 | 描 述 |
---|---|---|
line-height | normal、number、length、% | 设置行高 |
text-indent | length、% | 设置文本缩进 |
text-align | left、right、center、justify、start、end | 设置对齐方式 |
letter-spacing | normal、length | 设置字符间距 |
text-decoration | line、color、style、thickness | 设置文本修饰 |
white-space | normal、pre、nowrap、pre-wrap、pre-line、break-spaces | 规定如何处理空白 |
line-break | auto、loose、normal、strict、anywhere、unset | 处理如何断开带有标点符号的文本的行 |
这里只给大家介绍两个最常用的文本属性 line-height
和 text-decoration
。
line-height 的使用
line-height
用于设置多行元素的空间量,可取值具体说明如下:
normal
:取决于用户端。number
:数字乘以元素的字体大小。length
:指定长度用于计算高度。%
:计算值是给定的百分比值乘以元素计算出的字体大小。
text-decoration 的使用
text-decoration
属性用于设置文本的装饰线,例如给文本加下划线、中划线、波浪线等。可取值具体说明如下:
text-decoration-line
设置线的位置,可取值包含:underline
(下划线)、overline
(上划线)、line-through
(中划线)。text-decoration-color
设置线的颜色。text-decoration-style
设置线的样式,可取值包含:wavy
(波浪线)、solid
(实线)、dashed
(虚线)。text-decoration-thickness
设置线的粗细。
2.4.字体属性
字体属性用于定义字体的类型、字号大小、加粗、斜体等方面样式。常用的字体属性如下表所示:
属 性 | 可 取 值 | 描 述 |
---|---|---|
font | font-style、font-variant、font-weight、font-size(或 line-height)、font-family | 在一个声明中设置所有的字体属性 |
font-family | 字体名称、inherit | 设置字体类型 |
font-size | xx-small、x-small、small、medium(默认)、large、x-large、xx-large smaller、larger length、%、inherit | 设置字体大小 |
font-weight | normal(默认)、bold、bolder、lighter、inherit 100、200…900(400=normal,700=bold) | 设置字体粗细 |
font-style | normal、italic、oblique、inherit | 设置字体风格 |
2.5.链接中的伪类
何为伪类呢?🤔
在 CSS 中,伪类是添加到选择器的关键字,给指定元素设置一些特殊状态,我们以 :
开头。
链接有以下四个状态。这四种状态也称之为超链接的伪类。
状态 | 效果 |
---|---|
a:link | 普通的、未被访问的链接。 |
a:hover | 鼠标指针位于链接的上方。 |
a:active | 链接被单击的时刻。 |
a:visited | 用户已访问的链接。 |
针对超链接的上述四种状态设置样式规则,能起到美化超链接的作用。例如,为了完成下对超链接的显示要求,编写的 CSS 样式代码如下。
状 态 | 颜 色 | 背 景 色 | 文 本 修 饰 |
---|---|---|---|
未访问 | 蓝色 | 无 | 无下画线 |
鼠标移到 | 黑色 | #DDDDDD | 下画线 |
正单击 | 红色 | #AAAAAA | 删除线 |
已访问 | 绿色 | 无 | 无下画线 |
对于超链接的伪类,我们推荐的使用顺序是::link - :visited - :hover - :active。
我们来举个例子吧!😉
新建一个 index14.html
文件,在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
text-decoration: none;
}
a:link {
color: red;
}
a:visited {
color: blue;
}
a:hover {
color: green;
}
a:active {
color: yellow;
}
</style>
</head>
<body>
<a href="#">这是一个链接</a>
</body>
</html>
开启 8080 端口,打开 Web 服务,效果如下:
同学们可能很疑惑,我们为什么要按照这样的顺序来使用呢?🤔 我们调整一下这几个伪类的顺序,看看会发生什么。
我们把 a:link
放到最后,效果如下。
从图中我们可以发现其中的样式属性都被覆盖了。
我们把 a:hover
放到 a:active
之后,效果如下。
从图中我们可以发现 a:active
的属性样式被覆盖了。
通过上面的例子我们可以知道链接伪类的使用顺序是很重要的。
2.6.列表样式
属 性 | 可 取 值 | 描 述 |
---|---|---|
list-style | list-style-type、list-style-position、list-style-image | 在一个声明中设置所有的列表属性 |
list-style-image | URL、none | 设置图像为列表项标志 |
list-style-position | inside、outside、inherit | 设置列表中列表项标志的位置 |
list-style-type | disc(默认)、circle、square、decimal 等 | 设置列表项标志的类型 |
我们来举个例子吧!😉
使用以下命令获取需要的 gif 动图。
wget https://labfile.oss.aliyuncs.com/courses/2841/list.gif
新建一个 index15.html
文件,在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
ul {
list-style-position: inside;
list-style-image: url(list.gif);
}
</style>
</head>
<body>
<ul>
<li>喵</li>
</ul>
</body>
</html>
点击预览页面,实验效果如下:
3.盒子模型
盒子模型就是用来装 HTML 元素的盒子,它用于描述一个装有 HTML 元素的矩形盒子。该模型包括边框(border)、内边距(padding)、内容(content)、外边距(margin)、宽和高等属性,下图显示了盒模型的结构。
各部分的功能如下表:
区域 | 功能 |
---|---|
内容区 | 内容区在模型的中心包含了盒子内的信息也就是 HTML 元素。这些元素可以是文本、图片等。 |
内边距 | 内边距是内容区和边框之间的空间,可以被看作是内容区的背景区域。 |
边框 | 边框用于标识盒子的边界,介于内边距和外边距之间。 |
外边距 | 外边距位于边框外部,是边框与周围之间的空间。 |
知识点
- padding
- margin
- border
3.1.border 属性
border
属性用于设置元素的边框属性,其用法如下所示:
border: border-width border-style border-color;
属性值说明如下:
border-width
:是边框宽度,宽度一般用数值即可。border-style
:是边框线的样式,一般有 solid(实线)、dotted(圆点)、dashed(虚线)、double(双横线)。border-color
:是边框线的颜色。
border、border-width、border-style、border-color 都是复合属性,我们也可以单独设置某条边框的样式。
例如,border-color 可以写成:
border-top-color: 上边框颜色;
border-right-color: 右边框颜色;
border-bottom-color: 下边框颜色;
border-left-color: 左边框颜色;
3.2.padding 属性
padding
属性是一个复合属性,代表我们盒子模型中的填充,也就是内容区域外部的空白区域。
其使用格式如下所示:
padding: 上右下左;
padding-top: 顶部填充值;
padding-left: 左边填充值;
padding-right: 右边填充值;
padding-bottom: 底部填充值;
3.3.margin 属性
margin 属性是用来设置元素的外边距的。
其使用格式如下:
margin: 上边距 右边距 下边距 左边距;
也可以省略写。
当左右边距值相同时,写法如下:
margin: 上边距 左右边距 下边距;
当上下边距值相同,左右边距值相同时,写法如下:
margin: 上下边距 左右边距;
当上下左右边距值均相同时,写法如下:
margin: 属性值;
4.display属性
display
属性可以用来设置元素在页面上的排列方式,也可用来隐藏元素。
display
属性值的说明如下表所示。
属性值 | 说明 |
---|---|
block | 元素以块级方式展示。 |
inline | 元素以内联方式展示。 |
inline-block | 元素以内联块的方式展示。 |
none | 隐藏元素。 |
4.1.block 属性值
block 属性值可以让行内元素以块级元素的方式显示在页面上。
其使用格式如下:
display: block;
还记得前面学过的行内元素的概念吗?😜 行内元素就是可以和其他元素同处一行的元素,例如 span
标签元素。
举个例子~ 👻
新建一个 index.html
文件,在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
span {
display: block;
}
</style>
</head>
<body>
<span>蓝桥</span><span>云课</span>
</body>
</html>
点击预览,效果如下:
可以看到,原本 span
标签是行内元素,却因为设置 display: block;
导致「蓝桥」与「云课」分开了。
4.2.inline 属性值
inline 属性值可以让像 div
这样的霸道块,接纳其他元素来自己的地盘。
其使用格式如下:
display: inline;
举个例子~ 👻
新建一个 index1.html
文件,在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
display: inline;
}
</style>
</head>
<body>
<div>蓝桥</div>
<div>云课</div>
</body>
</html>
看,原本霸道的大块头,也被 display 属性给治服了,「蓝桥」与「云课」又在一起了。
4.3.inline-block 属性值
我们的块内元素和行内元素有其独特的优势,在某些情况下,我们想让一个元素既具有块内元素的特点,又具备行内元素的特点。这就要请出 inline-block 属性值来施展这个魔法了。
其使用格式如下:
display: inline-block;
那么到底在哪些情况下可以用到这个属性呢?
比如,我们用 a
标签来实现导航的时候,a
标签虽然可以让元素在一行显示,但若我们想给每个 a
标签加上高和宽时发现没有任何效果。这时候用上 display: inline-block
,它就具备块的特性了。
我们来看个例子~ 👻
新建一个 index2.html
文件,在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
a {
text-decoration: none;
background-color: rgb(95, 118, 160);
display: inline-block;
width: 70px;
height: 30px;
text-align: center;
}
</style>
</head>
<body>
<a href="#">首页</a>
<a href="#">分类</a>
<a href="#">展示</a>
<a href="#">更多</a>
</body>
</html>
点击预览,效果如下:
4.4.none 属性值
none 属性值可以用来隐藏页面上的元素。
使用格式如下:
display: none;
举个例子~ 💪
新建一个 index3.html
文件,在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
display: none;
}
</style>
</head>
<body>
<div>哈哈,看不见我🤫</div>
</body>
</html>
点击预览,可以发现页面上空空的。
5.浮动与定位
知识点
- float
- position
5.1.浮动
我们使用 float
属性指定元素沿其容器的左侧或右侧放置,浮动布局常见取值如下:
- left(左浮动)
- right(右浮动)
5.2.定位
我们使用 position
属性来对元素的位置进行控制,定位布局可以分为以下四种:
- 静态定位(inherit)
- 相对定位(relative)相对定位是该元素的位置相对于它原始的位置来计算的。
- 绝对定位(absolute)绝对定位,能把元素精确地放在任意位置。
- 固定定位(fixed)
fixed
属性值用于固定定位,被固定的元素不会随着滚动条的拖动而改变位置。
6.CSS3新特性
- CSS3 新增选择器
- 文本阴影
- 文本溢出
- 圆角边框
- 盒子阴影
- 背景属性
- 渐变属性
- 元素转换
- 过渡属性
- 动画
6.1.CSS3 新增选择器
- 属性选择器
- 子元素伪类选择器
- UI 伪类选择器
6.1.1.新增属性选择器
属性选择器就是通过正则的方式去匹配指定属性的元素,为其设置样式。
在 CSS3 中新增了三种属性选择器,如下所示:
选择器 | 描述 |
---|---|
E[attr^=“xx”] | 选择元素 E,其中 E 元素的 attr 属性是以 xx 开头的任何字符。 |
E[attr$=“xx”] | 选择元素 E,其中 E 元素的 attr 属性是以 xx 结尾的任何字符。 |
E[attr*=“xx”] | 选择元素 E,其中 E 元素的 attr 属性是包含 xx 的任何字符。 |
我们来举个例子吧!😉
新建一个 index.html
文件,在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
a[href^="#"] {
color: rgb(179, 255, 0);
}
a[href$="org"] {
color: rgb(195, 0, 255);
}
a[href*="un"] {
background-color: rgb(0, 255, 149);
color: white;
}
</style>
</head>
<body>
<ul>
<li><a href="#">本地链接</a></li>
<li><a href="https://www.lanqiao.cn">蓝桥云课</a></li>
<li><a href="https://developer.mozilla.org">MDN</a></li>
<li><a href="https://unsplash.com">Unsplash</a></li>
</ul>
</body>
</html>
预览页面,效果如下:
- 在上面代码中,我们使用
a[href^="#"]
去匹配a
标签中href
属性值以#
开头的元素。 - 使用
a[href$="org"]
去匹配a
标签中href
属性值以org
结尾的元素。 - 使用
a[href*="un"]
去匹配a
标签中href
属性值包含un
的元素。
6.1.2.子元素伪类选择器
子元素伪类选择器就是选择某元素的子元素的一种选择器。
在 CSS3 中,有以下几种子元素伪类选择器:
选择器 | 描述 |
---|---|
E:first-child | 选择元素 E 的第一个子元素。 |
E:last-child | 选择元素 E 的最后一个子元素。 |
E:nth-child(n) | 选择元素 E 的第 n 个子元素,n 有三种取值,数字、odd 和 even。注意第一个子元素的下标是 1。 |
E:only-child | 选择元素 E 下唯一的子元素。 |
E:first-of-type | 选择父元素下第一个 E 类型的子元素。 |
E:last-of-type | 选择父元素下最后一个 E 类型的子元素。 |
E:nth-of-type(n) | 选择父元素下第 n 个 E 类型的子元素,n 有三种取值,数字、odd 和 even。 |
E:only-of-type | 选择父元素唯一的 E 类型的子元素。 |
E:nth-last-child(n) | 选择所有 E 元素倒数的第 n 个子元素。 |
E:nth-last-of-type(n) | 选择所有 E 元素倒数的第 n 个为 E 的子元素。 |
6.1.3.UI 伪类选择器
UI 伪类选择器是通过元素的状态来选择的一种选择器。
在 CSS3 中有以下几种 UI 伪类选择器。
选择器 | 描述 |
---|---|
:focus | 给获取焦点的元素设置样式。 |
::selection | 给页面中被选中的文本内容设置样式。 |
:checked | 给被选中的单选框或者复选框设置样式。 |
:enabled | 给可用的表单设置样式。 |
:disabled | 给不可用的表单设置样式。 |
:read-only | 给只读表单设置样式。 |
:read-write | 给可读写的表单元素设置样式。 |
:valid | 验证有效。 |
:invalid | 验证无效。 |
属性有效性验证
页面上有一个邮箱输入框,当你的输入满足邮箱格式时,输入框的背景颜色为绿色;当你的输入不满足要求,背景颜色为红色。
新建一个 index2.html
文件,在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/*格式错误*/
input:invalid {
background-color: red;
}
/*格式正确*/
input:valid {
background-color: green;
}
</style>
</head>
<body>
电子邮箱:<input type="email" />
</body>
</html>
预览页面,效果如下:
获得焦点验证
页面上有一个姓名输入框和一个密码输入框,当聚焦输入框时,输入框的背景颜色会发生改变,
新建一个 index3.html
文件,在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
input:focus {
background-color: rgb(255, 153, 0);
}
</style>
</head>
<body>
姓名:<input type="text" /><br />
密码:<input type="password" />
</body>
</html>
预览页面,效果如下:
6.2.文本阴影
某些时候我们想让字体看起来更立体,更具艺术性,让人眼前一亮,可以给文字使用文本阴影属性。
在 CSS3 中,我们使用 text-shadow
属性来给文本内容添加阴影的效果。
文本阴影的语法格式如下:
text-shadow: x-offset y-offset blur color;
x-offset
是沿 x 轴方向的偏移距离,允许负值,必须参数。y-offset
是沿 y 轴方向的偏移距离,允许负值,必须参数。blur
是阴影的模糊程度,可选参数。color
是阴影的颜色,可选参数。
我们来举个例子吧!
新建一个 index4.html
文件,在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
font-size: 50px;
color: rgb(0, 153, 255);
text-shadow: 4px 4px 3px rgb(0, 255, 179);
}
</style>
</head>
<body>
<div>蓝桥云课</div>
</body>
</html>
预览页面,效果如下:
- 页面上有个包含「蓝桥云课」文字内容的
div
标签,我们使用font-size
属性设置字体大小为 50px。 - 使用
color
属性设置字体颜色。 - 使用
text-shadow
属性添加文本阴影效果。
6.3.文本溢出
text-overflow
属性可以设置超长文本省略显示,其语法如下所示:
text-overflow: clip|ellipsis;
其属性值的含义如下所示:
属性值 | 描述 |
---|---|
clip | 修剪文本。 |
ellipsis | 显示省略符号来代表被修剪的文本。 |
举个例子~ 👻
新建一个 index5.html
文件,在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
p {
border: 1px solid blue;
width: 100px;
height: 50px;
overflow: hidden; /*隐藏超出文本*/
white-space: nowrap; /*强制单行显示*/
}
.poem1 {
text-overflow: clip;
}
.poem2 {
text-overflow: ellipsis;
}
</style>
</head>
<body>
<p class="poem1">木落雁南度,北风江上寒。我家襄水曲,遥隔楚云端。</p>
<p class="poem2">乡泪客中尽,孤帆天际看。迷津欲有问,平海夕漫漫。</p>
</body>
</html>
预览页面,效果如下:
- 在代码中,我们在
p
标签里分别放了一段诗,使用标签选择器给两个p
标签定义了相同的样式。 - 使用
text-overflow: clip
给class=poem1
的p
标签设置文本溢出时,修剪溢出的文本。 - 使用
text-overflow: ellipsis
给class=poem2
的p
标签设置用省略号代替溢出的文本。
6.4.圆角边框
在 CSS3 中,使用 border-radius
属性来设置圆角边框。
border-radius
属性的值表示圆角的直径,可以设置四个值,其值的顺序为:左上角,右上角,右下角,左下角。
其语法格式为:
border-radius: 取值;
我们也可以分开设置四个角的属性值,语法如下所示:
border-top-left-radius: 取值;
border-top-right-radius: 取值;
border-bottom-right-radius: 取值;
border-bottom-left-radius: 取值;
6.5.盒子阴影
box-shadow
属性可以用来设置一个或多个下拉阴影的框,视觉效果就像是盒子有了阴影一样。
其语法格式为:
box-shadow: h-shadow v-shadow blur spread color inset;
其属性值的意义如下所示:
值 | 说明 |
---|---|
h-shadow | 必选,水平阴影的位置,允许负值。 |
v-shadow | 必选,垂直阴影的位置,允许负值。 |
blur | 可选,模糊距离。 |
spread | 可选,阴影的大小。 |
color | 可选,阴影的颜色。 |
inset | 可选,将外部阴影改为内部阴影。 |
举个例子来看看吧~ 😉
新建一个 index7.html
文件,在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 200px;
height: 100px;
text-align: center;
background-color: green;
box-shadow: 10px 10px 5px #26ad8c;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
预览页面,效果如下:
6.6.背景图像尺寸
background-size
属性可以用来控制背景图像的显示大小。语法如下:
background-size: length|percentage|cover|contain;
值 | 描述 |
---|---|
length | 设置背景图片高度和宽度。第一个值设置宽度,第二个值设置高度。如果只给出一个值,第二个是设置为 auto(自动)。 |
percentage | 将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值设置高度。如果只给出一个值,第二个是设置为"auto(自动)" 。 |
cover | 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 |
contain | 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 |
6.7.多图背景
在 CSS3 中,background-image 属性的属性值可以包含多个图片的地址。语法如下:
/*图片地址*/
background-image: url(), url(), ..., url();
若想让图片放在我们想要的位置,可以使用 background-position 属性设置图片显示的位置。语法如下:
/*图片显示的位置*/
background-position: position1, position2, ..., positionN;
若想要设置图片是否重复显示在页面上,我们可以添加 background-repeat 属性。语法如下:
/*图片是否重复*/
background-repeat: repeat1, repeat2, ..., repeatN;
举个例子来看看吧~ 😉
使用以下命令获取所需的图片。
wget https://labfile.oss.aliyuncs.com/courses/3429/icons8-rat-96.png
wget https://labfile.oss.aliyuncs.com/courses/3429/nemuel.jpg
新建一个 index10.html
文件,在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#content1 {
/*小图片来自 icons*/
background-image: url("icons8-rat-96.png"), url("nemuel.jpg");
background-position: right bottom, left top; /*相对于父元素大小,老鼠图片右下角显示,大背景图片在左上角显示*/
background-repeat: no-repeat, no-repeat; /*两张图片不重复*/
padding: 15px;
width: 400px;
height: 260px;
}
</style>
</head>
<body>
<div id="content1"></div>
</body>
</html>
点击预览页面,效果如下:
6.8.渐变属性
有时候我们会看到一些好看的渐变色,在 CSS3 中也为我们提供了渐变色属性,用来设置背景的渐变色。有两种不同的渐变方式:
- 线性渐变
- 径向渐变
6.8.1.线性渐变
线性渐变是向下、向上、向左、向右、对角方向的颜色渐变。
其语法格式为:
background-image: linear-gradient(side-or-corner|angle, linear-color-stop);
参数说明如下:
side-or-corner
是描述渐变线的起始位置,它包含两个关键词:第一个指出水平位置 left or right,第二个指出垂直位置 top or bottom。angle
是用角度值来指定渐变的方向。linear-color-stop
是设置渐变的颜色值。
举个例子~ 😉
新建一个 index11.html
文件,在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#linear {
display: flex;
}
/*从上到下线性渐变*/
.gradient1 {
width: 100px;
height: 100px;
background-image: linear-gradient(#ff577f, #c6c9ff);
}
/*从左到右线性渐变*/
.gradient2 {
margin-left: 10px;
width: 100px;
height: 100px;
background-image: linear-gradient(to right, #ff9d72, #c6c9ff);
}
/*从左上角到右下角的渐变*/
.gradient3 {
margin-left: 10px;
width: 100px;
height: 100px;
background-image: linear-gradient(to bottom right, #8ad7c1, #c6c9ff);
}
/*定义角度的渐变*/
.gradient4 {
margin-left: 10px;
width: 100px;
height: 100px;
background-image: linear-gradient(50deg, #bc6ff1, #ffd5cd);
}
</style>
</head>
<body>
<div id="linear">
<div class="gradient1"></div>
<div class="gradient2"></div>
<div class="gradient3"></div>
<div class="gradient4"></div>
</div>
</body>
</html>
点击预览页面,实验效果如下:
重复性线性渐变
重复性线性渐变是用重复的线性渐变组成的 <image>
,它与线性渐变的区别在于,它会在所有方向上重复渐变来覆盖整个元素。
其语法格式为:
background-image: repeating-linear-gradient(side-or-corner|angle, color-stop);
参数说明如下:
side-or-corner
是描述渐变线的起始位置,它包含 to 和两个关键词:第一个指出水平位置 left or right,第二个指出垂直位置 top or bottom。angle
是用角度值来指定渐变的方向。color-stop
是由一个<color>
组成,并且跟随一个可选的终点位置。
我们来举个例子吧~
新建一个 index12.html
文件,在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
display: inline-block;
margin-left: 20px;
margin-top: 20px;
}
.item1 {
background-image: repeating-linear-gradient(
45deg,
#8843f8 0%,
#ef2f88 5%,
#f47340 10%,
#f9d371 15%
);
}
.item2 {
background-image: repeating-linear-gradient(
to left top,
#8843f8 0%,
#ef2f88 5%,
#f47340 10%,
#f9d371 15%
);
}
</style>
</head>
<body>
<div class="item1"></div>
<div class="item2"></div>
</body>
</html>
点击预览页面,实验效果如下:
6.8.2.径向渐变
径向渐变是由元素中间定义的渐变。
其语法格式为:
background-image: radial-gradient(shape, color-stop);
参数说明如下:
shape
设置渐变的形状,其取值有circle
(圆形) 和ellipse
(椭圆)。color-stop
设置某个确定位置的颜色值。
举个例子~ 😉
新建一个 index13.html
文件,在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#radial {
display: flex;
}
/*均匀分布径向渐变*/
.gradient1 {
width: 100px;
height: 100px;
background-image: radial-gradient(#ff577f, #c6c9ff, #8ad7c1);
}
/*不均匀渐变*/
.gradient2 {
margin-left: 10px;
width: 100px;
height: 100px;
background-image: radial-gradient(#8bcdcd 5%, #ff9d72, #c6c9ff);
}
/*椭圆形渐变*/
.gradient3 {
margin-left: 10px;
width: 100px;
height: 100px;
background-image: radial-gradient(ellipse, #8ad7c1, #c6c9ff, #fce2ce);
}
/*圆形渐变*/
.gradient4 {
margin-left: 10px;
width: 100px;
height: 100px;
background-image: radial-gradient(circle, #bc6ff1, #ffd5cd, #b6eb7a);
}
</style>
</head>
<body>
<div id="radial">
<div class="gradient1"></div>
<div class="gradient2"></div>
<div class="gradient3"></div>
<div class="gradient4"></div>
</div>
</body>
</html>
点击预览页面,实验效果如下:
重复性径向渐变的使用
重复性径向渐变是用重复性的径向渐变组成的图像。它与径向渐变的区别在于,它会从原点开始重复径向渐变来覆盖整个元素。
其语法格式为:
background: repeating-radial-gradient(extent-keyword, color-stop);
参数说明如下:
-
extent-keyword
是描述边缘轮廓的具体位置,关键字常量如下所示: -
color-stop
是某个确定位置的固定颜色值。
下面,我们来举个例子吧~
新建一个 index14.html
文件,在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
display: inline-block;
margin-left: 20px;
margin-top: 20px;
}
.gradient1 {
background: repeating-radial-gradient(
closest-corner,
#8843f8 0%,
#ef2f88 5%,
#f47340 10%,
#f9d371 15%
);
}
.gradient2 {
background: repeating-radial-gradient(
farthest-side,
#8843f8,
#ef2f88,
#f47340,
#f9d371
);
}
</style>
</head>
<body>
<div class="gradient1"></div>
<div class="gradient2"></div>
</body>
</html>
点击预览页面,实验效果如下:
6.9.元素转换
transform
是元素转换属性,其属性值为转换函数,使用该属性可以让元素向指定方向移动、缩放大小、旋转等变化。
在我们的实验中,会学到以下三种转换函数:
- 旋转函数(rotate)
- 移动函数(translate)
- 缩放函数(scale)
6.9.1.旋转函数
在 CSS3 中,使用 rotate
函数能够让指定的元素对象绕原点旋转,主要在二维空间内进行操作。
其语法格式如下所示:
transform: rotate(角度); /*元素按照指定角度旋转*/
这里的角度可以是正值也可以是负值。正负值意味着什么呢?🤔
同学们可能已经猜到了,正负值意味着不同的旋转方向,规定参数为正时,顺时针旋转;参数为负时,逆时针旋转。
举个例子~ 😉
新建一个 index15.html
文件,在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 50px;
height: 50px;
margin: 20px;
display: inline-block;
background-color: chartreuse;
}
/*向右旋转 60 度*/
.c1 {
background-color: #ffe6e6;
transform: rotate(60deg);
}
/*向左旋转 60 度*/
.c2 {
background-color: #a7c5eb;
transform: rotate(-60deg);
}
</style>
</head>
<body>
<div class="c1"></div>
<div></div>
<div class="c2"></div>
</body>
</html>
点击预览页面,实验效果如下:
rotateX 和 rotateY 的使用
除了使用 rotate
函数绕原点来旋转指定元素外,我们还可以围绕指定轴来旋转元素。
rotateX
函数可以让指定元素围绕横坐标(X 轴)旋转。其使用格式如下所示:
transform: rotateX(角度);
rotateY
函数可以让指定元素围绕纵坐标(Y 轴)旋转。其使用格式如下所示:
transform: rotateY(角度);
接下来我们举个例子吧!👻
新建一个 index16.html
文件,在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.c1 {
transform: rotateX(70deg);
}
.c2 {
transform: rotateX(180deg);
}
.c3 {
transform: rotateY(45deg);
}
.c4 {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div>
<img
src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-64.png"
/>
<img
src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-64.png"
class="c1"
/>
<img
src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-64.png"
class="c2"
/>
</div>
<div>
<img
src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-85.png"
/>
<img
src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-85.png"
class="c3"
/>
<img
src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-85.png"
class="c4"
/>
</div>
</body>
</html>
点击预览页面,实验效果如下:
同学们对上面的结果可能很疑惑,想象不出具体是怎么旋转的,下面我用动图来给大家展示一下旋转过程。
沿 X 轴旋转 180deg
的过程如下所示:
沿 Y 轴旋转 180deg
的过程如下所示:
6.9.2.移动函数
translate()
函数能够重新定位元素坐标,该函数包含两个参数值,分别用来定位 X 轴和 Y 轴的新坐标。
其语法格式为:
transform: translate(移动值); /*元素按照指定值沿着 X 轴和 Y 轴移动*/
transform: translateX(移动值); /*元素按照指定值沿着 X 轴移动*/
transform: translateY(移动值); /*元素按照指定值沿着 Y 轴移动*/
6.9.3.缩放函数
scale()
函数能够缩放元素大小,该函数包含两个参数,分别用来定义宽和高的缩放比例。
其语法格式为:
transform: scale(缩放值); /*元素按照指定值沿着 X 轴和 Y 轴缩放*/
transform: scaleX(缩放值); /*元素按照指定值沿着 X 轴缩放*/
transform: scaleY(缩放值); /*元素按照指定值沿着 Y 轴缩放*/
6.10.过渡
CSS3 过渡是元素从一种样式逐渐过渡到另一种样式。
其语法如下所示:
transition: 指定属性 持续时间 速度曲线 开始时间;
它是一个复合属性,我们也可以如下分开使用这几个属性。
transition-property: 属性值; /*指定属性名*/
transition-duration: 属性值; /*完成过渡这一过程的时间*/
transition-timing-function: 属性值; /*速度曲线*/
transition-delay: 属性值; /*过渡的开始时间*/
举个例子~ 😉
新建一个 index19.html
文件,在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
margin-top: 40px;
margin-left: 40px;
width: 50px;
height: 50px;
background-color: #51adcf;
/*ease-in-out 慢速开始慢速结束*/
transition: transform 1s ease-in-out;
}
div:nth-child(2) {
transform: rotate(-60deg);
}
div:hover {
transform: scale(2);
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
点击预览页面,实验效果如下:
代码说明如下:
- 在
div:hover
中,使用transform: scale(2)
设置当鼠标放在div
元素上时,元素会放大 1 倍。 - 在
div:nth-child(2)
中,使用div:nth-child(2)
设置第二个元素逆时针旋转60deg
。 - 使用
transition
属性实现过渡的效果,其中ease-in-out
是transition-timing-function
属性的属性值。
接下来给大家介绍一下 transition-timing-function
属性的取值吧!
transition-timing-function 属性
transition-timing-function
属性用来设置过渡效果从开始到结束的时间曲线,它有很多可用属性值,常用属性值如下表所示。
属性值 | 说明 |
---|---|
ease | 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。 |
linear | 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。 |
ease-in | 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。 |
ease-out | 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。 |
ease-in-out | 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。 |
steps(int,start 或者 end) | steps() 有两个参数,第一个为步长,其值必须为整数,第二个值为可选值,它有两个取值,分别是 start 和 end。 |
step-start | 相当于 steps(1, start)。 |
step-end | 相当于 steps(1, end)。 |
cubic-bezier(n,n,n,n) | 规定在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
initial | 规定使用默认值。 |
inherit | 规定从父元素继承该属性值。 |
transition-timing-function
属性有这么多的属性值,我们用 steps
来练习一下吧~ 🤪
新建一个 index20.html
文件,在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 50px;
height: 50px;
margin: 50px;
background-color: cornflowerblue;
transition: transform 4s steps(4);
}
div:hover {
transform: scale(2);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
点击预览页面,实验效果如下:
在上面代码中,用 steps
的方式将 div
元素分成四步,使元素的面积逐渐变成原来的 2 倍,当鼠标从元素上移开,又会以四步的形式将元素还原成原有的大小。
6.11.动画
@keyframes
被称为关键帧,它能够设置一些元素的样式,让该元素可以从原来的样式渐渐过渡到新的样式中。其语法格式如下所示:
@keyframes 动画名
{
0% {样式属性:属性值;}
25% {样式属性:属性值;}
50% {样式属性:属性值;}
100% {样式属性:属性值;}
}
这里的百分比是用来规定动画发生变化的时间的,0%
代表动画的开始,100%
代表动画的结束,中间的可以自定义。
将 @keyframes
创建的动画绑定到选择器上,通过 animation
属性就能实现动画效果了,其语法格式为:
animation: 动画名 完成动画的周期 是否重复;
animation
属性是一个复合属性,它的子属性如下所示。
属性 | 描述 |
---|---|
animation-name | 规定 @keyframes 动画的名称。 |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 |
animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 |
animation-fill-mode | 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。 |
animation-delay | 规定动画何时开始。默认是 0。 |
animation-iteration-count | 规定动画被播放的次数。默认是 1。 |
animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 |
举个例子~ 😉
新建一个 index21.html
文件,在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.circle {
width: 60px;
height: 60px;
border-radius: 100%;
background-color: #ffd8a6;
animation-name: action;
animation-duration: 9s;
animation-iteration-count: 10;
}
@keyframes action {
0% {
margin-left: 400px;
}
25% {
background-color: #dd7631;
}
50% {
border-radius: 10%;
}
100% {
margin: 100px;
}
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
点击预览页面,实验效果如下:
7.弹性盒子
知识点
- flex-direction
- flex-wrap
- align-items
- align-content
flex-direction
属性,它指定了弹性子元素在父容器中的排列方向和顺序。flex-wrap
属性,它指定了弹性盒子的子元素换行方式。align-items
属性,它设置或检索弹性盒子元素在轴上对齐方式。align-content
属性,它是用于控制多行的对齐方式。
flext
在 CSS3 中给 display
属性增加了新的属性值 flex
,如果一个元素被设置 display:flex
,说明该元素为弹性布局,也就是个弹性盒子。
flex 主要由两个轴来控制布局,如下图所示。
上图说明如下:
- main axis 是主轴,该轴的开始为 main start,结束为 main end。
- cross axis 是交叉轴,该轴的开始为 cross start,结束为 cross end。
- flex item 是 flex 容器中的元素。
在这个弹性盒子中,提供了一些属性来操作这些元素,这里我会给大家介绍几种常见的属性。
接下来我们一一来学习吧~~
7.1.flex-direction 属性
flex-direction
属性指定了弹性子元素在父容器中的排列方向和顺序。
其语法格式为:
flex-direction: row | row-reverse | column | column-reverse;
其属性值的意义如下所示:
属性值 | 描述 |
---|---|
row | 横向从左到右排列(左对齐),默认的排列方式。 |
row-reverse | 反转横向排列(右对齐),从后往前排,最后一项排在最前面。 |
column | 纵向排列 |
column-reverse | 反转纵向排列,从后往前排,最后一项排在最上面。 |
举个例子~ 😉
新建一个 index.html
文件,在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.content1 {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-direction: row; /*默认值,行对齐,主轴起点与终点相同*/
}
.content2 {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-direction: row-reverse; /*行对齐,主轴起点与终点相反*/
}
.content3 {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-direction: column; /*列对齐,主轴起点与终点相同*/
}
.content4 {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-direction: column-reverse; /*列对齐,主轴起点与终点相反*/
}
.box {
width: 50px;
height: 50px;
color: black;
}
</style>
</head>
<body>
<div class="content1">
<div class="box" style="background-color:#FFE5B9;">A</div>
<div class="box" style="background-color:#EFF8FF;">B</div>
<div class="box" style="background-color:#C9CBFF;">C</div>
</div>
<div class="content2">
<div class="box" style="background-color:#FFE5B9;">A</div>
<div class="box" style="background-color:#EFF8FF;">B</div>
<div class="box" style="background-color:#C9CBFF;">C</div>
</div>
<div class="content3">
<div class="box" style="background-color:#FFE5B9;">A</div>
<div class="box" style="background-color:#EFF8FF;">B</div>
<div class="box" style="background-color:#C9CBFF;">C</div>
</div>
<div class="content4">
<div class="box" style="background-color:#FFE5B9;">A</div>
<div class="box" style="background-color:#EFF8FF;">B</div>
<div class="box" style="background-color:#C9CBFF;">C</div>
</div>
</body>
</html>
点击预览页面,效果如下。
7.2. flex-wrap 属性
flex-wrap
属性用于指定弹性盒子的子元素换行方式。
其语法格式为:
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
其属性值的意义如下所示:
属性值 | 描述 |
---|---|
nowrap | 默认, 弹性容器为单行。该情况下弹性子项可能会溢出容器。 |
wrap | 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行,子项内部会发生断行。 |
wrap-reverse | 反转 wrap 排列。 |
举个例子~ 😉
新建一个 index1.html
文件,在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
color: black;
}
#content {
width: 240px;
height: 300px;
background-color: white;
display: flex;
flex-wrap: wrap-reverse;
}
.item1 {
background-color: #ffe5b9;
}
.item2 {
background-color: #eff8ff;
}
.item3 {
background-color: #c9cbff;
}
</style>
</head>
<body>
<div id="content">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
</div>
</body>
</html>
点击预览页面,查看效果如下:
7.3.align-items 属性
align-items
属性是用来设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。
其语法格式为:
align-items: flex-start | flex-end | center | baseline | stretch;
其属性值的意义如下所示:
属性值 | 描述 |
---|---|
flex-start | 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。 |
flex-end | 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。 |
center | 弹性盒子元素在该行的侧轴(纵轴)上居中放置。 |
baseline | 如弹性盒子元素的行内轴与侧轴为同一条,则该值与 flex-start 等效。其它情况下,该值将参与基线对齐。 |
stretch | 如果指定侧轴大小的属性值为 auto ,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照 min/max-width/height 属性的限制。 |
举个例子~ 😉
新建一个 index2.html
文件,在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 100px;
color: black;
}
#content {
width: 240px;
height: 300px;
background-color: white;
display: flex;
align-items: stretch;
}
.item1 {
background-color: #ffe5b9;
}
.item2 {
background-color: #eff8ff;
}
.item3 {
background-color: #c9cbff;
}
</style>
</head>
<body>
<div id="content">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
</div>
</body>
</html>
点击预览页面,查看效果如下。
7.4.align-content 属性的使用
align-content
属性可以用于控制多行的对齐方式,如果只有一行则不会起作用。
其语法格式为:
align-content: flex-start | flex-end | center | space-between | space-around |
stretch;
其属性值的意义为:
属性值 | 描述 |
---|---|
stretch | 默认。各行将会伸展以占用剩余的空间。 |
flex-start | 各行向弹性盒容器的起始位置堆叠。 |
flex-end | 各行向弹性盒容器的结束位置堆叠。 |
center | 各行向弹性盒容器的中间位置堆叠。 |
space-between | 各行在弹性盒容器中平均分布。 |
space-around | 各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半。 |
举个例子~ 😉
新建一个 index3.html
文件,在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 60px;
color: black;
}
#content {
width: 300px;
height: 300px;
background-color: antiquewhite;
display: flex;
flex-wrap: wrap;
align-content: stretch;
}
.left {
background-color: gray;
}
.center {
background-color: silver;
}
.right {
background-color: darkgray;
}
</style>
</head>
<body>
<div id="content">
<div class="left">div1块</div>
<div class="center">div2块</div>
<div class="right">div3块</div>
<div class="left">div4块</div>
<div class="center">div5块</div>
<div class="right">div6块</div>
<div class="left">div7块</div>
<div class="center">div8块</div>
<div class="right">div9块</div>
<div class="left">div10块</div>
<div class="center">div11块</div>
<div class="right">div12块</div>
</div>
</body>
</html>
点击预览,效果如下。
8.@media 媒体查询
8.1.@media 语法
@media
可以直接写在 CSS 样式中,或者可以针对不同的媒体设备,从外部链入不同的 stylesheets(外部样式表)。接下来,一起看下两种情况的使用语法:
1. 直接写在 CSS 样式中
定义语法如下:
@media mediatype and|not|only (media feature) {
CSS-Code;
}
一个完整的媒体查询由以下五部分组成:
- 必须是以
@media
开头 。 - 使用
mediatype
指定媒体(设备)类型 。 - 使用
and | not | only
逻辑操作符构建复杂的媒体查询 。 - 使用
media feature
指定媒体特性 。 - CSS-Code 位置是要设置的 CSS 样式。
mediatype
(媒体类型)取值范围如下:
值 | 描述 |
---|---|
all | 适用于所有设备 |
用于打印机和打印预览 | |
screen | 用于电脑屏幕,平板电脑,智能手机等 |
speech | 用于屏幕阅读器等发声设备 |
被废弃的媒体类型: CSS2.1 和 Media Queries 3 定义了一些额外的媒体类型( tty, tv, projection, handheld, braille, embossed, 以及 aural ),但是它们在 Media Queries 4 中已经被废弃,并且不应该被使用。aural 类型被替换为具有相似效果的 speech 。
逻辑操作符取值范围如下:
值 | 描述 |
---|---|
and | 用于将多个媒体查询规则组合成单条媒体查询,当每个查询规则都为真时则该条媒体查询为真 |
not | 用来排除某种设备 |
only | 用以指定某特定媒体设备 |
media feature
(媒体特性)常用取值如下:
值 | 描述 |
---|---|
max-width | 定义输出设备中的页面最大可见区域宽度 |
max-height | 定义输出设备中的页面最大可见区域高度 |
min-width | 定义输出设备中的页面最小可见区域宽度 |
min-height | 定义输出设备中的页面最小可见区域高度 |
orientation | 视口(viewport)的旋转方向。portrait :表示 viewport 处于纵向,即高度大于等于宽度 ; landscape :表示 viewport 处于横向,即宽度大于高度 |
如果你还想了解更多完整 media feature
取值,请访问:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries
。
2. 针对不同的媒体设备,从外部链入不同的 stylesheets(外部样式表)
用 media
属性为 <link>
指定特定的媒体类型。定义语法如下:
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystyle.css">
其中,mediatype
、逻辑操作符、media feature
的取值与第一种直接写在 CSS 样式中的取值相同,这里不再进行赘述。
二者区别在于,第一种写在 CSS 样式中是当条件成立后,执行 CSS Code , 第二种则是条件成立后,加载对应的外部样式表。
8.2.使用 @media 实现网页变色龙
学习了 @media
的语法后,一起动手操练一下,使用 @media
实现网页变色龙,让你的网页在不同的屏幕尺寸下显示不同的颜色。
首先,打开你们的线上环境,新建一个 index.html
文件,然后使用快捷键生成模版。
在 index.html
文件中写入以下内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
@media screen and (max-width: 500px) {
body {
background-color: red;
}
}
@media screen and (min-width: 800px) {
body {
background-color: green;
}
}
@media screen and (min-width: 1024px) {
body {
background-color: blue;
}
}
</style>
</head>
<body></body>
</html>
上述代码做了如下操作:
- 定义媒体查询规则,当设备类型为
screen
并且设备中的页面最大可见区域宽度为500px
的时候,页面背景颜色为红色。 - 定义媒体查询规则,当设备类型为
screen
并且设备中的页面最小可见区域宽度为800px
的时候,页面背景颜色为绿色。 - 定义媒体查询规则,当设备类型为
screen
并且设备中的页面最小可见区域宽度为1024px
的时候,页面背景颜色为蓝色。
启动 8080 端口,打开 Web 服务,在浏览器中访问即可看到如下效果。
手动缩小浏览器宽度,当宽度大于 800px
且小于 1024px
时,页面显示绿色。
继续缩小浏览器宽度,当宽度小于 500px
时,页面显示红色。