1.文本格式化标签
加粗
倾斜
删除线
下划线
2.快捷键
快捷注释 : ctrl + /
1.通配符 :*
2.复合选择器
后代选择器: 元素1 元素2 … { 声明样式 }
表示选择元素1里面的所有元素2
注意中间由空格分开
子元素选择器:元素1 > 元素2 {样式声明}
元素一是父级,元素二为子集
注意中间用 > 隔开
只选择子集 不选择子集的子集
并集选择器:元素1,
元素2 { 样式声明 }
可以选择任何选择器
语法规范 最后一个选择器不用加,
div,
p,
.fox {}
链接伪类选择器
伪类选择器最大的特点 用(:)表示
超链接伪类选择器声明顺序:link :visited :hover :active
focus伪类选择器(把获得光标的input表单元素选取出来)
用于选取获得焦点的表单元素,焦点是光标,一般情况是<input *>类表单元素才能获取
3.css的元素显示模式
元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 |
行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或其他行内元素 |
块内块元素 | 一行放多个行内块元素 | 可以设置宽度高度 | 它本身内容的宽度 |
4.显示模式的转换
- 转换为块元素:display: block;
- 转换为行内元素:display: inline;
- 转换为行内块元素:display: inline-block;
5.Snipaste截图工具
F1截图
F3贴图
Alt取色
6.背景色半透明
background: rgba(0,0,0,0.3);
rgba(红,绿,蓝,透明度) 透明度取值单位 0 ~ 1
7.盒子模型
border:边框 (宽度 样式 颜色)
content:内容
padding:内边距
margin:外边距 (盒子与盒子间的距离)
8.合并相邻边框
border-collapse:collapse;
9.外边距水平居中
条件:①块级元素设置了宽度
②块级元素的外边距都设置了auto
1.margin-left:auto;magin-right:auto;
2.margin:auto;
3.margin:0 auto;(上下边距为0 左右边距自动)
10.行内元素和行内快元素居中
给父级元素添加 text-align: center;
11.float
float属性用于创建浮动框,将其移到一边,直到左边缘触及包含块或另一个浮动框的边缘
特点:
1.脱离普通标准流的控制
2.浮动的盒子不再保留原先的位置
3.如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并且顶端对齐排列
4.任何元素都可以浮动,不管原先处于什么模式。添加浮动后就可以直接设置高度和宽度
浮动注意点:
1.先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置
2.一个元素浮动了,理论上其余的兄弟元素也要浮动(只会影响后面的元素)
12.清除浮动
- 由于浮动元素不再占用原文档的流的位置,所以它会对后面的元素排版产生影响