CSS 层叠样式脚本

最新推荐文章于 2024-07-09 22:33:51 发布

Jay.shang

最新推荐文章于 2024-07-09 22:33:51 发布

阅读量156

点赞数

分类专栏：个人博客梳理 HTML 文章标签： css

本文链接：https://blog.csdn.net/qq_42019406/article/details/116334903

版权

个人博客梳理同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

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>

Jay.shang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS 层叠样式脚本

HTML CSS 层叠样式脚本1. html 和 css 都是前端的内容，提倡 html 和 css 分离2. CSS 实现内容和样式相分离，提高代码的可重复性和可维护性3. CSS 和 html 使用原则，尽量使用CSS 属性，代替 html 的属性4. CSS 样式元素内容的颜色 color元素内容的背景色 background-color字体大小 font-size5. CSS 和 HTML 的组合时有三种方式内联方式把样式表写在 h
复制链接

扫一扫