css5第二天

一.Emmmet语法

1. 生成标签名，直接按tab键就行

2. 如果生成多个相同的标签加上*就可以例如div*3

3. 如果是父子级关系的标签，可以用>例如ul>li就可以

4. 如果有兄弟关系的标签，用+就可以例如div+p

5. 如果带有类名或者id名字，直接写上.demo或者#two tab键就可以

6. 如果生成的div类名是由顺序的，可以用自增符号$

7. 如果想要生成的标签里面默认显示几个文字{}

二.css符复合选择器

后代选择器、子选择器、并集选择器、伪类选择器等等

1. 后代选择器

可以选择父元素中的子元素

语法：元素1 元素2 {样式声明}

ps：元素可以是任意选择器

2. 子选择器

只能选择某元素的最近一级子元素

语法：元素1>元素2 {样式声明}

ps:元素2必须是亲儿子

3. 并集选择器

可以选择多组标签，同时为他们定义相同的样式

语法：元素1,元素2 {样式声明}

ps：约定语法规范，最后一个选择器不需要加上逗号

4. 伪类选择器

使用冒号表示

a:link	选择所有未被访问的链接
a:visited	选择所有已被访问的链接
a:hover	选择鼠标指针位于其上的链接
a:active	选择活动链接（鼠标按下为弹起的链接）

ps:

• 顺序不能颠倒：love hate

• 在实际写需要单独给a指定样式

• 在实际中写法：

先给所有的链接一个颜色

a{

color:gray;

}

再给链接伪类选择器一个颜色

a:hover{

color:red;

}

5. focus伪类选择器

获取焦点的表单元素

语法：

input:focus{

background-color:yellow;

}

三.元素显示模式

HTML元素主要分为块元素和行内元素两种类型

1. 块元素

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素

特点：

1. 比较霸道，自己占一行

2. 高度、宽度、外边距以及内边距都是可以控制

3. 宽度默认是容器的（父级宽度）的100%

4. 是一个容器及盒子，里面可以放行内或者块元素

ps:

1. 文字类的元素不能使用块元素

2. <p>标签主要是存放文字，因此<p>里面不能放入块元素，特别是不能放<div>

3. 同理，<h1>~<h6>等都是文字类块级标签，里面也不能放入其他块级元素

2. 行内元素

<span>标签是最典型的行内元素，其中地方也将行内元素成为内联元素

特点：

1. 相邻行内元素在一行上，一行可以显示多个

2. 高、宽直接设置是无效的

3. 默认宽度就是本身内容的宽度

4. 行内元素只能容纳文本或者其他元素

3. 行内块元素

<img/><imput/><td>同时具有块元素和行内元素的特点

特点：

和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以有显示多个（行内元素特点）

默认宽度就是它本身内容的宽度（行内元素特点）

高度，行高，外边距以及内边距都是可以控制（块级元素特点）

4. 显示模块转换

转换块元素：display:block;

转换为行内元素：display:inline;

转换为行内块元素：display:inline-block;

单行文字垂直居中：让文字的行高等于盒子的高度：line-height:xxpx;(行高等于盒子高度，文字居中；行高小于盒子高度，文字会偏上；行高等于盒子高度，则文字偏下)

四.CSS背景

1.背景颜色：

语法：backgroud-color:transparent;(透明色)

2.背景图片

语法：background-image:属性描述了元素的背景图像，优点是非常便于控制位置。