CSS Emmet快捷键+复合选择器+显示模式（重点）+背景设置

Emmet语法(快捷键 + Tab键)

HTML的快捷键

1. 标签 + Tab键: 自动生成对应的双标签或者单标签

2. 标签 * n + Tab键: 自动生成n个相同的对应的双标签或者单标签

3. 父标签 > 子标签: 自动生成父子标签, 比如: ul > li

4. 兄弟标签用 + : 比如: div+p

5. 如果生成带有类名或者id名字的,直接写 标签.demo -> 标签的class="demo" d标签#banner -> 标签id="banner"

6. 生成的class有顺序 标签.demo$*5 class = "demo1", "demo2", "demo3"... "demo5" $从1开始排序

7. 如果想在标签内部写内容,可以用 {}表示. 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), 只能改变单一背景色的透明度，对背景图片和上面的内容没影响