CSS 之样式表的用法（一）_html<ol>type怎么用样式代替-CSDN博客

本文链接：https://blog.csdn.net/weixin_43960383/article/details/124992313

本文介绍了两种在HTML中使用CSS的方法：直接插入样式表和链接外部CSS文件。前者适用于单个元素的快速样式设置，后者则有助于实现HTML与CSS的完全分离，便于维护和统一网站风格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

样式表的用法

1. 在 HTML 中插入样式表
2. 单独的链接 css 文件

1. 在 HTML 中插入样式表

可以直接把 css 代码添加到 html 的标记中，即作为 HTML 标记的属性标记存在；
这样能很简单地对某个元素单独定义样式；

例子 1：使用 css 的实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在HTML中插入样式表</title>
	</head>
	<body>
		<p style="color: green;font-size:35px;text-decoration: underline;text-align: center;">在Html中插入样式表</p>
		<p style="color: cyan;font-size:35px;text-decoration: underline,none;text-align: center;">在Html中插入样式表</p>
	</body>
</html>

20220425
在 Edge 浏览器中执行，结果如上图，

标记中使用了 style 属性，并设计了 CSS 样式，分别设置了绿色和淡蓝色字体，带有下划线和没有下划线。
注意： 行内样式的使用方法比较简单，但不常使用这种方法，因为修改起来麻烦。

2. 单独的链接 css 文件

使用链接样式的 css，能将页面内容和样式风格代码分离成两个或多个文件，实现页面框架 HTML 代码和 css 代码的完全分离；
同一个 css 文件，根据需要能链接到网站中所的 HTML 页面上，让网站的整体风格更统一、协调，并且能减少后期维护的工作量；
链接样式是指在外部定义 css 样式表并形成以 .css 为扩展名的文件，在页面中通过<link>链接到页面中，且该链接语句必须放在页面的<head>标记区；

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

代码分析如下：

rel 指定链接到样式表，值为 stylesheet；
type 表示样式表类型为 css 样式表；
href 指定了 css 样式表所在的位置，如上述代码的 6.css；
使用的是相对路径，若 HTML 文档和 css 样式没在同一路径下，则需要指定样式表的绝对路径或引用位置；

例子 2：链接 css 文件（2.html和1-2.css）
2.html 代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>链接样式</title>
		<link rel="stylesheet" type="text/css" href="one/1-2.css"/>
	</head>
	<body>
		<h2>CSS链接文件的使用方法</h2>
		<p>使用链接文件修饰样式</p>
	</body>
</html>

1-2.css 代码如下：

h2{text-align:center;color:blue}
p{font-weigth:100px;text-align:center;font-style:italic;color:red;}

在设计整个网站时，可将所有页面都链接到同一个 css 文件上，使用相同风格；若整个网站需要修改样式，只需修改 css 文件即可，且在同一个 css 文件能被不同的 html 所链接使用；