css学习（2）

emmet语法

emmet语法可以通过缩写的形式来提高html/css的编写速度

生成标签：输入标签名按下tab键生成多个相同标签：如div*3生成父子级关系：如ul>li生成兄弟级关系：如di注册公司条件v+p生成带有类名或id名字的标签：标签名称.demo或#two按下tab键就可以了生成div类名有序：用自增符号$标签生成中带有默认文字：{}css中的属性都可以首字母缩写综合评价招生

css的元素显示模式

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

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

块元素

h1～h6，p，div，ul，ol，li等为最常见的块元素，特点为：

独占一行高度，宽度，外距和内距都可以控制宽度默认为父级的100%是一个容器及盒子，内部可以是块元素或者行内元素（文字类的元素内不能使用块级元素）

行内元素（内联元素）

a，strong，b，em，span等为最常见的行内元素，特点为：

一行内可以有多个行内元素宽度和高度直接设置是无效的默认宽度是本身内容的宽度行内元素只能容纳文本或其他行内元素（a里面不能再放a元素，a中可以包含块级元素）

行内块元素

img，input，td等为最常见的行内块元素，特点为：

一行内可以有多个行内块元素，两个行内块元素中间会有空白的缝隙高度，宽度，外距和内距都可以控制默认宽度是本身内容的宽度

元素显示模式转换

行内元素转换为块级元素

display:block

a {width: 150px;height: 50px;background: pink;display: block;}

块级元素转换为行内元素

display:inline

div {width: 300px;height: 100px;background-color: #fff;display: inline;}

转换为行内块

display:inline-block

css的背景

背景颜色

background-color：颜色（默认：transparent（透明的）

背景图片

背景图片在背景颜色的上层。

background-image：url（）（默认：none）

背景平铺

background-repect：no-repect（不平铺）默认：repect（平铺）repeat-x（沿着x轴平铺）repeat-y（沿着y轴平铺）

背景图片位置

background-position：x y；

x和y为方位名词

left，right，top，down，center前后两个值与顺序无关，如果只指定一个，则另一个默认为居中对齐。

x和y为精确单位

x和y分别为离左侧和离上侧的距离，如果只指定了一个值，那该值必定是x坐标，另一个值为center。

背景图像固定

background-attachment：默认：scroll（滚动）fixed（固定）

设置背景图像是否固定或者随着页面其余部分滚动

背景复合写法

background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；

背景色半透明

background：rgba（0，0，0，alpha），alpha为0-1之间，0为全透明，1为不透明

css的三大特性

层叠性、继承性、优先级。

层叠性

按顺序覆盖重复的样式。

div {color: red;  font-size: 12px}div {color: pink;}/* 12px，粉色 */<div>层叠性</div>

继承性

父亲标签的的某些样式（text-，font-，line安营扎寨-，color等元素）可以被子标签继承。

行高的继承

一般使用当前文字大小的几倍的写法，当前文字的大小的几倍。

div {font: 14px/1.5;}

优先级

选择器相同，则执行层叠性选择绝对值器不同，根据选择器权重执行（通配/继承0,0,0,0<元素选择器0,0,0,1<类选择器/伪类选择器0,0,1,0<id选择器0,1,0,0<行内样式style=“”1,0,0,0<!important)

注意a链书架英语接有一个默认的颜色，会顶掉继承下来的颜色。

复合选择器会有权重叠加的问题，复合选择器会把权重累加