CSS学习（2）

Emmet语法

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

1. 生成标签：输入标签名按下tab键
2. 生成多个相同标签：如div*3
3. 生成父子级关系：如ul>li
4. 生成兄弟级关系：如div+p
5. 生成带有类名或id名字的标签：标签名称.demo或#two按下tab键就可以了
6. 生成div类名有序：用自增符号$
7. 标签生成中带有默认文字：{}
8. css中的属性都可以首字母缩写

CSS的元素显示模式

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

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

块元素

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

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

行内元素（内联元素）

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

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

行内块元素

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

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

元素显示模式转换

行内元素转换为块级元素

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链接有一个默认的颜色，会顶掉继承下来的颜色。

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

• 还没有人评论，欢迎说说您的想法！