Day-03 CSS 复合选择器、CSS特性、背景属性、显示模式

25 阅读1分钟

1.复合选择器

定义:由两个或多个基础选择器,通过不同的方式组合而成

作用:更准确、更高效的选择目标元素

1.1 后代选择器

image.png

image.png

1.2 子代选择器

image.png

image.png

1.3 并集选择器

image.png

image.png

1.4 交集选择器

image.png

2. 伪类选择器

  • 任何标签都可以设置鼠标悬停的状态

image.png

image.png

2.1 伪类-超链接

  • 工作中,一般一个a标签选择器设置超链接的样式,然后hover状态特殊设置就行。

image.png

3. CSS三大特性

3.1 继承性

  • 子级默认继承父级的文字控制属性 image.png

3.2 层叠性

image.png

3.3 优先级

image.png

  • !imporant可以把优先级调到最高,但是要慎用

image.png

4.Emmet写法

  • 就是在vscode中,快速使用html和css语法的快捷键。
  • CSS中可以 w500+h200+bgc直接生成style样式 image.png

5.背景属性

image.png

5.1 背景图

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

image.png

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

image.png

5.2 背景图平铺方式

image.png

image.png

5.3 背景图位置

image.png image.png

5.4 背景图缩放

image.png

  • 绝大多数情况下,图片和盒子的比例是相同的。
  • background-size:100% :代表图片的宽度和盒子一样,图片的高度按照图片比例等比缩放

image.png

5.4 背景图固定

image.png

image.png

5.5 背景复合属性

image.png

image.png

6.显示模式

image.png

6.1 转换显示模式

image.png