目录
一、CSS简介
CSS英文全称【cascading style sheet】:层叠样式表。
作用:CSS用于美化网页、还可以进行网页布局。
前端三层是什么呀?
答案:前端分为三层:HTML(结构层)、CSS(样式层)、JavaScript(行为层)。
语言 | 层级 | 作用 |
---|---|---|
HTML | 结构层 | 可以利用语义化标签搭建网页内容 |
CSS | 样式层 | 可以利用一些样式技术,美化页面、或者进行网页布局。 |
JavaScript【简称JS】 | 行为层 | 可以让用户和网页进行人机交互 |
总结:CSS,前端人当中称之为样式层,可以对网页进行美化。比如:文字设置颜色、文字设置大小、设置文字字体。可以进行网页页面布局。
1. CSS书写规则
CSS【层叠样式表,简称样式】:根据在网页书写位置不同。分为三种:行内样式、内嵌样式、外链样式。
注意:我们刚开始学习的是行内样式写法。
<div style="color:red;">我是行内样式呀</div>
<p style="color:yellow;">我是一个段落呀</p>
<a style="color:gree;font-size:66px">我是一个超级链接</a>
- 任意标签【容器、文本】都可以添加行内样式。上面写法、书写位置称之为行内样式。
- 需要在双标签、单标签的开始标签位置进行书写
- 在开始标签名字后面,别忘记有空格,给这个标签添加一个style(英文含义:样式)属性
- 但是需要注意的是:这个style属性的属性值,写法很独特。
style属性的属性值写法:
- 样式属性名字:样式属性的属性值
- 别忘记在样式属性值后面加上一个分号,代表当前这一个样式设置完毕,进行下一个样式属性。
- 一个标签可以同时设置多个样式,多个样式之间用分号隔开。
二、常用样式
在制作网页的时候,我们经常和网页中文字打交道。比如设置文字颜色、文字大小、文字字体。
1. color
color这个样式,主要的作用是设置文字的颜色。
属性值:是有英文单词、十六进制数字组成。
1.1 下面这种写法:color属性值对应颜色英文单词。
<div style="color:red;">我是一个划分区域容器级别标签</div>
<div style="color:orange;">我是一个划分区域容器级别标签</div>
<div style="color:yellow;">我是一个划分区域容器级别标签</div>
<div style="color:green;">我是一个划分区域容器级别标签</div>
<div style="color:cyan;">我是一个划分区域容器级别标签</div>
<div style="color:blue;">我是一个划分区域容器级别标签</div>
<div style="color:purple;">我是一个划分区域容器级别标签</div>
<div style="color:skyblue">我是一个划分区域容器级别标签</div>
注意:
- 一般情况下,一个样式只需要设置一次即可。如果设置多次。右侧覆盖左侧属性。
- 任意标签都可以设置行内样式。
<div style="color:red;color: black">我是一个划分区域容器级别标签</div>
注意:
- 一般情况下,一个样式只需要设置一次即可。如果设置多次。右侧覆盖左侧属性。
- 任意标签都可以设置行内样式
1.2 下面这种写法:color属性值对应十六进制数字。
<ul>
<li>
<h3 style="color:#a52a2a;">西游记</h3>
</li>
<li>
<h3 style="color:#7FFF00;">三国演义</h3>
</li>
<li>
<h3 style="color:#CD5C5C;">水浒传</h3>
</li>
<li>
<h3 style="color:#7CFC00;">红楼梦</h3>
</li>
</ul>
- 如果color样式的属性值为十六进制数字,切记以#号开头,分号结束。
- 十六进制的英文字母不区分大小写
- 十六进制的数字不需要死记硬背,因为你记不住。参考手册即可。
1.3 下面这种写法:rgb(red,green,blue)有三色素组成,红色部分三色素,需要的是0~255之间的数字.
p#box1{
color:rgb(188,99,44);
}
注意:
标签文字的颜色数值,可以rgb三色素形式。三色素数值是0~255之间整数,三色素数值之间用逗号隔开。
2. font-size
font-size:字体大小。这个样式的主要的作用是可以设置文字的大小。
属性值:属性值是由数字加上px单位。
pixel:px全称,像素含义。
属性值:有三种写法。
- 像素单位:比如50px,代表文字大小为50像素。
<div style="font-size: 1px;">我的大小为1px</div>
<div style="font-size: 12px;">我的大小为12px</div>
<p style="font-size:16px;">我的大小为16px,是浏览器默认大小</p>
<div style="font-size: 20px;">我的大小为20px</div>
<div style="font-size: 25px;">我的大小为25px</div>
<div style="font-size: 30px;">我的大小为30px</div>
- 百分比写法:就是后代元素的字体大小,是祖先元素字体大小的百分比。
em单位:就是后代元素的字体大小,是祖先元素的字体大小的多少倍。
#box1{
font-size: 500%;//80px
}
- 代表的是这个匹配标签字体大小为就近的祖先元素font-size的500%。
- 由于咱们这个案例,p标签就近的祖先元素为body(默认字体大小为16px)。
#box2{
font-size: 5em;//80px
}
- 代表的是这个匹配的标签字体大小为就近的祖先元素font-size的5倍。
- 由于咱们这个案例,p标签就近的祖先元素body(默认字体为16px)。
一、谷歌浏览器
谷歌浏览器,一般标签默认文字的大小是16px,谷歌浏览器最小的12px,如果比12px还小,显示12px。
谷歌浏览器字体大小最大都是上不封顶的。
三、IE浏览器
IE浏览器,一般标签默认文字的大小16px,IE浏览器最小的1px,如果比1px还小,显示1px
IE浏览器字体大小最大也是上不封顶的。
<h1>我是一级标题</h1>
<h1>我是二级标题</h1>
注意:比如h系列标签,默认字体大小的。还有一些浏览器自带默认样式。
3. font-family
font-family:中文含义,即为字体系列。这个样式主要的作用是设置文字的字体。
文字:分为中文、英文。中文有属于字体字体、英文也有属于自己字体。
<p>默认字体</p>
<p style="font-family:'微软雅黑'">微软雅黑</p>
<p style="font-family:'方正粗黑宋简体'">方正粗黑宋简体</p>
<p style="font-family:'楷体'">楷体</p>
- font-famliy属性值外层需要加上一对单引号。
- font-family:可以同时设置多个字体,多个字体之间用逗号隔开,从左到右,后面字体设置覆盖前面字体设置。
<hr/>
<p style="font-family:'Arial'">my name is jch</p>
<p style="font-family:'Webdings','Arial'">my name is jch</p>
<p style="font-family:'Webdings','Arial'">my name is jch</p>
<hr/>
<div style="font-family:'Webdings','Arial','楷体','简方正粗黑宋体'">my name is 花骨朵</div>
- 英文字体不需要记忆:
1:如果文字内容,为纯的英文(没有汉字),设置多个英文字体。后者没有用。
2:如果文字内容,为文字+英文,设置多个中英文字体。从左到右找到第一个符合自己字体进行设置。
4. line-height
line-height:它主要的作用是,可以设置文字实际占有的高度。
文字实际占有的高度,不是由font-size大小决定的,是有行高决定的。文字在行高中垂直居中的。
属性值:2种写法。
- 像素单位:100px,代表文字占有的高度为100px。
- 百分比:按照自身的font-size大小进行划分的。
p{
font-size: 50px;
}
p{
font-size: 50px;
/*行高:line-height*/
line-height: 100px;//文字实际占有的高度为100px
}
p{
font-size: 50px;
/*行高:line-height*/
line-height: 200%;
}
行高经常用来做什么?
经常用来制作:固定宽度和高度的标签,文字垂直居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
div{
/*标签的宽度*/
width:600px;
/*标签的高度*/
height: 200px;
/*外边框*/
border:5px solid red;
font-size:50px;
/*让文字行高和标签的高度一样即可*/
line-height:200px;
}
</style>
</head>
<body>
<div>
我是老花骨朵呀
</div>
</body>
</html>
- 文字垂直居中只需让文字实际占有的高度,和标签的高度一样即可。
5. font-weight
font-weight:可以让文字加粗。
属性值:纯数字、英文单词。
#box{
/* color:red;*/
/*font-weight:让文字加粗*/
font-weight: 700;
}
- font-weight:属性值可以是纯数字(没有像素单位)
- 属性值为纯数字:100~700之间的整数。【网页文字默认加粗的效果400】
#box{
/* color:red;*/
/*font-weight:让文字加粗*/
font-weight: bold;
}
- font-weight:属性值可以为英文单词
- normal【英文含义:正常的意思】相当于默认加粗数值400。bold【英文含义:加粗】,相当于数字700
注意:加粗的这个属性值没有像素单位。
6. font-style
font-style:它主要的作用是可以让文字倾斜。
属性值:英文单词
normal:正常、文字不倾斜。
italic:斜体字【工作当中经常使用到它】
oblique:倾斜
<style type="text/css">
*{
margin:0;
padding: 0;
}
.normal{
font-style: normal;
}
.italic{
font-style: italic;
}
.oblique{
font-style: oblique;
}
</style>
7. 复合样式—font
其实font是一个符合样式:
- font-style:文字倾斜
- font-weight:加粗
- font-size:字体大小
- line-height:行号
- font-family:字体设置【宋体、微软雅黑】
相当于:这个五个样式简写方式
font:font-style font-weight font-size line-height font-family
.normal1{
color:rgb(123,66,99);
font:italic bold 50px/300px '楷体';
}
- font是上面五个属性简写方式。多个属性值之间用空格隔开。
- 字体倾斜、字体加粗的位置可以互换。但是其余三个位置书写不能互换。
- 字体大小和行高之间用斜杠链接。
8. 文本相关样式
8.1 text-align
text-align:它主要的作用是设置网页中的文本的水平对齐方式。
属性值:英文单词
- left:让网页中的文本水平靠左侧对齐。(默认数值)
- center:让网页中的文本水平居中对齐。
- right:让网页中的文本水平靠右侧对齐。
注意:不管单行文本、多行文本都可以通过text-align属性值,进行设置文本水平方向对齐方向。
.cur{
width:400px;
height: 200px;
/*外边框*/
border:2px solid red;
/*设置文本对齐方式*/
text-align: right;
}
- 默认情况下:网页的文本水平对齐方式靠左侧对齐。
- 不管是单行文本、还是多行文本都可以通过text-align进行设置水平对齐方式。
8.2 text-decoration
text-decoration:它主要的作用是可以给文本添加线条修饰。
属性值:英文单词
- none:没有线条修饰
- overline:文本上方有线条修饰
- line-through:文本有中线的修饰
- underline:文本有下线的修饰
<style type="text/css">
*{
margin:0;
padding: 0;
}
.none{
text-decoration: none;
}
.overline{
text-decoration: overline;
}
.through{
text-decoration: line-through;
}
.underline{
text-decoration: underline;
}
</style>
8.3 text-indent
text-indent:英文含义,文本缩进。
text-indent:可以设置文本首行的缩进的距离。
属性值:2种
- 像素单位:比如100px,代表文本首行向右缩进100像素
- em单位:比如10em,代表文本首行向右缩进10个中文字符。
.indent{
width:400px;
height: 400px;
border:1px solid red;
/*文本首行缩进*/
text-indent: 100px;
}
下面em单位代表的是文本首行缩进的中文字符个数。
.indent{
width:400px;
height: 400px;
border:1px solid red;
/*文本首行缩进*/
text-indent:2em;//代表首行缩进两个中文字符
}
9. 盒模型样式
盒模型有人也称之为‘框模型’,盒模型就是网页中的标签,在网页中实际占有区域而已。
盒模型是有五个样式组成:
width(宽度)、height(高度)、padding(内边距)、border(边框)、margin(外边距)。
另外还有一个:background-color:汉语意思,背景颜色。
background-color:样式属性值和color样式的属性值一样的【英文单词,16进制数字】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
div{
width:400px;
height: 400px;
padding:50px;
border:10px solid red;
margin:60px;
}
</style>
</head>
<body>
<div>
大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女 大美女
</div>
</body>
</html>
- 标签在网页中实际占有的区域:width +height +padding+border+margin
- 标签可以书写内容区域:width +height
9.1 宽度、高度
宽度(width)和高度(height):设置标签可以书写内容区域。
属性值:像素单位、百分比单位。
- 非常常用像素单位
宽度和高度常用的单位为像素单位:数字设置为多少,宽度和高度即为多少像素。
#inner{
width:200px;
height: 200px;
background-color: red;
}
- 也是比较常用的单位:百分比
元素的宽度和高度可以写百分比单位:元素的宽度和高度百分比参照父元素的宽度和高度进行划分的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
#inner{
width:50%; ====>200px
height:100%;=====>400px
background-color: red;
}
#outer{
width:400px;
height: 400px;
border:1px solid cyan;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner"></div>
</div>
</body>
</html>
- 元素宽度和高度属性值可以书写为百分比形式
- 元素的宽度和高度百分比,是按照父元素的宽度和高度进行百分比划分的。
注意事项:
- 元素的宽度和高度属性值为百分比。元素的宽度和高度会随着父元素的宽度和高度变化而变化。
- body为网页主题部分,它有默认宽度。默认宽度为用户浏览器宽度。在开发当中很少设置body的宽度。
如果某一个标签想和网页主体一样宽。作为body的子元素设置为100%即可。 - 类似div这种容器级别标签,如果没有设置w、h。宽度默认和父元素一般宽。高度为零。
如果设置文本,会让文本撑出一个高度。
9.2 内边距
内边距:内边距(padding),它主要的作用是,设置宽高区域和边框距离的设置。
特点:内边距不能显示内容的,但是可以设置背景。
属性值:像素单位。
注意:padding这个样式,它是一个复合样式。是由下面这四个单一样式组成的。
padding-top、padding-right、padding-bottom、padding-left。
.pdd{
width:200px;
height: 200px;
border:2px solid red;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}
- padding是一个复合样式,是由上面这四者组成。而我们这个padding样式,它的样式属性值写法,有四种。
- 多个属性值之间用空格隔开。
第一种写法:四个属性值(多个属性值之间,用空格隔开)
分别代表:上、右、下、左(顺时针)四个内边距数据设置。
padding: 10px 20px 30px 40px;
第二种写法:三个属性值(多个属性值之间,用空格隔开)
分别代表:上、右和左、下内边距数据设置。
padding: 10px 20px 30px;
第三种写法:两个属性值(多个属性值之间,用空格隔开)
分别代表:上下和左右内边距数据设置。
padding: 10px 20px;
第四种写法:一个属性值。
分别代表的是:上右下左内边距设置。
padding:10px;
下面这种情况需要注意:
padding: 20px;
padding-left: 40px;
- 如果复合样式padding属性值书写完毕,在复合样式后面,如果在出现单一内边距样式出现。会覆盖前者内边距设置数据。
9.3 边框
作用:边框(border),主要的作用是设置标签外层边框。
属性值:属性值是由三部分组成,三个属性值之间需要用空格隔开。
三个属性值分别是:边框的宽度、边框线条设置、边框的颜色。
.bk{
width:200px;
height: 200px;
padding: 10px;
/*边框*/
border:10px solid red;
}
- border三个属性值:属性值之间用空格隔开。
- 三个属性值:边框的宽度、边框线条类型、边框的颜色。
注意:border是一个复合样式。是由下面这三个单一样式组成。
- border-width:边框的宽度
- border-style:边框的线条类型
- border-color:边框的颜色
9.3.1 border-width
作用:它主要的作用是,设置标签边框的宽度。
属性值:它的属性值的写法,类似padding,属性值都是像素单位。也是有四种写法。
border-width:10px 20px 30px 40px;
代表:代表的是标签:上、右、下、左边框的宽度。(多个属性值之间用空格隔开)
border-width:10px 20px 30px;
代表:代表的是标签:上、左右、下边框的宽度(多个属性值之间用空格隔开)。
border-width:10px 20px;
代表:代表的是标签:上下、左右边框的宽度。(多个属性值用空格隔开)
border-width:50px;
代表:代表的是标签:上、右、下、左边框的宽度。
9.3.2 border-style
作用:它主要的作用是,设置边框的线条类型。
属性值:它的属性值写法类似于padding,也是有四种写法。属性值都是英文单词
- solid 实线
- dashed 虚线
border-style:solid solid dashed solid;
代表:上、左右、下的线条类型
border-style:solid dashed solid;
代表:上、左右、下的线条类型
border-style:dashed solid;
代表:上下、左右的线条类型
border-style:dashed;
代表:上、右、下、左线条类型
9.3.3 border-color
作用:主要的作用是设置边框的颜色。
属性值:属性值写法,类似于padding。也是有四种写法。属性值可以英文单词、也可以16进制颜色值。
属性值也有四种写法,多个之间用空格隔开。
border-color: red orange yellow green;
属性数目和真实图的关系都和上面一样。
border:10px solid red;
--------------------相当于下面这种单一样式的写法----------------------
border-width: 10px;
border-style: solid;
border-color: red;
9.3.4 小练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
.outer{
width:300px;
height: 200px;
border:1px solid red;
}
.outer div{
color:green;
text-align: center;
border-width: 0px 0px 1px 0px;
border-style: dashed;
border-color: cyan;
font-size: 18px;
font-family: '楷体';
}
</style>
</head>
<body>
<div class="outer">
<div>我是新闻1</div>
<div>我是新闻2</div>
<div>我是新闻3</div>
<div>我是新闻4</div>
</div>
</body>
</html>
9.4 外边距
作用:外边距,主要的作用是设置标签与标签之间的距离。
特点:外边距中不能显示内容,不能设置背景。
属性值:它的属性值写法类似于padding,单位都是像素单位。
注意:margin它也是一个复合样式。是由下面四个单一的样式组成的。
margin-top、margin-right、margin-bottom、margin-left。
.mr{
width: 200px;
height: 200px;
padding: 20px;
border:2px solid red;
background-color: cyan;
/*外边距:四个单一样式*/
margin-top:10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
外边距在工作当中:经常使用复合样式margin。它的属性值写法类似于padding,有四种写法。
margin:10px 20px 30px 40px;
代表:代表的是标签上、右、下、左外边距。(多个属性值之间用空格隔开)
margin:10px 20px 30px;
代表:代表的是标签上、左右、下外边距(多个属性值之间用空格隔开)
margin:10px 20px;
代表:代表标签上下、左右外边距。(多个属性值之间用空格隔开)
margin:10px;
代表:代表的是上、右、下、左外边距。
<style type="text/css">
*{
margin:0;
padding: 0;
}
.mr{
width: 200px;
height: 200px;
padding: 20px;
border:2px solid red;
background-color: cyan;
/*外边距:四个单一样式*/
margin-bottom: 50px;
margin-left: 150px;
}
.siblings{
width:200px;
height: 200px;
padding: 20px;
border:2px solid pink;
background-color: skyblue;
}
</style>
总结:外边距:用来设置标签与标签之间距离。
老百姓大普通话:相当于这个标签向外踹了一脚,告诉别人(别的标签)离我远点。
三、CSS书写位置
在CSS【层叠样式表】中根据书写位置不同:行内样式、内嵌样式、外链样式。
行内样式写法:
- 双标签、单标签。在开始标签名字后面加上一个style;
- 只不过style属性值比较特殊。样式名字:样式属性值;样式名字:样式属性值;
<div style="color:red;font-size:20px">鹅鹅鹅</div>
<div style="color:red;font-size:20px">曲项向天歌</div>
<div style="color:red;font-size:20px">白毛浮绿水</div>
<div style="color:red;font-size:20px">红掌拨清波</div>
行内样式在工作中使用频率不是很高?
- 网页中如果样式类似,行内样式需要一个标签一个标签去设置。工作量大。
- 标签和样式没有分离。特别是初学者,学起来比较费劲。
内嵌样式在工作中使用频率相对高一些?
- 工作量很小。
- 标签和样式进行分离。初学者学起来相对友好一些。
<style>
div{
color:cyan;
font-size: 30px;
}
</style>
1. 内嵌样式书写语法规则
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p{
color:red;
font-size: 30px;
background-color: pink;
}
</style>
</head>
① 内嵌样式需要书写在style标签里面。而且style标签一般放置head标签内部。
② style标签的type属性,可有可无。属性值text/css,纯文本CSS样式。
③ 要通过选择器,选择将来要添加样式标签。
④ 选择器后面紧随大花括号。不是小括号,不是中括号。
⑤ 在大花括号里面书写要添加样式。(对于空格、换行、缩进不敏感)
样式名字:样式属性值;
样式名字:样式属性值;
样式名字:样式属性值;
⑥ 每一个样式结束之后,在后面别忘记加上分号。
四、选择器*
选择器【英文】:selector
选择器:选择器是CSS(层叠样式)中一种模式,用来选择器给那些网页中的标签添加样式而已。
CSS选择器分为两种:基础选择器、高级选择器。(现在学习的是CSS2的选择器)
基础选择器:标签选择器、id选择器、类选择器、通配符选择器。(4种)
高级选择器:后代选择器、交集选择器、并集选择器。(3种)
1. 基础选择器
1.1 标签选择器
标签选择器:在CSS样式中通过标签名字,选择给那些标签添加样式。
选择器范围:网页当中同名标签都会添加样式。
<style type="text/css">
h1{
color:red;
}
p{
color:cyan;
font-size: 20px;
}
li{
color:yellow;
background-color: skyblue;
}
</style>
- 标签选择器:通过标签名字,选择器网页中标签进行添加样式。不管标签嵌套层次多深,都可以选中添加样式。
1.2 id选择器
id选择器:
第一步:给想要添加样式标签添加一个id属性。
第二步:在内嵌样式中,通过#+id属性值进行选择匹配。
<style type="text/css">
#box{
color:red;
font-size: 20px;
background-color: yellow;
}
#box1{
color:cyan;
}
#BoX{
color:yellow;
}
</style>
- 标签的id属性值写法:首个字符必须是英文字母,后面的属性值可以是英文字母、数字、下划线。
- 每一个标签的ID属性值务必唯一。(就和人的身份证是一样的,没人一个,不同)
- id属性值区分(英文的)大小写。
1.3 类选择器
类选择器:
第一步:给需要添加样式标签,添加一个class属性。
第二步:在内嵌样式中,通过.+标签的class的属性值
选择范围:只要标签拥有class属性,且class属性值相同就可以选择匹配上【哪怕标签类型不同】
<style type="text/css">
.cur{
color:red;
}
</style>
- class属性值:首个字符务必是英文的,后面的属性值可以是数字、字母、下划线。(区分大小写)
- class属性值可以有多个,多个之间用空格隔开。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.lan{
color:cyan;
}
.fs20{
font-size: 50px;
}
</style>
</head>
<body>
<ol>
<li>小明</li>
<li class="lan fs20">小红</li>
<li class="lan">小兰</li>
<li>小王</li>
<li>小李子</li>
</ol>
<p class="lan fs20">我是一个段落</p>
</body>
</html>
1.4 通配符选择器—了解
通配符选择器:*
作用范围:通配符选择器,选择网页中全部标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
color:red;
background-color: gold;
}
</style>
</head>
<body>
<h1>我是祖国的栋梁之才</h1>
<div>
<p>我是一个p</p>
</div>
<div>
<p>我是一个p</p>
</div>
<div>
<p>我是一个p</p>
</div>
<form>
<input type="text" value="我是默认文本"/>
</form>
</body>
</html>
- 注意:通配符不常用与设置某一个标签,它经常用来设置网页中全部标签样式。
在网页中很多的容器级别标签、文本级别标签p。都拥有内边距padding、外边距margin。
是网页外观看起来不是很好看。在这种情况下我们可以使用通配符,将这些标签的内外边距归零。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0px;
padding: 0px;
}
h1{
background-color: red;
}
p{
background-color: cyan;
}
</style>
</head>
<body>
<h1>我是祖国的栋梁之才</h1>
<div>
<p>我是一个p</p>
</div>
<div>
<p>我是一个p</p>
</div>
<div>
<p>我是一个p</p>
</div>
<form>
<input type="text" value="我是默认文本"/>
</form>
</body>
</html>
- 通配符选择器:一般用于清除元素默认拥有的外边距、内边距。
2. 高级选择器
我们已经学习完了四种基础选择器:标签选择器、id选择器、类选择器、通配符选择器。
但是在实际工作当中,我们网页中标签的嵌套关系可能很复杂,用基础选择器可能实现不了选中标签添加样式,
或者用基础选择器选中标签添加样式比较复杂。
因此,由基础选择器衍生出一些高级选择器:后代选择器、交集选择器、并集选择器。
2.1 后代选择器
后代选择器使用:
如果你想给某一标签添加样式,先寻找他的祖先元素。
在书写内嵌样式的时候,从左到右一层一层寻找,直到找到要添加样式的标签。
而且需要注意,左侧的都是祖先标签的选择器,而且祖先标签的选择器之间用一个空格隔开,最右侧的这个选择器,是最终添加样式的标签选择器。
<style type="text/css">
div ul li p{
color:red;
}
</style>
表示:div标签的后代ul的后代li的后代全部p标签添加样式
<style type="text/css">
div ul p {
color:red;
}
</style>
表示:div标签的后代ul的后代标签全部p标签添加样式。同上
- 在使用后代选择器的时候,可以省略一些祖先标签的选择器。
#list .cur p{
color:green;
font-size: 20px;
}
表示:带有id属性值为list的标签的后代带有class属性值为cur的后代p全部的标签添加样式。
总结:后代选择器使用
-
先找到要添加样式标签的祖先元素。通过在内嵌样式中一层一层的找到需要添加样式标签。
-
是从左到右最后一个选择器给选中标签添加样式。
-
祖先标签选择器之间一定要记住需要用空格隔开。
-
后代选择器在使用的时候,可以省略一些祖先标签的选择器。
2.2 交集选择器
交集选择器:被选中需要添加样式的标签,需要同时符合多个基础选择器而已。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p.cur{//选中的p标签,而且身上需要有class属性,属性值为cur
color:green;
}
h2.cur{//选中的h2标签,而且身上需要有class属性,属性值为cur
color:red;
}
</style>
</head>
<body>
<div>
<h2 class="cur">我是二级标题</h2>
<p>我是小猫咪,天天就是睡觉</p>
<p class="cur">我是小猫咪,天天就是睡觉</p>
<p>我是小猫咪,天天就是睡觉</p>
</div>
</body>
</html>
交集选择器:无非是选中标签同时需要符合多个基础选择器。
交集选择器:在使用的时候一般都是标签选择器和类选择器一起使用。
交集选择器:一般情况下都是标签选择器在前,类选择器在后。
交集选择器:在使用的时候标签选择器和类选择器之间没有任何符号。
交集选择器:交集选择器可以和其他的高级选择器一起使用。
2.3 并集选择器
我们已经学习完六种选择器,但是有的时候,这六中选择器不同同时选择页面中全部情况。
因此我们可以使用并集选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
h2,p {//代表给h2和p标签同时添加下面样式
color:green;
background-color: red;
}
</style>
</head>
<body>
<div>
<h2>我是祖国的老花骨朵</h2>
<p>我是大帅哥,虽然有点丧良心</p>
<p>我是大帅哥,虽然有点丧良心</p>
<p>我是大帅哥,虽然有点丧良心</p>
</div>
</body>
</html>
并集选择器,是有基础选择器之间用逗号隔开。【最后面不需要添加逗号】
并集选择器:代表的是这些选择器合并一起,共同添加一些相同样式。
并集选择器可以结合其他高级选择器一起使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div h2 , div p{
color:red;
background-color: green;
}
</style>
</head>
<body>
<div>
<h2>我是祖国的老花骨朵</h2>
<p>我是大帅哥,虽然有点丧良心</p>
<p>我是大帅哥,虽然有点丧良心</p>
<p>我是大帅哥,虽然有点丧良心</p>
</div>
<h2>我是h2标题</h2>
<p>我也是一个段落</p>
</body>
</html>
表示:div的后代标签h2、和div后代标签p,同时设置相同样式。
五、CSS特性
css【层叠样式】其实它拥有两大特性(注意事项):继承性、层叠性。
1. 继承性
继承性:有的时候,我们发现没有被选择器选中的标签,也添加上了样式。由于这个标签的祖先元素添加样式。
导致这个没有被选择器选中的标签页继承了一些样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0px;
padding: 0px;
}
.box{
width:400px;
height: 250px;
background-color: cyan;
color:red;
font-size: 50px;
font-family: '楷体';
}
</style>
</head>
<body>
<div class="box">
<p>我是一个段落</p>
<p>哈哈哈</p>
<p>么么哒</p>
</div>
</body>
</html>
- css层叠样式中有继承特性:祖先元素的样式中(涉及到文字相关样式),后代元素可以继承。
注意:祖先元素的文字相关的样式,可以被后代元素继承。
2. 层叠性
我们已经学习完4中基础选择器、3中高级选择器,选中网页中标签添加样式。
我们已经学习完CSS继承性,没有被选择器选中标签,可以继承祖先元素的文字样式。
问题:
1.我们学习了很多选择器,如果网页中某一个标签,同时被多个选择器选中添加相同的样式。到底听那个选择器呀?
2.我们学习了继承,后代标签可以继承祖先标签的文字样式,如果后代标签的祖先元素有很多(文字样式),到底该继承谁的呀?
解决方案:层叠性
如果网页中标签同时被多个选择器选中,添加相同样式,其实CSS会通过一些手段进行对比,将最后一个选择器层叠调、覆盖调其他选择器。
2.1 标签同时被多个选择器选中,添加相同样式。
解决方案:层叠性。
在CSS中权重高的选择器,会层叠掉权重低的选择器。
基础选择器:
在基础选择器中,根据选择器选择范围大小,划分权重,选择器选择范围越小,权重越高。
id选择器权重>类选择器权重>标签选择器权重>通配符选择器权重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
color:red;
}
p{
color:orange;
}
#box{
color:pink;
}
.cur{
color:purple;
}
</style>
</head>
<body>
<p id="box" class="cur">我是祖国的老花骨朵</p>
</body>
</html>
- 如果一个标签被多个选择器选中添加相同的样式,样式属性值不是‘混合物’。
- 根据选择器权重高低进行层叠、覆盖,权重高的层叠、覆盖权重低的选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box p{
color:red;
}
#box #box1 p{
color:orange;
}
#box #box1 #box2 p{
color:green;
}
</style>
</head>
<body>
<div id="box" class="box">
<div id="box1" class="box1">
<div id="box2" class="box2">
<p>我爱你我的祖国</p>
</div>
</div>
</div>
</body>
</html>
- 如果是高级选择器,某一个标签同时被多个选择器选中。
层叠依据是:
对比:id选择器个数=>类选择器个数=>标签选择器个数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p{
color:yellow;
}
#box p{
color:red;
}
.box .box1 .box2{
color:green;
}
</style>
</head>
<body>
<div id="box" class="box">
<div id="box1" class="box1">
<div id="box2" class="box2">
<p>我爱你我的祖国</p>
</div>
</div>
</div>
</body>
</html>
层叠依据是:
如果高级选择器中id选择器个数、类选择器个数、标签选择器个数一样的。
后者覆盖前者。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box p{
color:red;
}
#box2 p{
color:skyblue;
}
</style>
</head>
<body>
<div id="box" class="box">
<div id="box1" class="box1">
<div id="box2" class="box2">
<p>我爱你我的祖国</p>
</div>
</div>
</div>
</body>
</html>
2.2 标签没有被选择器选中,继承祖先元素的文字样式
- 后代元素可以继承祖先元素的文字样式:就近原则。(不用看选择器权重)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box{
color:red;
font-size: 12px;
}
#box .box1{
color: orange;
font-size: 20px;
}
.box .box1 .box2{
color:green;
font-size: 40px;
}
</style>
</head>
<body>
<div id="box" class="box">
<div id="box1" class="box1">
<div id="box2" class="box2">
<p>我是你们大佬的后代p标签</p>
</div>
</div>
</div>
</body>
</html>
- 后代标签继承祖先元素的文字样式,选择器选择的都是就近的(比选择器权重)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box .box1 .box2{
color:red;
font-size: 20px;
}
#box .box1 #box2{
color: yellow;
font-size: 30px;
}
#box #box1 #box2{
color:pink;
font-size: 50px;
}
</style>
</head>
<body>
<div id="box" class="box">
<div id="box1" class="box1">
<div id="box2" class="box2">
<p>我是你们大佬的后代p标签</p>
</div>
</div>
</div>
</body>
</html>
- 后代标签继承祖先元素文字样式,权重是一样的(后者覆盖前者)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box .box1 #box2{
color:red;
font-size: 40px;
}
#box #box1 .box2{
color: orange;
font-size: 60px;
}
</style>
</head>
<body>
<div id="box" class="box">
<div id="box1" class="box1">
<div id="box2" class="box2">
<p>我是你们大佬的后代p标签</p>
</div>
</div>
</div>
</body>
</html>