前端速通—CSS篇

DokiDoki之父2025-10-15 11:49

概念：

CSS（Cascading style sheet）---层叠样式表，是一种样式表语言

会在html文件中和html语言搭配使用，例如在< head > 标签中使用style，在其中通过定义与< body >中相同的标签内容来控制其样式。

导入方式：

（1）内联样式：

html 复制代码

<div style="color:red" >  </div>

就是说style标签（内部是键值对的形式）和html的div标签结合在一起，但这种代码耦合性较高。日后使用会少
（2）内部样式：

html 复制代码

<head>
	<style type="css/text">
		div{
			color:red;
		}
	</style>
</head>

<body>
	<div> </div>
</body>

在< head >中添加style标签，在style标签内容中填入< body >中的某个标签的内容，后面跟上大括号。
（3）外部样式：

CSS选择器&属性

CSS选择器：

分为三种：

复制代码

									1.元素选择器：
在style标签体中直接写body里面的某个标签的内容后面跟大括号，例如：
div{
	color:red;
}

									2.id选择器：
在body中的某个标签内，写上id="..."
		然后在head的style标签体中写入：
<head>
#name{
	color:red;
}
</head>
		在body中写入：
<body>
<div id="name"> ... </div>
</body>

									3.类选择器：
在在body中的某个标签内，写上class="..."
然后在head的style标签体中写入：
<head>
.cls{
	color:red;
}
</head>
		在body中写入：
<body>
<div class="cls"> ... </div>
</body>

这样一看，各个选择器明显有其选择范围，而对浏览器而言，越小的选择器范围，解析优先度越高：id选择器 > 类选择器 > 元素选择器，也就是说如果一个标签同时定义了id和class，则浏览器优先解析id里面的样式。

属性：

属性太多，不一一列举，可以去w3c官网查看（后端人员了解即可）