3.CSS进阶

黄土地
124 阅读5分钟 
常见的块级标签有：<h1-h6>、<ul>< li> 、<dl>< dd>< dt>、<p>、<div>、<table>< tr>< td>、<hr>、<fieldset> <legend>

常见的行级标签：<a>、<span> 、<u>、<em>、<i>

常见的行内块标签：<img>、<input>、<textarea>、<select> 、<option>

一,复合选择器

1.复合选择器-后代选择器

包含它的儿子，和它的孙子类等等。
 <!-- 后代选择器 标签(类标签/标签)+空格+标签(类标签/标签)-->
     <!-- 后代选择器 标签(类标签/标签)+空格+标签(类标签/标签)-->
    <style>
        div span {
            color: yellowgreen;
        }

        .first li {
            color: blueviolet;
        }
        .first .one {
            color: grey;
        }
    </style>
        
    <div>
        <p><span>span 标签2</span></p>
    </div>

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

2.复合选择器-子代选择器

 <!-- 子代选择器 亲儿子的选择器  后代选择器把孙子。。等等都会被选中-->
 
    <style>
    
        div span {
            color: green;
        }

        div>span {
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        <!-- 蓝色 -->
        <span>我是儿子</span>
        <!-- 绿色 -->
        <p><span>我是孙子</span></p>
    </div>
</body>
</html>

3.复合选择器-并集选择器

    <!-- 并集选择器 并集选择器，多个一起选择用逗号隔开 -->
    <style> 
    div,span,p{
        color: red;
    }
    </style>
</head>
<body>
    <div class="box1">我是div</div>
    <span>我是span</span>
    <p>我是p</p>
    <strong>我是加粗文字</strong>
</body>
</html>

4.复合选择器-交集选择器

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 交集选择器 -->
    <style>
        /* 标签.类名  交集选择器之间不要有空格，有空格是就是后代选择器 既是某个标签，又包含某个类名*/
        div.red {
            color: red;
        }

        p.red {
            color: blue;
            font-size: 20px;
        }

        span.red {
            color: yellowgreen;
        }

        .div1 .red {
            color: pink;
        }
    </style>
</head>

<body>
    <span class="red">我是span</span>
    <p class="red">我是p</p>
    <div class="div1">
        <p class="red">我是p</p>
    </div>
    <div>
        <p class="red">我是p</p>
    </div>
    <div class="red">我是div</div>
    <div class="red">我是div</div>
</body>

</html>

5.复合选择器-伪类选择器

 <!-- 伪类选择器 -->
    <style> 
        a:hover{
            color: red;
        }
        p{
            width: 100px;
            height: 100px;
            background-color: #1dc3c5;
        }
        p:hover{
            background-color: #6208d1;
        }
        .box{
            width: 50px;
            height: 50px;
            background-color: #cb1111;
        }
        .box:hover{
            width: 100px;
            height: 100px;
            background-color: #e8e112;
        }
        
    </style>
</head>
<body>
    <a href="#">百度一下</a>
    <p></p>
    <div class="box">我是盒子</div>
</body>
</html>

6.复合选择器-链接伪类选择器

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 链接伪类选择器 顺序不能错  lvha link点击前，visited访问后，hover鼠标经过，active点击时-->
    <style>
        a:link{
            color: rgb(24, 23, 22);
        }
        a:visited{
            color: rgba(196, 188, 189, 0.799);

        }
        a:hover{
            color: rgb(47, 231, 117);

        }
        a:active{
            color: rgb(195, 16, 183);

        }
    </style>
</head>
<body>
     <a href="#"> 链接伪类选择器 </a>
</body>
</html>

二,CSS特性

1.层叠性

    <!-- 层叠性 如果相同的属性会被后面的覆盖，如果不相同的属性不会覆盖前面的属性-->
    <style>
        div {
           color: rebeccapurple; 
           font-size: 10px;;
        }

        div{
            color: blue;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div>我是div</div>
</body>
</html>

2.优先级 和优先级的叠加，权重

   <!-- 优先级 通配符<标签<类选择器<id选择器<行内样式<!important 范围越大优先级越低。-->
    <style>

        *{
            color: blanchedalmond;
        }

        div{
            color: blue;
        }
        .div1 {
            color: red !important; 
            font-size: 30px !important;
        }

        #divid {
            color: black;
            font-size: 10px;
        }
    </style>
</head>
<body>
        <div class="div1" id="divid" style="color: brown;">我是div</div>
</body>
</html>

优先级的叠加，权重

  <!-- 优先级的叠加 权重 -->

    <style>
        /* 标签选择器是1 */
        li {
            color: red;
        }

        /* 权重 1+1=2 */
        ul li {
            color: aqua;
        }

        /* 类权重 10*/
        .blue {
            color: blueviolet;
        }

        /* 权重1+10 = 11 交集选择器*/
        li.blue {
            color: gray;
        }
        /* 2 */

        /* 权重是13 */
        .nav ul li a {
            color: red;
        }
        /* 权重是20 */
        .nav .tel {
            color: blue;
        }
    </style>
</head>

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

    <div class="nav">
        <ul>
            <li><a href="#">电器</a></li>
            <li><a href="#">零食</a></li>
            <li><a href="#" class="tel">手机</a></li>
        </ul>
    </div>

</body>

</html>

3.继承性

  <!-- 文字相关的会继承，跟盒子相关的不继承。文字的大小，行高，字号会被继承 -->
    
    <!-- 继承的权重 -->
    <style> 
        /* li和box的对比 没有作用在一个标签上所以 权重判断失效的，因为继承的权重是0  想要修谁的样式就要选择谁*/
    /* .box{
        color: red;
    }
  
    li {
        color: green;
    } */

     /* li 和 .box{} 来对比 权重会失效，因为.box不在li标签上*/
    /* ul li {} 和 .box{} 来对比 权重会失效，因为.box不在li标签上*/
    ul li {
        color: yellow;
    }
    
    .box{
        color: red;
    }
   
    /* .box li {
        color: blue;
    } */


    </style>

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

特殊情况
         div {
            color: yellow;
            font-size: 50px;
            font-weight: normal;
        }
<body>
    <ul class="box">
        <!-- 文字相关的会继承，跟盒子相关的不继承。 -->
        <li>我是文字</li>
    </ul>

    <div>
        <!-- 链接的颜色不会被继承 -->
        <a href="#">我是链接 </a>
        <!-- 标题的字体大小不会被div继承 -->
        <h6>我是标题</h6>
    </div>
</body>

三 ,emmet写法 简写方式

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 简写方式 -->
    <style>
        div {
            /* w100 */
            width: 100px;
            /* bgc */
            background-color: #fff;
            /* w100p+h200+bgc */
        }
    </style>
</head>

<body>
    <!--  div.box  类选择器-->
    <div class="box"></div>
    <!--  div#id  id选择器-->
    <div id="id"></div>
    <!-- 同一级的标签 div+p -->
    <div>11</div>
    <p>22</p>
    <!-- 父子标签 div>p -->
    <div>
        <p>父子标签</p>
    </div>
    <!-- 多个相同标签  div*3-->
    <div>haha </div>
    <div>haha </div>
    <div>haha </div>
    <!-- 有内容的标签 div{内容} -->
    <div>内容</div>
</body>

</html>

四 ,background

background-color background-image background-repeat background-position background-size background-attachment

           /* width: 400px;
            height: 400px; */
            width: 100%;
            height: 100%;
            /* div的背景颜色 */
            background-color: pink;
            /* div的背景图片 */
            /* background-image: url('./images/wz.jpg'); */
            /* div背景图片的重复方式 */
            /* background-repeat: no-repeat; */
            /*  
                如果写一个位置或者px，另一个是center。
                背景图位置 1.关键字的时候 没有严格的顺序，可以颠倒位置。 top left right bottom center.
                2.px的时候必须按照x轴，然后y轴的顺序。
            */
            /* background-position: center center; */
            /* 背景图的缩放，填充的样式
            Background-size 背景图大小
            https://developer.mozilla.org/zh-CN/docs/Learn mdn学习web的官方网站。
            contain 图片一定会显示全 最长的一条边显示全，空着部分。
            cover 是整个盒子铺满，最短的一条边铺满，有的还没有显示。
            如果盒子比列和图片比列相同，哪一种显示都是可以的。
            */
            background-size: contain;
            /* 背景图是否随着内容的滚动而滚动 */
            background-attachment: fixed;
            /*复合属性 */

            background: url('./images/wz.jpg') no-repeat center 23px/contain;
        }

五 ,显示模式

块级

    <!-- 块级元素1.单独在一行，2.可以设置宽高，3.默认跟父类一样宽 -->
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        p{
            background-color: #1acb32;
        }
    </style>
</head>
<body>
    <div>我是div
        <p>我是p</p>
    </div>
</body>
</html>

行内元素

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 行内元素 -->
    <!-- strong span em a b i u 行内元素 -->
    <!-- 1.一行可以放多个，
         2.不可以设置宽高，
         3.宽高可以根据自己的内容撑开
    -->
</head>
<body>
    <span>123123123123</span>
    <span>abc</span>
</body>
</html>

行内块

 <!-- 行内块元素 img input td-->
    <style> 
    /* 1.一行可以放多个，
    2. 可以设置宽高
    3.大小是根据内容来撑开。
    */
    input{
        width: 100px;
        height: 100%;
        background-color: yellow;
    }
    </style>
</head>
<body>
    <input type="text">
    <input type="button" value="dianji ">
</body>

转换显示模式

 <!-- 显示模式的转换  可以使div的点击范围变大-->
    <style>
        a{
            width: 100px;
            height: 100px;
            background-color: #19b77d;
            display: block;
        }
    </style>
</head>
<body>
     <a href="#">点击链接</a>
</body>

day05-CSS进阶.png

avatar
文章
阅读
粉丝