第四天：emmet语法和CSS标签

第四天：Emmet语法和CSS标签

1. Emmet语法

• div * 3可以快速生成3个div
• 有父子级关系的标签，可以用> 比如ul > li
• 有兄弟关系的标签，可以用+ 比如div+p
• 如果生成带有类名或者id名字的，直接写.demo或者#two tab键就可以了

2. CSS的复合选择器

• 后代选择器， 例如： 元素1 元素2 {样式声明} ，表示选择元素1里面的所有元素2（后代元素）

• 子选择器， 例如：元素1 > 元素2{样式声明}，表示选择元素1里面的所有直接后代（子元素）元素2

• 并集选择器， 例如：元素1，元素2{样式声明}，表示选择多组标签，同时为他们定义相同的样式

• 伪类选择器， 例如： 用冒号（:）表示，比如:hover、:first-child,， 用于向某些选择器添加特殊的效果

  • 链接伪类选择器：为了确保生效，请按照LVHA的循环顺序声明：link - :visited - :hover - :active。记忆法：love hate

• :focus伪类选择器：用于选取获得焦点的表单元素。input:focus记住这个写法

3. CSS显示模式

• 块元素：

  ~

  、

  、

  、

  • 、
    1. 、
    3. 行内元素：、、、、、、、、、
    4. 行内块元素:、、，它们同时具有块元素和行内元素的特点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4xz8so7y-1664863578658)(C:\Users\syc\AppData\Roaming\Typora\typora-user-images\image-20220927182304391.png)]

4. CSS的背景

• 背景颜色, background-color

• 背景图片，background-image:none | url

• 背景平铺，background-repeat:repeat | no-repeat | repeat-x | repeat-y

• 背景图片位置，background-position: x | y | top | center |bottom | center | right;

• 背景图像固定（背景附着）， background-attachment:scroll | fixed

• 背景复合写法,background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

  background:transparent url（image.jpg）repeat-y fixed top;

parent url（image.jpg）repeat-y fixed top;

• 背景色半透明：background:rgba(0, 0, 0, 0.3)，后面必须是4个值