Emmet语法(快捷键 + Tab键)
HTML的快捷键
-
标签 + Tab键: 自动生成对应的双标签或者单标签
-
标签 * n + Tab键: 自动生成n个相同的对应的双标签或者单标签
-
父标签 > 子标签: 自动生成父子标签, 比如: ul > li
-
兄弟标签用 + : 比如: div+p
-
如果生成带有类名或者id名字的,直接写 标签.demo -> 标签的class="demo" d标签#banner -> 标签id="banner"
-
生成的class有顺序 标签.demo$*5 class = "demo1", "demo2", "demo3"... "demo5" $从1开始排序
-
如果想在标签内部写内容,可以用 {}表示. eg. div{hello, everyone$} *5
CSS的快捷键(简写,首字母)
快捷键 | + Tab后 实际代码 |
---|---|
tac | text-align: center; |
w100 | width: 100px; |
h200 | height: 200px; |
ti2em | text-indent: 2em; |
lh26px | line-height: 26px; |
tdn | text-decoration: none; |
... | ...... |
格式化代码(VScode): shift+alt+F
VScode: 设置精确搜索: format on save 勾选会在代码保存时自动格式化代码
复合选择器
复合选择器 | 实例 | 作用 |
---|---|---|
后代选择器 | .nav(class) ol li a {color: pink;} | 指定父标签里面的子标签(可以多层) |
子选择器 | div > p {color: pink;} | 只会选择父标签里面的一级子标签(亲儿子,不包括孙子等) |
并集选择器 | div, p {color: pink ;} | 可以选择多组标签(任何形式的选择器), 定义同一样式 |
伪类选择器
链接伪类选择器: 注意声明顺序, 链接有默认样式,修改需要单独指定
-
a:link {} : 未访问的链接
-
a:visited {} : 已访问过的链接
-
a:hover {} : 鼠标经过该链接
-
a:active{}: 鼠标点击该链接
开发常用: a {} (指定链接样式) + a:hover {} (指定鼠标经过链接)
focus伪类选择器 : 选取有光标(焦点)的表单元素
格式: input: focus { backgroud-color: yellow;}
CSS元素显示模式
块元素
常见的块元素: < h1> ~< h6>、 < p> 、 < div> 、 < ul> 、 < ol> 、 < li>等, < div> 最典型
-
独占一行
-
高度、宽度、外边距和内边距(盒子大小)都可以控制
-
宽度默认为容器(父级宽度, body)的100%, 高度不是
-
块元素是一个容器,里面可以装块元素和行内元素
注意: 文字类的块元素里面不能再放块元素,特别是< div >, 比如< h1>、 < p>
行内元素
常见的行内元素: < a> 、 < strong> 、 < b> 、 < em> 、 < i> 、 < span>等, < span> 最典型
-
相邻的行内元素可以显示到一行上
-
高度、宽度直接设置是无效的
-
宽度默认为本身内容的宽度
-
行内元素里面只能容纳文本或其他行内元素, 不允许放块元素
注意: < a> 里面不能放 < a> , 但是可以包含块级元素
行内块元素
常见的行内块元素: < img /> 、 < input /> 、 < td> , 他们同时具有行内元素和行内块元素的特点
-
相邻行内块元素可以显示在一行上, 但是中间会有空隙(行内块元素)
-
默认宽度就是它本身的宽度(行内元素特点)
-
但是高度、宽度、外边距和内边距(盒子大小)都可以控制(块元素特点)
元素显示模式总结
元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
---|---|---|---|---|
块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度,ti2em | 容器的100% | 容器可以包含任何标签 |
行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或者其他行内元素 |
行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 它本身内容的宽度 |
元素显示模式转换
a { /* 最典型的应用!! */ width: 200px; height: 200px; background: #000; display: block; /* 独占一行,指定宽高 */ } div { width: 100px; height: 100px; background-color: #fff; display: inline; /* 转换成行内元素 */ } span { width: 100px; height: 100px; background-color: rgb(12, 25, 212); display: inline-block; /* 转换成行内块元素 */ }
单行文字垂直居中: line-height = height 让文字行高(三个部分,上行距、下行距和文字大小)等于盒子的高度
line-height > height 文字偏下,上空隙+文字一半 > 大于盒子的一半
line-height < height 文字偏上,上空隙+文字一半 < 大于盒子的一半
CSS背景
-
背景颜色: background-color: transparent (透明的,默认值) | color(颜色)
-
背景图片: background-image: none(默认) | url(imag.png) : 便于控制位置,小的装饰性图片或者超大图片
-
背景平铺: repeat(平铺) | no-repeat(不平铺) | repeat-x(沿着x轴平埔) | repeat-y(沿着y轴平铺)
-
背景附着: background-attachment: scroll (默认,滚动的) | fixed(固定的)
-
背景图片位置(background-position) : x y
length:百分数 | 由浮点数和单位标识符组成的长度值 前后顺序有关,第一个X轴坐标,第二个Y轴坐标
position: top | center | bottom | left | right (方位名词)前后顺序无关 两个组合,如果只有一个方位名词另一个默认居中
混用:一个具体数值,一个方位名词也是可以的,这时前后顺序有关,第一个X轴坐标 ,第二个Y轴坐标
Background复合性写法
background: color url() repeat attachment position (无顺序要求) background: black url(imag.png) no-repeat fixed top 20px
CSS3的背景色半透明:
background: rgba(0, 0, 0, 0.3) # 前三个代表颜色,最后一个代表透明度(0~1), 只能改变单一背景色的透明度,对背景图片和上面的内容没影响