这是我参与8月更文挑战的第3天，活动详情查看： 8月更文挑战
开发css代码的步骤
1.找元素，先外后内，先左后右，先上后下
2.写样式的步骤
尺寸、大体位置
边框背景
文本相关
微调
一、CSS语法规则
1.css的使用方法
1）三个css的常用属性
| 属性 | 作用 |
|---|---|
| color | 颜色 设置字体颜色 |
| background-color | 颜色 设置背景颜色 |
| font-size | 设置字号大小 |
color:red;background-color:green;font-size:12px;
2）行内样式（内联样式）
在元素style属性中，编写样式声明
内联样式不能重用，内敛样式默认优先级最高
项目中基本不用
element.style{color:red;}
3）内部样式
在<style></style>中编写
选择器{样式声明;}大括号结尾一定不能加分号
内部样式可以在页面重用
项目中偶尔出现内部样式
4）外部样式
单独创建一个.css文件
使用<link rel="stylesheet" href="文件位置">
rel="stylesheet" 这个属性一定要写
在多个页面重复使用
项目中广泛使用
2.css样式的特征
1）继承性
文本样式的继承
后代元素可以继承祖先元素的文本字体样式
a标签不继承祖先元素的字体颜色
2）层叠性
可以为一个元素设置多个css样式
只要css属性不冲突，就都能做用到这个html元素上
这种现象叫做堆叠
如果发生冲突按优先级显示
3）默认优先级
默认优先级 高 内联样式
就近原则
低 浏览器默认样式
F12中选择器的排序是按照优先级所排序
4）调整优先级
!important 让当前样式变得重要，直接获取最高优先级，比内联高
注意：style中不能使用!important
p{backgorund-color:red !importand}
二、基础选择器
1.选择器的作用
规范了页面中元素能够使用定义好的样式
选择题就是一个条件，页面中符合这个条件的元素，都可以使用定义样式
2.选择器详解
1）通用选择器
*{样式声明}
匹配也页面中所有样式
*为通配符，代价效率低，好处不用写那么多元素
项目中用到的场景：*{margin:0;padding:0:}
清除所有元素的内外边距
由于不同的浏览器默认的内外距的不同，我们需要统一
这个成为css reset 样式重置
css中要求，0可以不加单位
2）元素选择器，标签选择器
元素关键字{样式声明}
元素选择器一般设置某种元素中的公有样式
div{background-color:red;font-size:12px}
3）id选择器
只对页面中某一个元素生效
<div id="d1"></div>
#di{样式声明}
4）类选择器
把一些样式封装进一个类选择器中
这样想要哪个元素既可以用类class调用类名
注意：类名的定义，可以有字母、数字、_、-
不可以以数字开头
<style>
.className{样式声明}
</style>
<任意元素 class="className">
<!--多类选择器-->
<任意元素 class="className className2 className3">
<!--
分类选择器
元素选择器.类选择器{样式声明}
引用这个类名的这个元素才能使用这个样式
-->
<style>
p>.className{样式声明}
</style>
<!--分类选择器-->
<style>
.className,.className2{声明样式} 同时引用两个类元素，应用这个元素
</style>
5）群组选择器
选择器1，选择器2，选择器3{样式声明}
每一个选择器都应用定义的样式
6）后代选择器
通过后代关系，来匹配元素
后代关系：一级以多级的嵌套
选择器1 选择器2 选择器3.....{样式声明}
7）子代选择器
通过子代关系，来匹配元素
子代关系：一级嵌套
子代选择器和后代选择器可以混合编写
8）伪类选择器
css3语法定义改革，这个改革之前出的伪类，都是单:开头
在改革的时间内出的伪类，单双都支持
在改革之后出的伪类，都是双::开头
伪类选择器，匹配某一个元素在某种状态下应用的样式
:link{} 匹配连接未被访问过的状态---a标签专用
:visited{} 匹配连接被访问后的状态---a标签专用
:hover 匹配元素鼠标悬停时的状态
:active 匹配元素被激活时的状态（鼠标左键点住不松）
当上面4个伪类同时作用到一个元素上时
必须按照固定的编写顺序，才会都显示效果
爱恨原则 love&hate
:link :visited :hover :active
:focus 元素获取焦点时，显示的样式----input专用(button)
9）选择器的权值
后期代码量大起来之后，有可能不小心就把权值写低，导致写的样式显示不出来
权值代表当前选择器的重要程度，权值大的优先显示
!important >1000
内联样式 1000
id选择器 100
类选择器 10
伪类选择器 10
标签选择器 1
通用选择器* 0
继承的样式 无
权值的特点
1.当一个选择器包含多个选择器时，需要将所有选择器的权值相加，然后比较。
权值大的优先显示
2.当权值相同时，就近原则
3.群组选择器，每个选择器的权值单独计算
4.选择器的权值计算，不能超本身的最大数量级
