一、emmet语法
1.快速生成HTML结构语法
2.快速生成CSS结构语法
采取简写形式
w200 width:200px
lh26:line-height:26px
3.快速格式化代码
VScode:右键:格式化代码 或者 ctrl+alt+f
二、CSS的复合选择器
1.后代选择器(重要)
可以选择父元素里的所有子孩子
元素1 元素2 {
样式声明;
}
- 元素12之间用空格隔开
- 2是1的后代,儿子孙子都可以,可以一层一层的查
- 只改变了2的样式
2.子选择器(重要)
只能选择亲儿子元素,孙子不能选
元素1>元素2{样式声明}
3.并集选择器(重要)
可以选择多组标签同时为他们定义相同的样式。通常用于集体声明。
元素1,元素2{样式声明}
- 各选择器通过英文都好连接而成,任何形式的选择器都可以作为并集选择器的一部分
- 逗号意思是:和
- 最好是竖着写
4.伪类选择器
用于向某些选择器添加特殊的效果,比如选择第1个,第n个
使用冒号表示 :
1.链接伪类
a:link | 选择所有未被访问的链接 |
a:visited | 选择所有已被访问的链接 |
a:hover | 选择鼠标指针位于其上的链接 |
a:active | 选择活动链接(鼠标按下未弹起的链接) |
- 按照link visited hover active LVHA顺序声明
- a链接在浏览器中具有默认样式,所以实际工作中都需要给链接单独指定样式
2.:focus伪类选择器
选取获得焦点的表单元素
input:focus{
background-color:yellow;
}
总结
选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
后代选择器 | 选择后代元素 | 可以是子孙后代 | 较多 | 符号是空格 .nav a |
子代选择器 | 选择最近一级元素 | 只选亲儿子 | 较少 | 大于,.nav>p |
并集选择器 | 选择某些相同样式的元素 | 可以用于集体声明 | 较多 | 逗号,.nav,.header |
链接伪类选择器 | 选择不同状态的链接 | 跟链接相关 | 较多 | 重点记住a{}和a.hover实际开发的写法 |
:focus选择器 | 选择获得光标的表单 | 跟表单相关 | 较少 | input:focus |
三、CSS的元素显示模式
1.块元素
2.行内元素
3.行内块元素
总结
元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
块级元素 | 一行只能放一个块级元素 | 可设置宽度和高度 | 容器的100% | 容器级可以包含任何标签 |
行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或则其他行内元素 |
行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 它本身内容的宽度 |
4.元素显示模式转换
一个模式的元素需要另外一种模式的特性
- 转换为块元素:display:block;
- 转换为行内元素:display:inline;
- 转换为行内块:display:inline-block;
5.一个小工具snipaste
6.单行文字垂直居中
让文字的行高等于盒子的高度
如果行高小于盒子高度文字片上;行高大于盒子高度文字偏下。
四、CSS的背景
1.背景颜色
background-color:颜色值;
默认值为transparent(透明的)
2.背景图片
常见于logo或一些装饰性的小图片或超大的背景图,优点是非常便于控制位置。
background-image:none | url()
3.背景平铺
background-repeat:repeat | no-repeat | repeat-x | repeat-y
属性 | 说明 |
repeat(默认) | 纵向横向平铺 |
no-repeat | 不平铺 |
repeat-x | 横向平铺 |
repeat-y | 纵向平铺 |
背景图片会压住背景颜色
4.背景位置
background-position:x y;xy可以使用方位名词或精确单位
参数值 | 说明 |
length | 百分数 | 由浮点数和单位标识符组成的成长值 |
position | y:top center bottom | x:left center right |
(1)参数是方位名词
- 如果是方位名词两个值的顺序不影响
- 如果只指定了一个方位名词,另一个省略,则第二个值默认居中对齐
(2)参数是精确单位
- 第一个是x 第二个是y
- 只制定一个值那一定是x,另一个默认垂直居中
(3)混合单位
第一个是x,第二个是y。可以一个用方位一个用精确
5.背景图像固定
设置图像是否固定或者随页面的其余部分滚动
background-attachment后期可以制作视差滚动效果
参数 | 作用 |
scroll(默认) | 背景图像是随着对象内容滚动 |
fixed | 背景图像固定 |
6.复合写法
background:背景颜色 图片地址 平铺 滚动 位置(没有特定的书写顺序)
各个属性用空格隔开
7.背景色半透明
background:rgba(0,0,0 , 0.3)
red blue blue alpha透明度0~1
可以直接写.3 只能把背景色半透明 但里面的内容没影响
总结
属性 | 作用 | 值 |
background-color | 背景颜色 | 预定义的颜色值/十六进制/rgb代码 |
background-image | 图片 | URL路径 |
background-repeat | 是否平铺 | repeat/no-repeat/repeat-x/repeat-y |
background-position | 位置 | length/position 分别是x,y坐标 |
background-attachment | 附着 | scroll(背景滚动)/fixed(背景固定) |
背景简写 | 书写更简单 | 背景颜色 图片地址 平铺 滚动 位置 |
背景半透明 | 背景颜色半透明 | background:rgba(0,0,0,0.3)四个值 |
五、CSS的三大特性
1.层叠性
2.继承性
3.优先级
选择器 | 选择器权重 |
继承或* | 0,0,0,0 |
元素选择器 | 0,0,0,1 |
类选择器,伪类选择器 | 0,0,1,0 |
ID选择器 | 0,1,0,0, |
行内样式 | 1,0,0,0 |
!important 重要的 | ∞无穷大 |