• CSS基础-选择器进阶,背景相关属性（颜色/图片）

    CSS基础-选择器进阶,背景相关属性(颜色/图片)

    目标：能够理解 复合选择器 的规则，并使用 复合选择器 在 HTML 中选择元素

    1. 学习路径：
    2. 		1. 复合选择器
    3. 		2. 并集选择器
    4. 		3. 交集选择器
    5. 		4. hover伪类选择器
    6. 		5. Emmet语法

    本次我们所学的内容：

    1.现择器进阶

    1.1 后代选择器：空格

    ➢ 作用：根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素

    ➢ 选择器语法：选择器1 选择器2 { css }

    ➢ 结果：

    ​ • 在选择器1所找到标签的后代(儿子、孙子、重孙子…)中，找到满足选择器2的标签，设置样式

    ➢ 注意点：

    ​ \1. 后代包括：儿子、孙子、重孙子……

    ​ \2. 后代选择器中，选择器与选择器之前通过 空格 隔开

    1.2 子代选择器：

    ➢ 作用：根据 HTML 标签的嵌套关系，选择父元素 子代中 满足条件的元素

    ➢ 选择器语法：选择器1 > 选择器2 { css }

    ➢ 结果：

    ​ • 在选择器1所找到标签的子代(儿子)中，找到满足选择器2的标签，设置样式

    ➢ 注意点：

    ​ \1. 子代只包括：儿子

    ​ \2. 子代选择器中，选择器与选择器之前通过 > 隔开

    2.1 并集选择器：,

    ➢ 作用：同时选择多组标签，设置相同的样式

    ➢ 选择器语法：选择器1 ， 选择器2 { css }

    ➢ 结果：

    ​ • 找到 选择器1 和 选择器2 选中的标签，设置样式

    ➢ 注意点：

    ​ \1. 并集选择器中的每组选择器之间通过 , 分隔

    ​ \2. 并集选择器中的每组选择器可以是基础选择器或者复合选择器

    ​ \3. 并集选择器中的每组选择器通常一行写一个，提高代码的可读性

    3.1 交集选择器：紧挨着

    ➢ 作用：选中页面中 同时满足 多个选择器的标签

    ➢ 选择器语法：选择器1选择器2 { css }

    ➢ 结果：

    ​ • (既又原则)找到页面中 既 能被选择器1选中，又 能被选择器2选中的标签，设置样式

    ➢ 注意点：

    ​ \1. 交集选择器中的选择器之间是紧挨着的，没有东西分隔

    ​ \2. 交集选择器中如果有标签选择器，标签选择器必须写在最前面

    4.1 hover伪类选择器

    ➢ 作用：选中鼠标悬停在元素上的状态，设置样式

    ➢ 选择器语法：选择器:hover { css }

    ➢ 注意点：

    ​ \1. 伪类选择器选中的元素的某种状态

    5.1 emmet语法---通过简写语法，快速生成代码

    快速生成代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         div {
    10.             /* font-size: ; */
    11.             font-size: ;
    12.             /* 提示css属性: 单词的首字母 */
    13.             /* font-weight: ; */
    14.             font-weight: 700;
    15.             width: ;
    16.             height: ;
    17.             /* background-color: ; */
    18.             background-color: #fff;
    19.             /* line-height: ; */
    20.             line-height: ;
    21.  
    22.             /* 宽度300,高度是200,背景色是粉色 */
    23.             /* w300+h200+bgc */
    24.             width: 300px;
    25.             height: 200px;
    26.             background-color: pink;
    27.         }
    28.  
    29.     style>
    30. head>
    31. <body>
    32.     <div>div>
    33.     <h1>h1>
    34.  
    35.     
    36.     
    37.     <div class="box">div>
    38.     <p class="box">p>
    39.  
    40.  
    41.     <div id="box">div>
    42.     <p id="box">p>
    43.  
    44.     <p class="red" id="one">p>
    45.  
    46.     
    47.     <div>div>
    48.     <p>p>
    49.     
    50.     
    51.     <div>
    52.         <p>p>
    53.     div>
    54.  
    55.     <ul>
    56.         <li>li>
    57.     ul>
    58.  
    59.     
    60.     
    61.     <ul>
    62.         <li>li>
    63.         <li>li>
    64.         <li>li>
    65.     ul>
    66.  
    67.     
    68.     
    69.     <ul>
    70.         <li>111li>
    71.         <li>111li>
    72.         <li>111li>
    73.     ul>
    74.  
    75.     
    76.     
    77.     <ul>
    78.         <li>1li>
    79.         <li>2li>
    80.         <li>3li>
    81.     ul>
    82. body>
    83. html>

    2.背景相关属性

    目标：能够使用 背景相关属性 装饰元素的背景样式

    1. 学习路径：
    2. 	1. 背景颜色
    3. 	2. 背景图片
    4. 	3. 背景平铺
    5. 	4. 背景位置
    6. 	5. 背景相关属性连写

    1.1 背景颜色

    测试：

    小结
    1. ➢ 背景颜色属性的属性名是？
    2. 	• background-color
    3. ➢ 背景颜色属性的属性值默认是？
    4. 	• 透明：rgba(0,0,0,0)、transparent

    2.1 背景图片

    测试：

    3.1 背景平铺

    测试

    小结：

    4.1 背景位置

    测试：

    5.1 背景相关属性的连写形式

    测试：

  • 相关阅读:
    双指针法的一些应用
    Handler消息机制-Native层
    从数学角度和编码角度解释 熵、交叉熵、KL散度
    vue中计算属性computed的特性和应用
    SpringMvc 源码分析 (如何自定义视图 + 如何自定义异常) (十四)
    像素、视口、网页计量单位与移动端适配方案
    java、mybatis海量数据分页方案
    Dockerfile
    矩阵乘法的性质
    Linux---cpu和核心数目查看
  • 原文地址：https://blog.csdn.net/weixin_48370579/article/details/128176635