目录
一、CSS介绍
1. CSS是什么
- CSS 指的是层叠样式表 (Cascading Style S*heets)
- CSS 是用来指定文档如何展示给用户的一门语言——如网页的样式、布局、等
- CSS 用于定义网页的样式,包括不同设备和屏幕尺寸的设计,布局和显示变化
2. CSS的特点
CSS 是 Web 领域的一个突破,它为 HTML 提供了一种描述元素样式的方式,使用 CSS 和 HTML 可以制作出外形优美的网页。总体来说 CSS 具有以下特点:
- 丰富的样式定义:可以在网页中实现各式各样的效果
- 易于使用和修改:CSS的样式信息可以定义在外部、内部、行内等多种形式
- 多页面应用:可以在不同的页面引用同一个 .css 格式的文件,统一不同页面的风格
- 层叠:可以对同一个 HTML 元素多次定义 CSS 样式,后面定义的样式会覆盖前面定义的样式
- 页面压缩:将 CSS 样式定义在单独的样式文件中,与 HTML 文档分开
3. CSS语法规则
CSS 样式由一系列规则组成,这些规则由 Web 浏览器解析,然后应用于 HTML 文档相应的元素上。CSS 样式规则由三个部分组成,分别是选择器、属性和值:
- 选择器:由 HTML 元素的 id、class 属性或元素名本身以及一些特殊符号构成,用来指定要为哪个 HTML 元素定义样式,例如选择器
p
就表示为页面中的所有<p>
标签定义样式; - 属性:您希望给 HTML 元素设置的样式名称,由一系列关键词组成,例如 color(颜色)、border(边框)、font(字体)等,CSS 中提供了众多属性,您可以通过 w3school查看;
- 值:由数值和单位或者关键字组成,用来控制某个属性的显示效果,例如 color 属性的值可以是 red 或 #F1F1F1 等。
您可以按照如下图所示的语法规则来定义 CSS 样式:
![](https://i-blog.csdnimg.cn/blog_migrate/e72bfbbcc7dea75a42f3c5ac162eaee7.png)
二、CSS使用
1. 外部 CSS
- 外部 CSS 样式在 HTML 页面 <head> 部分内的 <link> 元素中进行引用
- 多个 HTML 页面可同时引用同一个 CSS 文件,实现更改一个文件即可更改多个页面的外观
- 可以在任何文本编辑器中编写,并且以 .css 扩展名保存
- 外部 .css 文件不应包含任何 HTML 标签
/* 创建一个 mystyle.css 文件 */
body {
background-color: blue;
}
h1 {
color: red;
margin-left: 40px;
}
<!-- 在 html 中使用自己创建的 mystyle.css 文件 -->
<!DOCTYPE html>
<html>
<head>
<!-- 引入自己创建的 mystyle.css 文件 -->
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
</body>
</html>
2. 内部 CSS
- 如果一个页面具有唯一样式,则可以使用内部样式表
- 内部样式在 HTML 页面的 <head> 部分内的 <style> 元素中进行定义
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: blue;
}
h1 {
color: red;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
3. 行内(内联) CSS
- 行内样式可用于为单个元素应用唯一样式
- 行内样式在相关标签元素的 "style" 属性中定义
提示:行内样式失去了样式表的许多优点(通过将内容与呈现混合在一起),请谨慎使用此方法。
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a heading</h1>
</body>
</html>
4. CSS样式优先级
如上,CSS样式有三种使用方式,它们可以组合使用。当组合使用时如果对同一个标签元素都设置了样式,会出现样式层叠(即样式被覆盖)。
层叠优先级:浏览器默认样式 < 外部样式表 < 内部样式表 < 行内(内联)样式
如下示例中,将以行内样式为最终呈现效果,文字颜色将设置为蓝色(color: blue;)
/* 创建一个 mystyle.css 文件 */
h1 {
color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<!-- 引入自己创建的 mystyle.css 文件 -->
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1 style="color:blue;">This is a heading</h1>
</body>
</html>
三、CSS常用选择器
CSS 选择器用于“查找”(或选取)要设置样式的 HTML 元素。
常用 CSS 选择器分为五类:
1. 简单选择器
选择器 | 示例 | 示例描述 |
通用选择器 | * {} | 通用选择器(*)选择页面上的所有的 HTML 元素添加样式 |
元素选择器 | div {} | 元素选择器选择指定的标签元素 |
分组选择器 | div, h1, p {} | 分组选择器选择所有指定的标签元素 |
id 选择器 | #para {} | id 选择器使用 HTML 元素的 id 属性来选择特定元素 |
类选择器 | .box {} | 类选择器选择有特定 class 属性的 HTML 元素 |
2. 关系选择器
根据它们之间的特定关系来选取元素
选择器 | 示例 | 示例描述 |
后代选择器 | div p {} | 后代选择器匹配属于指定元素后代的所有元素 |
子选择器 | div > p {} | 子选择器匹配属于指定元素子元素的所有元素 |
相邻兄弟选择器 | div + p {} | 相邻兄弟选择器匹配第二个元素紧跟在第一个元素之后的同级元素 |
通用兄弟选择器 | div ~ p {} | 通用兄弟选择器匹配第一个元素之后所有同层级的第二个元素 |
3. 属性选择器
根据特定属性或属性值来选取元素
选择器 | 示例 | 示例描述 |
[attribute] | a[target] {} | 选取带有指定属性的元素 |
[attribute="value"] | a[target="_blank"] {} | 选取带有指定属性和值的元素 |
[attribute~="value"] | [title~="flower"] {} | 选取属性值包含指定词的元素 |
[attribute|="value"] | [class|="top"] {} | 选取指定属性以指定值开头的元素 |
[attribute^="value"] | [class^="top"] {} | 选取指定属性以指定值开头的元素 |
[attribute$="value"] | [class$="test"] {} | 选取指定属性以指定值结尾的元素 |
[attribute*="value"] | [class*="te"] {} | 选取属性值包含指定词的元素 |
4. 伪元素选择器
伪元素用于设置元素指定部分的样式,例如,它可用于:
- 设置元素的首字母、首行的样式
- 在元素的内容之前或之后插入内容
选择器 | 示例 | 示例描述 |
::after | p::after | 在每个 <p> 元素之后插入内容 |
::before | p::before | 在每个 <p> 元素之前插入内容 |
::first-letter | p::first-letter | 选择每个 <p> 元素的首字母,只能应用于块级元素 |
::first-line | p::first-line | 选择每个 <p> 元素的首行,只能应用于块级元素 |
::selection | p::selection | 选择用户选择的元素部分 |
5. 伪类选择器
伪类是用于定义元素的特殊状态,例如,它可以用于:
- 设置鼠标悬停在元素上时的样式
- 为已访问和未访问链接设置不同的样式
- 设置元素获得焦点时的样式
常用的伪类选择器
选择器 | 示例 | 示例描述 |
:active | a:active | 选择活动的链接 |
:checked | input:checked | 选择每个被选中的 <input> 元素 |
:disabled | input:disabled | 选择每个被禁用的 <input> 元素 |
:empty | p:empty | 选择没有子元素的每个 <p> 元素 |
:first-child | p:first-child | 选择作为其父的首个子元素的每个 <p> 元素 |
:last-child | p:last-child | 选择作为其父的最后一个子元素的每个 <p> 元素 |
:focus | input:focus | 选择获得焦点的 <input> 元素 |
:hover | a:hover | 选择鼠标悬停其上的链接 |
:not(selector) | :not(p) | 选择每个非 <p> 元素的元素 |
:nth-child(n) | p:nth-child(2) | 选择作为其父的第二个子元素的每个 <p> 元素 |
:nth-last-child(n) | p:nth-last-child(2) | 选择作为父的第二个子元素的每个 <p> 元素,从最后一个子元素计数 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 选择作为父的第二个 <p> 元素的每个 <p> 元素,从最后一个子元素计数 |
:nth-of-type(n) | p:nth-of-type(2) | 选择作为其父的第二个 <p> 元素的每个 <p> 元素 |
:root | root | 选择元素的根元素 |
:target | #news:target | 选择当前活动的 #news 元素(单击包含该锚名称的 URL) |
6. 选择器优先级
如同 CSS 样式在组合使用中拥有优先级一样,当同一个标签元素被多个选择器选中并使用时,也会有优先级的顺序。
选择器优先级大致可分为六等,从高到低的顺序为:
- 行内(内联)样式
- id 选择器
- 类选择器、属性选择器、伪类选择器
- 元素选择器、伪元素选择器
- 后代选择器、子选择器、兄弟选择器、通用选择器等
- 浏览器默认属性
提示:
- 当权值相等时,后定义的样式表要优于先定义的样式表
- 在同一组属性设置中表有 !important 规则的优先级最大
四、CSS3新特性
CSS3 是 CSS2.1 的一个升级版,它是对 CSS 的一个扩展。
CSS3 新增的特性按照功能大致可分为六大部分:
1. 选择器的拓展
CSS3 新增了许多可使用的选择器使得前端开发人员在选择页面元素时更加灵活。
新增的选择器包含如下几个方面:
- 属性选择器
- 伪类选择器
- 伪元素选择器
- 否定选择器
- 关系选择器》通用兄弟选择器
具体使用和说明请看【CSS 常用选择器】。
2. 页面布局的加强
CSS 布局有多种方式,不同的页面风格采用合适的布局能有效提升工作效率,本文介绍了 CSS3 常用的几种布局方式,不推荐的布局不在本文中介绍。
2.1 浮动布局
float 浮动属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
浮动的使用
/* 设置右浮动 */
#para {
float:right;
}
属性值
值 | 描述 |
left | 元素浮动到其容器的左侧,试一试 |
right | 元素浮动在其容器的右侧,试一试 |
none | 元素不会浮动(将显示在文本中刚出现的位置),默认值,试一试 |
设置了浮动的元素有以下特性:
- 脱离标准流,不占位置(自己原来的位置漏给后面的标流)
- 浮动的元素一排显示,如果父亲装不下了,默认另起一行显示。浮动的元素之间默认无缝隙
- 任何元素都可以添加浮动,无论它是块元素还是行内元素,浮动后可以直接设置宽高
由于浮动元素脱离了标准流,变成了脱标元素,所以不再向父元素汇报高度,计算总高度时,就不会计算浮动子元素的高度,导致了高度坍塌的问题。
为解决父元素高度坍塌问题的过程,在设置浮动后我们还需要清浮动。
清浮动
使用 clear
属性清浮动,clear
属性取值如下:
值 | 描述 |
left | 要求元素的顶部低于之前生成的所有左浮动元素的底部 |
right | 要求元素的顶部低于之前生成的所有右浮动元素的底部 |
none | 默认值,无特殊要求 |
both | 要求元素的顶部低于之前生成的所有浮动元素的底部 |
clear
属性的使用(建议使用伪元素清浮动),试一试:
/* 给父元素增加::after伪元素,并设置 clear 属性 */
.clear-fix::after {
content: " ";
display: block;
clear: both;
}
2.2 定位布局
页面布局时可以使用 css 中的 position
属性控制元素在包含块的精准位置,通过top、bottom、left、right设置元素的偏移量。
position
属性有五个不同的位置值:
- static - 静态定位(不定位),默认值
- relative - 相对定位
- absolute - 绝对定位
- fixed - 固定定位
- sticky - 粘性定位
static
HTML元素默认的定位是静态,默认定位在文档流中,设置 position: static; 样式的元素不会受到left,right,bottom,top的影响。它不会因为任何特殊的定位方法而改变其在正常流中的位置。试一试
relative
相对定位是元素相对于其在原来标准流中位置进行移动,通过left,right,bottom,top属性进行调整。试一试
注意点
- 设置了相对定位的元素是不脱离文档流的,也就是说他是区分行内元素/块级元素/行内块元素
- 因为他不脱离文档流,那我们就可以他添加
magin
和padding
- 在同一方向上只能设置一个属性,即
left
,right
选择一个属性设置,设置了top
就不能设置bottom
使用场景
- 结合绝对定位使用
- 对元素进行微调
absolute
绝对定位的参考点
- 默认情况下,无论有无祖先元素,都是以 body 作为参考点。
- 但是,当祖先元素中有定位流元素(使用了绝对/相对/固定定位),那么该元素就是参考点
- 如果其祖先元素中含有多个定位流元素,则选择最近的定位流元素作为参考点
注意点
- 绝对定位的元素是脱离文档流的
- 因为他脱离文档流,那么他就不区分行内元素/块级元素/行内块元素
- 绝对定位的元素是会忽略其祖先元素的
padding
fixed
设置了固定定位的元素是相对于视口定位的,也就是说其不会随着滚动条的滚动而滚动,他始终处于以一个视口的位置,通过 left
,right
,bottom
,top
属性调整其位置。试一试
注意点
- 固定定位的元素是脱离文档流的
- 和绝对定位一样,不区分区分行内元素/块级元素/行内块元素
sticky
此定位结合了相对定位和固定定位,通过相对定位定位到某一位置,当视口到达此位置时,将其固定住,例如:设置 top: 50px,那么在 sticky 元素到达距离相对定位的元素顶部 50px 的位置时固定,不再向上移动(此时相当于 fixed 定位)。试一试
注意点
- 粘滞定位的元素是不脱离文档流的
- 设置 position: sticky; 同时给一个(left,right,bottom,top) 之一即可
使用条件
- 父元素不能 overflow: hidden 或者 overflow: auto 属性。
- 必须指定
left
,right
,bottom
,top
4个值之一,否则只会处于相对定位 - 父元素的高度不能低于 sticky 元素的高度
- sticky 元素仅在其父元素内生效
z-index
使元素浮起来,脱离文档流。默认情况下所有元素的 z-index 的值都为 0,z-index 专门用于控制定位流 的覆盖关系,也就是说他只在定位流(使用了绝对/相对/固定定位)里才会生效。试一试
注意点
- 当两个父元素都没设置 z-index 时,子元素的 z-index 谁大谁在上
- 当两个父元素都设置 z-index 时,子元素的 z-index 失效,看父元素的 z-index 谁大谁在上
2.3 多列布局
在以前,如果我们需要实现一个多列的页面布局,往往采用的方案是浮动或者绝对定位。
CSS3 新增了多列布局用以定义多栏布局的模块,可支持在布局中建立列(column)的数量,以及内容如何在列之间流动(flow)、列之间的间距(gap)大小,以及列的分隔线(column rules),常用于文章排版。
![](https://i-blog.csdnimg.cn/blog_migrate/38de7a4d2049ef6d6ef18b9100be31bd.png)
多列属性介绍:
属性 | 描述 | 示例 |
column-count | 规定元素应划分的列数 | |
column-gap | 指定列之间的间隙 | |
column-rule | 用于设置下面所有 column-rule-* 属性的简写属性 | |
column-rule-color | 规定列之间规则的颜色 | |
column-rule-style | 规定列之间的规则样式 | |
column-rule-width | 规定列之间的规则宽度 | |
column-span | 规定一个元素应该跨越多少列 | |
column-width | 为列指定建议的最佳宽度 |
2.4 弹性盒布局
CSS3 弹性盒(Flexbox),是一种用于按行或按列布局元素的一维布局方法。当页面需要适应不同的屏幕大小时的响应式布局结构,可以对一个容器中的子元素进行排列、对齐和分配空白空间。
如需开始使用 Flexbox 模型,您需要首先定义 Flex 容器,设置属性为 flex
或 inline-flex
。如下,蓝色块为内容块(1、2、3)的父元素,将父元素加上属性 display: flex;
,flex 容器将可伸缩:
![](https://i-blog.csdnimg.cn/blog_migrate/1b1de3ecd829501a4d6f1eae722ce5ef.png)
<!-- 示例代码 -->
<div style="display: flex;">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
flex 容器属性介绍:
![](https://i-blog.csdnimg.cn/blog_migrate/91471fd81b3d25d65fc4601c2d774b78.jpeg)
属性 | 描述 | 示例 |
flex-direction | 规定弹性容器内的弹性项目的方向 | |
justify-content | 当弹性项目没有用到主轴上的所有可用空间时,水平对齐这些项 | |
align-items | 当弹性项目没有用到主轴上的所有可用空间时,垂直对齐这些项 | |
flex-wrap | 规定弹性项目是否应该换行,若一条 flex 线上没有足够的空间容纳它们 | |
flex-flow | flex-direction 和 flex-wrap 的简写属性 | |
align-content | 修改 flex-wrap 属性的行为。与 align-items 相似,但它不对齐弹性项目,而是对齐 flex 线 | |
order | 规定弹性项目相对于同一容器内其余弹性项目的顺序 | |
align-self | 用于弹性项目。覆盖容器的 align-items 属性 | |
flex | flex-grow、flex-shrink 以及 flex-basis 属性的简写属性 |
提示:更多示例及属性详细介绍请查看 MDN 文档 - Flexbox
2.5 网格布局
CSS3 网格是一个用于 web 的二维布局系统。网格是由一系列水平及垂直的线构成的一种布局模式。根据网格,我们能够将设计元素进行排列,帮助我们设计一系列具有固定位置以及宽度的元素的页面,使我们的网站页面更加统一。
当 HTML 元素的 display
属性设置为 grid
或 inline-grid
时,它就会成为网格容器:
.grid-container {
display: grid;
}
容器指定了网格布局以后,接着就要划分行和列,以及间隙等属性,对容器内元素进行布局,以下介绍了常用的网格布局属性:
属性 | 描述 | 示例 |
grid-template-columns | 定义每一列的列宽 | |
grid-template-rows | 定义每一行的行高 | |
grid-template-areas | 定义显示行和列,使用命名的网格元素 | |
grid-template | 以上的简写形式 | |
grid-row-gap | 设置行与行的间隔(行间距) | |
grid-column-gap | 设置列与列的间隔(列间距) | |
grid-gap | 以上的简写形式 | |
grid-row-start | 定义行的开始位置 | |
grid-row-end | 定义行的结束位置 | |
grid-row | 以上的简写形式 | |
grid-column-start | 定义列的开始位置 | |
grid-column-end | 定义列的结束位置 | |
grid-column | 以上的简写形式 | |
grid-area | 以上grid-row/column-start/end的简写形式 | |
justify-content | 用于在容器内对齐整个网格 | |
align-content | 用于垂直对齐容器内的整个网格 |
其属性值除了填写像素,它还支持百分比、fr 关键字等多种方式,以方便计算使用:
- repeat()
有时候,重复写同样的值非常麻烦,尤其网格很多时。这时,可以使用repeat()
函数,简化重复的值。
/* 指定一个三行三列的网格,列宽和行高都是100px */
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
- auto-fill 关键字
有时,单元格的大小是固定的,但是容器的大小不确定。如果希望每一行(或每一列)容纳尽可能多的单元格,这时可以使用auto-fill
关键字表示自动填充。
/* 设置每列宽度100px,然后自动填充,直到容器不能放置更多的列 */
grid-template-columns: repeat(auto-fill, 100px);
- fr 关键字
为了方便表示比例关系,网格布局提供了fr
关键字(fraction 的缩写,意为"片段")。如果两列的宽度分别为1fr
和2fr
,就表示后者是前者的两倍。
/* 两个相同宽度的列 */
grid-template-columns: 1fr 1fr;
/* 第一列的宽度为150像素,第二列的宽度是第三列的一半 */
grid-template-columns: 150px 1fr 2fr;
- minmax()
minmax()
函数产生一个长度范围,表示长度就在这个范围之中。它接受两个参数,分别为最小值和最大值。
/* 设置三列,第三列宽度最小为100px,最大为150px */
grid-template-columns: 1fr 1fr minmax(100px, 150px);
- auto 关键字
auto
关键字表示由浏览器自己决定长度。
/* 设置三列,第二列的宽度撑满剩余空间 */
grid-template-columns: 100px auto 100px;
3. 元素修饰的加强
3.1 颜色和不透明度
CSS 支持140多种颜色名称,以及十六进制和 RGB 颜色。
此外,CSS3 还增加了如右几种:RGBA 颜色、HSL 颜色、HSLA 颜色、opacity 不透明度。
RGBA 颜色
RGBA 颜色值是 RGB 颜色值的扩展,带有 alpha 通道 - 该通道规定颜色的不透明度。
RGBA 颜色值是这样规定的:rgba(red, green, blue, alpha)。 alpha 参数是介于 0.0(完全透明)和 1.0(完全不透明)之间的数字。
![](https://i-blog.csdnimg.cn/blog_migrate/9512ebbc75042f53ee548fbfa24aaf46.png)
下面的例子定义了不同的 RGBA 颜色:
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* 带不透明度的红色 */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* 带不透明度的绿色 */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* 带不透明度的蓝色 */
HSL 颜色
HSL 指的是色相、饱和度和亮度(Hue、Saturation 以及 Lightness)。
HSL 颜色值是这样规定的:hsl(hue, saturation, lightness)。
色相(hue)是色轮上的度数(从 0 到 360):
- 0(或 360)是红色
- 120 是绿色
- 240 是蓝色
饱和度(saturation)是一个百分比值:100% 是全色。
亮度也(lightness)是一个百分比值:0% 是深色(黑色),而 100% 是白色。
![](https://i-blog.csdnimg.cn/blog_migrate/c1d990b2cc8df874978c1175ed3aa9f4.png)
下面的例子定义了不同的 HSL 颜色:
#p1 {background-color: hsl(120, 100%, 50%);} /* 绿色 */
#p2 {background-color: hsl(120, 100%, 75%);} /* 浅绿色 */
#p3 {background-color: hsl(120, 100%, 25%);} /* 深绿色 */
HSLA 颜色
HSLA 颜色值是带有 Alpha 通道的 HSL 颜色值的扩展 - 它规定了颜色的不透明度。
HSLA 颜色值由以下参数规定:hsla(hue, saturation, lightness, alpha),其中 alpha 参数定义不透明度。 alpha 参数是介于 0.0(完全透明)和 1.0(完全不透明)之间的数字。
![](https://i-blog.csdnimg.cn/blog_migrate/f517a822bff59341b4467c76fd3b0453.png)
下面的例子定义了不同的 HSLA 颜色:
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* 带不透明度的绿色 */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* 带不透明度的浅绿色 */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* 带不透明度的深绿色 */
Opacity不透明度
CSS opacity
属性设置整个元素的不透明度(背景颜色和文本都将是不透明/透明的)。
opacity
属性值必须是介于 0.0(完全透明)和 1.0(完全不透明)之间的数字。
![](https://i-blog.csdnimg.cn/blog_migrate/5b215e5ea78baddf4b50e6da11256255.png)
请注意,上面的文本也将是透明/不透明的!
下面的例子显示了带有不透明度的不同元素:
#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* 带不透明度的红色 */
#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* 带不透明度的绿色 */
#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* 带不透明度的蓝色 */
3.2 圆角支持
通过 border-radius
属性定义元素角的半径,可以实现任何元素的“圆角”样式。
border-radius
属性可以接受一到四个值。规则如下:
- 四个值 - border-radius: 15px 50px 30px 5px;(依次分别用于:左上角、右上角、右下角、左下角)
- 三个值 - border-radius: 15px 50px 30px;(第一个值用于左上角,第二个值用于右上角和左下角,第三个用于右下角)
- 两个值 - border-radius: 15px 50px;(第一个值用于左上角和右下角,第二个值用于右上角和左下角)
- 一个值 - border-radius: 15px;(该值用于所有四个角,圆角都是一样的)
也可以单独设置一个角的值:
- 左上角 - border-top-left-radius:12px;
- 右上角 - border-top-right-radius:12px;
- 左下角 - border-bottom-left-radius:12px;
- 右下角 - border-bottom-right-radius:12px;
圆角属性:
属性 | 描述 |
border-radius | 用于设置所有四个 border---radius 属性的简写属性 |
border-top-left-radius | 定义左上角边框的形状 |
border-top-right-radius | 定义右上角边框的形状 |
border-bottom-right-radius | 定义右下角边框的形状 |
border-bottom-left-radius | 定义左下角边框的形状 |
3.3 多背景图片支持
CSS3 允许您通过 background-image
属性为一个元素添加多幅背景图像。
不同的背景图像用逗号隔开,并且图像会彼此堆叠,其中的第一幅图像最靠近观看者。
下面的例子有两幅背景图像,第一幅图像是花朵(与底部和右侧对齐),第二幅图像是纸张背景(与左上角对齐):
![](https://i-blog.csdnimg.cn/blog_migrate/a33e6b071e97eaccf8870211d1dac679.png)
/* 示例代码 */
#para {
background-image: url(flower.png), url(paper.jpg);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
背景属性:
属性 | 描述 | 示例 |
background | 用于在一条声明中设置所有背景属性的简写属性 | background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat; |
background-clip | 规定背景的绘制区域 | background-clip: content-box;试一试 |
background-image | 为一个元素指定一幅或多幅背景图像 | background-image: url(flower.png), url(paper.jpg);试一试 |
background-origin | 规定背景图像的放置位置 | background-origin: content-box;试一试 |
background-size | 规定背景图像的大小 | background-size: cover;试一试 |
background-repeat | 规定背景图像是否重复 | background-repeat: no-repeat; |
3.4 渐变效果支持
CSS 渐变使您可以显示两种或多种指定颜色之间的平滑过渡。
CSS 定义了两种渐变类型:
- 线性渐变(向下/向上/向左/向右/对角线)
- 径向渐变(由其中心定义)
线性渐变
如需创建线性渐变,您必须定义至少两个色标。色标是您要呈现平滑过渡的颜色。您还可以设置起点和方向(或角度)以及渐变效果。
background-image: linear-gradient(direction/angle, color-stop1, color-stop2, ...);
direction/angle
设置渐变方向,默认从上到下;也可以设置角度。
color-stop
设置颜色。
下面的例子展示了从左开始的线性渐变。它从红色开始,过渡到黄色:
![](https://i-blog.csdnimg.cn/blog_migrate/7f5389a4330dc98f2b49b8f2a2451fda.png)
/* 示例代码 */
#para{
background-image: linear-gradient(to right, red , yellow);
}
径向渐变
径向渐变由其中心定义,如需创建径向渐变,您必须定义至少两个色标。
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
shape
为椭圆形。
size
为最远角,可接收四个值:
- closest-side - 最近侧
- farthest-side - 最远侧
- closest-corner - 最近的角落
- farthest-corner - 默认
position
为中心。
试一试,具体示例请查看 MDN CSS gradients
3.5 阴影效果支持
阴影可能是比较常用的一种用来增强页面修饰的手段。在 CSS3 支持阴影效果之前,大部分的解决方案都是通过图片来展现所需要的效果。
在 CSS3 中,与阴影相关的具体属性有 text-shadow
文本阴影和 box-shadow
元素阴影。
文本阴影
text-shadow
属性可以为文本添加阴影。
box-shadow: h-shadow v-shadow blur color;
/* 示例代码 */
h1 {
box-shadow: 2px 2px 4px #FF0000;
}
提示:text-shadow 属性可向文本添加一个或多个阴影,该属性值由逗号分隔。
值 | 描述 |
h-shadow | 必需,水平阴影的位置。允许负值 |
v-shadow | 必需,垂直阴影的位置。允许负值 |
blur | 可选,模糊距离 |
color | 可选,阴影的颜色 |
元素阴影
box-shadow
属性可以为元素添加阴影。
box-shadow: h-shadow v-shadow blur spread color inset;
/* 示例代码 */
#para {
box-shadow: 2px 2px 4px 8px #FF0000;
}
提示:box-shadow 属性可向元素添加一个或多个阴影,该属性值由逗号分隔,默认为 outset 外部阴影。
值 | 描述 |
h-shadow | 必需,水平阴影的位置。允许负值 |
v-shadow | 必需,垂直阴影的位置。允许负值 |
blur | 可选,模糊距离 |
spread | 可选,阴影的尺寸 |
color | 可选,阴影的颜色 |
inset | 可选,将外部阴影 (outset,默认) 改为内部阴影 |
多重阴影
无论是 text-shadow
还是 box-shadow
,都是支持多重阴影的,如下:
/* 示例代码 */
.text-shadow {
text-shadow: 1px 1px 5px gold, 5px 5px 2px pink, -2px -2px 6px green;
}
.box-shadow {
box-shadow: 2px 4px 6px pink, -2px -4px 6px green;
}
4. 开放字体的支持
以前 CSS3 的版本,网页设计师不得不使用用户计算机上已经安装的字体,使用 CSS3,只需简单的将字体文件包含在网站中,它会自动下载给需要的用户。
您所选择的字体在 CSS3 中使用 @font-face
规则进行定义使用。
在使用开放字体之前,我们先了解一下不同的字体格式:
字体格式
- TrueType 字体 (TTF)
TrueType 是 1980 年代后期由 Apple 和 Microsoft 开发的字体标准。 TrueType 是 Mac OS 和 Microsoft Windows 操作系统最常用的字体格式。 - OpenType 字体 (OTF)
OpenType 是可缩放计算机字体的格式。它基于 TrueType 构建,并且是 Microsoft 的注册商标。今天,OpenType 字体在主要计算机平台上得到普遍使用。 - Web 开放字体格式 (WOFF)
WOFF 是用于网页的字体格式。它于 2009 年开发,现已成为 W3C 的推荐标准。 WOFF 本质上是具有压缩和其他元数据的 OpenType 或 TrueType。目标是支持在有带宽限制的网络上从服务器到客户端进行字体分发。 - Web 开放字体格式 (WOFF 2.0)
TrueType/OpenType 字体比 WOFF 1.0 提供更好的压缩。 - SVG 字体/形状
SVG 字体允许在显示文本时将 SVG 用作字形。 SVG 1.1 规范定义了一个字体模块,该模块允许在 SVG 文档中创建字体。您还可以将 CSS 应用于 SVG 文档,同时 @font-face 规则可以应用于 SVG 文档中的文本。 - 嵌入式 OpenType 字体 (EOT)
EOT 字体是 Microsoft 设计的 OpenType 字体的紧凑形式,用作网页上的嵌入式字体。
使用字体
在 @font-face 规则中:首先定义字体的名称(例如 myFont),然后指向该字体文件。
提示:字体 URL 始终使用小写字母。大写字母可能会在 IE 中产生意外结果。
如需将字体用于 HTML 元素,请通过 font-family 属性引用字体名称(myFont):
/* 示例代码 */
@font-face {
font-family: myFont;
src: url(sansation_light.woff);
}
div {
font-family: myFont;
}
下表列出了能够在 @font-face
规则内定义的所有字体描述符(font descriptor):
描述符 | 描述 |
font-family | 必需,定义字体名称 |
src | 必需,定义字体文件的 URL |
font-stretch | 可选,定义应如何拉伸字体,默认值是 "normal" |
font-style | 可选,定义字体的样式,默认值是 "normal" |
font-weight | 可选,定义字体的粗细,默认值是 "normal" |
unicode-range | 可选,定义字体支持的 UNICODE 字符范围,默认值是 "U+0-10FFFF" |
5. 媒体查询
CSS2 中引入了 @media
媒体类型规则,它让为不同媒体类型定义不同样式规则成为可能。
例如:您可能有一组用于计算机屏幕的样式规则、一组用于打印机、一组用于手持设备等等。
不幸的是,除了打印媒体类型之外,这些媒体类型从未得到过设备的大规模支持。
CSS3 中引入了媒体查询,扩展了 CSS2 媒体类型的概念:它们并不查找设备类型,而是关注设备的能力。
媒体查询可用于检查许多事情,例如:
- 视口的宽度和高度
- 设备的宽度和高度
- 方向(平板电脑/手机处于横向还是纵向模式)
- 分辨率
根据不同的媒体类型(设备类型)和条件来区分各种设备(例如:电脑、手机、平板电脑、盲文设备等),并为它们分别定义不同的 CSS 样式。媒体查询能让 CSS 可以更精确的作用于不同的设备或同一设备的不同条件,让所有用户都能得到很好的用户体验。
语法规范
@media not|only mediatype and (mediafeature and|or|not mediafeature) { /* CSS样式 */ }
- 用 @media 开头,注意 @ 符号
- mediatype 是媒体类型,比如常见的值:
screen - 表示电脑屏幕、平板电脑、智能手机等
print - 表示打印机和打印预览
all - 表示所有设备
示例
当浏览器的宽度为 600px 或更小时,设置样式:
@media screen and (max-width: 600px) {
/* CSS样式 */
}
当浏览器的宽度为 800px 或更宽时,设置样式:
@media screen and (min-width: 800px) {
/* CSS样式 */
}
当浏览器的方向处于横屏模式时,设置样式:
@media only screen and (orientation: landscape) {
/* CSS样式 */
}
当浏览器的宽度介于 600px 和 900px 之间或大于 1100px 时,设置样式:
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
/* CSS样式 */
}
6. 动画支持
动画使元素逐渐从一种样式变为另一种样式,在 CSS3 中,有如下三个关键字可以用来实现动画效果:
transform
,意为变换transition
,意为过渡animation
,意为动画
Transform
transform
意为变换,其可以改变元素的大小、位置、形状等属性。
transform
可以分为2D变换和3D变换:
- 2D变换:二维空间进行变换操作(即只有X轴和Y轴)
- 3D变换:三维空间进行变换操作(即除了二维的X轴和Y轴之外还有一个Z轴)
2D变换方法
函数 | 描述 |
matrix(n,n,n,n,n,n) | 定义 2D 转换,使用六个值的矩阵 |
translate(x,y) | 定义 2D 转换,沿着 X 和 Y 轴移动元素,试一试 |
translateX(n) | 定义 2D 转换,沿着 X 轴移动元素 |
translateY(n) | 定义 2D 转换,沿着 Y 轴移动元素 |
scale(x,y) | 定义 2D 缩放转换,改变元素的宽度和高度,试一试 |
scaleX(n) | 定义 2D 缩放转换,改变元素的宽度 |
scaleY(n) | 定义 2D 缩放转换,改变元素的高度 |
rotate(angle) | 定义 2D 旋转,在参数中规定角度,试一试 |
skew(x-angle,y-angle) | 定义 2D 倾斜转换,沿着 X 和 Y 轴,试一试 |
skewX(angle) | 定义 2D 倾斜转换,沿着 X 轴 |
skewY(angle) | 定义 2D 倾斜转换,沿着 Y 轴 |
3D变换方法
函数 | 描述 |
matrix3d(n,n,n,n,n,n, | 定义 3D 转换,使用 16 个值的 4x4 矩阵 |
translate3d(x,y,z) | 定义 3D 转化 |
translateX(n) | 定义 3D 转化,仅使用用于 X 轴的值 |
translateY(n) | 定义 3D 转化,仅使用用于 Y 轴的值 |
translateZ(n) | 定义 3D 转化,仅使用用于 Z 轴的值 |
scale3d(x,y,z) | 定义 3D 缩放转换 |
scaleX(n) | 定义 3D 缩放转换,通过给定一个 X 轴的值 |
scaleY(n) | 定义 3D 缩放转换,通过给定一个 Y 轴的值 |
scaleZ(n) | 定义 3D 缩放转换,通过给定一个 Z 轴的值 |
rotate3d(x,y,z) | 定义 3D 旋转 |
rotateX(x,y,z) | 定义沿 X 轴的 3D 旋转,试一试 |
rotateY(x,y,z) | 定义沿 Y 轴的 3D 旋转,试一试 |
rotateZ(x,y,z) | 定义沿 Z 轴的 3D 旋转,试一试 |
perspective(n) | 定义 3D 转换元素的透视视图,试一试 |
提示:仅仅使用 transform
是无法实现动画效果的。因为 transform
只是对元素进行生硬的变化,这个变化是瞬间的,所以并没有展现一种持续变化的效果。
一般地,我们可以将其与下面即将说到的 transition
搭配使用来得到各种动画效果。
Transition
transition
过渡,允许 CSS 的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变 CSS 的属性值。
简单来说,transition
的含义就是元素某一 CSS 属性的过渡,语法如下:
transition:[ transition-property ] [ transition-duration ] [ transition-timing-function ] [ transition-delay ]
可以看出 transition
是一个复合属性,它可以组合使用,也可以拆成四个子属性使用:
属性 | 描述 | 值 |
transition-property | 用于设置需要过渡的 CSS 属性,默认 all | none|all|property |
transition-duration | 用于设置过渡的持续时间,默认 0 | |
transition-timing-function | 用于设置过渡的动画类型,默认 ease | linear|ease|ease-in|ease-out|ease-in-out|cubic- bezier(n,n,n,n) |
transition-delay | 用于设置过渡的开始延时,默认 0 |
Animation
animation
相比 transition
制作动画拥有更高的自定义性,它可以定义每一帧的行为,语法如下:
animation: [ animation-name ] [ animation-duration ] [ animation-timing-function ] [ animation-delay ] [ animation-iteration-count ] [ animation-direction ]
animation
的使用需要先通过 @keyframes 定义动画的各个状态,我们一般称之为关键帧,如下:
@keyframes rainbow {
0% { background: #c00 }
50% { background: orange }
100% { background: yellowgreen }
}
#para {
animation: rainbow .5s step-end infinite alternate;
}
下表列出了 @keyframes 规则和常用 animation
属性:
属性 | 描述 | 值/示例 |
规定动画模式 | ||
animation-name | 规定 @keyframes 动画的名称或样式名,默认 none | keyframename|none |
animation-duration | 规定动画完成一个周期应花费的时间,默认 0 | 试一试 |
animation-timing-function | 规定动画的速度曲线,默认 ease | linear|ease|ease-in|ease-out|ease-in-out|cubic- bezier(n,n,n,n) |
animation-delay | 规定动画开始的延迟,默认 0 | |
animation-iteration-count | 规定动画应播放的次数,默认 1 | n | infinite |
animation-direction | 规定动画是向前播放、向后播放还是交替播放,默认 normal | normal | reverse |alternate | alternate-reverse |
其实 animation
可以说是 transition
的进阶版本。transition
针对元素的某一个(或者某几个)特定的 CSS 属性进行过渡,而 animation
可以针对元素在过渡期间自定义任意一帧的状态。