HTML与CSS学习 demo5

HTML与CSS学习

这篇笔记主要讲了CSS快捷键的使用方法，复合选择器，块元素，行内元素，CSS背景，CSS层叠性、继承性和优先级
这篇笔记是初学者写下的笔记，如有错误，欢迎前来指正。

Emmet语法(快捷键)

快速生成HTML结构语法

• 生成多个相同标签，标签名*3 (注，中间不要有空格)

• 父子级标签 例：ul和li 可以写 ul>li

  • 兄弟关系用+

• 可以直接 .nav ，生成<div class="nav"></div>

  • .可以换# 生成id标签
  • 可以更换其他标签，例：p.one 生成<p class="one"></p>

• 生成类名有顺序 .demo$*5

  • 注：$从1开始排序

• 生成标签内容带默认文字 例：div{默认文字}

示例：5个div标签，里面从1到5，属性class从demo1到demo5

.demo${$}*5

快速生成CSS样式语法

• tac可以快速生成test-align: center;
• 基本上都是首字母+参数

快速格式化代码

• 快捷键Shift+Alt+f

• 为了方便操作，在保存时自动格式化代码 (VScode)

  1. 文件->首选项->设置
  2. 搜索emmet.include
  3. 在setting.json的用户下添加下列语句

  "editor.formatOnType":true,
  "editor.formatOnSave":true
  

CSS复合选择器

• 复合选择器就是基础选择器结合而成的
• 包括：后代选择器，子选择器，并集选择器，伪类选择器

后代选择器 ※

• 又称包含选择器，可以选择父元素里的子元素
• 例，选择所有ol标签里的li都更改属性

ol li {
   
    color: red;
    /* 选择ol里的所有li元素 */
}

• 中间用空格隔开

• 更改的是后代的 (只要是后代都可以被选中，无论几代) 样式

• 对同名标签的区分

  • 对一个标签添加class属性
  • .class属性+后代名
  • 注：中间的过程标签可以省略

    <style>
      .nav li {
        
          color: pink;
      }
    </style>
    <ul class="nav">
        <li>pink</li>
    </ul>
  

子选择器

• 选择离得最近的子元素
• 元素1>元素2 {样式声明}

    <style>
      ul>li {
    
          color: pink;
      }
    </style>
    <ul>
        <li><a