CSS

CSS的使用

1.内联样式（行内样式）
将样式声明在元素的style属性中
语法：
[ ^<p style=“color: red;”]:
注意：所有的样式都必须在双引号之内并且中间用分号进行分隔

2.内部样式
将样式声明定义在页面的Style属性中
步骤：
1.在head标签里面添加一个style标签
2.在style中书写样式
3.外部样式表
步骤：创建一个新的CSS文件
创建和HTML文件的关联
书写样式
[ ^<link href=“css/style01.css” type=“text/css” rel=“stylesheet”/]:

CSS样式表的特征

继承性

1、子级元素可以直接使用父级元素声明好的样式（这里不是所有的样式都可以被继承）

层叠性
一个匀速可以声明多个样式
注意：如果样式不冲突，多个样式规则中的样式可以层叠为一个。

优先级
样式定义产生冲突时按照不同的样式使用“优先级”来应用样式
在们三种引入方式中谁的优先级最高（行内样式表）
低：浏览器缺省值
中：外部样式表或者内部样式表
高：内部样式表

！improtant
作用：显示调整样式的优先级
语法：属性名称： 值！improtant
注意： IE浏览器 8 以下 不支持的
破坏了优先级规则CSS基础选择器

!](https://img-blog.csdnimg.cn/2019111121010458.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODIwMDM5,size_16,color_FFFFFF,t_70)CSS基础选择器

1.通用选择器
作用：匹配到页面中所有的元素
语法：*{样式1；样式2；}
优点：一个样式整个页面都可以被改变
缺点：效率低，尽可能的少用

2.标签选择器
作用：定义页面的某一个标签的默认样式
语法： 标签名{样式1；样式2}

3.类选择器
作用：由CSS定义好，可以被任意标记的Class属性值进行引用的选择器
语法： 1.在标签中添加 class属性 并且给他一个名字
2.在style中 用.类名{}方式进行样式编写
注意：类名：不能以数字开头，除了 _ , - 以外的特殊符号都不能使用

4.ID选择器
作用：针对指定id值得元素去定义样式
语法： 1.在元素中定义id属性
2.在style中用#id名进行样式编写
注意： id是唯一的
一定要对应页面某个元素的id值
class里面可以同时存在多个类名但是id不能存在多个id名
优先级 ID > 类 > 标签 > *

5.群组选择器
作用：选择器声明 以 ， 隔开的选择器列表
语法：
选择器1，选择器2，。。。。{样式1,；样式2}
ps：不同的选择器都可以被选中（都可以连着用）

6.后代选择器
后代：只要具备层级关系的元素，被嵌套的都可以称为后代元素
语法：
#div1 span{}
注意：中间用空格隔开，并且他们只能是父子级的关系

7.子代选择器
子代：只具备一级层级关系的子元素，被嵌套的（被包括的）称之为子代元素
语法 ： #div2 > span{}

8.伪类选择器
1.hover
9. 选择器的优先级
选择器的类型 权值
元素选择器 0,0,0,1
类选择器 0,0,1,0
伪类选择器 0,0,1,0
id选择器 0,1,0,0
内联样式 1,0,0,0
注意：选择器的权值加到一起 大的是优先 如果权值相同的话，后定义的优先

子代选择器和群主选择器的优先级

所以群主选择器的优先级大于子代选择器

边框阴影

属性 box-shadow
h-shadow 必须填的 阴影的水平偏移距离 正数的 右边 负数 左偏移
v-shadow 必须天的 垂直的偏移距离 + 下 - 上
blur 模糊距离 必须是正数
color 颜色
spread 阴影的大小
inset值 将默认的外阴影变成内阴影

盒子模型

1.元素的分类
1、块级元素：独占一行，对宽高生效，如果不给宽度撑满整行，如果不给
高度随着内容的增长而增长
2、行内元素：可以多个标签存在一行，对宽高不生效完全依靠内容去撑起宽高
3、行内块元素： 结合了行内和块级元素的特点，不仅是可以设置宽高而且还可以多个标签
存在一行。
4、如果有需要的话 可以运用display进行强转
inline 行内元素
block 块级元素时可以设置宽高的
inline-block 行内块元素：
none 不显示