欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS 层叠样式脚本

程序员文章站 2022-07-04 21:27:18
...

HTML CSS 层叠样式脚本

1. html 和 css 都是前端的内容，提倡 html 和 css 分离

2. CSS 实现内容和样式相分离，提高代码的可重复性和可维护性

3. CSS 和 html 使用原则，尽量使用CSS 属性，代替 html 的属性

4. CSS 样式

元素内容的颜色           color
元素内容的背景色					background-color
字体大小								font-size

5. CSS 和 HTML 的组合时有三种方式

  • 内联方式
    把样式表写在 html 的标签内部， 标签中的style 属性的属性值出现。

    <span style="color: brown; background-color: black; font-size: 100px;" >"CSS 样式表" </span>

  • 内部样式
    一般把CSS 样式写在 HTML 内。

    span {                              
        color: #000;
        background-color: crimson;
        font-size: 100px;
    }
    .class {
        color: #000;
        background-color: crimson;
        font-size: 100px;
    }
    #idSelect {
        color: #010101;
        background-color: crimson;
        font-size: 100px;
    }

  • 外部样式

    一般把样式单独写，放在另外一个文件内，后缀名是 .css

    <link rel="stylesheet" type="text/css" href="./dir/dir/xxx.css">

6. 选择器

CSS 给指定标签相应的样式

  • 标签选择器 通过标签来选择条目

    <html>
    <head>
    <title>CSS</title>
    <meta charset="utf-8"/>
    <style type="text/css">           
    span {                              
        color: #000;
        background-color: crimson;
        font-size: 100px;
    }
        
    </style>
    </head>
    <body>
        
        <span >CSS 样式表</span><br/>
        <span>学习 CSS 样式表</span>

        <!--
            <span style="color: brown; background-color: black; font-size: 100px;" >"CSS 样式表" </span>  
        -->
    </body>
</html>

  • 类选择器
    在标签中定义一个 class 属性，然后在标签中通过**.类名**来定义样式

    <html>
    <head>
    <title>CSS</title>
    <meta charset="utf-8"/>
    <style type="text/css">           
    .class {
        color: #000;
        background-color: crimson;
        font-size: 100px;
    }
    </style>
    </head>
    <body>
        
        <span class="class">CSS 样式表</span><br/>
        <span class="class">学习 CSS 样式表</span>
    </body>
</html>

  • ID 选择器

    在标签中定义一个 id 属性，然后在标签中通过**#id 名称**来定义样式

    <html>
    <head>
    <title>CSS</title>
    <meta charset="utf-8"/>
    <style type="text/css">           
    /* span {                              
        color: #000;
        background-color: crimson;
        font-size: 100px;
    }
     */
    /* .class {
        color: #000;
        background-color: crimson;
        font-size: 100px;
    } */
    #idSelect {
        color: #010101;
        background-color: crimson;
        font-size: 100px;
    }
    </style>
    </head>
    <body>
        
        <!-- <span class="class">CSS 样式表</span><br/>
        <span class="class">学习 CSS 样式表</span><br/> -->

        <span id="idSelect">CSS 样式表1</span><br/>
        <span id="idSelect">学习 CSS 样式表1</span>

        <!--
            <span style="color: brown; background-color: black; font-size: 100px;" >"CSS 样式表" </span>  
        -->
    </body>
</html>
相关标签： 个人博客梳理 HTML css

上一篇： VScode 代码样式设置

下一篇： php 设置excel样式

推荐阅读