CSS与HTML结合使用的三种方式

最新推荐文章于 2024-07-26 08:00:00 发布

亿点足迹

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量7.2k

点赞数 10

分类专栏： HTML+CSS 文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_72237413/article/details/125435903

版权

HTML+CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

基础知识：CSS语法规则

选择器：选择器包括标签名、.class的值、#id的值等等。浏览器根据”选择器“决定受CSS样式影响的HTML元素（对应的标签）

属性：属性是你所要改变的样式名，且每一个属性都至少拥有一个值。属性与值通过冒号分开在花括号范围内。这样就组成了一个完整的样式声明。eg: div{ color : red }

多个属性声明：如果需要定义多个样式声明，则需要用分号将每个声明分开（通常一个声明占一行，在行末添加分号即可）。虽然最后一条声明可不加分号，但是尽量在每一条声明后都添加上分号（以便之后添加其他声明）。

接下来将使用三种方式将CSS与HTML结合使用。为了可比性，三种方式均实现同一效果。

一、在标签 style 属性上设置 "key:value value ...;key:value ..."，以此来修改标签样式

格式：<标签 key:value value ...;key:value ...>内容</标签>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    div标签的长度：默认占一行
    span标签长度是由其封装内容的长度决定的
-->
<div style="border:3px solid blue; height: 50px;color: blue;font-size: 30px">第一行</div>
<div style="border:3px solid blue; height: 50px;color: blue;font-size: 30px">第二行</div>
<span style="height: 100px;border: 3px dashed green">第一个</span>
<span style="height: 100px;border: 3px dashed green">第二个</span>
</body>
</html>

缺点：

随着标签和样式的增加，代码量将变得庞大且冗余
可读性非常差
CSS代码没有复用性可言

二、在 head 标签中使用 style 标签来定义各种自己想要的CSS样式

格式：选择器（标签或其它标志）{

key: value value ...;

}

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /* style标签专门用来定义CSS样式样式，所以HTML注释在style标签中不起作用 */
        div{
            height: 50px;
            border: 3px solid blue;
            color: blue;
            font-size: 30px;
        }
        span{
            height: 100px;
            border: 3px dashed green;
        }
    </style>
</head>
<body>
<!--
    div标签的长度：默认占一行
    span标签长度是由其封装内容的长度决定的
-->
<div>第一行</div>
<div>第二行</div>
<span>第一个</span>
<span>第二个</span>
</body>
</html>

缺点：

只能在同一页面内复用CSS代码，不能在多个页面中复用CSS代码
不便于维护，在实际项目中的会有成百上千个页面，每一个页面都需要修改，工作量太大了

三、将CSS样式写成一个单独的CSS文件，再通过link标签将CSS文件引入HTML文件即可。

/* CSS文件 ——css1.css（与HTML放于同一目录，便于测试） */
div{
    height: 50px;
    border: 3px solid blue;
    color: blue;
    font-size: 30px;
}
span{
    height: 100px;
    border: 3px dashed green;
}

<!-- HTML文件与css1.css文件放于同一目录 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 使用link标签将CSS文件引入HTML文件 href的参数根据自己的路径决定 -->
    <link rel="stylesheet" type="text/css" href="css1.css">
</head>
<body>
    <!--
        div标签的宽度：默认占一行
        span标签宽度：由其封装内容的宽度决定的
    -->
    <div>第一行</div>
    <div>第二行</div>
    <span>第一个</span>
    <span>第二个</span>
</body>
</html>