CSS的编写位置

原创于 2020-08-05 18:35:03 发布 · 220 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #web

JavaWeb 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了两种在HTML中应用CSS样式的常见方法：内部样式和外部样式。内部样式直接在style标签内定义，适用于单页样式调整；外部样式则保存在独立的.css文件中，通过link标签引入，便于维护和复用。

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

（1）内部
写到style标签中

<style type="text/css">
     p {
        color: blue;
        background-color: yellow;
      }
</style>

举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Insert title here</title>
		<style type="text/css">
		  p {
			 color: blue;
			 background-color: yellow;
		  }
		</style>

	</head>
	<body>
		<p>落霞与孤鹜齐飞，秋水共长天一色</p>
	</body>
</html>

（2）外部
写在外部的css文件中，然后通过link标签引入外部的css文件


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

举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Insert title here</title>
		<link rel="stylesheet" type="text/css" href="style.css" />

	</head>
	<body>
		<p>落霞与孤鹜齐飞，秋水共长天一色</p>
	</body>
</html>

style.css

p {
color: blue;
background-color: yellow;
}

总结：
这两种方式的效果是相同的，结果如下：
在这里插入图片描述