什么是CSS
CSS是层叠样式表的简称，又称为CSS样式表或级联样式表。CSS是一种标记语言。
主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）、版面的布局和外观显示样式。
由HTML专注去做结果呈现，样式交给CSS，即结构（HTML）与（CSS）分离。
CSS常用代码风格
- 展开格式
- 样式小写
- 属性值前面，冒号后面，保留一个空格
- 选择器（标签）之间也要保留一个空格
h3 {
color: pink;
font-size: 20px;
}CSS基础选择器
选择器的作用：选择标签
- 标签选择器
- 把某一类标签全部选择出来
- 优点：快速为页面中同类型的标签统一设置样式
- 不能设计差异化标签，只能选择全部的当前标签
- 类选择器
- HTML元素以class属性来设置类选择器，使用‘.’进行表示，后面紧跟类名（自己命名）
- 如果想要差异化选择不同的标签，单独选择一个或几个标签，可以使用类选择器
- 可以理解为给这个标签起了一个名字
- 可以使用‘-’命名
- 不要使用纯数字、中文等命名
- 多类名：多个类名之间用空格隔开
- id选择器
- HTML元素以id属性来设置id选择器，CSS中id选择器以‘#’来定义
- 可以为标有特定id的HTML元素指定特定的样式
- 只能调用一次
- 通配符选择器
- 在CSS中，通配符选择器使用‘*’定义，表示选取页面中的所有元素（标签）
- 不需要调用，自动给所有的元素使用样式
CSS字体属性
字体符合属性
font-style font-weight font-size/line-height font-family
注意以下条件：（否则font不起作用）
- 必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
- 不需要设置的属性可以省略，但必须保留font-size和font-family属性
CSS的文本属性
CSS文本属性可以定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。
CSS引入方式
三种样式表
行内样式表（行内式）
内部样式表（嵌入式）
外部样式表（链接式）
使用Chrome调试样式
- Ctrl+滚轮可以放大开发者工具代码大小
- 一边是HTML元素结构，一边是CSS样式
- 右边CSS样式可以改动数值（左右箭头或者直接输入）和查看颜色
- Ctrl+0复原浏览器大小
- 如果点击元素，发现右侧没有演示引入，极有可能是类名或者样式引入错误
- 如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误
使用emmet语法
使用缩写，来提高html、css的编写速度
快速生成HTML结构语法：
- 生成标签，直接输入标签名按tab键即可
- div然后tab键，就可以生成<div></div>
- 如果想要生成多个相同标签，加上*就可以了
- div*3可以快速生成三个div
- 如果有父子级关系的标签，可以用>
- ul>li
- 如果有兄弟关系的标签，用+就可以了
- div+p
- 如果生成带类名或者id名字的，直接
- 写 .demo 或者 #two 再按 tab 键就可以了
- 如果生成的div类名是有顺序的,可以用自增符号$
- .demo$*5
CSS复合选择器
可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
- 常用复合选择器：后代选择器，子选择器，并集选择器，伪类选择器等
后代选择器
元素1 元素2 {样式声明}
表示修改元素1下面的元素2的样式（后代元素）
- 元素1和元素2用空格隔开
- 元素1是父级，元素2是子级，最终选择的是元素2
- 元素2可以是儿子，也可以是孙子，只要是元素1的后代即可
- 也可以在元素前面加上类
<!-- 选择类nav中ul里面所有的li标签元素 -->
.nav ul li {
样式声明
}子选择器
只能选择作为某元素最近一级的子元素（儿子）
元素1>元素2 {样式声明}
表示修改元素1下面的元素2的样式（后代元素）
- 元素1和元素2中间用大于号隔开
- 元素1是父级，元素2是子级，最后选择的是元素2
- 元素2必须是亲儿子，其孙子都不归他管
<!-- 选择div里面所有儿子与元素 -->
div>p{
样式声明
}并集选择器
可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。
是各选择器用过英文逗号连接而成，任何形式的选择器都可以作为并集选择器的一部分
元素1,元素2 {样式声明}
表示选择元素1和元素2
- 元素1和元素2之间用逗号隔开
<!-- 选择ul和div标签元素 -->
ul,div {
样式声明
}伪类选择器
用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
伪类选择器最大的书写特点是用冒号（:）表示
包括链接伪类、结构伪类等
链接伪类选择器
<!-- 选择所有未被访问的链接 -->
a:link
<!-- 选择所有已被访问的链接 -->
a:visited
<!-- 选择鼠标指针位于其上的链接 -->
a:hover
<!-- 选择活动链接（鼠标按下未松开的链接） -->
a:active
注意：按照上述顺序进行声明
:focus 伪类选择器
用于选取获得焦点的表单元素
焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素
/* 把获得光标的input表单元素选取出来 */
input:focus {
background-color: yellow;
}CSS的元素显示模式
网页的标签非常多，在不同的地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。
元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>
类型
块元素
- 独占一行
- 高度、宽度、外边距、内边距都可以控制
- 宽度默认是容器（父级宽度）的100%
- 是一个容器盒子，里面可以放行内或者块级元素
- 文字类元素内不能使用块级元素
- <p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>
- <h1>~<h6>等都是文字类块级标签，里面也不能放块级元素
常见块元素：<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>等
行内元素
- 相邻行内元素在一行上，一行可以显示多个
- 高和宽直接设置无效
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或其他行内元素
- 链接里面不能再放链接
- 特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全
常见行内元素：<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等
行内块元素
在行内元素中有几个特殊的标签——<img/>,<imput/>,<td>，他们同时具有块元素和行内元素的特点，因此称为行内块元素。
- 和相邻行内元素（行内块元素）在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）
- 默认宽度就是他本身内容的宽度（行内元素特点）
- 高度，行高，外边距，内边距都可以控制（块级元素的特点）
元素显示模式转换
特殊情况下，我们需要元素模式的转换（其实是一个模式的元素需要另外一种模式的特性）
比如想要增加链接<a>的触发范围
转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块元素：display:inline-block;
snipaste工具的使用
F1可以截图，同时测量大小，设置箭头，书写文字等
F3在桌面置顶显示
点击图片，alt可以取色（按下shift可以切换取色模式）
按下esc取消图片显示
单行文字垂直居中的代码
让文字的行高等于盒子的高度，可以让文字在当前盒子内垂直据中。
div {
width: 100px;
height: 40px;
background-color: pink;
line-height: 40px;
}CSS的背景
可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等。
背景颜色
一般情况下元素背景颜色的默认值是transparent（透明），我们也可以手动指定背景颜色为透明色。
背景图片
background-image属性描述了元素的背景图像，实际开发常见于logo或者一些装饰性的小图片或超大背景图片，优点是非常便于控制位置（精灵图也是一种运用场景）
div {
width: 300px;
height: 300px;
background-image: url(../image/img.webp);
}背景平铺
默认情况下平铺
/* 默认情况下平铺 */
background-repeat: repeat;
/* 背景图片不平铺 */
background-repeat: no-repeat;
/* 沿着x轴平铺 */
background-repeat: repeat-x;
/* 验证y轴平铺 */
background-repeat: repeat-y;
div {
width: 300px;
height: 300px;
background-image: url(../image/img.webp);
background-repeat: no-repeat;
}背景位置
/* 背景图片居于中上 */
background-position: center top;
/* 背景图片居于右下 */
background-position: right bottom;
left top和top left效果一致
如果参数值是精确坐标，那么第一个是x坐标，第二个是y坐标。
如果只有一个值，那么这个值一定是x值，另一个默认垂直居中。
参数也可以是混合的，例如：center 20px
背景图像固定（背景附着）
background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动，后期可以制作视差滚动效果
scoll 背景图像是随对象内容滚动
fixed 背景图像固定
使用简写属性是，没有特定的书写顺序，一般习惯约定顺序为：
background:背景颜色 背景图片地址 背景平铺 背景图像滚动;
backgound: transparent url(image.jpg) repeat-y fixed top;
背景色半透明
background:rgba(0,0,0,0.3);- 最后一个参数是alpha透明度，取值范围在0~1之间
- 可以把最后一个参数的0省略：例如写为backgound:raba(0,0,0,.3)
- 背景半透明试着盒子背景半透明，盒子里面的内容不受影响
CSS的三大特性
层叠性
样式冲突：就近原则
样式不冲突：不会层叠
继承性
子标签会继承父标签的某些样式，如文本颜色和字号。
- 恰当地使用继承可以简化底阿妈，降低CSS样式的复杂性
- 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
行高的继承性
body {
font: 24px/1.5 微软雅黑;
}- 行高可以跟单位也可以不跟单位
- 然后子元素没有设置行高，则会继承父元素的行高为1.5
- 此时子元素的行高为：当前子元素的文字大小*1.5
- 行高1.5，可以根据自己文字大小自动调整行高
优先级
当同一个元素指定多个选择器，就会有优先级的产生
- 根据选择器的权重执行
#father {
color: red;
}
p {
color: pink;
} <div id="father">
<p>孩子</p>
</div>对于div标签，id选择器的权重是100，但是到了p标签（div的子标签），继承权重为0，而类选择器的权重是，所以最终显示粉色。
对于超链接来说，继承不会生效，因为浏览器默认制定了一个样式（蓝色的有下划线的）
权重叠加
如果是复合选择器，则会有权重叠加，需要计算权重
权重会叠加，但是永远不会有进位
div ul li ----> 0,0,0,3
.nav ul li --> 0,0,1,2
