CSS组合选择器

二、组合选择器

（1）多元素选择器：E,F,G,H{color:#FF0000;}

说明：同时给E元素、F元素、G元素、H元素增加样式，多个元素间用逗号隔开

body,div,ul,li,ol,dt,dd,p,form,a{ margin:0px; padding:0px; }

div.box,div#header,form{ color:#FF0000; }

div.box含义：class=“box”的<div>元素；

div#header含义：id=“header”的<div>元素；

（2）后代元素选择器

格式：E F{color:#FF0000;}

说明：E元素的所有后代的F元素，增加样式，中间用空格隔开

.news li{width:400px;border:1px solid #006600;}

（3）子元素选择器

格式：E > F{color:#FF0000}

说明：匹配E元素的子元素F，增加样式

举例：.news > .title{background-color:#FFCC66;}

• 伪类选择器：一般是给超级链接<a>增加CSS样式

一个链接有四种状态：正常状态(:link)、放上状态(:hover)、激活状态(:active)、访问过的状态(:visited)

（1）全局链接样式的设置

a:link,a:visited{color:#0000FF;text-decoration:none;}

a:hover{color:#990000;text-decoration:underline;}

（2）局部链接样式的设置：给一类链接加样式

<a class=”a1″ href=”#”>福州：女子闹市候车时被划伤脸 凶手很快消失(图)</a>

a.a1:link,a.a1:visited{color:#009900;font-weight:bold;font-size:18px;}

a.a1:hover{ color:#FF00FF;border:1px solid #996600;}

CSS尺寸属性

Width：指定元素的宽度，单位是 px或%

Height：指定元素的高度，单位是px或%

注意：任何HTML元素，都可以看成一个“盒子”，都具有width、height、padding(内边距)、margin(外边距)、border、backgroun(背景)。 比如：<b><i><font><span><div><table>等

CSS字体属性

font-family：设置字体

font-weight：粗细，取值：bold，相当于<b>

font-style：斜体，取值：italic，相当于<i>

font-size：文字大小

font：简写的形式，各个属性值间用空格隔开

body{ font-size:24px; font-family:黑体; font-weight:bold; font-style:italic; }

body{ font:bold italic 24px 黑体; }

CSS文本属性

Color：文本颜色，取值：英文单词、10进制、16进制；

text-align：文本的水平对齐，取值：left center right

text-decoration：文本修饰线，取值：none、underline、overline、line-through

text-indent：首行缩进，text-indent:36px;

letter-spacing：字间距

line-height：行高，line-height:150%;   line-height:24px;

CSS列表属性

list-style-type：列表的类型，取值：none、disc、circle、square

list-style-image：列表的图片，list-style-image:url(images/li01.gif);

list-style-position：符号的位置，取值：outside(外)、inside(内)

list-style：简写形式

.li01{ list-style-type:none;list-style-image:url(images/li01.gif);list-style-position:outside; }

.li01{ list-style:url(images/li01.gif) disc outside;}

实现：单行文本在一个“容器”中垂直居中，使用的原理是，height和line-height值一样，就可以实现。

CSS背景属性

Background-color：背景颜色

Background-image：背景图片，格式：background-image:url(images/bg.gif)

Background-repeat：背景平铺，取值：no-repeat(不平铺)、repeat(平铺)、repeat-x(水平方向)、repeat-y(垂直方向)

Background-position：水平方向 垂直方向，

Background-position：left|center|right top|center|bottom;   //水平垂直都居中

Background-position：50% 50%;

Background-position：100px 200px; //背景图距离左边100px，距离顶边200px

Background-attachment：当移动滚动条时，背景是固定(fixed)还跟着滚动(scroll)

Background：简写形式

.box{ background-image:url(images/bg.gif); background-repeat:no-repeat;background-position:center center;}

.box{background:url(images/bg.gif) no-repeat center center;}