CSS ·

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

参与评论