Emmet 语法

快速生成HTML结构语法

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

快速生成CSS

比如 w200 按 tab ，可以生成 width:200px;
比如 lh26 按 tab ，可以生成 line-height:26px;

CSS 的复合选择器

复合选择器可以更准、更高效的选择目标元素（标签）
复合选择器是由两个或多个基础选择器，通过不同的组合方式而成的
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

后代选择器

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

子选择器

子元素选择器只能选择作为某元素子元素(亲儿子)的元素。
其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接
这里的子,指的是亲儿子。不包含孙子重孙子之类。

.class>h3 {color:red;font-size:14px;}

并集选择器

如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。

任何形式的选择器（包括标签选择器、class类选择器 id选择器等），都可以作为并集选择器的一部分。
并集选择器通常用于集体声明，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为和的意思。

.one, 
p , 
#test {color: #F00;}  
表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。 
通常用于集体声明。

伪类选择器

伪类选择器用于某些选择器添加的效果，比如给连接添加效果，或选择第1个，第n个元素。书写的最大特点是用冒号（:）表示，比如：hover :first-child。用于向某些选择器添加特殊的效果。写的时候，他们的顺序尽量不要颠倒,按照lvha的顺序。否则可能引起错误。

链接伪类选择器，是利用交集选择器.

a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标移动到链接上
a:active 选定的链接这里运行后默认执行，所以看不到黑色链接

focus 伪类选择器

focus 伪类选择器用于选取获得焦点的表单元素焦点就是光标，一般情况< input >类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

input: focus {
  background-color:yellow;
}

CSS 的元素选择模式

元素显示模式就是元素（标签）以什么方式进行显示，比如< div >自己独占一行，比如一行可以放多个< span >

HTML元素一般分为块元素和行内元素两种类型

块元素

常见的块元素有< h1 >~< h6 >、< p >、< div >、< ul >、< ol >、< li >等，其中< div >标签是最典型的块元素

块级元素的特点：

①比较霸道，自己独占一行
②高度，宽度，外边距以及内边距都可以控制
③宽度默认是容器（父级宽度）的100%
④是一个容器及盒子，里面可以放行内或者块级元素

注意：

文字类的元素neural不能使用块级元素
< p >标签主要用于存放文字，因此< p >里面不能放块级元素，特别是不能放< div >
< h1 >~< h6 >等都是文字类快级标签，里面也不能放其他块级元素

行内元素

常见的行内元素有< a >、< strong >、< b >、< em >、< span >等，其中< span >标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

特点

①相邻行内元素在一行上，一行可以显示多个
②高、宽直接设置是无效的
③默认宽度就是它本身内容的宽度
④行内元素只能容纳文本或其他行内元素

注意

链接里面不能再放链接
特殊情况链接< a >里面可以放块级元素，但是给< a >转换一下块级模式最安全

CSS基础学习|集创考核第2篇笔记