一、前言
在前面有关HTML5的语法中我们有说过,CSS主要用来对网页元素的外观和位置等页面样式进行设置(H5语法连接:HTML5基本语法大全),是前端开发中的重要一环。
而CSS在我们的开发中主要有3种引入方式,分别是内嵌式、外联式和行内式。
内嵌式:CSS写在style标签中。而style标签可以写在任意位置,但是我们习惯将style标签写在head标签下。以下是内嵌式程序示例:
<!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{
color: red;
}
</style>
</head>
<body>
<div>
hello world!
</div>
</body>
</html>
外联式:CSS写在一个单独的 .CSS 文件中,但是我们需要通过link标签在网页引入。以下是外联式程序示例,第一段程序是HTML文件程序,第二段程序是被HTML文件引用的include.css程序。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="include.css">
</head>
<body>
<div>
hello world!
</div>
</body>
</html>
div{
color: red;
}
行内式:CSS写在标签的style属性中,通常配合js使用。以下是行内式程序示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="color: red;">
hello world!
</div>
</body>
</html>
通过以上了解,我们可以初步认识CSS的作用以及它的引用方式和应用场景。内嵌式的开发方式多用于小案例的演示;外联式的开发方式多用来项目开发;行内式的使用多用来配合js。本文作演示的程序都是小案例,所以基本上都采用内嵌式的方式进行示例。
二、CSS基本语法
1.选择器
作用:选择想要添加样式的HTML标签。例如:我们在开发网页时,想将div标签中的文字内容设置为红色,那我们就需要先通过选择器选中div标签,才能再通过color将其设置为红色。
选择器分为四大类:标签选择器、类选择器、id选择器、通配符选择器。
1.1 标签选择器
结构:标签名 { css属性名 : 属性值 ; }
作用:通过标签名找到页面中所有这类标签,设置样式。需要注意的是,标签选择器可以找到不论经过多少次嵌套的标签,而且它选中的是这一类标签,并不是单独某一个,例如:文件里写了多个div标签,那通过div标签选择器设置红色文字,那所有div标签里的文字都将变为红色。以下是标签选择器程序使用示例:
<!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{
color: red;
}
</style>
</head>
<body>
<div>
hello world!
</div>
</body>
</html>
1.2 类选择器
结构:.类名 { css属性名 : 属性值 ; }
作用:通过类名,找到页面中所有带有这个类名的标签,设置样式。所有标签上都有class属性,class属性的属性值称为类名。类名由数字、字母、下划线、中划线组成,但不能以数字或者中划线开头。而且,一个标签可以同时有多个类名,类名之间以空格隔开。类名也可以重复,一个类选择器可以同时选中多个标签。以下是类选择器使用示例:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.color{
color: red;
}
.size{
font-size: 66px;
}
</style>
</head>
<body>
<p class="color size">hello world!</p>
</body>
1.3 id选择器
结构:#id属性值 { css属性名 : 属性值 ; }
作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式。同class属性,所有标签上也都有id属性,但是id属性类似于身份证,在一个页面中是唯一的,不可重复。一个标签上只能有个id属性值,而一个id选择器也只能选中一个标签。以下是id选择器使用案例:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#colour{
color: blue;
}
</style>
</head>
<body>
<p id="colour">hello world!</p>
</body>
1.4 通配符选择器
结构:*{ css属性名 : 属性值 ; }
作用:找到页面中所有的标签,设置样式。通配符选择器在开发中很少使用,一般常用来去除标签默认的margin(外边距)和padding(内边距)。以下是使用案例:
<!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>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div>
hello world!
</div>
</body>
</html>
1.5 选择器后代
结构:选择器1 选择器2 {css}
作用:根据HTML标签的嵌套关系,选择父元素后代中满足条件的元素。
如结构,具体含义是在选择器1所找到标签的后代(标签1里包含的所有嵌套标签,一级嵌套、二级嵌套等等)中,找到满足选择器2的标签,设置样式。注意后代包括不只子代,还有孙代、重孙代等等。另外使用后代选择器,选择器1和选择器2之间需要通过空格隔开。以下为案例:
<!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: red;
}
</style>
</head>
<body>
<div><span>hello world!</span></div>
</body>
</html>
1.6 选择器子代
结构:选择器1>选择器2{css}
作用:根据HTML标签的嵌套关系,选择父元素子代中满足条件的元素。
如结构,在选择器1所找到标签的子代中,找到满足选择器2的标签,设置样式。需要注意的是,这里的子代是仅指儿子一代,,也就是一级嵌套标签,不包括后面的孙代,重孙代。另外选择器之间通过 > 隔开。以下为案例:
<!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: red;
}
</style>
</head>
<body>
<div>
<span>hello world!</span>
<p>hello world</p>
</div>
</body>
</html>
1.7 选择器并集
结构:选择器1 , 选择器2{css}
作用:同时选择多组标签,设置相同的样式
如结构,找到选择器1和选择器2选中的标签,设置样式。这里也有需要注意的地方,首先第一点并集选择器中的每组选择器之间通过 “ , ” 分隔。其次,并集选择器中的每组选择器可以是基础选择器或者复合选择器。另外,并集选择器中的每组选择器通常一行写一个,从而提高代码的可读性。
案例演示:
<!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: red;
}
</style>
</head>
<body>
<div>hello world</div>
<span>hello world</span>
</body>
</html>
1.8 选择器交集
结构:选择器1选择器2{css}
作用:选中页面中同时满足多个选择器的标签。
如结构:找到页面中既能被选择器1选中,又能被选择器2选中的标签,设置样式。这里需要注意两点。第一点,交集选择器中的选择器之间是紧挨着的,没有东西分隔。第二点,交集选择器中如果有标签选择器,标签选择器必须写在最前面。以下是案例演示:
<!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.a{
color: red;
}
</style>
</head>
<body>
<div class="a">hello world</div>
<div class="b">hello world</div>
<span class="a">hello world</span>
</body>
</html>
1.9 选择器伪类
结构:选择器 : hover{css}
作用:选中鼠标悬停在标签上的状态,设置样式。
这里要注意的是,伪类选择器选中的是元素的某种状态。通过对结构中的css进行设置,可以实现当鼠标悬停在某个结构标签上时,更改标签样式。
案例演示:
<!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.a:hover{
color: red;
}
</style>
</head>
<body>
<div class="a">hello world</div>
<div class="b">hello world</div>
<span class="a">hello world</span>
</body>
</html>
2.文字
在文章中,我们常常排版布局时,会对文字大小,字体等方面进行样式设置,在网页中也一样,我们在开发时为了美观,也会对文字进行样式设置,这部分主要对文字的样式属性进行一个总结。
2.1 字体大小
属性名:font-size
取值:数字+px
注意:谷歌浏览器默认文字大小是16px,这里的px是单位,我们在开发时一定要写px,不然属性设置会无效。以下是字体大小程序设置示例:
<!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: 32px;
}
</style>
</head>
<body>
<div>
hello world!
</div>
</body>
</html>
2.2 字体粗细
属性名:font-weight
取值:字体粗细有两种取值方式。
第一种:关键字
正常 | normal |
加粗 | bold |
第二种:纯数字,100~900的整百数
正常 | 400 |
加粗 | 700 |
需注意的是,不是所有字体都提供了九种粗细,因此部分取值页面中无变化。而在实际开发中,以正常、加粗两种取值使用最多。以下是程序使用案例:
<!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-weight: bold;
}
p{
font-weight: 700;
}
</style>
</head>
<body>
<div>
hello world!
</div>
<p>
hello world!
</p>
</body>
</html>
2.3 字体样式(是否倾斜)
属性名:font-style
取值:正常(默认值):normal 倾斜:italic
字体倾斜样式均是向左倾斜,与word文档里的倾斜方式一样,以下是使用案例:
<!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-style: italic;
}
</style>
</head>
<body>
<div>
hello world!
</div>
</body>
</html>
2.4 字体
属性名:font-family
取值:具体字体1,具体字体2,……,字体系列
具体字体:微软雅黑、黑体、楷体……
字体系列:sans-serif、serif、monospace……
渲染规则:左右往右按顺序查找,如果电脑中未安装左边字体,则显示下一个字体,如果都不支持,一般在程序开发中会写一个字体系列,此时会显示电脑支持的,在字体系列里的字体。
需要注意的是,字体名称中存在多个单词时,推荐使用引号包裹,但最后一项字体系列不需要引号包裹。另外还需要注意的是,Windows系统默认字体为微软雅黑,macOS系统默认字体为苹方。以下是程序示例:
<!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-family: 微软雅黑,黑体,sans-serif;
}
</style>
</head>
<body>
<div>
hello world!
</div>
</body>
</html>
在这里,为了方便以后对网页的开发,我们对字体也进行一个拓展了解,常用的字体大致分为三大系列,分别是无衬线字体、衬线字体、等宽字体,我们对其稍微进行一个深入的分类使用说明:
字体系列 | 特点 | 应用场景 | 常见的该系列字体 |
无衬线字体(sans-serif) | 文字笔画粗细均匀,并且首位无装饰 | 网页中大多采用无衬线字体 | 黑体 |
衬线字体(serif) | 文字笔画粗细不均,并且首位有笔锋装饰 | 报刊书籍中应用广泛 | 宋体 |
等宽字体(monospace) | 每个字母或文字的宽度相等 | 一般用于程序代码编写 | Consolas |
2.5 font的复合属性
属性名:font(复合属性)
取值:font:style weight size family(顺序不可改变)
注:前两个值可以省略,如果省略了相当于设置了默认值。另外,如果要同时设置单独和连写形式,要么把单独的样式写在连写的下面,要么把单独的样式写在连写的里面。以下是程序示例:
<!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: normal 700 32px 宋体;
}
</style>
</head>
<body>
<div>
hello world!
</div>
</body>
</html>
3.文本
3.1 文本缩进
属性名:text-indent
取值:第一种:数字+px 第二种:数字+em(1em=当前标签的font-size的大小)
我们在程序里常常使用em做首行缩进,这样不论字体大小怎么变化,可以保证首行都是缩进两个字符长度。如果使用数字+px的方式进行缩进,如果font-size大小发生变化,则首行缩进就不再是两个字符。以下为案例:
<!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{
text-indent: 2em;
}
</style>
</head>
<body>
<div>
hello world!
</div>
</body>
</html>
3.2 文本水平对齐
属性名:text-align
取值:
属性值 | 效果 |
left | 左对齐 |
center | 居中对齐 |
right | 右对齐 |
这部分需要注意一点,如果需要让文本水平居中,text-align属性要给到文本所在标签(文本的父元素)设置。例如,对文本、span标签,h标签,input标签、img标签等进行元素居中时,需要在父元素进行设置。而对h标签等标签,则可以进行直接设置。对于text-align的放置牵扯到显示模式等多方因素,可以根据实际项目需求考虑清楚再放置。以下是使用案例:
<!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>
h1{
text-align: center;
}
div{
text-align: center;
}
</style>
</head>
<body>
<h1>Hello</h1>
<div>
<span>hello world!</span>
</div>
</body>
</html>
3.3 文本修饰
属性名:text-decoration
取值:
属性值 | 效果 |
underline | 下划线(常用) |
line-through | 删除线(不常用) |
overline | 上划线(几乎不用) |
none | 无装饰线(常用) |
开发中,常常会使用 text-decoration : none ; 来清楚a标签默认的下划线。
<!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;
}
</style>
</head>
<body>
<a href="#">超链接</a>
</body>
</html>
4.行高
属性名:line-height
取值:两种。第一种:数字+px 第二种:倍数(当前标签font-size的倍数)
作用:控制一行的上下行间距。
一般两种应用场景:
第一种:让单行文本垂直居中可以设置 line-height : 文字父元素高度。
第二种:网页精准布局时,会设置 line-height : 1 可以取消上下间距。
在前面我们有提过font复合属性,在这里,行高也可以和font连写,但要注意覆盖问题。
连写格式为:font : style weight size/line-height family ; (注意格式顺序不可变)
<!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{
line-height: 50px;
}
.b{
font: italic 700 36px/2 family;
}
</style>
</head>
<body>
<div class="a">hello world!</div>
<div class="b">hello world!</div>
</body>
</html>
5.颜色取值
在前端设计中,有很多地方需要对颜色进行一个选取,但颜色的选取主要由设计师进行设计选取,而程序员只需要根据设计师的设计直接在程序里设置即可,所以我们在此处说一下颜色的几种写法,具体参考下表。
颜色表示方式 | 表示含义 | 属性值(举例) |
关键词 | 预定义的颜色名 | red、green |
rgb表示法 | 红绿蓝三原色。每项取值范围:0~255 | rgb(0,0,0) |
rgba表示法 | 红绿蓝三原色+a表示透明度,取值范围0~1 | rgba(255,255,255,0.5) |
十六进制表示法 | #开头,将数字转换成十六进制表示 | #000000、#ff0000 简写:#000、#f00 |
6.标签居中
结构:margin : 0 auto ;
在项目中,我们还会遇到给div、p、h等做大盒子(盒子可以理解为作为外层标签)的标签设置水平居中的情况,如果我们在这里使用 text-align : center ; 只会让这些标签里的内容水平居中,并不能做到让标签本身的范围居中,这时,我们就用到了 margin : 0 auto; ,只需要给当前标签本身设置即可实现标签居中。
还需注意,这种方法一般针对于固定宽度的盒子,如果大盒子没有设置宽度,此时会默认占满父元素的宽度。以下是程序示例:
<!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: 300px;
height: 200px;
background-color: red;
margin: 0 auto;
}
</style>
</head>
<body>
<div>hello world!</div>
</body>
</html>
7.背景
7.1 背景颜色
属性名:background-color
属性值:颜色取值(参考前面5.颜色取值部分)
背景色默认值是透明的,但我们在项目中,会采用赋值背景颜色的方式,来查看盒子的大小和位置,所以我们需要学会在布局时,通过设置背景颜色来查看布局。以下为程序案例:
<!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.a{
height: 200px;
width: 300px;
background-color: red;
}
</style>
</head>
<body>
<div class="a">hello world</div>
<span class="a">hello world</span>
</body>
</html>
7.2 背景图片
属性名:background-image
属性值:background-image : url ( ' 图片路径 ' ) ;
这里有一点需要注意,如果背景图片的尺寸小于盒子尺寸,则会采用水平平铺和垂直平铺的方式将盒子铺满,就像铺地砖一样,采用多个同样的地砖将地面铺满。如果盒子尺寸小于图片尺寸,那只会显示盒子尺寸大小的部分图片,并不能完整显示。以下为程序案例:
<!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.a{
height: 200px;
width: 300px;
background-image: url('./helloworld.png');
}
</style>
</head>
<body>
<div class="a">hello world</div>
<span class="a">hello world</span>
</body>
</html>
7.3 背景平铺
属性名:background-repeat
属性值:
取值 | 效果 |
repeat | (默认值)水平和垂直方向都平铺 |
no-repeat | 不平铺 |
repeat-x | 沿着水平方向(x轴)平铺 |
repeat-y | 沿着垂直方向(y轴)平铺 |
在7.2,我们了解了背景图片在盒子里的平铺排列以后,这部分我们使用background-repeat来取消这种平铺方式。具体使用方式可参考上表。以下为程序案例:
<!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.a{
height: 200px;
width: 300px;
background-image: url('./helloworld.png');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="a">hello world</div>
<span class="a">hello world</span>
</body>
</html>
7.4 背景位置
属性名:background-position
属性值:background-position : 水平方向位置 垂直方向位置 ;
这里的属性值水平方向位置和垂直方向位置有两种取值方式:
第一种:采用方位名词:水平方向:left / center / right 垂直方向:top / center / bottom
第二种:采用 数字+px:坐标系就是以左上角为原点(0,0),x轴水平向右,y轴垂直向下。
方位名词和坐标取值可以混着使用,但需要记住第一个取值表示水平,第二个取值表示垂直。以下为程序案例:
<!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.a{
height: 200px;
width: 300px;
background-image: url('./helloworld.png');
background-repeat: no-repeat;
background-position: left bottom;
}
</style>
</head>
<body>
<div class="a">hello world</div>
<span class="a">hello world</span>
</body>
</html>
7.5 背景相关属性
属性名:background
属性值:background : color image repeat position (顺序可变)
这一栏是background的复合属性写法,同font复合属性,但不同的是,background复合属性顺序可以随便颠倒,但是font不行。但是有一点需要注意,如果采用数值确定背景图片的位置,那数值就不能颠倒,系统会默认前一个数值是x轴方向,后一个数值是y轴方向的。以下为程序案例:
<!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.a{
height: 200px;
width: 300px;
background: red url(./1.png) no-repeat right center;
}
</style>
</head>
<body>
<div class="a">hello world</div>
<span class="a">hello world</span>
</body>
</html>
8.显示模式
8.1 块级标签
显示特点:
1.独占一行(一行只能显示一个)。
2.宽度默认是父元素的宽度,高度默认由内容撑开。
3.可以设置宽高
代表标签:div、p、h系列、ul、li、dl、dt、dd、form、header、……
8.2 行内标签
显示特点:
1.一行可以显示多个。
2.宽度和高度默认由内容撑开。
3.不可以设置宽高
代表标签:a、span、b、u、i、s、strong、……
8.3 行内块
显示特点:
1.一行可以显示多个。
2.可以设置宽高
代表标签:input、textarea、button、select、……
8.4 显示模式之间的转换
语法:
属性 | 效果 | 使用频率 |
display: block | 转换成块级元素 | 较多 |
display: inline-block | 转换成行内块元素 | 较多 |
display: inline | 转换成行内元素 | 极少 |
在8.1~8.3,我们介绍了三种显示模式,分别是块、行内、行内块。这三种显示模式代表着不同标签的布局方式,但为了让标签布局符合我们设计的要求,显得更加美观,有时候我们需要更改某些标签的尺寸等,但对于某些标签来说,它本身就带有一部分效果,那我们再去更改时,会发现不允许我们更改,这时候我们需要更改它的显示模式,再去进行设置。
举个简单的例子,我们想一行显示多个块级标签,这就需要我们将块元素改成行内块元素才行。以下为案例:
<!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{
width: 200px;
height: 300px;
background-color: red;;
display: block;
}
</style>
</head>
<body>
<span class="a">hello world</span>
</body>
</html>
9.标签嵌套
在了解完显示模式以后,我们讲两个关于标签嵌套规范的问题。
第一个:块级元素一般作为大容器,可以嵌套:文本、块级元素、行内元素、行内块元素等……
但是:p标签中不要嵌套div、p、h等块级元素。
第二个:a标签内部可以嵌套任意元素
但是:a标签不能嵌套a标签。
10.CSS特性
10.1 继承性
特性:子元素有默认继承父元素样式的特点
可以继承的常见属性(文字控制属性都可以继承)
1.color
2.font-size、font-weight、font-size、font-family
3.text-indent、text-align
4.line-height
5.……
注意:继承会存在失效的特殊情况。
如果元素有浏览器默认样式,此时继承性依然存在,但部分默认样式仍然会保留原样。
如a标签的color会继承失效 h系列标签的font-size会继承失效。
以下为继承性案例:
<!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{
color: red;
}
</style>
</head>
<body>
<div>
hello world
<p>hello</p>
</div>
</body>
</html>
10.2 层叠性
特性:
1.给同一个标签设置不同的样式,此时样式会层叠叠加,然后共同作用在标签上。
2.给同一个标签设置相同的样式,此时样式会层叠覆盖,最终写在最后的样式会生效。
注意,当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断结果。
以下是层叠性案例:
<!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>
/* 同一标签不同样式 */
.hello{
color: red;
}
.hello{
background-color: green;
}
/* 同一标签相同样式 */
.world{
color: red;
color: blue;
}
</style>
</head>
<body>
<div class="hello">hello</div>
<div class="world">world</div>
</body>
</html>