CSS

CSS3就是css语言，数字3是该语言的版本号；css语言开发的文件是以.css为后缀，通过在html文件中引入该css文件来控制html代码的样式（css语言代码也可以直接写在html文件中），采用的语言是级联样式表（Cascading Style Sheet），也属于标记语言。用来完成页面样式与布局

css三种引入方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css的引入</title>
    <!--2、内联式-->
    <!--书写位置:在head标签中的style标签内-->
    <!--css语法：css选择器 { 样式1; 样式2; } -->
    <!--优缺点: 可读性强，有复用性，样式被html页面绑定了，不能提供给其它html页面使用-->
    <style>
        h2 {
            color: red;
            font-size: 100px;
            text-align: center;
        }
    </style>

    <!--3、外联式-->
    <!--书写位置:在外部css文件中，在html文件中通过link标签引入css文件-->
    <!--css语法：css选择器 { 样式1; 样式2; } -->
    <!--优缺点: 可读性强，有复用性，适合团队开发(文件级别的复用性)-->
    <link rel="stylesheet" href="css/样式引入.css">
</head>
<body>
    <!--1、行间式-->
    <!--书写位置:在标签的style属性中书写样式-->
    <!--优缺点: 可读性差，没有复用性，书写直接-->
    <h1 style="color: red; font-size: 100px; text-align: center;">css的引入</h1>
    <h1>h1标签</h1>

    <h2>h2标签</h2>
    <h2>h2标签</h2>

    <h3>h3标签</h3>
    <h3>h3标签</h3>

    <h4>h4标签</h4>
    <h4>h4标签</h4>
</body>
</html>
------------------------------------------------------------------------------
/* css/样式引入.css */
h3 {
    color: green;
}
h4 {
    font-size: 50px;
    text-align: center;
}

三种css引入直接的优先级

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css的引入</title>\

    <!--优先级：
    1、内联与外联之间没有优先级区别，由于html属于解释性语言，书写在下方的会覆盖上方的样式
    2、行间式的优先级要高于一切
    -->

</head>
<body>
    <h3>h3标签</h3>
    <h3>h3标签</h3>

    <h4>h4标签</h4>
    <h4 style="font-size: 100px">h4标签</h4>
</body>

<style>
    h4 {
        color: #ff7800;
        font-size: 20px;
    }
</style>
<link rel="stylesheet" href="css/样式引入.css">
</html>

css基础选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css基础选择器</title>
    <style>
        /*优先级：可以从作用范围来判断 - 作用范围越精确，优先级越高 */
        /*1、统配选择器*/
        * {
            color: pink;
            font-size: 12px;
        }
        /*2、标签选择器*/
        h1 {
            font-size: 20px;
        }

        /*3、类选择器*/
        .h {
            font-size: 30px!important;
        }

        .h2 {
            font-size: 40px;
        }

        .h.h2 {
            font-size: 50px;
        }

        /*4、id选择器*/
        #hhh {
            font-size: 100px;
        }

    </style>
</head>
<body>
    <h1 class="h">1标题</h1>
    <h2 id="hhh" class="h h2" style="font-size: 12px">2标题</h2>
</body>
</html>

优先级：!important > 行间式 > id > class > 标签 > 统配，作用范围越精确，优先级越高

Html-CSS级联样式表

CSS

css三种引入方式

三种css引入直接的优先级

css基础选择器

猜你喜欢