CSS引入的三种方式

空白_d

于 2024-04-24 10:07:36 发布

阅读量878

点赞数 12

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_59272777/article/details/138145848

版权

本文介绍了CSS引入的三种方式：内联样式、内部样式表和外部样式表，分析了各自的优缺点及适用场景，强调了外部样式表在复用和维护方面的优势以及在实际开发中的重要性。

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

背景：

过程:

一.内联样式(Inline Sytles)

二:内部样式表(Internal Stylesheets)

三:外部样式表(External Stylesheets)

总结:

背景：

CSS引入主要指的是将CSS样式代码添加到HTML文档中的方法，以便为页面元素月应用统一的样式和布局。主要的方式有三种：内联样式(Inline Styles)、内部样式表(Internal Stylesheets)和外部样式表(External Stylesheets)。

过程:

一.内联样式(Inline Sytles)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>内联样式示例</title>
</head>

<body>
     <h1 style="color:blue;font-size:24px;">这是内联样式的标题</h1>
	 <p  style="color:green;">这是内联样式的段落</p>
</body>
</html>

在上面的例子中，<h1>和<p>元素都使用了style属性来直接定义它们的样式。<h1>元素的文本颜色被设置为蓝色(color:blue;),字体大小被设置为24像素(font-size:24px;)。同样，<p>元素的文本颜色被设置为绿色(color:green;).这种方法非常直观，但缺点是如果需要再多个元素上应用相同的样式，就需要在每个元素上重复编写相同的样式代码，这既不高效也不易于维护

二:内部样式表(Internal Stylesheets)

内部样式是通过HTML文档的<hear>部分使用<style>标签来定义CSS样式。这种方式可以将样式集中管理，但仍然与HTML文档紧密耦合，不利于样式的复用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>内部样式示例</title>
<style>
     h1{
	     color:red;
		 text-align:center;
	 }
	 P{
	     font-family:Arial;
		 line-height:1.6;
	 }
</style>
</head>
<body>
     <h1>这是内部样式表的标题</h1>
	 <p>这是内部样式表的段落，具有指定的字体和行高</p>
</body>
</html>

在这个例子中，<style>标签被放置在<head>部分，里面包含了针对<h1>和<p>元素得CSS样式规则。所有<h1>元素文本shezhi色(color:red;)并且文本居中(text-align:center;)。所有<p>元素得字体被设置为Arial，并且行高设置1.6(line-height:1.6;)。内部样式表得好处是可以将样式规则集中管理，使得HTML文档得结构更加清晰。但是如果需要在多个界面上使用相同得样式规则，仍然需要在每个界面<head>部分重复编写这些规则。

三:外部样式表(External Stylesheets)

外部样式表是通过HTML文档中使用<link>标签来引用一个单独得CSS文件。这种方式实现了样式与HTML文档得完全分离，使得样式可以在多个界面之间共享和复用，同时也方便了样式得修改和维护

我们有一个名为styles.css得外部CSS文件，内容如下:

/* styles.css 文件内容 */  
h1 {  
    color: purple;  
    text-decoration: underline;  
}  
body {  
    background-color: lightyellow;  
}

然后，在HTML文件中引用这个CSS文件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>外部样式示例</title>
<link rel="stylesheet" type="text/css" href="styles.css"
</head>
<body>
     <h1>这是外部样式表的标题</h1>
	 <p>这是外部样式表的段落，背景色是由外部CSS文件定义。</p>
</body>
</html>

在这个例子中，<link>标签被放置在<head>部分，用于引入外部CSS文件styles.css，rel属性。

总结:

样式引入方式	特点	优点	缺点	适用场景
内联样式（Inline Styles）	在HTML元素内部使用`style`属性定义样式	直观、快速，无需额外编写CSS代码	不利于样式统一管理和复用，增加HTML文档复杂性	对单个元素进行临时或快速样式调整，无需多页面复用
内部样式表（Internal Stylesheets）	在HTML文档的`<head>`部分使用`<style>`标签定义样式	样式集中管理，HTML文档结构更清晰	需在每个页面`<head>`部分重复编写样式，不利于样式复用和共享	单个HTML文档样式定义，样式量不大且无需多页面复用
外部样式表（External Stylesheets）	通过HTML文档的`<link>`标签引用外部CSS文件定义样式	样式统一管理和维护，代码可维护性强，样式文件可单独缓存，团队协作分工明确	需要额外创建和管理CSS文件，CSS文件过大或网络延迟可能导致加载缓慢	多页面使用相同样式，大型网站或应用样式统一管理和维护，团队协作开发

可以看出三种方式各有优缺点，使用场景也各不相同。在实际开发中，根据项目的需求、团队规模和维护成本等因素综合考虑，选择最合适的CSS引入方式。通常情况下，外部样式是常用且推荐的方式，因为它能够实现样式的复用和共享，提高代码的可维护性和团队协作效率。

空白_d

关注

12
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS引入的三种方式

样式引入方式特点优点缺点适用场景内联样式（Inline Styles）在HTML元素内部使用style属性定义样式直观、快速，无需额外编写CSS代码不利于样式统一管理和复用，增加HTML文档复杂性对单个元素进行临时或快速样式调整，无需多页面复用内部样式表（Internal Stylesheets）在HTML文档的部分使用标签定义样式样式集中管理，HTML文档结构更清晰需在每个页面部分重复编写样式，不利于样式复用和共享。
复制链接

扫一扫