CSSpart2

一、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 重要的	∞无穷大

六、CSS的注释