黑马程序员——html css基础——day04——CSS进阶

阿瞒有我良计15

已于 2024-01-26 21:53:22 修改

阅读量920

点赞数 27

分类专栏： # HTML+CSS+JavaScript 文章标签： html css 前端

于 2024-01-26 21:12:07 首次发布

本文链接：https://blog.csdn.net/qq_56444564/article/details/135873392

版权

HTML+CSS+JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

目录：

复合选择器
1. 后代选择器
2. 子代选择器
3. 并集选择器
4. 交集选择器
5. 伪类选择器
6. 超链接伪类
7. 基本选择器
8. 复合选择器
CSS特性
1. 继承性
2. 层叠性
3. 优先级
4. 基础选择器
5. 复合选择器-叠加
6. 继承的权重是0
Emmet写法
背景属性
1. 背景图
2. 平铺方式
3. 背景图位置
4. 背景图缩放
5. 背景图固定
6. 背景复合属性
显示模式
1. 块级元素
2. 行内元素
3. 行内块元素
4. 转换显示模式
综合案例一热词
1. HTML标签
2. CSS样式
综合案例二banner效果
1. HTML标签
2. CSS样式
快捷键
常用的块级元素、行内元素
1. 块级元素：
2. 行内元素

1.复合选择器

定义：由两个或多个基础选择器，通过不同的方式组合而成。
作用：更准确、更高效的选择目标元素（标签）。

后代选择器

后代选择器：选中某元素的后代元素。

选择器写法：父选择器子选择器 { CSS 属性}，父子选择器之间用空格隔开。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* li {
      color: red;
    } */

    /* .red {
      color: red;
    } */
    /* 后代选择器 中间用空格隔开 */
    /* ul li {
      color: red;
    } */

    /* 只让第一组ul 里面的li变色 */
    .first li {
      color: red;
    }
  </style>
</head>

<body>
  <ul class="first">
    <li>我是无序列表</li>
    <li>我是无序列表</li>
    <li>我是无序列表</li>
    <li>我是无序列表</li>
  </ul>
  <ul>
    <li>我是无序列表</li>
    <li>我是无序列表</li>
    <li>我是无序列表</li>
    <li>我是无序列表</li>
  </ul>
  <ol>
    <li>我是有序列表</li>
    <li>我是有序列表</li>
    <li>我是有序列表</li>
    <li>我是有序列表</li>
  </ol>
</body>

</html>

小技巧：后代选择器执行代码的时候，先执行孩子，后执行父亲。先找li 后找ul

我们找刘德华，先确定刘德华（li），然后确定刘德华在淄博 ul 吃烧烤

子代选择器

子代选择器：选中某元素的子代元素（最近的子级）。
选择器写法：父选择器 > 子选择器 { CSS 属性}，父子选择器之间用 > 隔开。

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

<div>
  <span>这是 div 里面的 span</span>
  <p>
    <span>这是 div 里面的 p 里面的 span</span>
  </p>
</div>

并集选择器

并集选择器：选中多组标签设置相同的样式。

选择器写法：选择器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>

<p class="box">p 标签，使用了类选择器 box</p>
<p>p 标签</p>
<div class="box">div 标签，使用了类选择器 box</div>

注意：如果交集选择器中有标签选择器，标签选择器必须书写在最前面。

伪类选择器

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

鼠标悬停状态：选择器:hover { CSS 属性 }

<style>
  a:hover {
    color: red;
  }
  .box:hover {
    color: green;
  }
</style>

<a href="#">a 标签</a>
<div class="box">div 标签</div>

超链接伪类

提示：如果要给超链接设置以上四个状态，需要按 LVHA 的顺序书写。
经验：工作中，一个 a 标签选择器设置超链接的样式， hover状态特殊设置

a {
  color: red;
}

a:hover {
  color: green;
}

基本选择器

基本选择器	说明	举例
标签选择器	选择页面中同名标签	div {color: red;}
类选择器	选择1个或者多个	.red {color: red;} <div class="red"></div>
id选择器	唯一的，只能使用一次	#red {color: red;} <div id="red"></div>
通配符选择器	选择所有的标签	* {color: red;}

复合选择器

复合选择器	说明	举例
后代选择器	选择子孙后代用 `空格` 隔开	div span {color: red;}
子代选择器	只选最近一级孩子（亲儿子选择器）用 `>` 隔开	div>span{color: red;}
并集选择器	选择多个标签，用 `逗号` 隔开理解为和	div, span, p {color: red;}
交集选择器	既又的关系，既是某标签，又是某类名	p.one {color: red;}
伪类选择器	状态关系， :hover 鼠标经过	div:hover {color: red;}

2.CSS特性

CSS特性：化简代码 / 定位问题，并解决问题

继承性
层叠性
优先级

继承性

继承性：子级默认继承父级的文字控制属性。

注意：如果标签有默认文字样式会继承失败。例如：a 标签的颜色、标题的字体大小。

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>继承性</title>
    <style>
      /* div {
      color: red;
      font-size: 30px;
      height: 100px;
      }

      span {
      color: green;
      } */

      p {
        color: pink;
      }

      /* 特殊情况1： 链接不会继承颜色 */
      a {
        color: red;
      }

      div {
        color: red;
        font-weight: 400;
        font-size: 14px;
      }

      /* 特殊情况2： 标题的字号和加粗不会继承 */
      h1 {
        font-weight: 400;
        font-size: 14px;
      }
    </style>
  </head>

  <body>
    <!-- <div>
<span>我是孩子</span>
</div> -->
    <p>
      <a href="#">我是链接</a>
    </p>
    <div>
      <h1>一级标题</h1>
    </div>
  </body>

</html>

层叠性

特点：

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

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

<div>div 标签</div>

注意：选择器类型相同则遵循层叠性，否则按选择器优先级判断。

优先级

优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。

<style>
  div {
    color: red;
  }
  .box {
    color: green;
  }
</style>

<div class="box">div 标签</div>

基础选择器

规则：选择器优先级高的样式生效。
公式：通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important（选中标签的范围越大，优先级越低）

复合选择器-叠加

叠加计算：如果是复合选择器，则需要权重叠加计算。
公式：（每一级之间不存在进位）

规则：

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

选择器	权重	说明
继承/ *通配符	0	没有权重
标签选择器	1	累加
类选择器/伪类选择器	10	累加
id选择器	100	累加
行内	1000
!important	∞

继承的权重是0

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /* li的权重是1 ，比 0 高 */
      li {
        color: red;
      }

      /* 继承的权重是 0, 所以无法直接修改 li的样式 */
      .box {
        color: green !important;
      }
      /* 结论： 想要修改谁的样式，就要选择谁 */
    </style>
  </head>

  <body>
    <ul class="box">
      <li>我是文字</li>
    </ul>
  </body>

</html>

3.Emmet 写法

Emmet写法：代码的简写方式，输入缩写 VS Code 会自动生成对应的代码。

HTML标签

CSS：大多数简写方式为属性单词的首字母

4.背景属性

背景图

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

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

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

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

提示：背景图默认有平铺（复制）效果。

平铺方式

属性名：background-repeat（bgr）

div {
  width: 400px;
  height: 400px;
  background-color: pink;
  background-image: url(./images/1.png);

  background-repeat: no-repeat;
}

背景图位置

属性名：background-position（bgp）

属性值：水平方向位置垂直方向位置

关键字

坐标
- 水平：正数向右；负数向左
- 垂直：正数向下；负数向上

div {
  width: 400px;
  height: 400px;
  background-color: pink;
  background-image: url(./images/1.png);
  background-repeat: no-repeat;

  background-position: center bottom;
  background-position: 50px -100px;
  background-position: 50px center;
}

提示：

关键字取值方式写法，可以颠倒取值顺序
可以只写一个关键字，另一个方向默认为居中；数字只写一个值表示水平方向，垂直方向为居中

背景图缩放

作用：设置背景图大小

属性名：background-size（bgz）

常用属性值：

关键字
- cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
- contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白
百分比：根据盒子尺寸计算图片大小
数字 + 单位（例如：px）

div {
  width: 500px;
  height: 400px;
  background-color: pink;
  background-image: url(./images/1.png);
  background-repeat: no-repeat;
  
  background-size: cover;
  background-size: contain;
}

提示：工作中，图片比例与盒子比例相同，使用 cover 或 contain 缩放背景图效果相同。

背景图固定

作用：背景不会随着元素的内容滚动。

属性名：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;
}

5.显示模式

显示模式：标签（元素）的显示方式。

作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容。

块级元素

特点：

独占一行
宽度默认是父级的100%
添加宽高属性生效

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块元素</title>
    <style>
      /* 块级元素 */
      /* 1. 独占一行 */
      /* 2. 可以设置宽度和高度 */
      /* 3. 宽度默认和父亲一样宽，如果么有父亲，则和浏览器一样宽 */
      .box1,
      .box2 {
        width: 100px;
        height: 100px;
        background-color: pink;
      }
    </style>
  </head>

  <body>
    <p>abc</p>
    <div class="box1">div1</div>
    <div class="box2">
      <p>123</p>
      <p>123</p>
    </div>
  </body>

</html>

行内元素

特点：

一行可以显示多个
设置宽高属性不生效
宽高尺寸由内容撑开

行内块元素

特点：

一行可以显示多个
设置宽高属性生效
宽高尺寸也可以由内容撑开

转换显示模式

属性：display

经验：

我们重点记住把行内元素比如链接转换为块级或者行内块即可
display: block 尽量写到样式的第一行
块级元素可以控制里面的行内元素或者行内块元素左中右对齐 tac 控制
块级元素不能控制里面的块级元素对齐

6.综合案例一热词

HTML标签

<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>
<a href="#">Vue</a>
<a href="#">React</a>

CSS样式

<style>
/* 默认效果 */
a {
display: block;
width: 200px;
height: 80px;
background-color: #3064bb;
color: #fff;
text-decoration: none;
text-align: center;
line-height: 80px;
font-size: 18px;
}

/* 鼠标悬停的效果 */
a:hover {
background-color: #608dd9;
}
</style>

7.综合案例二 banner 效果

HTML标签

<div class="banner">
  <h2>让创造产生价值</h2>
  <p>我们希望小游戏平台可以提供无限的可能性，让每一个创作者都可以将他们的才华和创意传递给用户。</p>
  <a href="#">我要报名</a>
</div>

CSS样式

<style>
  .banner {
    height: 500px;
    background-color: #f3f3f4;
    background-image: url(./images/bk.png);
    background-repeat: no-repeat;
    background-position: left bottom;

    /* 文字控制属性，继承给子级 */
    text-align: right;
    color: #333;
  }

  .banner h2 {
    font-size: 36px;
    font-weight: 400;
    line-height: 100px;
  }

  .banner p {
    font-size: 20px;
  }

  .banner a {
    width: 125px;
    height: 40px;
    background-color: #f06b1f;

    display: inline-block;
    /* 转块级无法右对齐，因为块元素独占一行 */
    /* display: block; */

    text-align: center;
    line-height: 40px;
    color: #fff;
    text-decoration: none;
    font-size: 20px;
  }
</style>

8.快捷键

快捷键	作用
win键 + d	快速返回桌面
ctrl+z	撤销
ctrl+f （find）	查找
ctrl+h	替换
ctrl+g	快速跳到对应行上去

9.常用的块级元素、行内元素

块级元素：

不废话，直接上图（div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等）

从浏览器的显示结果可以看出，块级元素新开启一行（即使是设置了width属性也是独占一行）、尽可能撑满父级元素的宽度，可以设置width和height属性；table元素浏览器默认的display属性为table。

行内元素

直接上图（span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认display：inline-block））

从浏览器的显示结果可以看出，相邻的行内元素不换行，宽度即为内容的宽度、padding的4个方向都有效（从span标签可以看出，对于行内非替换元素，不会影响其行高，不会撑开父元素；而对于替换元素，则会撑开父元素）、margin只有水平方向有效（其中垂直方向的margin对行内替换元素（比如img元素）有效，对行内非替换元素无效）、不可以设置width和height属性。行内块元素表现其实和行内元素一样，只是其可以设置width和height属性。

阿瞒有我良计15

关注

27
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
0
评论
黑马程序员——html css基础——day04——CSS进阶

选择器写法：选择器1, 选择器2, …, 选择器N { CSS 属性}，选择器之间用。小技巧：后代选择器执行代码的时候，先执行孩子，后执行父亲。我们找刘德华，先确定刘德华（li），然后确定刘德华在淄博 ul 吃烧烤。从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较。作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容。选择器写法：父选择器子选择器 { CSS 属性}，父子选择器之间用。注意：选择器类型相同则遵循层叠性，否则按选择器优先级判断。
复制链接

扫一扫