【CSS】复合选择器、元素显示模式、背景、CSS的三大特性以及一些小工具

该系列文章是博主学习前端入门课程的笔记，同时也为了方便查阅，有任何问题都欢迎在评论区提出。本文主要介绍CSS基础知识，包括一些小工具、复合选择器、元素显示模式、背景和CSS的三大特性

思维导图

第一章 web工具

1.1 Emmet语法

作用：使用缩写，提高HTML/CSS代码的编写速度。VSCode内部已经集成该语法，可以直接使用

• 快速生成HTML结构语法

1. 标签：标签名+Tab键。例如div+Tab键即可生成

2. 多个相同标签：标签名*个数+Tab键。例如div*3即可生成3个div标签

3. 父子级关系标签：>。例如ul>li即可生成带有一个li的无序列表

4. 兄弟关系的标签：+。例如div+p

5. 带有类名或者id的标签：.demo或者#two

6. 有顺序的类名：用自增符号$

7. 内部有内容的标签：{}。例如div{从善如登，虽难可达昆仑}

从善如登，虽难可达昆仑

• 快速生成CSS样式语法

利用属性和属性值首字母来快速输入CSS代码。

示例

/* ti2 */
text-indent: 2px;
/* tic */
text-align: center;
/* tdu */
text-decoration: underline;

1.2 VSCode自动格式化代码

设置方式：左下角设置——文本编辑器——格式化——勾选Format on Save

设置完成后保存文件时VSCode会自动格式化代码。

1.3 snipaste工具

下载地址：https://zh.snipaste.com/

第二章 复合选择器

复合选择器是由基础选择器组合而成的，可以更准确、更高效地选择目标元素

2.1 后代选择器

作用：选择父元素中的所有子元素

语法格式

/* ol为元素1，li为元素2 */
ol li { 
    color: blue;
}

ol li a {
    color: red;
}

.yellow li a {
    color: yellow;
}

注：

• 元素1和元素2中间用空格隔开

• 元素1是父级，元素2是子级，最终选择的是元素2

• 元素2可以是儿子，也可以是孙子，只要是元素1的后代即可

2.2 子选择器

作用：选择某元素最近一级子元素。

语法格式

.nav>a {
    color: red;
}

注:

• 元素1和元素2中间用大于号">"隔开

• 元素1是父级,元素2是子级,最终选择的是元素2

• 元素2选择的是最近一级元素(与后代选择器的区别)

2.3 并集选择器

作用:选择多标签。通常用于集体声明

语法格式

div,
p,
.pig>li {
    color: pink;
}

注:元素1和元素2中间用逗号","隔开,可以理解为和的意思

2.4 伪类选择器

最大的特点是用冒号":"表示,比如:hover、:first-child

作用:用于给某类选择器添加特殊的效果

• 链接伪类选择器

语法格式

/* 未访问的链接 a:link*/
a:link {
    color: black;
    text-decoration: none;
}

/* 访问过的链接 a:visited */
a:visited {
    color: orange;
}

/* 鼠标经过的链接 a:hover */
a:hover {
    color: blue;
}

/* 鼠标按下但还没有弹起页面的链接 a:active */
a:active {
    color: pink;
}

注：

• 伪类确保生效，请按照LVHA的顺序声明：:link :visited :hover :active

• 因为a标签在浏览器中有默认样式，所以实际开发需要给链接单独指定样式。例如

a {
    color: black;
    text-decoration: none;
}

a:hover {
    color: #379;
}

• :focus伪类选择器

作用：获取获得焦点的表单元素

语法格式

input:focus {
    background-color: blue;
}

效果图

• 结构伪类选择器*

2.5 复合选择器总结

选择器	作用	特征	使用情况	分隔符号及用法
后代选择器	用来选择后代元素	可以是任意子级元素	较多	空格。.nav a
子选择器	选择最近一级子元素	只选亲儿子	较少	大于号。.nav>a
并集选择器	选择某些相同样式的元素	用于集体声明	较多	逗号。.nav,a
链接伪类选择器	选择不同状态的链接	与链接状态相关	较多	重点记住a{}和a:hover在实际开发中的写法
:focus伪类选择器	选择获得焦点的表单	与表单状态相关	较少	记住input:focus这个写法

第三章 元素显示模式

元素显示模式即元素(标签)显示的方式，一般分为块元素和行内元素

3.1 块元素

• 常见的块元素：

  -

  1. 等，其中
     标签是最典型的块元素

  • 特点：

  1. 独占一行

  2. 高度、宽度、外边距及内边距都可以控制

  3. 宽度默认是容器(父级元素)的100%

  4. 是一个容器以及盒子，里面可以放行内元素以及块元素

  • 注：文字类的元素内部不能使用块元素，例如

    -

  3.2 行内元素

  • 常见的行内元素：等，其中标签是最典型的行内元素。行内元素有时也被称为内联元素

  • 特点：

  1. 相邻行内元素在同一行

  2. 高度和宽度没有办法设置

  3. 默认宽度就是内容的宽度

  4. 行内元素只能容纳文本或其他行内元素

  • 注：

  1. 链接里面不能再放链接

  2. 特殊情况下链接里面可以放块级元素，但是把转换为块级模式会更安全

  3.3 行内块元素

  行内元素中有几个特殊的标签，如。它们同时具有块元素和行内元素的特点，所以有些资料称它们为行内块元素

  • 特点：

  1. 和相邻行内元素/行内块元素在一行上，但是它们之间会有空隙(这是由于换行符导致的)

  2. 默认宽度就是内容的宽度(行内元素特点)

  3. 高度、行高、外边距以及内边距都可以控制(块级元素特点)

  3.4 总结

  元素模式	元素排列	设置样式	默认宽度	包含
  块级元素	一行只能放一个块级元素	可以设置宽度和高度	容器的100%	容器级可以包含任何标签
  行内元素	一行可以放多个行内元素	不可以直接设置宽度和高度	内容的宽度	容纳文本或其他行内元素
  行内块元素	一行可以放多个行内块元素	可以设置宽度和高度	内容的宽度

  3.5 元素显示模式转换

  在某些情况下，需要元素模式的转换，即一个模式的元素需要另外一个模式的特性。例如希望增加的出发范围。

  语法格式

  /* 转换为块元素 */
  display: block;
  /* 转换为行内元素 */
  display: inline;
  /* 转换为行内块元素 */
  display: inline-block;

  3.6 小技巧：让文字垂直居中

  方法：让文字行高等于盒子的高度

  语法格式

  div {
      height: 32px;
      line-height: 32px;
      background-color: skyblue;
      text-align: center;
  }

  原理

  

  第四章 背景

  背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景附着等

  4.1 背景颜色

  使用方法和color一样，只是多了一个选择：transparent(透明的)

  语法格式

  div {
      background-color: skyblue;
  }

  4.2 背景图片

  常见于logo或者一些装饰性的小图片或者超大的背景图片。优点是便于控制位置

  语法格式

  background-image: url(images/logo.png);

  4.3 背景平铺

  语法格式

  background-image: url(images/logo.png);
  /* 1.背景图片不平铺 */
  /* background-repeat: no-repeat; */
  /* 2.默认背景平铺 */
  /* background-repeat: repeat; */
  /* 3.沿着x轴平铺 */
  /* background-repeat: repeat-x;  */
  /* 4.沿着y轴平铺 */
  background-repeat: repeat-y;

  效果图

  

  4.4 背景图片位置

  参数值	说明
  length	百分数 | 由浮点数字和单位标识符组成的长度值
  position	top | center | button | left | center | right 方位名词

  语法格式

  background-image: url(images/logo.png);
  /* 背景图片靠上居中显示 */
  background-position: top center;
  /* x轴向右偏移20px y轴向下偏移50px */
  background-position: 20px 50px;
  /* x轴向右偏移20px y轴居中 */
  background-position: 20px center;

  注：

  参数	说明
  方位名词	如果指定的两个值都是方位名词，则两个值的前后顺序无关，比如left top和top left效果一致 如果只指定了一个方位名词，则第二个值默认居中
  精确单位	如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标 如果只指定一个数值，那么该数值一定是x坐标，另一个默认垂直居中
  混合单位	如果指定的两个值是方位名词和精确单位混用，则第一个值是x坐标，第二个值是y坐标

  4.5 背景附着

  参数值	说明
  scroll	背景图像随对象内容滚动
  fixed	背景图像固定
  inherit	从父元素继承background-attachment的值

  语法格式

  div {
      background-image: url(images/bg.jpg);
      background-position: top center;
      background-repeat: no-repeat;
      color: white;
      font-size: 20px;
      background-attachment: fixed;
  }

  4.6 背景复合写法

  当简写背景属性时，没有特定的书写顺序，但实际开发中有提倡的写法：

  background：背景颜色 背景图片地址 背景平铺 背景图片固定 背景图片位置

  语法格式

  div {
      /* background-image: url(images/bg.jpg);
      background-position: top center;
      background-repeat: no-repeat;
      background-color: black;
      background-attachment: fixed; */
  
      background: black url(images/bg.jpg) no-repeat fixed top center;
  }

  4.7 背景色半透明

  语法格式

  div {
      width: 300px;
      height: 300px;
      background: rgba(0, 0, 0, .3);
  }

  注：

  • 最后一个参数是alpha透明度，取值范围在0-1之间，越小则越透明

  • 背景半透明指的是盒子背景半透明，盒子里的内容不受影响

  4.8 背景总结

  属性	含义	值
  background-color	背景颜色	预定义的颜色值/十六进制/rgb代码
  background-image	背景图片	url(图片路径)
  background-repeat	背景平铺	repeat/no-repeat/repeat-x/repeat-y
  background-position	背景位置	length/position 分别是x和y坐标
  background-attachment	背景附着	scroll(背景滚动)/fixed(背景固定)
  背景简写		背景颜色 背景图片 背景平铺 背景附着 背景位置
  背景色半透明	背景颜色半透明	background:rgba(0,0,0,.3)，必须是四个值

  练习

  第五章 CSS的三大特性

  5.1 层叠性

  相同选择器设置相同的样式，此时一个样式会覆盖(层叠)另一个冲突的样式。

  层叠性原则：

  • 样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式

  • 样式不冲突，不会层叠

  示例

  div {
      color: skyblue;
      font-size: 12px;
  }
  
  div {
      color: pink;
  }

  

  颜色冲突，生效的颜色是pink，字体大小不冲突，字体被设置为12px

  5.2 继承性

  子标签会继承父标签的某些样式，如文本颜色和字号等。

  注：

  • 恰当地使用继承性可以简化代码，降低CSS的复杂性

  • 子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承，以及color属性)

  5.3 优先级

  当同一个元素指定多个选择器，就会有优先级的产生

  • 选择器相同，则考虑层叠性

  • 选择器不同，则根据选择器权重执行

  1. 选择器权重如下表所示

  选择器	选择器权重
  继承或者*	0,0,0,0
  元素选择器	0,0,0,1
  类选择器、伪类选择器	0,0,1,0
  ID选择器	0,1,0,0
  行内样式style=""	1,0,0,0
  !important	无穷大

  注：

  • 等级判断是从左到有，如果某一位相同，则判断下一位数值

  • 继承的权重是0,如果该元素没有直接选中，不管父元素的权重多大，子元素的权重都是0

  2. 权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重

  • 四个数分别相加，但是不会有进位