1024，初学CSS

最新推荐文章于 2025-12-02 22:03:53 发布

原创最新推荐文章于 2025-12-02 22:03:53 发布 · 197 阅读

CC 4.0 BY-SA版权

文章标签：

3 篇文章

订阅专栏

本文介绍了CSS的基础知识，包括选择器的使用、优先级规则以及四种应用CSS的方式：外链式、导入式、嵌入式和内联式。详细阐述了每种方式的特点和使用场景，并特别提到了样式优先级的确定原则，如就近原则和`!important`的使用。此外，还强调了内联样式优先级最低的原则。

昨天在html的基础上初学习了，或者是是了解到了CSS。
知道了css选择器，优先级，还有css文档

四种使用css的方式：
1.外链式css 在头部用link标记引入：例

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

href写的是css文件路径，type="text/css"w3c标准规定，为保证兼容性
rel="stylesheet"关联样式表，文件初始化时被使用
2.导入css方式 @import url(‘路径’)：例

<style type="text/css">
	@import url('css/style.css')
	#div1{
		width:100px;
		height:100px;
		background-color:red;
		}
</style>

注：导入@import rul(’’) 时需要在所有css样式上面加入，下面加入时无效
3.嵌入式css样式，内部样式在头部的style标签里：例

<head>
	<meta charset="utf-8">
	<title>css初学</title>
	<style type="text/css">
		#div{
			background-color:#000000
			}
	</style>
</head>

4.内联式css方式：例

<p style="width:100px; height:40px; font-size:20px; line-height:40px; color:red">123</p>
<!-- 尽量不要用 -->

css导入方式优先级
·采用就近原则，什么样式表离元素最近，优先使用这个样式表
·内部和外部同时存在时(内联式，嵌入式，外链式)，哪个离元素近用哪个
·在样式后面加 !important 则改样式为最终样式(优先级最高)
·标签本身样式优先级最低