CSS基础（2）

复合选择器

由两个或多个基础选择器通过不同方式组合而成。

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

后代选择器

如：

元素1 元素2{

}

子选择器

选择某元素最近一级子元素

如：

效果：

并集选择器

选择多组标签，定义成相同样式

格式：

div,p,span,ul li {

}

伪类选择器

链接伪类选择器

a:link 选择所有未被访问的链接

a:visited 选择所有未被访问的链接

a:hover 选择鼠标指针位于其上的链接

a:active 选择鼠标按下未弹起的链接

focus伪类选择器

哪一个表单有光标就选择出来（主要针对表单元素）

格式：

input:focus {

}

主要针对input表单元素！

CSS的元素显示模式

块元素占一行如<div>

行内元素一行多个如<span>

块元素

• 自己独占一行
• 高度、宽度、外边距、内边距都可以控制
• 宽度默认是容器的100%
• 是一个容器及盒子，里面可以放行内或块级元素

行内元素

• 相邻行内元素在一行上，一行可显示多个
• 高、宽直接设置是无效的
• 默认宽度就是他本身内容的宽度
• 行内元素只能容纳文本或其他行内元素

注意：链接里不能放链接；<a>内可以放块内元素，但给<a>转换一下块级模式最安全。

行内块元素

<a><input><td>

• 和相邻行内块元素在一行，但他们之间有空隙。一行可以显示多个。（行内元素特点）
• 默认宽度是本身内容宽度（行内元素特点）
• 行高外边距等都可以控制（块级元素特点）

元素模式转换

<a>可增加其触发范围

转换为块元素：display:block;

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

侧边选择栏

CSS未提供文字垂直居中代码，但可以用

height: 30px;

line-height: 30px;

CSS背景

背景图片

形如

div {

width: 

height:

background-image: url();

}

不会改变图片大小，还可以产生背景平铺（默认）

可用background-repeat：来决定是否平铺

不平铺：

平铺：

图片位置

用background-position

如果参数是方位名词：如background-position: center top;（顺序可以颠倒）

效果：

如果是精确位置：如background-position: x y;(顺序严格)

单位也可以混合

如 background-position: 20px center

背景固定

background-attchment 可以制作视差滚动效果

background-attchment: scroll/fixed

fixed可以使页面滚动时背景不动

可以用复合写法

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

背景半透明

CSS提供半透明操作：

background: rgba(0,0,0,0.3);

分别表示红、绿、蓝、透明度