Emmet 语法
使用缩写来提高 html/css 的编写速度
快速生成 HTML 结构的语法
- 输入标签: 直接输入标签名, 再按 tab
- 生成多个相同的标签: 标签名 * 个数, 再按 tab
- 父子级标签, 用 >, 例: ul>li
- 兄弟关系的标签, 用 +, 例: div+p
- 如果生成带有类名或者id名字的, 用 .demo 或者 #demo
- 如果生成div类名是有顺序的, 用自增符号 $, 例: div.demo$*5
- 在生成的标签内部些内容可以用{}表示, 例:div.demo{$}*10
快速生成 CSS
直接按缩写就行, 如 text-align: center; 可以直接用 tac 输入
CSS 复合选择器
- 复合选择器可以更加准确, 更加高效的选择目标元素
- 复合选择器是由两个或者多个基础选择器通过不同方式组合成的
后代选择器
又叫包含选择器, 可以选择父元素里面的子孙元素.
语法: 元素1 元素2.....元素 n {样式声明}
- 每一个元素可以是任意的基础选择器
.nav li{
color: rgb(255,0, 0);
}
ul li a{
text-decoration: none;
color: aqua;
}
子选择器
只选择某元素的所有直接子元素
语法:
元素1>元素2>.....>元素 n {样式声明}
并集选择器
语法:
元素1, 元素2, ...,元素 n {样式声明}
同时选择多组标签, 为他们指定相同的样式
伪类选择题
向某些选择器添加特殊效果, 比如给链接添加特殊效果, 或者选择第n 个元素
用 : 表示
链接伪类选择器
a: link /*x选择所有未被访问过的链接*/
a: visited /*选择所有已经被访问过的链接*/
a: hover /*选择鼠标指针位于其上的链接*/
a:active /*选择活动链接(鼠标按下未弹起的链接)*/
注意要按上面顺序写, 实际开发不一定全部都用上
:focus 伪类选择器
选取焦点所在的表单元素
语法:
input: focus {样式声明}
例子:
input:focus {
background-color: pink;
color:red;
}
CSS 的元素显示模式
什么是元素显示模式
元素(标签)以什么方式进行显示, HTML 元素一般分为行元素和块元素
块元素
特点:
- 独占一行
- 高度, 宽度, 外边距, 内边距都可以控制
- 宽度默认是容器(父级)宽度的 100%
- 是一个容器(盒子), 内部可以防止行内或者块级元素
注意:
- 文字类元素内部不能使用块级元素, 如<p> 和 <h1>~<h6> 等内部不能放其他块级元素
行内元素
特点:
- 相邻行内元素在一行上可以显示多个
- 直接设置宽高无效
- 默认宽度是
- 行内元素内只能容纳行内元素或者文本
注意:
- 链接内部不能再放链接
- 特殊情况<a>内可以放块级元素, 最好转换成块级模式
行内块元素
如 <img/>,<input/>,<td>
特点:
- 和相邻行内元素在一行上, 但是直接会有空隙, 一行可以显示多个
- 默认宽度是内容的宽度
- 宽高,内外边距都可以控制
元素模式的转换
一种模式的元素需要另一种模式的特性
如需要增加链接 <a> 的触发范围
语法:
display: inline | block | inline-block
手机 电话卡
电视 盒子
笔记本 显示器
家电 插线板
出行 穿戴
智能 路由器
电源 配件
健康 儿童
耳机 音箱
生活 箱包