Emmet 语法

Emmet语法用于快速编写html标签与css样式

快速生成 html 结构

• 生成网页骨架：html: 5
• 生成标签：输入标签名，按下tab键
• 生成多个相同标签：输入标签名*number，按下tab键
• 生成父子关系标签：输入标签名>标签名，按下tab键
• 生成兄弟关系标签：输入标签名+标签名，按下tab键
• 生成带类名的：输入标签名#classname或者标签名.classname，按下tab键
• 类名自增

快速生成 css 样式

通过单词缩写快速生成 css 样式属性值

CSS 复合选择器

复合选择器可以更准确、高效定位元素

通过两个或者多个``基础选择器组成

复合选择器主要有以下几种：

• 后代选择器
• 子选择器
• 并集选择器
• 伪类选择器

后代选择器

后代选择器选择的是父元素里的后代元素

格式：标签1 标签2 ... 标签n { 样式声明 }

既可以选择孩子，也可以选择孙子。

选择器可以是任意基础选择器的组合

.nav ol li

子选择器

子选择器选择的是父元素里的子元素

格式：父元素>子元素 { 样式声明 }

并集选择器

并集选择器可以选择多组标签，为他们设定相同的样式

格式：元素1, 元素2, ... 元素n { 样式声明 }

伪类选择器

伪类选择器可以给某些选择器添加特殊效果(链接)，或者用于选择第1个或者第n个元素

链接伪类选择器

hover 伪类选择器种类：

• a:link(未访问)
• a:visited(已访问)
• a:hover(鼠标经过)
• a:active(鼠标点击但未抬起)

注意事项：

必须按照lvha顺序编写链接伪类选择器

focus 伪类选择器

focus伪类选择器用于选择获得焦点的表单元素

格式：input:focus { 样式声明 }

CSS 元素显示模式

块元素

常见的块元素有：h1-h6、p、div、ul、ol、li 等

• 块元素`独占一行``
• 可以对块元素的宽、高、内外间距进行设置
• 默认宽度为父元素的宽度
• 块元素内部可以放其他行内元素/块元素
• 文本块元素(p、h1-h6)内部不能放置块元素

行内元素

常见的行内元素有：a、文本格式化标签、span

• 多个行内元素一行展示
• 不可以直接对行内元素进行宽、高设置
• 行内元素默认宽度为内容的宽度
• 行内元素内部可以放文本或其他行内元素
• <a></a>标签内部不能放置<a></a>
• 特殊情况<a></a>内部可以放块元素

行内块元素

常见的行内块元素有：img、input、td，同时具有行内元素和块元素的特点：

• 多个一行展示
• 可以设置宽和高
• 默认宽度为内容宽度

显示模式转换

增加<a></a>链接触发范围

• display: bolck;
• display: inline;
• display: inline-block;

CSS 背景

CSS背景用于设置背景颜色、图片、平铺、图片位置、图片固定

背景颜色

通过background-color设置

• transparent(默认值)
• 和文本color一样

背景图片

通过background-image设置，小图片一般通过背景图片设置

既可以设置背景图片，也可以设置背景颜色，背景图片会压住背景颜色

• none
• url()

背景平铺

背景平铺就是背景图片重复展示，通过background-repeat设置

• no-repeat
• repeat(默认值)
• repeat-x
• repeat-y

背景位置

background-position: x y;属性可以改变背景图片的位置

• 方位名词：background-position: left top;，可以省略一个参数，第二个参数居中
• 精准单位：background-position: x y;
• 混合单位：严格顺序，第一个为x，第二个为y

背景固定

background-attchment用于设置背景图片是随着页面滚动，还是随着页面固定

• scroll(默认值)
• fixed

背景复合写法

background: 背景颜色 背景图片 背景平铺 背景图片滚动 背景图片位置;

背景颜色半透明

rgba(0, 0, 0, 0.3)，a 的取值范围为 0-1，越小越淡.

CSS 三大特性

• 层叠性
• 继承性
• 优先级

层叠性

为了解决样式冲突，就近原则

继承性

子标签继承父标签的某些样式：文本颜色和字号/(text-、font-、line-、color)

line-height可以不设置单位，最终显示当前元素``文字大小的倍数：font: 12px/1.5 'Microsoft YaHei'

优先级

当给同一个元素指定多个选择器名，就会有优先级产生

• 选择器相同：执行层叠行
• 选择器不同：执行优先级

注意事项：

• 权重计算有四位，但是不会进位
• 从左至右判断

权重叠加

如果是复合选择器，则会有权重叠加问题