网硕互联帮助中心本文为个人学习总结，如有谬误欢迎指正。前端知识众多，后续将继续记录其他知识点！
目录
前言
一、介绍
1.基本功能
2.css编写位置
行内样式
内部样式
外部样式(推荐）
3.样式表的优先级
4.选择器优先级
权重计算
编辑
二、三大特性
1.层叠性
2.继承性
3.优先级
三、样式的继承
四、默认样式
重置默认样式
前言
在网页开发的世界里，HTML 搭建起了页面的骨架，而 CSS（层叠样式表）则赋予了这些骨架鲜活的 “外衣”—— 从文字的颜色、大小，到元素的布局、间距，都离不开 CSS 的精心修饰。本文将围绕 CSS 的基础内容展开，从样式的编写位置、优先级规则，到三大特性的深层逻辑，再到样式的继承与默认样式的处理，希望这份笔记能为同样正在学习CSS的同学提供参考，也欢迎大家结合原课程视频深入学习，共同进步。
网课链接： https://www.bilibili.com/video/BV1p84y1P7Z5/?share_source=copy_web&vd_source=faad59aa4025692c65fca19bc4320e39
一、介绍
1.基本功能
css是一种层叠样式表，HTML搭建结构，css添加样式
2.css编写位置
行内样式
- 写在标签中，使用style属性
- style属性的值，是名：值 的形式，多个值用空格隔开
<!– 行内样式（不推荐） –>
<h1 style="color: brown; font-size: 30px;">欢迎学习前端</h1>
内部样式
- 使用style标签，可以放在body标签或者head标签内（一般），将所有的css代码提出来，放在style标签中（html页面中style标签中写的是css代码）
- css中涉及到宽高，要写单位px，不能省略
- style标签中，包含要修饰的标签名（使用花括号），但是不能包括html代码
- 写在本html页面内，其他html页面不能复用
<head>
<meta charset="UTF-8">
<title>编写位置</title>
<style>
h1{
color: blue;
font-size: 40px;
}
</style>
</head>
<body>
<h1>欢迎学习前端</h1>
</body>
外部样式(推荐）
- 单独写在css文件中，之后在html文件中引用
- 将style标签的内容（不包括style标签），复制到css文件内
- 在head标签写link标签，href属性链接css文件；
- 优点：样式可以复用、结构清晰、可触发浏览器的缓存机制，提高访问速度，实现了结构与样式的完全分离，可用于多个html页面
3.样式表的优先级
行内样式优先级>内部样式=外部样式（后来者居上）
对于同一个属性
-
行内样式优先级最高
-
内部样式和外部样式优先级一样
-
呈现效果：后来者居上，后面的样式把前面的样式“覆盖”了
-
对于不同属性
-
哪个样式规定了就按照哪个来
同一个样式表（对于单一的某个样式）
-
优先级与编写顺序有关，后面的会覆盖前面的
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1{
color: brown;
}
</style>
</head>
<body>
<h1 style="color: blue;">欢迎学习前端</h1>
<!– 行内样式优先级>内部样式 –>
</body>
</html>
4.选择器优先级
!important（慎用）>行内样式>ID选择器>类选择器/伪类选择器/属性选择器>元素选择器/伪元素选择器>通配选择器>继承的样式
通过不同的选择器，选中相同的元素，并且为相同的样式名设置不同的值时，就发生了样式的冲突。到底应用哪个样式，此时就需要看优先级了.
优先级越高，即使写在后面，也不会被覆盖
同级或者同一种选择器——后来者居上，后面的样式把前面的样式“覆盖”了
权重计算
1.计算方式：每个选择器，都可计算出一组权重，格式为：（a，b，c）
- a：ID选择器的个数。
- b：类、伪类、属性选择器的个数。
- c：元素、伪元素选择器的个数
或者——直接加
2.比较规则：按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比
-
全部相同——后来者居上
-
通配选择器：权重（0,0,0）
3.特殊规则：
- 行内样式权重大于所有选择器。
- !important的权重，大于行内样式，大于所有选择器，权重最高！
-
- ！important不是写在某个选择器上，写在某个属性值之后
- ！important慎用
- 并集选择器的每一个部分是分开算的！
第一个：（0,2,1）—2个类选择器，1个元素选择器
第二个：（0,1,3）—1个伪类选择器，3个元素选择器
二、三大特性
1.层叠性
概念：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）。
- 样式冲突？：元素的同一个样式名，被设置了不同的值
2.继承性
概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。
规则：优先继承离得近的。
常见的可继承属性：
- text-??，font-??，line-??、color。。
3.优先级
简单聊：!important>行内样式>ID选择器>类选择器>元素选择器>通配选择器>继承的样式。
详细聊：需要计算权重（见前面的三四部分）。
三、样式的继承
能继承的属性，都是不影响布局的，简单说：都是和盒子模型没关系的。
有些样式会继承，元素如果本身设置了某个样式，就使用本身设置的样式；但如果本身没有设置某个样式，会从父元素开始一级一级继承（优先继承离得近的祖先元素）。
会继承的样式：
- 字体属性、文本属性（除了vertical-align）、文字颜色等。
不会继承的样式：
- 边框、背景、内边距、外边距、宽高、溢出方式等。
四、默认样式
元素的默认样式>继承的样式
元素一般都有一些默认的样式，
例如：
1.<a>元素：下划线、字体颜色、鼠标小手。
2.<h1>~<h6>元素：文字加粗、文字大小、上下外边距。
3.<p>元素：上下外边距
4.<ul>、ol元素：左内边距
5.body元素：8px 外边距（4个方向）。。。
注意：
- 优先级：元素的默认样式>继承的样式，以如果要重置元素的默认样式，选择器一定要直接选择器到该元素
- 默认样式不用记，写代码第一件事就是重置默认样式，例如给body加样式，把正文所有内容使用div包裹，选中这个div，设置样式
margin: 0
◦ 移除元素外部的所有边距，使元素紧贴其父容器或相邻元素（无间隔）。
padding: 0
- 移除元素内部的所有填充，使内容（如文本、子元素）紧贴元素的边框。
应用：
导航菜单
- 移除 <ul> 的默认 padding-left 和 margin，使菜单项紧密排列，便于横向布局。
重置默认样式
- 浏览器对某些元素（如 <body>、<ul>、<p>）有默认的 margin 或 padding，设为 0 可以统一样式，方便自定义设计。
继承样式优先级低，不能覆盖元素默认样式
重置默认样式
评论前必须登录！
注册