CSS学习中Emmet语法、复合选择器、元素显示模式、背景的一些总结

CSS学习第二天

1. Emmet语法

1. 快速生成HTML结构语法
   1. 生成标签 直接输入标签名+TAB键即可；比如 div+TAB键，就可以生成 <div> </div>。
   2. 想要生成多个相同标签 加上 * 就可以；比如 div*3 就可以快速生成3个div。
   3. 有父子级关系的标签，可以用 >； 比如 ul > li 即可。
   4. 有兄弟级关系的标签，可以用 +； 比如 div + p 即可。
   5. 生成带有类名或者id名字的，直接写 .demo或者#two tab键即可。
   6. 生成的div类名是有顺序的，可以用自增符号$；例如 .demo$*5。
   7. 生成标签内部写内容可以用{}表示，例如div{$}*3。
2. 快速生成CSS样式语法
   $css$基本采取简写形式即可，每个单词的第一个字母即可。
   1. 比如 w200 + tab键 可以生成width:200px;
   2. 比如 lh26 + tab键 可以生成line-height:26px。

2.CSS复合选择器

  两个或多个基础选择器，通过不同的方式组合而成。

1. 后代选择器（重要）
   又称为包含选择器，可以选择父元素里面的子元素，（包括儿子和孙子）。写法：外层标签写前面，内层标签写后面，中间用空格分开。当标签发生嵌套时，内层标签就成为外层标签的后代。

元素1 元素2 {样式说明;}
ul li a {样式说明;} /*选择ul标签里面li标签的a标签元素*/

2. 子选择器（重要）
   只能选择元素最近一级子元素，用大于号隔开，即亲儿子元素。

元素1 > 元素2 {
   样式说明;}
div > p {
   样式说明;} /*选择div里面所有最近一级 p 标签元素*/

3. 并集选择器（重要）
   可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明，用逗号隔开，任何形式的选择器都可以作为并集选择器的一部分。

元素1 ， 元素2 {
   样式说明;}
ul,div {
   样式声明；} /* 选择ul和div标签元素*/

4. 伪类选择器
   用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。用冒号表示。

• 链接伪类选择器

选择	含义
a:link	选择所有未被访问的链接
a:visited	选择所有已访问的链接
a:hover	选择鼠标指针位于其上的链接
a:active	选择活动链接（鼠标按下未弹起的链接）

• 严格按照 LVHA 顺序声明。

• focus伪类选择器
  选取获得焦点（光标）的表单元素。光标一般情况下<$input$>类表单元素才能获取，因此这个选择器主要针对表单元素来说。

input:focus {
   
  background-color:yellow;
}

1. 复合选择器总结

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

3.CSS元素显示模式

元素显示模式就是元素（标签）以什么方式显示。分为块元素和行内元素。

1. 块元素
   常见的块元素有< h 1 h1