CSS用法_css big-CSDN博客

本文链接：https://blog.csdn.net/m0_66163230/article/details/122492558

本文详细介绍了CSS（级联样式单）的定义、使用方式，包括外部样式表、内部样式表、内联样式和导入样式表。CSS的特点包括层叠性、易于使用和多页面应用等。此外，还深入讲解了CSS的基本语法、选择器的种类，如标签选择器、ID选择器、类选择器等，并列举了长度单位和颜色设置的方法。

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

1、什么是CSS

CSS是"Cascading Style Sheet"的缩写，中文名为级联样式单（层叠样式单）,层叠就是样式可以层层叠加，可以对一个元素进行多次设置样式，后面定义的样式会对前面定义的样式进行重写，我们在浏览器中看到的效果是使用最后一次设置的样式。它是一种表现语言，是对网页结构语言的补充。

CSS主要用于网页的风格设计，其中包括字体、颜色、位置等方面的设计。在HTML网页中加入CSS，可以使网页展示更丰富的内容。

2、CSS样式单的使用方式

CSS样式单可以增强HTML文档的显示效果，为了在HTML中使用CSS样式单，通常有如下四种方式：

引入外部样式文件（外部样式表）：通过<link>标签引入外部样式文件（通常是CSS后缀的文件），它的优点是样式文件与HTML文档分离，一份样式文件也可以用于多份HTML文档，重用性较好。基本格式如下：

<link type="text/css" rel="stylesheet" href="CSS样式文件的URL" />

stylesheet：样式表

rel属性：指示引用文件的类型。

href属性：设置外部文件的路径。

导入外部外部样式文件（导入样式表）：通过<style>标签使用@import导入，其效果与引入外部样式文件的效果一样。基本格式如下：

<style type="text/css">
@import url("CSS样式文件的url");
</style>

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>123</title>
		<style>
		@import url("./style.css");
		</style>
	</head>
	<body>
		<h1>C语言入门</h1>
		<p>http://c.biancheng.net/c/</p>
	</body>
</html>

运行结果如下：

使用内部样式定义（内嵌样式表）：直接将CSS样式单写在<style>标签中作为标签内容。其缺点是重用性差，导致HTML文档过大，如果重复的CSS代码在不同的HTML文档中存在时，就会导致大量大重复下载。其基本格式如下：

   <style type="text/css">
       div{
           background-color: aqua;
           width: 380px;
           height: 250px;
       }
       </style>

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器</title>
		<style>
		body{
			background-color: #A52A2A;
		}
		h1{
			color: aquamarine;
			margin-left: 45px;
		}
		</style>
		</style>
	</head>
	<body>
		<h1>C语言入门</h1>
		<p>http://c.biancheng.net/c/</p>
	</body>
</html>

运行结果如下：