2020年10月15日
今天是学习前端的第四天,今天pink老师带我们学习了CSS的复合选择器,元素的显示模式,背景图片等三大块内容。
一、复合选择器
1、后代选择器
后代选择器是选择父标签的所有后代,语法格式为 元素1 元素2 {样式说明}
其中元素1、元素2可以是任意基础选择器,元素1元素2之间用空格隔开。例如:
ul li {
样式说明
}
此段代码表示<ul>
中的所有`
- 的样式都改变为规定样式。
注意:为了代码优化,理论上嵌套不要超过3~4层。
2、子代选择器
子代选择器是选择某个元素最近的一级子元素(亲儿子)。其语法格式为 -
元素1>元素2 {样式说明}
选择元素1中所有的直接后代(子元素)元素2。例如:
.class>tag { 样式说明 }
元素1和元素2之间用大于号隔开。
3、并集选择器
并集选择器可选择多组标签为它们定义同样的格式,而且并集选择器还可以使用后代选择器或者子代选择器作为元素。语法格式为:元素1,元素2 {样式说明}
元素中间用’,’(逗号)隔开,
例如:ul,div {样式说明}
此段代码表示<ul>
标签<div>
标签都用此样式。
注意:①通常各个元素竖着写。②最后一个元素不加逗号。
4、链接伪类选择器与:focus伪类选择器
注意:①链接伪类选择器的书写顺序为a:link a:visited a:hover a:active
顺序是不可以改变的。
②区分a:hove
r和a:focus
之间的区别:前者是鼠标悬浮时改变样式,后者是鼠标点击后改变样式,再点击其他地方样式消失。
5、交集选择器
交集选择器的使用主要是为了提权,语法格式为元素1元素2 {样式说明}
元素与元素之间没有分隔符,它指的是既有元素1又有元素2.二、元素的显示模式
元素显示模式的作用是网页中的标签非常多,在不同地方会用到不同类型的标签,了解它们的特点可以更好的布局我们的网页。
1、块元素——block
注意:①文字元素不能添加块元素;
②<p>
和<div>
中不能放块元素;尤其是<div>
;
③<h1>~<h6>
中也不能放块元素
2、行内元素——inline
3、行内块元素——inline-block
4、显示模式的转换
应用场景:让行内元素具有宽高,或者把块元素放在一行显示。
代码如下:
其中我们用的最多的是display:block
和display:inline-block
,很少用到display:inline
TIP:display
属性要写在第一行,在其它属性的上边。
5、单行文字垂直居中
做法:让文字的行高等于盒子的高度,也就是line-height=height
。若行高小于盒子高度,文字偏上;若行高大于盒子高度,则文字偏下。三、背景图片
这张图列出了背景的三个属性,分别是背景颜色、插入背景图片和背景平铺。
插入背景图片常被用于插入logo、装饰图片、超大图片、精灵图(雪碧图)等,优点是容易控制图片的位置。
注意:页面元素添加背景图片的同时也可以添加背景颜色,但是背景图片会显示在背景颜色的上层。
这张图列出了背景的剩余两个属性,分别是背景位置和背景固定。
使用背景位置属性时一定要注意精确单位的两个值的前后顺序,前面是x轴后面是y轴。
背景属性的复合写法我们只要注意它的顺序是没有要求的,每个属性值之间要用空格隔开,用不到的属性可以省略不写。但是我们一般按照背景颜色、背景图片地址、背景平铺、背景固定、背景位置这个顺序来写。
TIP:让盒子半透明的另外一种写法:opacity
。opacity
是透明度属性,取值0~1,但是与background: rgba(0,0,0,0)
不同的是,opacity
属性会使盒子里的内容也随之变透明。今天学的东西看起来繁琐,但是实际上并不是很多,我们要能够分清楚每个属性的含义和取值,每天都比昨天进步一点点,我们就能变得更强!
加油~