学习前端的第四天2020-10-15

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:hover和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属性会使盒子里的内容也随之变透明。

  今天学的东西看起来繁琐，但是实际上并不是很多，我们要能够分清楚每个属性的含义和取值，每天都比昨天进步一点点，我们就能变得更强！
  加油~