CSS总结
时间：2023-06-17 12:07:00
目录
CSS概念
理解
CSS构成
注意：
CSS里面的注释
CSS目的
CSS分类
属性相同时CSS优先级
CSS选择器
选择器优先级
外部CSS
外部CSS创建介绍方法1
引入外部样式表（放在哪里都可以）
外部CSS创建介绍方法2
案例
link和import之间的区别
行内CSS
内部CSS
内部CSS与外部CSS
选择器
标签名选择器-toc" style="margin-left:40px;">标签选择器
类选择器
交集选择器
格式：
案例：
id选择器
注意：
通配符选择器
分组选择器
包括武器的选择
伪类选择器
结构性伪类选择器
目标伪类选择器
UI假元素状态选择器
否定伪类选择器
动态伪类选择器
层级选择器
属性选择器
模糊匹配的属性选择器
伪元素(行内元素)
CSS基本属性
文本属性
color属性写法
text-transform属性值
阴影案例的文本
列表属性
list-style-position
list-style合并属性/p>
背景属性
background-repeat属性
background-position属性
背景图片大小
background-attachment属性
background-clip属性
背景复合属性
设置内容可见性
visibility属性
设置透明度
opacity属性
光标属性
cursor属性
空余空间
属性值
文档流
标准流限制如下
脱离文档流
浮动
注意：
浮动规则案例
浮动副作用
清浮动
清除浮动方式
清浮动属性
overflow属性让浮动父元素计算高度
溢出属性
overflow属性值
overflow属性分类
定位
注意：
粘性定位
定位里的层级
层级属性
注意：
绝对定位与浮动的区别
宽高自适应
宽度自适应
自适应属性
min-height属性
窗口自适应
CSS里面以%为单位
cala函数
注意：
盒子模型
边框
border属性（复合属性）
边框分类
内边距
内边距分类
padding：复合内边距
外边距
外边距分类
margin复合外边距
注意：
外边距的特性
元素显示类型
块元素
行内元素
行内块元素
盒子阴影
属性值
圆角边框
属性值
两边值的个数对于值的分配遵循以下原则
怪异盒模型
标准盒模型
怪异盒子模型·
理解属性值
弹性盒子
功能：
1.默认（说明可以改）让子元素（包括块级）横向排列
2.子元素是行内元素则直接转化为块级元素
3.设置一个元素相对于父盒子的水平垂直居中——margin: auto;
设置弹性盒子垂直排列方式
主轴对齐方式
属性值
调整侧轴排列
属性值
调整是否挤压元素宽度
属性值
折行
属性值
调整折行之后的行间距
属性值
项目对齐方式
属性值
项目调整顺序
剩余宽高
网格布局
flex与grid布局
容器和项目
网格布局中的属性
容器属性
触发网格布局
行列划分
属性值n的写法
列间距（复合属性）
指定区域
网格布局对齐方式
grid-auto-flow属性
属性值
单元格项目对齐
单元格内容对齐
网格布局项目属性
网格线合并
移动端
模拟器上显示的分辨率
移动端布局
设置滚动条隐藏（全局生效）
多列布局（瀑布流）
属性
响应式布局
常见的布局方式
响应式布局设计原则
媒体查询
媒体查询操作方式
设备类型（默认为all）
注意：
常用媒体查询
PC端或大屏幕设备
通用断点
字体引入
语法规则
rem布局开发
px、em、rem单位
基于375px宽度设计的网页在不同宽度客户端等比例缩放问题
vh与vm单位
注意：
精灵图
图片整合的优势
两栏布局与三栏布局
2种3栏布局方法
第一种
第二种
CSS渐变
线性渐变
direction属性
direction也支持角度渐变
径向渐变
控制渐变
注意：
center属性改变渐变起点
渐变起点：
重复渐变
重复线性渐变
重复径向渐变
过渡
transition属性（复合属性）
属性值
transition-timing-function属性值
逐帧动画
贝塞尔曲线
transform（）属性（复合属性）
属性值translate（值1，值2）
属性值scale（）
改变中心点位置为左上角（默认值为center）
旋转
rotate()属性
多属性值的使用
1.位移与缩放
2.位移与旋转
倾斜的
属性：skew()
关键帧动画
animation与transition的区别
animation属性
动画持续时间
动画延迟时间
动画过渡类型
动画循环次数
动画在循环中运行方向
动画运行状态
动画填充模式
关键帧动画
3D
属性值
3D位移
设置景深
3D旋转
3D缩放
CSS概念
定义：层叠样式表，用来修饰html的，目前遵循的W3C发布的CSS3.0
理解
- 每个CSS样式由2部分组成，即选择符和声明，声明又分为属性和和属性值
- 属性必须发布放在花括号中，属性与属性值用：连接
- 每条声明用；结束
- 当一个属性有多个属性值时，属性与属性值不分先后顺序，用空格隔开
- 在书写样式过程中，空格，换行等操作不影响属性的显示
CSS构成
style>
h1{
color: rgb(239, 21, 21);
font-style: italic;
}
注意：
- CSS选择器必须放在style标签内
- style标签放在哪里都可以，并且可以写多个
- CSS优先级body内style高于head内style
- style标签是html提供的标签
CSS里面的注释
内容：/*注释内容*/
CSS目的
使用CSS属性来实现最终可以将CSS代码和HTML代码进行分离，同时也可以提高代码的复用性
CSS分类
- 内部CSS：使用html提供的style标签把css代码包起来
- 外部CSS：从外部引入CSS
- 行内CSS：当前行有效，给标签内加一个style属性
属性相同时CSS优先级
行内CSS>内部CSS>外部CSS
注意：加属性值后加!important 的所对应的属性优先级最高
h1{
color: rgb(228, 15, 33)!important;
}CSS选择器
- 标签名选择器
- class选择器
- 交集选择器
- id选择器
- 属性选择器
- 分组选择器
- 通配符选择器
- 包含选择器
- 伪类选择器
- 层级选择器
选择器优先级
外部CSS
外部CSS创建引入方式1
引入外部样式表（放在哪里都可以）
属性
- link：本页面能和外部页面进行链接
- href：表示本页面要链接的CSS文件的地址
- type：表示本页面链接到的页面类型，这里链接的是CSS样式表（不写也可以）
- rel：用来说明本页面与链接页面之间的关系
注意：将内部样式表里的资源剪切到css文件中（不包含style标签）并在表中引入
外部CSS创建引入方式2
案例
注意：css.html与index.css在同一个文件夹下
外部css
我是大神
/* index.css */
h1{
color: aqua;
}link和import之间的区别
行内CSS
结构：
我是div
行内css
我是div
内部CSS
内部css
实验
内部CSS与外部CSS
- 内部CSS标签与外部CSS标签在页面内可以引入多个
- 内部CSS标签与外部CSS标签放在页面内哪里都可以
选择器
目的：要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制
标签名选择器
实验
类选择器
111111
222222
333333
111111
222222
333333
交集选择器
格式：
选择器1选择器2{
属性:属性值;
}
注意： 选择器和选择器之间没有任何连接符号
案例：
我是div
我是p
一段话
二段话
三段话
id选择器
111111
222222
333333
注意：
- 当我们使用id选择符时，应该为每个元素定义一个id属性
- id选择符的语法格式是“#”加上自定义的id名
- 起名是要取英文名，不能用关键字（所有标记和属性都是关键字）
- 一个id名称只能对应文档中的一个具体元素对象（唯一性），和类不同
通配符选择器
/* 通配符选择武器，不管什么都具有下面的属性 */
*{
color: aqua;
}分组选择器
111111
222222
333333
包含选择武器
我是一段话
我是一段话
伪类选择器
结构性伪类选择器
道生一
一生二
二生三
三生万物
道生一
一生二
二生三
目标伪类选择器
a
b
c
UI元素状态伪类选择器
E:focus：匹配获取焦点的元素E
总有一天，我会改变世界
否定伪类选择器
- 111
- 222
- 333
动态伪类选择器
语法（style里面有顺序如下）
层级选择器
- 111
- 222
- 333
- 444
- 555
- 111
- 222
- 333
- 444
- 555
注意：以上两种选择器生效于兄弟节点
属性选择器
模糊匹配的属性选择器
- class^="b"：查找以b开头的
- class$="b"：查找以b结尾的
- class*="b"：查找包含b的
伪元素（行内元素）
i am a dog
修改input中的placeholder默认颜色
注意：-webkit-表示兼容WebKit browsers（Chrome的内核）
CSS基本属性
文本属性
word-spacling：词间距
color：字体颜色
text-transform: capitalize;
text-overflow：ellipsis；（溢出并隐藏后的文本用…显示）
text-shadow: 水平方向位移 垂直方向位移 模糊程度 阴影颜色;（文本阴影——单）
text-shadow: 水平方向位移 垂直方向位移 模糊程度 阴影颜色，水平方向位移 垂直方向位移 模糊程度 阴影颜色;（文本阴影——多）
注意：多阴影之间的多个阴影用，隔开
color属性写法
- 直接写英文字母
- rgb形式写灰度值，有4个参数，前3个为rgb灰度值，最后一个为透明度
- #加6个16进制数，其中每2个16进制代表rgb的每个灰度值
text-transform属性值
- capitalize： 每一个单词首字母转大写
- uppercase：每一个字母均转大写
body>
我是一段话
