CSS学习笔记(二)

CSS学习笔记(二)

复合选择器

由两个或多个基础选择器，通过不同的方式组合而成。可以更准确、高效的选择目标元素

后代选择器

选中某元素的后代元素，所有后代
写法：父选择器 子选择器{CSS属性}，父子选择器之间用空格隔开

<style>
  div span
  {
    color: red;
  }
</style>
<span> span标签 </span>
<div>
  <span>这是div的儿子span</span>
</div>

如果是div下有一个p，p里又有一个span，这个span里面的字体颜色也会被设置为红色

子代选择器

选中某元素的子代元素
写法：父选择器>子选择器{CSS属性}

<style>
  div > span
  {
    color: red;
  }
</style>

并集选择器

选中多组标签设置相同样式
选择器写法：选择器1, 选择器2, …, 选择器N{CSS属性}

<style>
  div, 
  p, 
  span
  {
    color: red;
  }
</style>
<div>div标签</div>
<p>p标签</p>
<span>span标签</span>

交集选择器

选中同时满足多个条件的元素
选择器写法：选择器1选择器2{CSS属性} (选择器之间连写，之间没有任何符号)

<style>
  p.box
  {
    color: red;
  }
</style>
<div class="box">div标签</div>
<p class="box">p标签</p>

---

伪类选择器

伪类表示元素状态，选中元素的某个状态设置样式

• 访问前：选择器:link{CSS属性}
• 访问后：选择器:visited{CSS属性}
• • 鼠标悬停状态：选择器:hover{CSS属性}
• 点击时：选择器:active{CSS属性}

如果要给超链接设置以上四种状态，需要按LVHA的顺序书写

<style>
  a:hover
  {
    color: red;
  }
  .box:hover
  {
    color: red;
  }
</style>
<a>a标签超链接</a>
<div class="box">div标签</div>

---

CSS特性

可以根据特性化简代码，定位问题并解决问题

继承性

子级标签默认继承父级的文字控制属性
在实际运用中可以先对body的文字控制属性进行定义，这样整个网页的文字控制说行都会统一。对于有别的需求的部分，再通过选择器单独选择设置
如果标签自己有样式，则不会继承。比如a本身有自己的蓝色字体，则他就不会继承body中的字体颜色

层叠性

相同属性会覆盖：后面的CSS属性会覆盖前面的CSS属性
不同属性会叠加：不同的CSS属性都会生效

<style>
  div
  {
    color: red;
    font-weight: 700;
  }
  div
  {
    color: green;
    font-size: 30px;
  }
</style>
<div>div标签</div>

最后的div标签会是绿色 30px加粗

优先级

即当一个标签使用了多种选择器时，基于不同种类的选择器的匹配机制
选择器选中标签的范围越大，优先级越低，即： 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内选择器 < !important

<style>
  *
  {
    color: black !important;
  }
  div
  {
    color: red;
  }
  .box
  {
    color: green;
  }
  #test
  {
    color: orange;
  }

</style>
<div class="box" id="test" style="color: purple;">div标签</div>

!important可以将优先级提到最高 慎用

权重叠加计算规则

规则：
行内样式 id选择器数量 类选择器数量 标签选择器数量

• 从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较
• !important权重最高
• 继承权重最低，!important被继承也是最低的

<style>
    /* (0, 0, 2, 1) */
  .c1 .c2 div {
    color: blue;
  }
  /* (0, 1, 0, 1) */
  div #box3 {
    color: green;
  }
  /* (0, 1, 1, 0) */
  #box1 .c3 {
    color: orange;
  }
</style>
<div id="box1" class="c1">
  <div id="box2" class="c2">
    <div id="box3" class="c3">
      这行文本是什么颜色的？ <!-- 应该为橙色 -->
    </div>
  </div>
</div>

---

背景图

网页中，使用背景图实现装饰性的图片效果

• 属性名：background-image(bgi)
• 属性值：url(背景图URL)

div
{
  background-image: url();
}

背景图默认是平铺(复制)的效果

背景属性

中文名称	对应的 CSS 属性
背景图	background-image
背景图平铺方式	background-repeat
背景图位置	background-position
背景图缩放	background-size
背景图固定	background-attachment
背景复合属性	background

背景图平铺方式

• 属性名：background-repeat(bgr)
• 属性值
  • no-repeat不平铺
  • repeat平铺
  • repeat-x水平方向平铺
  • repeat-y垂直方向平铺

背景图位置

• 属性名：background-position(bgp)
• 属性值：
  • 关键字：
    • left 左侧
    • right 右侧
    • center 居中
    • top 顶部
    • bottom 底部
  • 坐标（数字 + px，正负都可以）

• (0, 0)代表左上角
• 关键字取值方法，可以颠倒取值顺序
• 可以只写一个关键字，另一个方向默认居中；数值只写一个表示水平方向，垂直方向默认居中

背景图缩放

• 属性名：background-size (bgz)
• 常用属性值：
  • 关键字：
    • cover：等比例缩放背景图片以完全覆盖背景区域，可能背景图片部分看不见
    • contain：等比例缩放背景图片以完全装入背景区域，可能背景区域部分空白
  • 百分比： 将图片宽度设置为盒子宽度的百分之多少，高度按照图片比例等比缩放
  • 数字 + 单位（例如：px）

背景图固定

• 属性名：background-attachment (bga)
• 属性值：
  • fixed：背景不会随着元素的内容滚动，而是固定在视口中

body {
  background-image: url(./images/bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

背景复合属性

• 属性名：background (bg)
• 属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定 (这些属性用空格隔开，不区分顺序)

div {
  width: 400px;
  height: 400px;

  background: pink url(./images/1.png) no-repeat right center/cover;
}

---

显示模式

是标签元素的显示方式，比如div标签独占一行。布局网页的时候，根据标签的显示模式选择合适的标签摆放内容

• 块级元素(如div)
  • 独占一行
  • 宽度默认是父级的100%
  • 添加宽高属性生效
• 行内元素(如span)
  • 一行可以共存多个
  • 尺寸由内容决定
  • 加宽高不生效
• 行内块元素(如img)
  • 一行共存多个
  • 默认尺寸由内容撑开
  • 可以加宽高

转换显示模式

• 属性名：display
• 属性值：
  • block：块级
  • inline-block：行内块
  • inline：行内

---

Emmet(补充HTML)

在VSCode中的一种简写方式

说明	标签结构	Emmet
类选择器	<div class="box"></div>	标签.类名
ID选择器	<div id="box"></div>	标签#id名
同级标签	<div></div><p></p>	div+p
父子标签	<div><p></p></div>	div>p
多个相同标签	<span>1</span><span>2</span><span>3</span>	span*3
有内容的标签	<div>内容</div>	div{内容}