CSS

CSS3 css is the language, the number 3 is the version of the language; language development css files are .css suffix, html code to control the style by introducing the css file html file (css language code can be written directly in html file), the language used is a cascading style sheet (cascading style sheet), also belong to the markup language. It used to complete page styles and layout

css introduced three kinds of ways

<!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 directly introduced three kinds of priority

<!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 foundation selector

<!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>

Priority:! Important> between line> id> class> tag> ligand system, the more accurate the scope, the higher the priority

Html-CSS Cascading Style Sheets

CSS

css introduced three kinds of ways

Css directly introduced three kinds of priority

css foundation selector

Guess you like