【CSS】CSS和HTML的三种结合方式

最新推荐文章于 2024-10-07 19:08:25 发布

言曦

最新推荐文章于 2024-10-07 19:08:25 发布

阅读量1.2k

点赞数

分类专栏： CSS 文章标签： css html safari

本文链接：https://blog.csdn.net/wangke1998/article/details/121806862

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了CSS与HTML结合的三种常见方法：直接在标签内设置style属性，使用内部样式表（<style>标签），以及外部样式表（通过<link>引入）。每种方式都有其优缺点，如style属性易于阅读但复用性差，内部样式表在同一页面内复用，外部样式表则可跨页面复用并便于维护。在实际项目中，外部样式表是更为推荐的做法。

摘要由CSDN通过智能技术生成

CSS和HTML的三种结合方式

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

例：修改div标签的样式为：边框一个像素，实线，红色

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

缺点：（1）如果标签多了，样式多了，代码量非常庞大

（2）可读性非常差

（3）CSS代码没什么复用性可言。

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

<head>

  <meta charset="UTF-8">

  <title>Insert title here</title>

  <style type="text/css">

     div{

     border:1px solid blue;

     }

     span{

     border:1px solid blue;

     }

  </style>

</head>

<body>

<div>div标签</div>

<span>span标签</span>

</body>

缺点：

（1）只能在一个页面内复用代码，不能在多个页面中复用CSS代码。

（2）维护起来不方便，实际项目中会有成千上万的页面，要到每个页面中去修改，工作量太大了。

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

CSS代码如下，文件以.css结尾

<head>

  <meta charset="UTF-8">

  <title>Insert title here</title>

  <link rel="stylesheet" type="text/css" href="1.css"/>

</head>

<body>

<div>div标签</div>

<span>span标签</span>

</body>