• CSS基础篇---02选择器进阶、背景样式、显示模式

    CSDN话题挑战赛第2期
    参赛话题：学习笔记

    文章目录

    1.选择器进阶

    后代选择器

    子代选择器

    并集选择器

    交集选择器

    伪类选择器

    案例演示

    2.背景样式

    背景颜色

    背景图片

    背景平铺

    背景位置

    案例演示

    3.显示模式

    块级元素

    行内元素

    行内块元素

    元素显示模式转换

    案例演示

    1.选择器进阶

    我们学习了基本的选择器，都是单个选择器，那么是否有更复杂的呢，答案是有的，下面就介绍几个比较复杂的选择器。

    后代选择器

    后代选择器是指通过HTML嵌套关系，选择父元素后代中满足条件的元素。

    选择器1 选择器2{css}

    在选择器1所找到标签的后代，找到满足选择器2的标签，设置样式。

    注意点：

    后代包括（儿子，孙子，重孙子......）而下面讲到的子代只包含子代。

    子代选择器

    后代选择器是指通过HTML嵌套关系，选择父元素子代中满足条件的元素。

    选择器1>选择器2{css}

    并集选择器

    并集选择器是指同时选择多组标签，设置相同的样式。

    选择器1,选择器2{css}

    注意点：

    并集选择器每组选择器可以是基础选择器也可以是复合选择器（指后代和子代）。

    并集选择器通常一行写一个，提高代码可读性。

    交集选择器

    1.     <span class="box">span标签：boxspan>
    2.     <span>span标签span>
    3.     <h3 class="box">h3标签：boxh3>

    上面一组代码我想选中第一行设置成红色怎么设置呢？这就需要用到交集选择器（可以理解成数学的交集）。

    选择器1选择器2{css}

    注意点：

    选择器直接没有东西隔开，是紧挨着的。

    如果有标签选择器，标签选择器必须写在最前面。

    伪类选择器

    伪类选择器的作用是选中鼠标在元素上的状态，设置样式。

    选择器：hover{css}

    案例演示

    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.         /* 后代选择器 */
    10.         div p{
    11.             color: blue;
    12.         }
    13.         /* 子代选择器 */
    14.         div>a{
    15.             color: red;
    16.         }
    17.         /* 并集选择器 */
    18.         h1,
    19.         h2,
    20.         strong{
    21.             background-color:pink;
    22.         }
    23.         /* 交集选择器 */
    24.         span.box{
    25.             background-color: green;
    26.         }
    27.         /* 伪类选择器 */
    28.         h4:hover{
    29.             color:yellow;
    30.             background-color: skyblue;
    31.         }
    32.         
    33.     style>
    34. head>
    35. <body>
    36.     <p>p标签p>
    37.     <div>
    38.         <p>div里的p标签p>
    39.  
    40.         <a href="#">div里面的aa>
    41.         <span>
    42.             <a href="#">div里面的span的aa>
    43.         span>
    44.     div>
    45.  
    46.     <h1>h1标签h1>
    47.     <h2>h2标签h2>
    48.     <strong>strong标签strong>
    49.  
    50.     <br>
    51.     <span class="box">span标签：boxspan>
    52.     <span>span标签span>
    53.     <h3 class="box">h3标签：boxh3>
    54.  
    55.     <h4>h4标签使用伪类h4>
    56.  
    57.  
    58. body>
    59. html>

    76d64705d93e488cb7ab89099e1ca7e8.png

     最后一行为鼠标悬停时的效果。

    2.背景样式

    背景样式包括两个方面：背景颜色和背景图片。颜色都知道是color了那么其他几个呢。

    382def7090db4535a57a8f6decb08a5e.png

    背景颜色

    background-color: 取值;

    背景颜色的取值我们用了关键字表示，其实还有其他几种表示方式：rgb表示法，rgba表示法，十六进制......

    注意点：

    rgba(0,0,0,0)表示（红，绿，蓝，透明度）。

    背景颜色的默认值是透明色：rgba(0,0,0,0)，transparent。

    背景颜色不会影响盒子大小，并且还能看清盒子大小和位置，一般先给盒子设置背景颜色。

    背景图片

    background-image: url(地址);

    背景平铺

    background-repeat: 取值;

    2382cae89041437483760097f8e22ccb.png

    背景位置

    background-position: 水平方向位置 垂直方向位置;

    327257e894b6463d99988d0e184ab10b.png

    案例演示

    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.         /* 背景颜色 */
    10.         .bgc{
    11.             /* background-color: pink; */
    12.             background-color: rgba(200, 150, 150, 0.5);
    13.             width: 200px;
    14.             height: 200px;
    15.             margin: 0 auto;
    16.         }
    17.         .center{
    18.             text-align: center;
    19.         }
    20.         /* 背景图片 */
    21.         .bgi{
    22.             width: 250px;
    23.             height: 220px;
    24.             margin: 0 auto;
    25.             background-image: url(./img/circ.png);
    26.         }
    27.         /* 背景平铺 */
    28.         .bgr{
    29.             width: 250px;
    30.             height: 220px;
    31.             margin: 0 auto;
    32.             background-color: rgba(200, 150, 150, 0.5);
    33.             background-image: url(./img/circ.png);
    34.             background-repeat: no-repeat;   
    35.              /* 背景位置 省略不写的默认为居中*/
    36.              background-position: top;
    37.         }
    38.     style>
    39. head>
    40. <body>
    41.     <div class="bgc">
    42.         <p class="center">divp>
    43.     div>
    44.     <br>
    45.     <div class="bgi">div>
    46.     <br>
    47.     <div class="bgr">div>
    48. body>
    49. html>

    98516e900d84461ca189c8dfef829acc.png

    3.显示模式

    我们学习的元素也不少了，那么他们的显示模式分别是怎样的呢，这里分为三种显示模式，也可以说是显示特点。

    块级元素

    特点:1.独占一行。   2.宽度默认是父元素的宽度，高度由内容撑开。   3.可以设置宽高。

    如：div，p，h系列，ul，li，dl，dt......

    行内元素

    特点:1.一行可以显示多个。   2.宽度和高度默认由内容撑开。   3.不可以设置宽高。

    如：a，spar，b，u，i，s，strong......

    行内块元素

    特点:1.一行可以显示多个。   2.可以设置宽高。

    如：input，textare，button，selec......

    元素显示模式转换

    我想要div又能一行多个显示，又能设置宽高，怎么办呢？其实元素显示模式直接可以相互转换的。

    7c0d90cc3de64efa91a0365c3bf61869.png

    案例演示

    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.         .display{
    10.             width: 100px;
    11.             height: 100px;
    12.             background-color: skyblue;
    13.         }
    14.         .change{
    15.             width: 100px;
    16.             height: 100px;
    17.             background-color: skyblue;
    18.             /* display: block; */
    19.             display: inline-block;
    20.         }
    21.     style>
    22. head>
    23. <body>
    24.     
    25.     <div class="display">divdiv>
    26.     <div class="display">divdiv>
    27.     
    28.     <br>
    29.     <span class="display ">spanspan>
    30.     <span class="display ">spanspan>
    31.     
    32.     <input type="text" class="display">
    33.     <input type="text" class="display">
    34.     
    35.     <span class="display change">spanspan>
    36.     <span class="display change">spanspan>
    37. body>
    38. html>

    4abe3181f9924e48befab984eb9a71e2.png

  • 相关阅读:
    ERP编制物料清单 金蝶
    【CTF_SQL】[极客大挑战 2019]LoveSQL 1
    手撕spring原理，微服务，Netty与RPC知识点，阿里架构师手写文档
    带有酒店评论的情绪分析 - 处理数据
    2022北京国际养老产业展览会/北京养老展/养老用品展11月
    GIS开发入门，TopoJSON格式是什么？TopoJSON格式与GeoJSON格式有什么不同？
    volatile关键字
    openGauss 社区 2022 年 8 月运作报告
    工业交换机一般的价格是多少呢？
    Java架构师内功嵌入式技术
  • 原文地址：https://blog.csdn.net/btufdycxyffd/article/details/126928256