CSS学习第二天

最新推荐文章于 2024-10-10 16:54:25 发布

Labef_Peppa

最新推荐文章于 2024-10-10 16:54:25 发布

阅读量188

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/n374471906/article/details/108760271

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        /* css复合选择器，可以更准确的选择目标元素标签，找到属性当中的某个标签，可多层复合嵌套，用空格间隔 父级在前，子级在后*/
        .nav a{
            color:red;
        }
        /* 复合选择器多层嵌套 */
        .love ul li{
            color:lawngreen;
        }
        
        /* 子元素选择器，只对直接第一个儿子有作用，孙子和重孙子都没有作用效果 */
        div>strong{
            color:lightseagreen;
        }

        /* 交集选择器 p.red表示带red类名的p标签 不常用*/
        p.red{
            color:red;
        }

        /* 并集选择器,用“,” 隔开，通常用于集体声明 逗号分隔的每个部分可以是.red,p或者#yellow都行*/
        h4,
        span{
            color:red;
        }

        /* 链接伪类选择器 安好lvha的顺序*/
        /* 未点击的时候样式 */
        a:link{
            color:green;
            text-decoration:none;
        }

        /* 访问过的样式 */
        a:visited{
            color:black;
            text-decoration:none;
        }

        /* 鼠标放上的样式 */
        a:hover{
            color:red;
            text-decoration: underline;
        }

        /* 鼠标点击不松开的样式 */
        a:active{
            color:blue;
            text-decoration: underline;
        }

        /* 行内元素转块级元素 */
        span.disp{
            display: block;
            width: 100px;
            height: 100px;
            background-color: blue;
        }

        /*块级元素转行内*/
        div.disp{
            display: inline;
            /*行内元素，在这设置高宽就没有用了
            width: 100px;
            height: 100px;*/
            background-color: brown;
        }
        
        /* 转换成行内块元素（块级和行内都能转），行内块可以设置高宽 */
        a.disp{
            display: inline-block;
            height: 100px;
            width: 100px;
            background-color: cyan;
        }
    </style>
</head>
<body>


    <div class="nav">
        <a href="#">内部链接</a>
        <a href="#">内部链接</a>
        <a href="#">内部链接</a>

    </div>

    <a href="#">外部链接</a>
    <a href="#">外部链接</a>
    <a href="#">外部链接</a>

    <div class="love">

        <ul>
            <li>好看好看</li>
            <li>漂亮漂亮</li>
            <li>美丽美丽</li>
        </ul>
    </div>

    <div>
        <strong>这是儿子</strong>
    </div>

    <div>
        <p>
            <strong>这是孙子</strong>
        </p>
    </div>

    <p class="red">p标签交集选择器的红色</p>

    <div class="red">div标签交集选择器的红色</div>

    <h4>并集选择器的h4
    </h4>
    <span>并集选择器的span</span>

    <span class="disp">把行内元素转换为块级元素</span>
    <span class="disp">把行内元素转换为块级元素</span>

    <div class="disp">把块级元素转换为行内元素</div>
    <div class="disp">把块级元素转换为行内元素</div>
    <a href="#" class="disp">这是转成行内块元素</a>
    
</body>
</html>

运行结果图：
在这里插入图片描述

首先学习了五种CSS复合选择器：
1.后代选择器
2.子元素选择器
3.交集选择器
4.并集选择器
5.链接伪类选择器

具体见代码中注释及样式展示结果。
除此之外还学习了三种标签的显示模式：
①块级元素；②行内元素；③行内块元素
①块级元素特点：（如p，div）
霸道，独占一行；高度宽度和外边距以及内边距都可以控制（height，width）；宽度默认是容器（父级盒子）的100%；这类是一个容器（盒子），里面可以放行内或者块级元素。给出特例：p虽然是块级但是其中只能放单纯的文字，不要放块级元素！！
②行内元素特点：（如span，a）
相邻元素在一行上，一行可以显示多个；高宽设置是无效的（如果想设置高宽则调用display设置成块级或者行内块）；默认宽度是本身内容的宽度；行内元素只能容纳文本或者其他行内元素（span中就不能容纳div，不合理），特例a中不能容纳a否则不知道应该点击到低跳转到哪个页面。
③行内块元素特点
和乡里元素（行内块）是在同一行上，但是之间会有空白缝隙，一行能够显示多个；默认宽度就是它本身内容的宽度；高度，行高，外边距以及内边距都可以控制。
在这里插入图片描述

第二部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        a{
            display: inline-block;
            text-align: center;
            height: 50px;
            width: 80px;
            /* 行高设置和高度一样，从而可以让文本垂直居中 */
            line-height: 50px;
            color: #ffffff;
            background-color: rgb(94, 87, 87);
            text-decoration: none;
        }
        a:hover{
            background-color: darkorange;
            text-decoration: none;

        }

        div.backg{
            height: 400px;
            width: 400px;
            background-color: blue;
            /* 背景图片设置地址，url内部不要带双引号 */
            background-image: url(../xiaoxin2.png);
            /* 背景图片设置是否平铺，默认repeat平铺 repeat-x横向平铺 y竖着平铺 */
            background-repeat: no-repeat;
            /* background-position表示图片在盒子的哪个位置， 赋值x y 如right top表示右上 也可赋具体实际值
            超大图片一般用center top*/
            background-position: left bottom;
        }


    </style>
</head>
<body>
    <a href="http://www.baidu.com">体育</a>
    <a href="#">汽车</a>
    <a href="#">广告</a>

    <div class="backg">
        背景图片是小新
    </div>

</body>
</html>

运行效果图：
在这里插入图片描述
鼠标放到广告上后：

这部分主要学习了background一些属性的设计，包括颜色，背景图片，图片是否平铺完整，图片在块内的位置用坐标描述等等。

以及当图片特别大时是否固定图片如下：
在这里插入图片描述
第三部分
最后又学习了CSS的三大特性：层叠性（就近原则，样式不冲突不会层叠），继承性（子承父业）以及css的优先级
其中最重要的是css的优先级

当一个标签被多个选中的时候，就要通过计算权重来比较到低是用哪一个属性描述
计算如下：
在这里插入图片描述