Web前端开发学习笔记04--CSS

1、Emmet语法

1.1 生成HTML结构语法

• 直接输入标签名按Tab键生成
• 生成多个相同标签："标签数量"+tab，如div3
• 父子级关系标签：“标签>标签”+tab，如ol>li
• 兄弟关系标签：“标签+标签”+tab，如div+p
• 生成带有类名或id名字，直接写.demo或者#demo ，再按tab 键
• 若需生成的div类名是有顺序，用 “div$*数值” + tab
• 生成的标签内部有写内容，用"标签{内容}" + tab；生成的内容自增则如 “div{$}*数值”

1.2 生成CSS样式语法

CSS基本采取简写形式

例如：

• w200 + tab 生成 width：200px;
• lh26 + tab 生成 line-height: 26px;
• tdn + tab 生成 text-decoration: none;

1.3 快速格式化代码

1. 进入设置页面，搜索emmet.include;
2. 在用户的settings.json下添加：“editor.formatOnType”: true 和
   “editor.formatOnSave”: true 并保存

设置完成后写完代码保存页面时具有自动格式化代码的能力

2、CSS的复合选择器

定义：复合选择器是建立在基础选择器之上，对基本选择器进组合形成的

常用的复合选择器：

选择器	作用	特征	隔开符号及用法
后代选择器	用来选择后代元素	可以是子孙后代	符号：空格，用法：.nav a
子代选择器	选择最近一级元素	只选亲儿子	符号：>，用法：.nav>p
并集选择器	选择某些相同样式的元素	用于集体声明	符号：逗号，用法：.nav,.header
链接伪类选择器	选择不同状态的链接	跟链接相关	记住a{}和a:hover实际开发写法
:focus选择器	选择获得光标的表单	跟表单相关	记住input:focus写法

2.1 后代选择器

任意基础选择器的组合

语法：

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

如：

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

注意：

• 元素1 和元素2 用空格隔开
• 元素1 是父级，元素2 是子级，最终选择的是元素2
• 元素2 只要是元素1 的后代即可
• 要一层一层的走
• 出现相同标签时，可以定义元素1的类名，然后 “类名 元素2 元素3 {样式内容}”即可，如定义<ul class="nav">可使用.nav li a

2.2 子元素选择器（子代选择器）

子元素选择器只能选择作为某元素的最近一级子元素

语法：

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

如：

div>a {
   样式声明}        /*选择div里面所有最近一级的a标签元素*/

注意：

• 元素1 和元素2 用大于号隔开
• 元素1 是父级，元素2 是子级，最终选择元素2
• 元素2 必须是亲儿子，儿子的后代不选择

2.3 并集选择器

并集选择器可以选择多组标签，同时为他们定义样式，任何形式的选择器都可以作为并集选择器的一部分

语法：

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