CSS 和 HTML 的结合方式

最新推荐文章于 2024-07-31 11:41:46 发布

「已注销」

最新推荐文章于 2024-07-31 11:41:46 发布

阅读量154

点赞数

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

本文链接：https://blog.csdn.net/qgc0810/article/details/113728953

版权

学习记录专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS 和 HTML 的结合方式

1、在标签的style属性上修改标签样式

在标签的 style 属性上设置”key:value value;”，修改标签样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 和 HTML 的结合方式1</title>
</head>
<body>
    <!--
    		分别定义两个 div、span标签，
    		分别修改每个 div 标签的样式为：边框1个像素，实线，红色
    -->
    <div style="border: 1px solid red;">div标签1</div>   在style属性上设置值
    <div style="border: 1px solid red;">div标签2</div>
    <span style="border: 1px solid red;">span标签1</span>
    <span style="border: 1px solid red;">span标签2</span>
</body>
</html>

运行效果1：在这里插入图片描述
这种方式有以下几个缺点：

如果标签、样式多了，代码量会非常庞大。
可读性非常差。
CSS代码没什么复用性可方言。

2、在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式

在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式。

格式如下：
xxx {
Key : value value;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 和 HTML 的结合方式2</title>
    <!--style标签专门用来定义css样式代码-->
    <style type="text/css">
        <!--
        分别定义两个 div、span标签，
        分别修改每个 div 标签的样式为：边框1个像素，实线，红色。
        -->
        div{
            border: 1px solid red;
        }
        span{
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div>div标签1</div>
    <div>div标签2</div>

    <span>span标签1</span>
    <span>span标签2</span>
</body>
</html>

运行效果2: 在这里插入图片描述
这种方式有以下几个缺点：

只能在同一页面内复用代码，不能在多个页面中复用CSS代码
不方便维护，实际项目中会有很多页面，要到每个页面中去修改，工作量相当大

3、把 css 样式写成一个单独的 css 文件

把 css 样式写成一个单独的 css 文件，再通过 link 标签引入即可复用。

使用 html 的 <link rel="stylesheet" type="text/css" href="./styles.css" /> 标签导入 css 样式文件

CSS文件内容：

div{
     border: 1px solid red;
 }
span{
    border: 1px solid red;
}

HTML文件内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--link标签专门用来引入css样式代码-->
    <link rel="stylesheet" type="text/css" href="1.css"/>

</head>

<body>
    <div>div标签1</div>
    <div>div标签2</div>

    <span>span标签1</span>
    <span>span标签2</span>
</body>
</html>