携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情

CSS的学习及使用

1. Emmet语法

快速生成html结构以及快速生成CSS语法

• 生成标签直接输入标签名按tab键即可比如div 然后tab键，就可以生成
• 如果想要生成多个相同标签加上就可以了比如div3 就可以快速生成3个div
• 如果有父子级关系的标签,可以用>比如ul> li就可以了
• 如果有兄弟关系的标签,用+就可以了比如div+p
• 如果生成带有类名或者id名字的，直接写.demo 或者#two tab 键就可以了
• 如果生成的div 类名是有顺序的，可以用自增符号$
• 如果想要在生成的标签内部写内容可以用{}示

2. 快速格式化文档

在vscode中可以随便书写网页内容，最后可以右键格式化文档来使整个网页内容变得整齐且符合书写规范

此处为所设置的json文档：

{
    "code-runner.defaultLanguage": "javascript",
    "workbench.colorTheme": "Ayu Mirage",
    "files.autoSave": "afterDelay",
    "liveServer.settings.donotShowInfoMsg": true,
    "open-in-browser.default": "Google Chrome",
    "emmet.excludeLanguages": [
        
        "markdown"
    ],
    "editor.formatOnSave": true,
    "editor.formatOnType": true
}

3. 后代选择器

后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在 后面，中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。 语法:

元素1  元素2 {样式声明}

上述语法表示选择元素1里面的所有元素2 (后代元素)。

例如:

ul  li{样式声明}/*选择ul里面所有的li标签元素*/

• 元素1 和元素2中间用空格隔开
• 元素1是父级,元素2是子级,最终选择的是元素2
• 元素2可以是儿子,也可以是孙子等,只要是元素1的后代即可
• 元素1 和元素2可以是任意基础选择器

注意： 如果在元素一的位置遇到相同的标签，可以通过class或者id来进行区分，方便CSS的书写