列表样式属性
- list-style-type:设置列表项标记的类型
- list-style-image:设置列表项标记的图像
- list-style-position:设置列表中列表项标志的位置
- list-style:简写属性,用于把所有用于列表地属性设置于一个声明中
列表样式
去掉列表项表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>list-style</title>
<style>
h3{
line-height: 32px;
background: red url(image/arrow-down.gif) no-repeat 455px 10px;
}
ul li{
line-height: 32px;
background: #999 url(image/arrow-right.gif) no-repeat 418px 2px;
list-style: none; /*去掉列表项标记*/
}
</style>
</head>
<body>
<h3>每日菜单</h3>
<ul>
<li><a href="#">周一:黄焖鸡米饭</a></li>
<li><a href="#">周二:过桥米线</a></li>
<li><a href="#">周三:武汉热干面</a></li>
<li><a href="#">周四:红烧牛肉盖饭</a></li>
<li><a href="#">周五:兰州拉面</a></li>
</ul>
</body>
</html>
超链接样式使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接样式</title>
<style>
h3{
line-height: 32px;
background: red url(image/arrow-down.gif) no-repeat 455px 10px;
}
ul li{
line-height: 32px;
background: #999 url(image/arrow-right.gif) no-repeat 418px 2px;
list-style: none; /*去掉列表项标记*/
}
ul li a{
color: #000; /*超链接文本颜色为黑色*/
text-decoration: none; /*去掉超链接下划线*/
}
ul li a:hover{
color: #fff; /*当鼠标滑过某一行改变当前行的文本颜色为白色*/
}
</style>
</head>
<body>
<h3>每日菜单</h3>
<ul>
<li><a href="#">周一:黄焖鸡米饭</a></li>
<li><a href="#">周二:过桥米线</a></li>
<li><a href="#">周三:武汉热干面</a></li>
<li><a href="#">周四:红烧牛肉盖饭</a></li>
<li><a href="#">周五:兰州拉面</a></li>
</ul>
</body>
</html>
盒子模型
- 上图中,不同部分的解释如下
- Margin(外边距):清除边框外的区域,外边距是透明的
- Border(边框):围绕在内边距和内容外的边框
- Padding(内边距):清除内容周围的区域,内边距是透明的
- Content(内容):盒子的内容,显示文本和图像
1)网页元素与盒子之间的关系
在网页中,内容常指文字、图片等信息或元素,也可以是小盒子(嵌套结构),与现实生活中盒子不同的是,现实生活中的东西一般不能大于盒子,否则盒子会被撑坏,而CSS盒子具有弹性,里面的东西大于盒子本身最多把它撑大,但它不会损坏。网页元素与盒子之间的关系如下图示
(2)解释各个属性
在上图中,不同部分的解释如下:
- Margin(外边距):清除边框外的区域,外边距是透明的
- Border(边框):围绕在内边距和内容外的边框
- Padding(内边距):清除内容周围的区域,内边距是透明的
- Content(内容):盒子的内容,显示文本和图像
而我们在制作网页时,主要就是去设置外边距、边框和内边距的样式,从而使整个盒子达到更加美观的效果。
实现边框样式
使用<div>标签
- <div> 标签可定义文档中的分区或节,它可以把文档分割为独立的、不同的部分。同时,它是一个块级元素。这意味着其内容会自动地开始一个新行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><div>标签</title>
</head>
<body>
<div>
<h3>多喝水的好处</h3>
<p>平时要养成多喝水的习惯,可以起到加速人体新陈代谢,对人体生理功能的正常运转有很好的调理的作用。同时也可以有效的减轻肾脏的负担,多喝水会加速尿液的排出,也可以有效的起到预防结石的作用。另外,如果身体出现有发热的情况,多喝水,多利尿也可以促进体温的下降,可以起到明显的散热的作用,而且还可以起到帮助消化的作用。</p>
</div>
</body>
</html>
宽高属性
- 在CSS中,元素的宽度和高度分别使用width属性和height属性来指定
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>width和height属性</title> <style> div{ width: 400px; /*<div>标签宽度为400像素*/ height: 400px; /*<div>标签高度为400像素*/ } </style> </head> <body> <div> <h3>多喝水的好处</h3> <p>平时要养成多喝水的习惯,可以起到加速人体新陈代谢,对人体生理功能的正常运转有很好的调理的作用。同时也可以有效的减轻肾脏的负担,多喝水会加速尿液的排出,也可以有效的起到预防结石的作用。另外,如果身体出现有发热的情况,多喝水,多利尿也可以促进体温的下降,可以起到明显的散热的作用,而且还可以起到帮助消化的作用。</p> </div> </body> </html>
边框样式
- border-style:设置边框的样式
- border-width:设置边框的宽度
- border-color:设置边框的颜色
- border:简写属性,用于设置边框
- border-style用于设置边框的样式,其属性值有很多,常用的有如下五个
使用border-style属性设置<div>标签的边框样式为实线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border-style属性</title>
<style>
div{
width: 400px; /*<div>标签宽度为400像素*/
height: 400px; /*<div>标签高度为400像素*/
border-style: solid; /*<div>标签的边框样式为实线*/
}
</style>
</head>
<body>
<div>
<h3>多喝水的好处</h3>
<p>平时要养成多喝水的习惯,可以起到加速人体新陈代谢,对人体生理功能的正常运转有很好的调理的作用。同时也可以有效的减轻肾脏的负担,多喝水会加速尿液的排出,也可以有效的起到预防结石的作用。另外,如果身体出现有发热的情况,多喝水,多利尿也可以促进体温的下降,可以起到明显的散热的作用,而且还可以起到帮助消化的作用。</p>
</div>
</body>
</html>
边框宽度
- border-width用于设置边框的宽度,常用属性值是指定长度值,如3px,5px,10px等
设置<div>标签的边框宽度为10像素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border-width属性</title>
<style>
div{
width: 400px; /*<div>标签宽度为400像素*/
height: 400px; /*<div>标签高度为400像素*/
border-style: solid; /*<div>标签的边框样式为实线*/
border-width: 10px; /*<div>标签的边框宽度为10像素*/
}
</style>
</head>
<body>
<div>
<h3>多喝水的好处</h3>
<p>平时要养成多喝水的习惯,可以起到加速人体新陈代谢,对人体生理功能的正常运转有很好的调理的作用。同时也可以有效的减轻肾脏的负担,多喝水会加速尿液的排出,也可以有效的起到预防结石的作用。另外,如果身体出现有发热的情况,多喝水,多利尿也可以促进体温的下降,可以起到明显的散热的作用,而且还可以起到帮助消化的作用。</p>
</div>
</body>
</html>
边框颜色
- border-color用于设置边框的颜色,其属性值可以使用十六进制的方式定义,也可以使用RGB的方式定义,还可以使用颜色名称定义
- 设置<div>标签的边框颜色为红色
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border-color属性</title> <style> div{ width: 400px; /*<div>标签宽度为400像素*/ height: 400px; /*<div>标签高度为400像素*/ border-style: solid; /*<div>标签的边框样式为实线*/ border-width: 10px; /*<div>标签的边框宽度为10像素*/ border-color: red; /*<div>标签的边框颜色为红色*/ } </style> </head> <body> <div> <h3>多喝水的好处</h3> <p>平时要养成多喝水的习惯,可以起到加速人体新陈代谢,对人体生理功能的正常运转有很好的调理的作用。同时也可以有效的减轻肾脏的负担,多喝水会加速尿液的排出,也可以有效的起到预防结石的作用。另外,如果身体出现有发热的情况,多喝水,多利尿也可以促进体温的下降,可以起到明显的散热的作用,而且还可以起到帮助消化的作用。</p> </div> </body> </html>
边框样式
- 在CSS中,为了简化属性的代码,可以将属性合并在同一个属性中。这个属性就是border,它就是边框样式的简写属性。当使用简写属性时,属性值的顺序为:
- border-width
- border-style
- border-color
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border属性</title> <style> div{ width: 400px; /*<div>标签宽度为400像素*/ height: 400px; /*<div>标签高度为400像素*/ border:10px solid red; /*border简写属性:<div>标签边框样式为10像素的实线红色边框*/ } </style> </head> <body> <div> <h3>多喝水的好处</h3> <p>平时要养成多喝水的习惯,可以起到加速人体新陈代谢,对人体生理功能的正常运转有很好的调理的作用。同时也可以有效的减轻肾脏的负担,多喝水会加速尿液的排出,也可以有效的起到预防结石的作用。另外,如果身体出现有发热的情况,多喝水,多利尿也可以促进体温的下降,可以起到明显的散热的作用,而且还可以起到帮助消化的作用。</p> </div> </body> </html>
边框扩展
- 在CSS中,可以用top、right、bottom和left来指定不同方向的不同边框,以边框颜色(border-color)为例,来给<div>标签设置不同的边框颜色
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>四条边颜色不同</title> <style> div{ width: 400px; /*<div>标签宽度为400像素*/ height: 400px; /*<div>标签高度为400像素*/ border:10px solid; /*border简写属性:<div>标签边框样式为10像素的实线*/ border-top-color: red; /*上边框颜色为红色*/ border-right-color: green; /*右边框颜色为绿色*/ border-bottom-color: blue; /*下边框颜色为蓝色*/ border-left-color: yellow; /*左边框颜色为黄色*/ } </style> </head> <body> <div> <h3>多喝水的好处</h3> <p>平时要养成多喝水的习惯,可以起到加速人体新陈代谢,对人体生理功能的正常运转有很好的调理的作用。同时也可以有效的减轻肾脏的负担,多喝水会加速尿液的排出,也可以有效的起到预防结石的作用。另外,如果身体出现有发热的情况,多喝水,多利尿也可以促进体温的下降,可以起到明显的散热的作用,而且还可以起到帮助消化的作用。</p> </div> </body> </html>
取值
- 在CSS中,不同方向的边框颜色也可以设置为一个单一属性,如:
-
border-color: red green blue yellow;
- border-color属性可以有1-4值
- 当属性值有4个时:border-color: red green blue yellow;
- 上边框是红色、右边框是绿色、下边框是蓝色、左边框是黄色
- 当属性值有3个时:border-color: red green blue;
- 上边框是红色、左右边框是绿色、下边框是蓝色
- 当属性值有2个时:border-color: red green;
- 上下边框是红色、左右边框是绿色
- 当属性值有1个时:border-color: red;
- 上、右、下、左四边均是红色
- 当属性值有4个时:border-color: red green blue yellow;
实现盒子内外边距
外边距在网页中的应用
- 为了整体网页的整洁美观,页面的每个区域并不是紧挨在一起的,它们之间都有一定的间距。以淘宝官网搜索区域和导航区域为例
内边距在网页中的应用
- 内容(如文本或图片)也不是紧挨在一起的,它们之间也有一定的空隙。以淘宝官网直播区域为例
外边距
- 在CSS中,元素的外边距由margin属性控制,margin定义了元素与其他相邻元素的距离。其与border属性一样,有top、right、bottom和left四个子属性用于设置不同方向的外边距,具体如下:
- margin-top:设置上外边距
- margin-right:设置右外边距
- margin-bottom:设置下外边距
- margin-left:设置左外边距
- 使用margin属性设置4个盒子的外边距变化,通过不同方向上外边距的设置,从而设计一个梯状效果
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>外边距的使用</title> <style> div{ height: 20px; border:1px solid red; } /*第1个盒子的样式*/ #box1{margin-top: 16px;margin-right: 12em;margin-left: 12em;} /*第2个盒子的样式*/ #box2{margin-top: 8px;margin-right: 8em;margin-left: 8em;} /*第3个盒子的样式*/ #box3{margin-top: 4px;margin-right: 4em;margin-left: 4em;} /*第4个盒子的样式*/ #box4{margin-top: 2px;margin-right: 2em;margin-left: 2em;} </style> </head> <body> <div id="box1"></div> <div id="box2"></div> <div id="box3"></div> <div id="box4"></div> </body> </html>
外边距
- 为了提高代码编写效率,CSS也为外边距提供了简写方式,具体说明如下:
- 若四边的外边距相同,则直接使用margin属性定义1个值即可
- 当属性值有1个时:margin: 10px;
- 若四边的外边距不相同,则可以在margin属性中定义2个值、3个值或4个值
- 当属性值有2个时:margin: 10px 20px;
- 当属性值有3个时:margin: 10px 20px 30px;
- 当属性值有4个时:margin: 10px 20px 30px 40px;
- 若四边的外边距相同,则直接使用margin属性定义1个值即可
实现网页居中对齐
- 可以利用外边距实现网页居中对齐,其语法如下
-
margin: 0px auto;
- 实现网页居中对齐有两个必要条件,分别是:
- 必须是块元素
- 必须固定宽度
内边距
- 在CSS中,内边距是用来调整元素包含的内容与元素边框的距离,其由padding属性控制。padding属性与margin属性一样,有top、right、bottom和left四个子属性用于设置不同方向的内边距,具体如下:
- padding-top:设置上内边距
- padding-right:设置右内边距
- padding-bottom:设置下内边距
- padding-left:设置左内边距
- 使用padding属性在上个示例的基础上添加文本,并设置文本与元素边框的距离
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内边距的使用</title> <style> div{ height: 20px; border:1px solid red; } /*第1个盒子的样式*/ #box1{margin-top: 16px;margin-right: 12em;margin-left: 12em;padding-top: 30px;} /*第2个盒子的样式*/ #box2{margin-top: 8px;margin-right: 8em;margin-left: 8em; text-align: right;padding-right: 30px;} /*第3个盒子的样式*/ #box3{margin-top: 4px;margin-right: 4em;margin-left: 4em;padding-bottom: 30px;} /*第4个盒子的样式*/ #box4{margin-top: 2px;margin-right: 2em;margin-left: 2em;padding-left: 30px;} </style> </head> <body> <div id="box1">第1个盒子</div> <div id="box2">第2个盒子</div> <div id="box3">第3个盒子</div> <div id="box4">第4个盒子</div> </body> </html>
扩展
- 为了快速开发,可以在页面设计之初,用通配符选择器清除所有元素的内边距和外边距样式
*{ padding:0; /*清除内边距*/ margin:0; /*清除外边距*/ }
了解网页中的浮动及定位
在浏览网页时,会发现网页都是由某些模块搭建起来从而形成了一个大页面
概念
- 在CSS中, 浮动(float)会使元素向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止,浮动元素之后的元素将围绕它,从而可以实现横排显示的效果
块级元素和行内元素
- 块级元素
- 如<h1>、<p>、<div>等,它们的显示方式是占用全部宽度,元素独占一行
- 行内元素
- 如<img>、<a>、<span>等,它们的显示方式是由内容撑起宽度,不会以新行开始
display属性
概念
- 在CSS中,display属性可以设置一个元素应如何显示,其常用属性值如下
- none:此元素不会被显示
- block:此元素将显示为块级元素
- inline:默认。此元素会被显示为行内元素
- inline-block:行内块元素
block元素特性
- block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度
- block元素可以设置width和height属性。块级元素即使设置了宽度,仍然是独占一行
- block元素也可以设置margin和padding属性
inline元素特性
- inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行
- inline元素的宽度是自身内容的宽度(默认有多少占多少)
- inline元素设置width和height属性无效
- inline元素的margin和padding属性,水平方向的padding-left、 padding-right、 margin-left、margin-right都产生边距效果;但竖直方向的padding-top、 padding-bottom、margin-top、margin-bottom不会产生边距效果
inline-block元素特性
- 将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如可以给一个超链接(a元素)设置inline-block属性,使其既具有block的可设置宽度和高度特性又具有inline的同行特性
display属性
- 在HTML中设置<div>、<p>和<span>三个标签,并修改它们的显示方式,来对比查看效果
-
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>display属性</title> <style> *{padding:0;margin:0;} .contain{width:900px;margin:50px auto;} .block{display:block;background:red;} .inline{display:inline;background: blue;} .inline-b-box span{margin:20px;} .setW{width:300px;background:green;} .inline-block{display:inline-block;} .none{display:none;} </style> </head> <body> <!--演示display:block效果--> <div class="contain"> <span>我是行内元素</span> <span>我是行内元素</span> <span class="block">我会变成块元素</span> </div> <!--演示display:inline效果--> <div class="contain"> <p>我是块元素</p> <p>我是块元素</p> <p class="inline">我会变成行内元素</p> <p class="inline">我会变成行内元素</p> </div> <!--演示display:inline-block效果--> <div class="contain inline-b-box"> <p class="setW">我是块元素<span>我是行内元素</span></p> <span class="inline-block">我会变成行内块元素,这样我就能设置margin-top和margin-bottom了</span> </div> <!--演示display:none效果--> <div class="contain"> <p>我是块元素</p> <p>我是块元素</p> <p class="none">我会消失</p> </div> </body> </html>
- 第1个div包含三个span标签,它们用于演示“display:block”的效果,将原本为行内元素的最后一个span标签变为了块级元素,并设置红色背景;
- 第2个div包含四个p标签,它们用于演示“display:inline”的效果,将原本为块级元素的最后两个p标签变为了行内元素,并设置蓝色背景;
- 第3个div包含一个p标签,两个span标签,它们用于演示“display:inline-block”的效果,将原本为行内元素的最后一个span标签变为了行内块元素,并设置间距、宽度和绿色背景;
- 第4个div包含三个p标签,它们用于演示“display:none”的效果,将原本为块级元素的p标签隐藏起来了。
定位的使用
- 在CSS中, position属性指定了元素的定位类型。其常用属性值有如下四个:
- static:默认值,即没有定位
- relative:相对定位
- absolute:绝对定位
- fixed:固定定位
- 使用时,需要先给元素设置position属性,然后再设置top、right、bottom和left属性进行精准定位
没有定位
概念
- 在CSS中,“position: static”表示没有定位,元素将遵循正常的文档流布局,因此没有定位的元素不会受到top、right、bottom和left属性的影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>没有定位</title>
<style>
div{
width: 150px;
height: 150px;
border: 1px solid #000;
}
#box1{
background: skyblue;
}
#box2{
background: pink;
}
#box3{
background: yellow;
}
</style>
</head>
<body>
<div id="box1">盒子1</div>
<div id="box2">盒子2</div>
<div id="box3">盒子3</div>
</body>
</html>
边框样式
- border-style:设置边框的样式
- border-width:设置边框的宽度
- border-color:设置边框的颜色
- border:简写属性,用于设置边框
- border-style用于设置边框的样式,其属性值有很多,常用的有如下五个
- 使用border-style属性设置<div>标签的边框样式为实线
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border-style属性</title> <style> div{ width: 400px; /*<div>标签宽度为400像素*/ height: 400px; /*<div>标签高度为400像素*/ border-style: solid; /*<div>标签的边框样式为实线*/ } </style> </head> <body> <div> <h3>多喝水的好处</h3> <p>平时要养成多喝水的习惯,可以起到加速人体新陈代谢,对人体生理功能的正常运转有很好的调理的作用。同时也可以有效的减轻肾脏的负担,多喝水会加速尿液的排出,也可以有效的起到预防结石的作用。另外,如果身体出现有发热的情况,多喝水,多利尿也可以促进体温的下降,可以起到明显的散热的作用,而且还可以起到帮助消化的作用。</p> </div> </body> </html>
- border-width用于设置边框的宽度,常用属性值是指定长度值,如3px,5px,10px等
- 在上一示例的基础上,设置<div>标签的边框宽度为10像素
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border-width属性</title> <style> div{ width: 400px; /*<div>标签宽度为400像素*/ height: 400px; /*<div>标签高度为400像素*/ border-style: solid; /*<div>标签的边框样式为实线*/ border-width: 10px; /*<div>标签的边框宽度为10像素*/ } </style> </head> <body> <div> <h3>多喝水的好处</h3> <p>平时要养成多喝水的习惯,可以起到加速人体新陈代谢,对人体生理功能的正常运转有很好的调理的作用。同时也可以有效的减轻肾脏的负担,多喝水会加速尿液的排出,也可以有效的起到预防结石的作用。另外,如果身体出现有发热的情况,多喝水,多利尿也可以促进体温的下降,可以起到明显的散热的作用,而且还可以起到帮助消化的作用。</p> </div> </body> </html>
- border-color用于设置边框的颜色,其属性值可以使用十六进制的方式定义,也可以使用RGB的方式定义,还可以使用颜色名称定义
-
设置<div>标签的边框颜色为红色
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border-color属性</title> <style> div{ width: 400px; /*<div>标签宽度为400像素*/ height: 400px; /*<div>标签高度为400像素*/ border-style: solid; /*<div>标签的边框样式为实线*/ border-width: 10px; /*<div>标签的边框宽度为10像素*/ border-color: red; /*<div>标签的边框颜色为红色*/ } </style> </head> <body> <div> <h3>多喝水的好处</h3> <p>平时要养成多喝水的习惯,可以起到加速人体新陈代谢,对人体生理功能的正常运转有很好的调理的作用。同时也可以有效的减轻肾脏的负担,多喝水会加速尿液的排出,也可以有效的起到预防结石的作用。另外,如果身体出现有发热的情况,多喝水,多利尿也可以促进体温的下降,可以起到明显的散热的作用,而且还可以起到帮助消化的作用。</p> </div> </body> </html>
- 在CSS中,为了简化属性的代码,可以将属性合并在同一个属性中。这个属性就是border,它就是边框样式的简写属性。当使用简写属性时,属性值的顺序为:
- border-width
- border-style
- border-color
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border属性</title> <style> div{ width: 400px; /*<div>标签宽度为400像素*/ height: 400px; /*<div>标签高度为400像素*/ border:10px solid red; /*border简写属性:<div>标签边框样式为10像素的实线红色边框*/ } </style> </head> <body> <div> <h3>多喝水的好处</h3> <p>平时要养成多喝水的习惯,可以起到加速人体新陈代谢,对人体生理功能的正常运转有很好的调理的作用。同时也可以有效的减轻肾脏的负担,多喝水会加速尿液的排出,也可以有效的起到预防结石的作用。另外,如果身体出现有发热的情况,多喝水,多利尿也可以促进体温的下降,可以起到明显的散热的作用,而且还可以起到帮助消化的作用。</p> </div> </body> </html>
- 在CSS中,可以用top、right、bottom和left来指定不同方向的不同边框,以边框颜色(border-color)为例,来给<div>标签设置不同的边框颜色
- 设置<div>标签的四个边颜色均不同,分别是红色、绿色、蓝色和黄色
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>四条边颜色不同</title> <style> div{ width: 400px; /*<div>标签宽度为400像素*/ height: 400px; /*<div>标签高度为400像素*/ border:10px solid; /*border简写属性:<div>标签边框样式为10像素的实线*/ border-top-color: red; /*上边框颜色为红色*/ border-right-color: green; /*右边框颜色为绿色*/ border-bottom-color: blue; /*下边框颜色为蓝色*/ border-left-color: yellow; /*左边框颜色为黄色*/ } </style> </head> <body> <div> <h3>多喝水的好处</h3> <p>平时要养成多喝水的习惯,可以起到加速人体新陈代谢,对人体生理功能的正常运转有很好的调理的作用。同时也可以有效的减轻肾脏的负担,多喝水会加速尿液的排出,也可以有效的起到预防结石的作用。另外,如果身体出现有发热的情况,多喝水,多利尿也可以促进体温的下降,可以起到明显的散热的作用,而且还可以起到帮助消化的作用。</p> </div> </body> </html>
边框扩展
取值
- 在CSS中,不同方向的边框颜色也可以设置为一个单一属性,如:
-
border-color: red green blue yellow;
- border-color属性可以有1-4值
- 当属性值有4个时:border-color: red green blue yellow;
- 上边框是红色、右边框是绿色、下边框是蓝色、左边框是黄色
- 当属性值有3个时:border-color: red green blue;
- 上边框是红色、左右边框是绿色、下边框是蓝色
- 当属性值有2个时:border-color: red green;
- 上下边框是红色、左右边框是绿色
- 当属性值有1个时:border-color: red;
- 上、右、下、左四边均是红色
- 当属性值有4个时:border-color: red green blue yellow;
圆角边框
概念
- 在CSS3中, border-radius属性用于创建圆角边框,其属性值可以是1-4个值
- 当属性值为1个值时:border-radius: 10px;
- 左上角,右上角,右下角,左下角圆角边框均是10像素
- 当属性值为2个值时:border-radius: 10px 20px;
- 左上角和右下角边框圆角为10像素、右上角和左下角边框圆角为20像素
- 当属性值为3个值时:border-radius: 10px 20px 30px;
- 左上角边框圆角为10像素、右上角和左下角边框圆角为20像素、右下角边框圆角为30像素
- 当属性值为4个值时:border-radius: 10px 20px 30px 40px;
- 左上角边框圆角为10像素、右上角边框圆角为20像素、右下角边框圆角为30像素、左下角圆角边框为40像素
- 当属性值为1个值时:border-radius: 10px;
圆角边框
在页面中创建4个盒子,并使用border-radius 属性分别设置1-4个属性值对比查看效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆角边框</title>
<style>
div{
width: 100px;
height: 100px;
background: red;
float: left;
margin: 0 10px;
}
div:nth-child(1){
/*当属性值为1个值时,设置盒子1左上角,右上角,右下角,左下角圆角边框均是10像素*/
border-radius: 10px;
}
div:nth-child(2){
/*当属性值为2个值时,设置盒子2左上角和右下角边框圆角为10像素、右上角和左下角边框圆角为20像素*/
border-radius: 10px 20px;
}
div:nth-child(3){
/*当属性值为3个值时,设置盒子3左上角边框圆角为10像素,右上角和左下角边框圆角为20像素,右下角边框圆角为30像素*/
border-radius: 10px 20px 30px;
}
div:nth-child(4){
/*当属性值为4个值时,设置盒子4左上角边框圆角为10像素,右上角边框圆角为20像素,右下角边框圆角为30像素,左下角圆角边框为40像素*/
border-radius: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div>盒子1</div>
<div>盒子2</div>
<div>盒子3</div>
<div>盒子4</div>
</body>
</html>
圆角边框
实现圆形
- 在CSS3中,使用border-radius 属性实现圆形需要注意的要点:
- 元素的宽度和高度必须相同
- 圆角的半径为元素宽度的一半,或者直接设置圆角半径值为50%
图像边框
- 在CSS3中,border-image属性用于指定一个图片作为边框
- 实际上,border-image属性是复合属性,因此上述语法的属性值解释如下:
- source表示border-image-source,用于指定要用于绘制边框的图像的位置
- slice表示border-image-slice,用于设置图像边界向内偏移
- width表示border-image-width,用于设置图像边界的宽度
- outset表示border-image-outset,用于指定边框图像区域超出边框的量
- repeat表示border-image-repeat,用于设置图像边界是否应重复(repeat)、拉伸(stretch)或铺满(round)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像边框</title>
<style>
div{
width: 150px;
height: 150px;
border: 10px solid;
float: left;
margin: 0px 10px;
}
#borderimg1{
/*盒子1以图像铺满的方式填补边框*/
border-image: url(images/border.png) 30 round;
}
#borderimg2{
/*盒子2以图像拉伸的方式填补边框*/
border-image: url(images/border.png) 30 stretch;
}
</style>
</head>
<body>
<div id="borderimg1">盒子1</div>
<div id="borderimg2">盒子2</div>
</body>
</html>
盒子阴影
- 在CSS3中,box-shadow属性用于向元素添加阴影
-
box-shadow: h-shadow v-shadow blur spread color inset;
- h-shadow:必需的。水平阴影的位置。允许负值
- v-shadow:必需的。垂直阴影的位置。允许负值
- blur:可选。模糊距离
- spread:可选。阴影的大小
- color:可选。阴影的颜色
- inset:可选。从外层的阴影(开始时)改变阴影内侧阴影
- 结合box-shadow属性的语法,给div元素添加一个灰色阴影
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子阴影</title> <style> div{ width: 150px; height: 150px; background: red; /*给div元素设置阴影效果是向右向下外面偏移,模糊距离为5像素,阴影颜色是灰色*/ box-shadow: 10px 10px 5px #ccc; } </style> </head> <body> <div></div> </body> </html>
渐变背景
- 在CSS3中,新增了渐变背景,以去哪网头部区域为例
- 线性渐变
- 径向渐变
- 在CSS3中,创建线性渐变必须至少定义两种颜色节点,颜色将沿着一条直线过渡
-
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
- 上述语法解释如下:
- “background-image: linear-gradient”表示创建线性渐变
- 参数一“direction”表示渐变方向
- 参数二“color-stop1”表示第一种颜色值
- 参数三“color-stop2”表示第二种颜色值,后面还可定义多个颜色值
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>线性渐变</title> <style> div{ width: 200px; height: 300px; float: left; margin:0px 10px; } #box1{ /*从上到下的线性渐变*/ background: linear-gradient(red,blue); } #box2{ /*从左到右的线性渐变*/ background: linear-gradient(to right,yellow,green); } #box3{ /*从左上角开始到右下角的线性渐变*/ background: linear-gradient(to bottom right,pink,orange); } </style> </head> <body> <div id="box1">盒子1</div> <div id="box2">盒子2</div> <div id="box3">盒子3</div> </body> </html>
-
多颜色渐变
- 根据语法创建线性渐变,并设置多个颜色查看效果
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多颜色渐变</title> <style> div{ width: 200px; height: 300px; float: left; margin:0px 10px; } #box1{ /*从上到下的3个颜色的线性渐变*/ background: linear-gradient(red,green,blue); } #box2{ /*从上到下的7个颜色的线性渐变*/ background: linear-gradient(red,orange,yellow,green,cyan,blue,purple); } </style> </head> <body> <div id="box1">盒子1</div> <div id="box2">盒子2</div> </body> </html>
-
径向渐变
- 在CSS3中,创建径向渐变必须至少定义两种颜色节点,同时,也可以指定渐变的位置、形状(圆形或椭圆形)和大小。默认情况下,渐变的位置是center(表示在中心点),渐变的形状是ellipse(表示椭圆形),渐变的大小是farthest-corner(表示到最远的角落)
-
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
- 上述语法解释如下:
- “background-image: radial-gradient”表示创建径向渐变
- “shape”表示渐变的形状,ellipse椭圆形和circle圆形,默认值是ellipse
- “size”表示渐变的大小
- “position”表示渐变的位置,可选值有center(默认),top,bottom
- “ start-color, ..., last-color”表示渐变的有效颜色值和可选的位置值
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>径向渐变</title> <style> div{ width: 200px; height: 150px; float: left; margin:0px 10px; } #box1{ /*颜色节点均匀分布的径向渐变*/ background-image: radial-gradient(red, green, blue); } #box2{ /*颜色节点不均匀分布的径向渐变*/ background-image: radial-gradient(red 5%, green 15%, blue 60%); } </style> </head> <body> <div id="box1">盒子1</div> <div id="box2">盒子2</div> </body> </html>
- 将渐变的形状改变为圆形
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>设置形状</title> <style> div{ width: 200px; height: 150px; float: left; margin:0px 10px; } #box1{ /*颜色节点均匀分布的径向渐变*/ background-image: radial-gradient(circle,red, green, blue); } #box2{ /*颜色节点不均匀分布的径向渐变*/ background-image: radial-gradient(circle,red 5%, green 15%, blue 60%); } </style> </head> <body> <div id="box1">盒子1</div> <div id="box2">盒子2</div> </body> </html>
-
CSS3美化网页字体
- 会使用text-shadow属性实现文本阴影效果
- 了解text-overflow属性的使用
- 会使用word-wrap属性实现文本换行
文本阴影
- 在CSS3中,text-shadow属性用于设置文本阴影,其基本语法如下
text-shadow: h-shadow v-shadow blur color;
- h-shadow:必需的。水平阴影的位置。允许负值
- v-shadow:必需的。垂直阴影的位置。允许负值
- blur:可选。模糊距离
- color:可选。阴影的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text-shadow属性</title>
<style>
h1{
text-shadow:5px 5px 5px #FF0000;
}
</style>
</head>
<body>
<h1>欢迎学习Web前端课程</h1>
</body>
</html>
文本溢出
- 在CSS3中,text-overflow属性用于指定当文本溢出包含它的元素时应该发生什么
- 当属性值为“clip”时,表示当文本溢出包含它的元素时修剪文本
- 当属性值为“ellipsis”时,表示当文本溢出包含它的元素时显示省略符号
- 当属性值为“string”时,表示当文本溢出包含它的元素时使用给定的字符串
- 通过text-overflow属性指定溢出文本使用省略号显示
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>text-overflow属性</title> <style> h2{ width: 350px; line-height: 50px; border: 1px #ccc solid; text-overflow:ellipsis; } </style> </head> <body> <h2>text-overflow属性用于指定当文本溢出包含它的元素时应该发生什么</h2> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>text-overflow属性</title> <style> h2{ width: 350px; line-height: 50px; border: 1px #ccc solid; text-overflow:ellipsis; white-space: nowrap; overflow: hidden; } </style> </head> <body> <h2>text-overflow属性用于指定当文本溢出包含它的元素时应该发生什么</h2> </body> </html>
- 实现溢出文本显示省略号有三条必要属性:
- overflow:hidden; //溢出的文本隐藏
- text-overflow:ellipsis; //溢出文本用省略号显示
- white-space:nowrap; //溢出不换行
文本换行
- 在CSS3中,word-wrap属性用于允许长的内容可以自动换行
- 当属性值为“normal”时,表示只在允许的断字点换行(即浏览器保持默认处理)
- 当属性值为“break-word”时,表示在长单词或 URL 地址内部进行换行
- 通过word-wrap属性给“thisisaveryveryveryveryveryverylongword”长单词换行
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>word-wrap属性</title> <style> p:nth-child(1){ width: 200px; border: 1px solid #000; } p:nth-child(2){ width: 200px; border: 1px solid #000; word-wrap:break-word; } </style> </head> <body> <p>This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p> <p>This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p> </body> </html>
实现网页元素转换
- CSS3 2D转换是移动、旋转、缩放和倾斜效果的集合,通过它可以操控元素发生变化
-
transform:[transform-function] ;
- translate():表示移动,基于X、Y坐标重新定位元素的位置
- rotate():表示旋转,取值是一个度数值
- scale():表示缩放,可以使任意元素对象尺寸发生变化
- skew():表示倾斜,取值是一个度数值
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原始代码</title> <style> div{ width: 200px; height: 200px; background: red; } </style> </head> <body> <div></div> </body> </html>
2D移动
- translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动
- 在原始代码的基础上使用translate()方法将div元素在X轴移动50像素,Y轴移动100像素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移动</title>
<style>
div{
width: 200px;
height: 200px;
background: red;
/*在X轴移动50像素,Y轴移动100像素*/
transform:translate(50px,100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- rotate()方法,根据给定的度数,使当前元素进行旋转。当取值为正数时,元素相对原来中心顺时针旋转;当取值为负数时,元素相对原来中心逆时针旋转
- 在上一示例的基础上将移动后的元素再使用rotate()方法顺时针旋转30度
缩放
- scale()方法,通过设置宽度(X轴)和高度(Y轴)的参数,增加或减少元素的大小
- 在原始代码的基础上使用scale()方法将div元素宽度增加2倍,高度增加3倍
倾斜
- skew()方法,通过设置X轴和Y轴的参数,使元素倾斜
- 在移动元素示例的基础上将移动后的元素再使用skew()方法在X轴和Y轴上倾斜20度30度
CSS3过度
- 在CSS3中,过渡是元素从一种样式逐渐改变为另一种的效果
-
transition:transition-property|transition-duration|transition-timing-function|transition-delay
- transition:简写属性,用于在一个属性中设置四个过渡属性
- transition-property:用于指定过渡的CSS属性的名称
- transition-duration:定义过渡效果花费的时间
- transition-timing-function:定义过渡效果的时间曲线
- transition-delay:定义过渡效果何时开始
- 在CSS3中,transition-property用于指定过渡的CSS属性的名称
- property:指定的CSS属性(如width、height、background属性等),以逗号分隔
- all:指定所有元素都将获得过渡效果,一般为了方便都会使用all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡属性</title>
<style>
div{
width: 200px;
height: 200px;
background: red;
transition-property: all; /*表示所有元素都将获得过渡效果*/
}
div:hover{
background: blue;
width: 500px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
过渡时间、
- 在CSS3中,transition-duration用于定义过渡效果花费的时间,其属性值是秒或毫秒,默认值是 0,意味着不会有效果
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>过渡所需时间</title> <style> div{ width: 200px; height: 200px; background: red; transition-property: all; /*表示所有元素都将获得过渡效果*/ transition-duration: 3s; /*过渡所需时间为3秒*/ } div:hover{ background: blue; width: 500px; } </style> </head> <body> <div></div> </body> </html>
过渡动画
- 在CSS3中,transition-timing-function用于定义过渡效果的时间曲线
- linear:规定以相同速度开始至结束的过渡效果
- ease:规定慢速开始,然后变快,然后慢速结束的过渡效果(默认值)
- ease-in:规定以慢速开始的过渡效果
- ease-out:规定以慢速结束的过渡效果
- ease-in-out:规定以慢速开始和结束的过渡效果
- 在上一示例的基础上,设置过渡动画以慢速开始
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>过渡动画</title> <style> div{ width: 200px; height: 200px; background: red; transition-property: all; /*表示所有元素都将获得过渡效果*/ transition-duration: 3s; /*过渡所需时间为3秒*/ transition-timing-function: ease-in; /*规定以慢速开始的过渡效果*/ } div:hover{ background: blue; width: 500px; } </style> </head> <body> <div></div> </body> </html>
过度延迟
- 在CSS3中,transition-delay用于定义过渡效果何时开始,其属性值是秒或毫秒,默认值是 0,意味着过渡效果立即执行
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>过渡延迟时间</title> <style> div{ width: 200px; height: 200px; background: red; transition-property: all; /*表示所有元素都将获得过渡效果*/ transition-duration: 3s; /*过渡所需时间为3秒*/ transition-timing-function: ease-in; /*规定以慢速开始的过渡效果*/ transition-delay: 3s; /*过渡延迟时间为3秒*/ } div:hover{ background: blue; width: 500px; } </style> </head> <body> <div></div> </body> </html>
过渡简写
- 在CSS中,为了简化这些属性的代码,我们可以将这些属性合并在同一个属性中。这个属性就是transition,它就是过渡效果的简写属性
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>过渡简写属性</title> <style> div{ width: 200px; height: 200px; background: red; transition: all 3s ease-in 3s; } div:hover{ background: blue; width: 500px; } </style> </head> <body> <div></div> </body> </html>
- 在CSS3中,使用animation实现动画主要由两个部分组成,分别是:
- 使用@keyframes定义关键帧
- 在animation属性中调用关键帧声明的动画
区别
- transition只能通过指定属性的开始值与结束值,然后在这两个属性值之间进行平滑过渡的方式来实现动画效果,因此不能实现比较复杂的动画
- animation通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果
- 在CSS3中,使用animation实现动画主要由两个部分组成,分别是:
- 使用@keyframes定义关键帧
- 在animation属性中调用关键帧声明的动画
区别
- transition只能通过指定属性的开始值与结束值,然后在这两个属性值之间进行平滑过渡的方式来实现动画效果,因此不能实现比较复杂的动画
- animation通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果
定义关键帧
- 在CSS3中,使用@keyframes定义关键帧
-
@keyframes animationname { keyframes-selector{ css-styles; } }
参数说明
- animationname:定义动画的名称
- keyframes-selector:定义帧的时间,即动画时长的百分比,合法的值包括0~100%或用关键词“from”和“to”,等同于 0% 和 100%
- css-styles:表示一个或多个CSS样式属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定义关键帧</title>
<style>
/*大方盒样式*/
#bigBox{
width: 250px;
height: 250px;
border: 1px solid red;
/*定义定位包含框,避免小方盒跑到外面运动*/
position: relative;
}
/*小方盒样式*/
#smallBox{
width: 50px;
height: 50px;
background: green;
box-shadow: 2px 2px 2px #999;
border-radius: 8px;
position: absolute;
left: 0;
top: 0;
}
/*定义关键帧*/
@keyframes ball{
0%{left: 0;top: 0;}
25%{left: 200px;top: 0;}
50%{left: 200px;top: 200px;}
75%{left: 0;top: 200px;}
100%{left: 0;top: 0;}
}
</style>
</head>
<body>
<div id="bigBox">
<div id="smallBox"></div>
</div>
</body>
</html>
调用关键帧
- 在CSS3中,使用animation属性可以调用关键帧声明的动画
-
animation: name duration timing-function delay iteration-count direction play-state fill-mode;
定义动画名称
- 使用animation-name属性可以定义CSS动画名称
-
animation-name: keyframename|none;
定义动画时间
- 使用animation-duration属性可以定义CSS动画播放时间
-
animation-duration: time;
定义动画类型
- 使用animation-timing-function属性可以定义CSS动画类型
-
animation-timing-function:linear|ease|ease-in|ease-out|ease-in-out
定义延迟时间
- 使用animation-delay 属性可以定义CSS动画延迟播放的时间
-
animation-delay : time;
定义播放次数
- 使用animation-iteration-count属性定义CSS动画的播放次数
-
animation-iteration-count:n|infinite
- 播放次数默认值为1,当取值为n(一个数字)时,表示动画应该被播放多少次;当取值为“infinite”时,表示无限次,即动画永远重复
定义播放方向
- 使用animation-direction属性定义CSS动画的播放方向
-
animation-direction: normal|reverse|alternate|alternate-reverse
- 播放方向默认值为normal,表示动画按正常播放,当取值为“reverse”时,表示动画反向播放;当取值为“alternate”时,表示动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放;当取值为“alternate-reverse”时,表示动画在奇数次(1、3、5...)反向播放,在偶数次(2、4、6...)正向播放
定义播放状态
- 使用animation-play-state属性定义动画正在运行,还是暂停
-
animation-play-state: paused|running;
- 默认值为running,表示动画正在播放,当取值为“paused”时,表示动画已暂停
定义播放外状态
- 使用animation-fill-mode属性定义动画外状态
-
animation-fill-mode: none|forwards|backwards|both
- none:不设置对象动画之外的状态
- forwards:设置对象状态为动画结束时的状态
- backwards:设置对象状态为动画开始时的状态
- both:设置对象状态为动画结束或开始的状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>调用关键帧</title>
<style>
/*大方盒样式*/
#bigBox{
width: 250px;
height: 250px;
border: 1px solid red;
/*定义定位包含框,避免小方盒跑到外面运动*/
position: relative;
}
/*小方盒样式*/
#smallBox{
width: 50px;
height: 50px;
background: green;
box-shadow: 2px 2px 2px #999;
border-radius: 8px;
position: absolute;
left: 0;
top: 0;
/*调用关键帧*/
animation:ball 5s linear infinite;
}
/*定义关键帧*/
@keyframes ball{
0%{left: 0;top: 0;}
25%{left: 200px;top: 0;}
50%{left: 200px;top: 200px;}
75%{left: 0;top: 200px;}
100%{left: 0;top: 0;}
}
</style>
</head>
<body>
<div id="bigBox">
<div id="smallBox"></div>
</div>
</body>
</html>