CSS通常由选择器、属性、属性值组成，多个规则可以结合在一起
使用<style>标签来包裹 包含在head标签中
<style>
p{
color: blue;
font-size: 26px;
}
</style>导入css的方式
内联样式 直接放在标签 style 中，直接导入
内部样式表 head 在head中利用style
外部样式表 在另一个文件中head里面利用另一个标签链接到HTML文档中（允许在不同网页用一个样式）
从上往下优先级递减
选择器
子元素选择器：
<div class="father">
<p>这是一个子类</p>
</div>.father > .son{
color: blueviolet;
} .是找类 > 是找亲儿子后代选择器（包含选择器）：
<div class="father">
<p class="son">这是一个子类</p>
<div>
<p class="grandson">这是一个后代选择器示例</p>
</div>
</div> > 是找亲儿子 所以说语法就不能加> grandson不是亲儿子，所以加空格.father .son{ color: blueviolet; }
兄弟选择器：
例子
<p>只是一个普通的p标签</p>
<h3>相邻兄弟选择器</h3>
<p>这是另一个p标签</p>h3 + p {
color: brown;
}他寻找的是p标签，h3和p中间不能有其他标签，必须紧邻着，选择器直到找完- 只选 1 个元素 ：那个直接跟在 h3 后面的第一个 p
- 寻找所有的h3+p、
伪类选择器：
选中HTML文素中的特定状态或者位置的 不仅仅是本身的属性
伪类选择器 = 元素的 "特殊状态"
我用最通俗、最直白的话给你讲，一听就懂！
1. 啥叫伪类？
伪 = 假的、不是真标签 类 = 状态、样子
合起来： 不是你写在 HTML 里的 class，而是元素 "天生自带的状态"
浏览器自动给元素加的隐形状态，你直接用就行。
2. 最常见的 4 个伪类（必须记住）
全部以 : 开头
① :hover ------ 鼠标放上去
css
div:hover {
background: red;
}意思：鼠标碰到 div 时，变红
② :active ------ 鼠标点下去时
css
button:active {
background: blue;
}意思：按下去那一瞬间，变蓝
③ :first-child ------ 第一个子元素
css
p:first-child {
color: green;
}意思：如果 p 是爸爸的第一个孩子，就变绿
④ :nth-child(数字) ------ 第几个孩子
css
p:nth-child(2) {
color: orange;
}意思：爸爸的第二个孩子是 p，就变橙
3. 伪类和普通 class 的区别
- 普通 class：
.red→ 你自己写的 - 伪类：
:hover→ 浏览器自带的，不用写在 HTML 里
4. 一句话总结
伪类选择器 = 选中元素的 "特殊状态 / 位置"
- 鼠标放上去 →
:hover - 第一个孩子 →
:first-child - 第几个孩子 →
:nth-child(数字)
CSS属性
块元素和行内块元素
font代表 字体 属于复合属性
块内元素跟行内块元素都能设置width和height 行内块可以有行内块但不能有块元素
行内元素不能添加宽和高
这三种元素可以互相转换：利用行内样式或者内部样式 display：元素
盒子模型
border属性是符合属性，可以设置边框的样式 、宽度和颜色 不用属性的话border-width四个边框遵循上右下左或者width-left 复合属性
padding 内边距边框与文本之间距离
margin 外边距 浏览器跟边框距离
浮动
与行内块区别：块与块之间没有边框 只会在父元素内部移动
三大特性：
- 脱标
- 一行显示，顶部多块对齐
- 具有行内块特性
父类坍塌 清理浮动：
法1 overflow:hidden; 在父类样式中书写
法2
.father::after{
content:"";
display: table;
clear: both;
}定位
position: relative;
left: 120px;
top: 40px;往上移写bottom 向下移写top 左移right 右移left
绝对定位
图层相当于高了一级
固定定位
position：fixed；