CSS02

CSS02

emment语法

1、快速生成html

• 包含：ul>li

• 多个：div*10

• 兄弟关系：div+p

• 选择器：默认div生成（.div,#div）
  如果不是div标签（p .nav）

• 排序：.demo1$*5 默认从1开始排

• 在标签里显示文字：div{啦啦啦}

2、快速生成css
text-aligh：center
简写成tac

3、快速格式化
shift+alt+f

复合选择器

后代选择器

	元素1 元素2{样式声明}
	2是1的后代，可以一层一层往下查找
	元素可以是任意选择器的组合
	.nav li a{}
	会把所有的儿子孙子重孙全部选出来

子选择器（最近一级）

	必须选择亲儿子
	元素1>元素2

并集选择器

	div,p{样式声明}
	通常用于集体声明
	可以用于任何选择器，包括后代选择器
	最后一个选择器不要加逗号

伪类选择器

	分不同场景给某些选择器添加特殊效果
	1、a链接伪类选择器：
		a：link 未被访问
		a：visited 已访问
		a：hover 鼠标指针停留
		a：active 按下还未弹起
	
	2、focus伪类选择器
		input：focus{} 获取焦点，一般只有input使用

元素显示模式

块级元素

• 独占一行
• 宽度和高度和内外边距可以设置
• 宽度默认是百分之百
• 是一个容器及盒子，里面可以放块级或行内元素，文字类元素里面不允许使用块级元素：如p h1

行内元素

（a，strong，b，em，i，del，ins，u，span，s）
主要是span

• 一行可以显示多个
• 设置宽高无效
• 默认宽度是其本身内容的宽度
• 行内元素内部只能容纳文本或者其他行内元素
  链接里面不能再放链接
  特殊情况里a可以放块级元素，但转换一下块级模式比较安全

行内块元素

（img input td）

• 一行上可以放多个，但中间会有空白缝隙（行内）
• 默认宽度是它内容本身的宽度（行内）
• 宽高和外边距可以设置（块级）

显示模式转换

display：
block 转化为块级
inline 转化为行内
inline-block 转化为行内块

文字垂直居中
height=40px；
line-height=40px
行高等于高度就可以了
原理：行高包括上空隙和下空隙

CSS背景

背景属性

background-

• 背景颜色
  color：transparent（透明的）| color
• 背景图片
  image：none|url（）
• 背景平铺
  repeat：repeat|no-repeat|repeat-x|repeat-y
• 背景图片位置
  position：x y；
• 背景固定
  attachment：scroll（滚动）默认|fixed（固定）

混合写法（类似font）用空格隔开，没有特定顺序

背景颜色半透明（CSS3新特性）

background：rgba（0，0，0，0.3）