『HTML&CSS』样式表（Style Sheet）

最新推荐文章于 2024-08-28 09:27:15 发布

爱喝可乐的炸鸡

最新推荐文章于 2024-08-28 09:27:15 发布

阅读量4.8k

点赞数 4

分类专栏：『HTML&CSS』文章标签：样式表三种定义方式

本文链接：https://blog.csdn.net/sss_0916/article/details/101433784

版权

『HTML&CSS』专栏收录该内容

15 篇文章 0 订阅

订阅专栏

样式表（style sheet）是关于文件对标题和正文的默认字体、大小、颜色、前页外观、单个部分的排列间隔、行间隔、四周页边距、标题间距离等元素的定义。

什么是CSS？

CSS（Cascading Style Sheets，层叠样式表），是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态的修饰网页，还可以配合各种脚本语言动态的对网页各元素进行格式化。
为什么叫层叠样式表呢？我们可以将一个网页想像成是一层一层的结构，层次高的将会覆盖层次低的。
CSS可以分别为网页的各个层次设置样式。

样式表的三种书写形式

内联样式表

可以将CSS样式编写到元素的style属性中，style中可以写多个样式。如下：

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>Demo_05</title>
	</head>
	<body>
		<!--
			style只对当前标签有效
		-->
		<p style = "color:red;font-size:20px">Hello, World!</p>
		<p>Hello, World!</p>
	</body>
</html>

在这里插入图片描述

可以看到内联样式表只对当前标签有效，如果想要样式表对别的标签有效，可以在别的标签中的style属性中再写一份：

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>Demo_05</title>
	</head>
	<body>
		<!--
			style只对当前标签有效
		-->
		<p style = "color:red;font-size:20px">Hello, World!</p>
		<p style = "color:blue;font-size:20px">Hello, World!</p>
	</body>
</html>

在这里插入图片描述

总结：

color:red;这是一个样式，样式以分号结束。多个样式就构成了样式表。
将样式直接编写到style属性中，这种样式我们成为内联样式。
内联样式只对当前的元素中的内容起作用。
内联样式不方便复用。
内联样式属于结构与表现耦合，不方便后期维护，不推荐使用。

内部样式表

我们也可以将CSS样式编写到当前HTML文件的head标签内，如：

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>Demo_06</title>
		<!--
			内部样式表，p为选择器，{}包裹的是声明块
		-->
		<style type="text/css">
			p {
				color: green;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<p>Hello, World!</p>
		<p>Hello, World!</p>
		<p>Hello, World!</p>
	</body>
</html>

在这里插入图片描述

总结：

内部样式表将样式表编写到style标签中，然后通过CSS选择器选中指定元素，然后可以同时为这些元素一起设置样式。
这样可以使样式被复用，将样式表编写到style标签中，可以使表现和结构进一步分离。

外部样式表

除了上述两种使用方式，还可以将样式表编写到外部css文件中，style.css，然后通过link标签来将外部的css文件引入到当前页面中。这样外部文件中的css样式表就可以应用到当前页面中。
首先，我们来新建一个style.css文件，然后写入样式表。
在这里插入图片描述

p {
	color:yellow;
	font-size:20px;
}

在这里插入图片描述
然后，新建一个html引入外部css文件进行使用。

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>Demo_06</title>
		<!--
			引入外部css文件，link是自结束标签
		-->
		<link rel = "stylesheet"; type = "text/css"; href = "style.css"; />
	</head>
	<body>
		<p>Hello, World!</p>
		<p>Hello, World!</p>
		<p>Hello, World!</p>
	</body>
</html>