20220710 第二小组 罗大禹 学习笔记
1、重点
（带有<style></style>的均在
<head>
</head>
中编辑
）
1. 路径问题
2. css引入
3. css的三大特性
4. 定位
5. 盒子模型
2、笔记
- 定义css样式的方式（理解）
①行内样式（不建议使用）
<p style="" ></p>为属性
如果当前样式不需要复用，可以使用行内样式
②内页样式（嵌入样式）
1. 标签选择器(理解)
<style>
/* 根据标签来命名 */
/* 选择器selector */
/* 标签选择器：可以让页面上所有的p标签都有对应的样式 */
p{
background: red;
}
</style>
2.类选择器（为了复用建议使用）(理解)
声名样式的时候需要用一个英文的点，而选择样式通过class属性，不需要写点
在head中：
<style>
.bg{
background: yellow;
}
</style>
在body中：
<span class="bg">13456</span>
3.id选择器(理解)
声明一个样式需要一个#号，对应元素的id要匹配
在head中：
<style>
#spring{
background: green;
}
</style>
在body中：
<p id="spring">12</p>
③外部样式（推荐）
在CSS文件中
.bg{
backgroud:red
}
在html文件中
在head中:
<link rel="stylesheet" href="引用css的文件">
在body中：
<p class="bg">1</p>
- CSS选择器(理解)
一、标签选择器
二、类选择器
一个标签元素可以选择多个样式，只要用空格隔开
三、id选择器
四、组合选择器
1.div，p选择页面中所有的div和p
在head中：
2.div p：选中div里的p，无论嵌套多少层，都能找到
3.div>p：选择div里面的直接子标签
4.div+p：选中紧跟着div的p（用的少）
五、属性选择器
1.[type] 选中页面上所有带type的标签
2.[type=text] 选中页面上所有带有type=text的标签
3.[type~=]：选中页面上属性包含单词的所有元素
六、伪类选择器： ：link， ：hover， ：active，：visited
head中：
<style>
/* 默认样式 */
a:link {
color: aquamarine;
}
/* 鼠标悬停样式 */
a:hover {
color: blue;
}
/* 元素被激活 */
a:active {
color: black;
}
/* 点过的链接 */
a:visited {
color: brown;
}
</style>
七、：nth-child() 选中第几个对应元素
八、：checked 选中所有被选中的元素
- css的三大特性(理解)
1、层叠性：
1. 若样式冲突，遵循就近原则，那个样式离结构近，就执行哪个样式
2. 若样式不冲突，就不层叠。
2、继承性
子标签会继承父标签的某些样式。（文本颜色、字号、背景颜色...）
3、优先级：
类选择器>id选择器>标签选择器
权重：
1. 继承的样式权重最低
2. 行内样式权重最高
3. 若权重相同，就近原则
4. ！important 课改变优先级
- 定位(了解)
定位：position: ;
absolute：绝对定位
当前的文档流可以理解为起飞了了,
参照物是已经定位的父级元素
relative：相对定位
参照物是已经定位的父级元素
占有原有位置，飞不起来
父相子绝
static：文档流（默认）
fixed：定位：浮动（钉住不动）
- 盒子模型（理解）
盒子模型：
width、height：表示内容区的宽和高
margin：外边距。元素距离上一个元素的位置
padding：内边距。本元素内部空出的距离
border：边框线
设置盒子模型的尺寸计算方式
box-sizing: border-box;
浙公网安备 33010602011771号