day004——CSS

最新推荐文章于 2024-09-24 11:41:48 发布

王总总

最新推荐文章于 2024-09-24 11:41:48 发布

阅读量97

点赞数

分类专栏：前端学习文章标签： css

本文链接：https://blog.csdn.net/Teeeeesting/article/details/110118002

版权

前端学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.CSS：层叠样式表，用来美化网页。做到结构（HTML）和表现（CSS）分离。

2.基本语法：

选择器{

属性：属性值

}

3.引用方式：行间样式、内部样式、外部样式、导入外部样式。

行间样式：直接在标签上书写样式、
内部样式：在文件的内部书写样式
<style>
样式内容
</style>
外部样式：（1）先创建一个css文件；（2）再用link标签引入这个文件
导入外部样式：（1）先创建一个css文件；（2）在style标签中用import导入这个文件

以上四种css引入方式区别：

1）行间样式只作用于当前标签，而内容部样式作用于当前文件，外部样式可以被多个HTML文件引用。

2）在实际开发多用外部样式。

3）外部样式分为link引入和import引入两种方式。这两种方式有何区别：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS引用方式</title>
    <!--引入外部样式文件-->
    <!--Emmet语法写法：link:css-->
    <link rel="stylesheet" href="css/style.css">
    <!--内部样式表-->
    <style type="text/css">
        @import "css/test.css";
        p{
            background-color: #75e0ee;
            font-size:18px;
            font-style:italic
        }
    </style>
</head>
    <!--行间样式-->
    <div style="color:blue;width:100px;border:10px solid red;">行间样式测试1</div>
    <div>行间样式测试1</div>

    <p>床前明月光</p>
    <p>疑是地上霜</p>

    <span>外部样式测试</span>
    <span>外部样式测试</span>
    <span>外部样式测试</span>
    <span>外部样式测试</span>
    <span>外部样式测试</span>

    <!--导入外部样式-->
    <!--.box{导入外部样式}*3-->
    <div class="box">导入外部样式</div>
    <div class="box">导入外部样式</div>
    <div class="box">导入外部样式</div>

    <em class="box">举头望明月</em>


<body>

</body>
</html>
 
---------------------------------------------------------------------------
style.css文件


span{
    font-size:15px;
    color: #ff353b;
    display:block;
}


----------------------------------------------------------------------------
test.css文件

.box{
    font-weight:bold;
    font-size:16px;
    color:red;
}

4.css选择器分类：

1）*：匹配html中所有元素（注意：*的性能差，因为他要匹配所有的元素，所以开发时不建议使用）

2）标签选择器：用来匹配对应的标签

3）类选择器：用来选择class命名的标签

4）ID选择器：用来选择id命名的标签

5）派出选择器：根据上下文确定选择的标签

6）伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style>
        /* 1.*  */
        *{
            color:red;
        }

        /* 2.标签选择器  */
        span{
            display: block;
            margin-right: 20px;
            border:1px solid gray;
        }

        /* 3.类选择器  */
        .wrapper{
            color:aqua;
        }

        /* 4.id选择器  */
        #content{
            color:green;
        }

        /* 5.派出选择器  */
        .box2 li{
            color:deeppink;
        }
    </style>
</head>
<body>
    <p>交易所</p>
    <strong>hhh</strong>

    <span>这是span标签</span>
    <div>这是div标签</div>

    <div class="wrapper">这是div标签</div>

    <p id="content">这是内容</p>


    <ul class="box1">
        <li>01</li>
        <li>02</li>
        <li>03</li>
    </ul>
    <ul class="box2">
        <li>01</li>
        <li>02</li>
        <li>03
            <ul>
                <li>lalla</li>
                <li>lalla</li>
            </ul>
        </li>
    </ul>

</body>
</html>

5.选择器的分组：让多个选择器（元素）具有相同的样式，一般用于设置公共样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器的分组</title>
    <style type="text/css">
        h1,.box,p{    /* 基础样式*/
            color: coral;
        }
        p{
            width: 100px;
            background-color: darkgreen;

        }
    </style>
</head>
<body>
    <h1>h1标签</h1>
    <div class="box"> box</div>
    <p>p</p>

</body>
</html>

6.选择器的继承：子元素可以继承父元素的样式，反之不可以。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器的分组及样式继承</title>
    <style type="text/css">
        /* 选择器分组*/
        h1,.box,p{    /* 基础样式*/
            color: coral;
        }
        p{
            width: 100px;
            background-color: darkgreen;

        }

        /* 选择器样式继承*/
        .test{
            font-size: 28px;
            color: darkmagenta;
        }
        .test span{
            font-weight: bold;        /* 继承*/
            font-size: 38px;        /* 改写父元素传过来的样式*/
        }
    </style>
</head>
<body>
    <h1>h1标签</h1>
    <div class="box"> box</div>
    <p>p</p>

    <div class="test">这是测试继承<span>内容</span>。</div>

</body>
</html>

7.样式权重，优先级：外部样式<内部样式<内联样式

！important（10000）>内联样式（1000）>id选择器（100）>类、伪类选择器（10）>标签选择器（1）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式权重</title>
    <style>
        p{
            color: darkmagenta!important;
        }
    </style>
</head>
<body>
    <p style="color: #75e0ee">这是内容1</p>
    <p >这是内容1</p>
</body>
</html>