HTML和CSS结合使用

最新推荐文章于 2023-01-12 14:02:44 发布

tdongmu

最新推荐文章于 2023-01-12 14:02:44 发布

阅读量321

点赞数

分类专栏： JavaWeb学习

本文链接：https://blog.csdn.net/tdongmu/article/details/110359708

版权

CSS样式代码复用页面维护样式分离前端开发

关键词由CSDN通过智能技术生成

JavaWeb学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

第一种方式

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

<div style="border:1px solid red;">标签一</div>

缺点：1.代码量庞大

2.可读性差

3.Css代码没什么复用性可言

第二种方式

在head标签中，使用style标签定义自己的需求的css样式

<head>
    <meta charset="UTF-8">
    <title>css-html</title>
<!--style是专门定义css样式的代码-->
    <style type="text/css">
        div{
            border:1px solid red;
        } 
        span{
            border:1px solid red;
        }
    </style>
</head>
<body>

<div>标签一</div>
<span>标签二</span>

</body>

缺点：1.只能在一个页面内复用

2.维护起来不方便，实际项目有成千上万个页面，修改起来工作量大

第三种方式

把scc样式单独写成一个css文件，在通过link标签引入。

创建一个css文件，css代码

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

html文件代码

<head>
    <meta charset="UTF-8">
    <title>css-html</title>
<!--  link标签专门引入css文件  -->
    <link rel="stylesheet" type="text/css" href="1.css"/>
</head>