CSS和HTML的结合方式

衰小孩、519

于 2021-11-01 18:59:14 发布

阅读量186

点赞数

分类专栏： JavaWeb 文章标签： javaweb

本文链接：https://blog.csdn.net/A_JOKER___/article/details/121052727

版权

JavaWeb 专栏收录该内容

86 篇文章 0 订阅

订阅专栏

方式一：直接使用style属性

这种方式的缺点：

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

<!--定义两个div、span标签，分别修改每个div标签的样式为：边框一个像素，实线，红色。-->
<div style="border: 1px solid red">div标签1</div>
<div style="border: 1px solid red">div标签2</div>
<span>span标签1</span>
<span>span标签2</span>

方式二：在head标签中使用style标签

这种方式的缺点：
1.只能在同一页面内复用代码，不能在多个页面中复用css代码。
⒉维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改，工作量太大了。

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

方式三：引入外部文件

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

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

<!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、span标签，分别修改每个div标签的样式为：边框一个像素，实线，红色。-->
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>

衰小孩、519

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS和HTML的结合方式

方式一：直接使用style属性这种方式的缺点：如果标签多了，样式多了，代码量非常庞大。可读性非常差。css代码没什么复用性可言。<div style="border: 1px solid red">div标签1</div><div style="border: 1px solid red">div标签2</div><spa
复制链接

扫一扫

专栏目录