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;}