如何在HTML页面中包含CSS样式

最新推荐文章于 2024-08-13 14:09:09 发布

码路无涯苦作舟

最新推荐文章于 2024-08-13 14:09:09 发布

阅读量6k

点赞数 2

分类专栏： Java web 文章标签： CSS样式包含行内样式内嵌样式连接样式包含CSS样式

本文链接：https://blog.csdn.net/d13419467942/article/details/83214864

版权

Java web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

介绍三种在页面中包含CSS样式的方法，分别是：行内样式，内嵌式和连接式。

1）行内式

行内式非常简短易用。通过HTML标记的style属性即可实现。但是这种方式的缺点是灵活性不强。

<!--演示行内样式-->
<html>
	<head>
		<title>演示行内样式</title>
	</head>
	<body>
		<table width="200" border="0" align="center">
			<tr>
				<td><p style="color:#F00;font-size:36px;">行内样式一</p></td>
			</tr>
			<tr>
				<td><p style="color:#F00;font-size:24px">行内样式二</p></td>
			</tr>
			<tr>
				<td><p style="color:#F00;font-size:18px">行内样式三</p></td>
			</tr>
			<tr>
				<td><p style="color:#F00;font-size:14px">行内样式四</p></td>
			</tr>
		</table>
	</body>
</html>

浏览器运行截图：

2）内嵌式

内嵌式是使用<style></style>标记对将CSS样式包含在页面中，即在<style>标记中创建选择器，然后在标记中通过class或者id属性来应用该样式即可。

详细的使用实例见博文：https://blog.csdn.net/d13419467942/article/details/83214303，选择器讲解部分。

3）链接式

当在不同的页面中需要使用相同的样式时，可以通过链接式复用样式。比如网站的多个网页中相同的HTML标记要求使用相同的样式。

链接式是指将CSS样式定义在单独的文件中，然后通过<link>标记引用。<link>标记的语法形式为：

<link rel="" href="" type="">
</link>

属性说明：

rel：定义外部文档和调用文档的关系。

href：CSS外部文档的相对/绝对路径

type：指定外部文档的MIME类型。

同一文件夹下css.css文件：

/*定义外部样式*/
/*定义了标记选择器*/
h1,h2,h3 {
	color:#6CFw;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
p {
	color:#F0Cs;
	font-weight:200;
	font-size:24px;
}

调用文档link.html：

<!--演示链接式样式-->
<html>
	<head>
		<title>通过链接形式引入CSS样式</title>
		<link href="./css.css"></link>
	</head>
	<body>
		<h2>页面文字一</h2>
		<p>页面文字二</p>
	</body>
</html>

浏览器运行效果：