颜色和背景(Color and Background)属性:
这里介绍有关CSS中前景色和背景颜色、图片的设定方法。
color属性:
color属性用于设定元素的前景色:
属性名称: 'color'属性值: <color>初始值: 根据用户的初始值而定适合对象: 所有元素是否继承: yes百分比备注: 被禁止
color属性的值可以是十六进制数值、rgb()函数或CSS承认的颜色名称。如:
EM { color: red }EM { color: rgb(255,0,0) }
背景属性:
background-color属性用于设定背景色,初始值为透明:
属性名称: 'background-color'属性值: <color> | transparent初始值: transparent适合对象: 所有元素是否继承: no百分比备注: 被禁止
backgroud-image属性用于设定背景的图片:
属性名称: 'background-image'属性值: <url> | none初始值: none适合对象: 所有元素是否继承: no百分比备注: 被禁止
其中url可以为绝对地址,也可以是相对地址,例如:
BODY { background-image: url(marble.gif) }P { background-image: none }
以上两个属性利用普通的HTML属性也可以实现,下面的属性是CSS对原有HTML的扩展。background-repeat属性用来描述背景图片的重复排列方式:
属性名称: 'background-repeat'属性值: repeat | repeat-x | repeat-y | no-repeat初始值: repeat适合对象: 所有元素是否继承: no百分比备注: 被禁止
其中属性值的含义为:repeat:沿X轴和Y轴两个方向重复显示图片。repeat-x:沿X轴方向重复图片。repeat-y:沿Y轴方向重复图片。none:不重复图片。
例如:
BODY {background: red url(pendant.gif);background-repeat: repeat-y;}/*表示沿Y轴重复图片"pendant.gif",其余部分以红色为背景色*/
background-attachment属性表示在滚动整个文档时,背景图片的显示方式。它的属性值有两种:fixed和scroll,fixed相当于IE4里的水印效果,也就是说在拖动文档时,背景相对是静止的,scroll则和文档一起滚动。
background-position属性用来指定背景图片显示的位置:
属性名称: 'background-position'属性值: [<percentage> | <length> ] | [top | center | bottom] || [left | center | right]初始值: 0% 0%适合对象: 容器元素是否继承: no百分比备注: refer to the size of the element itself
其中属性值含义为:"top left"和"left top"表示"0% 0%"。"top"、"top center"和"center top"表示"50% 0%"。"right top"和"top right"都表示"100% 0%"。"left"、"left center"和"center left"表示"0% 50%"。"center"和"center center"表示"50% 50%"。"right"、"right center"和"center right"都表示"100% 50%"。"bottom left"和"left bottom"表示"0% 100%"。"bottom"、"bottom center"和"center bottom"都表示"50% 100%""bottom right"和"right bottom"表示"100% 100%"。例如:
BODY { background: url(banner.jpeg) right top } /* 100% 0% */BODY { background: url(banner.jpeg) top center } /* 50% 0% */BODY { background: url(banner.jpeg) center } /* 50% 50% */BODY { background: url(banner.jpeg) bottom } /* 50% 100% */
background属性是以上背景属性的快捷方式,属性和顺序如下:
属性名称: 'background'属性值: <'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>适合对象: 所有元素是否继承: no百分比备注: 只在background-position中容许使用
字体(Font)属性:
这里定义了关于字体的各种属性。
font-family属性定义字体的名称,可以是一个字体的名称,也可以是一类字体的名称,字体的名称一定要和计算机系统里的完全一样:
属性名称: 'font-family'属性值: [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>]初始值: 根据用户定义而定适合对象: 所有元素是否继承: yes百分比备注: 被禁止
有些计算机系统里如果没有样式单要求的字体,可以再设一个次字体以备万一。例如:
BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }
family-name是指确定的某字体,如Heisi Mincho W3,generic-family指某一类字体,如serif。
font-style属性描述字体的倾斜程度:
属性名称: 'font-style'属性值: normal | italic | oblique初始值: normal适合对象: 所有元素是否继承: yes百分比备注: 被禁止
font-variant属性:
属性名称: 'font-variant'属性值: normal | small-caps初始值: normal适合对象: 所有元素是否继承: yes百分比备注: 被禁止
一个使用了small-caps属性的元素中的小写字母看起来要比正常的大写字母小一些。
font-weight属
101平台在线http://101zaixian.net/http://101zaixian.net/a/pingtaihuodong/101娱乐平台在线http://zaixian101.net/101娱乐平台http://zaixian101.net/list/?8_1.htmlhttp://zaixian101.net/about/?19.html101娱乐平台在线http://zaixian101.net/about/?15.htmlhttp://zaixian101.net/list/?1_1.html
性用来描述字重。
属性名称: 'font-weight'属性值: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900初始值: normal适合对象: 所有元素是否继承: yes百分比备注: 被禁止
100到900代表9种不同的字重,400代表normal,700代表bold,900是最重的字体,bolder或lighter表示字体的字重比父元素高或低一级,比如父元素字重为400,则bolder代表字重500,如果父元素本身字重为900,那么bolder后,字重还是900,同样的lighter也一样。有些字体并没有100到900那么全的字重,也许是从300到700,那么字重的最小和最大值也为300到700。例如:
P { font-weight: normal } /* 400 */H1 { font-weight: 700 } /* bold */
font-size属性描述字体的大小:
属性名称: 'font-size'属性值: <absolute-size> | <relative-size> | <length> | <percentage>初始值: medium适合对象: 所有元素是否继承: yes百分比备注: relative to parent element's font size
该属性可以使用绝对大小,也可以使用相对大小,其中绝对大小可以使用,如下关键字表示:
xx-small | x-small | small | medium | large | x-large | xx-large 分别代表最小、较小、小、中等、大、较大和最大。相对大小可以使用:larger 或smaller描述。例如:
P { font-size: 12pt; }BLOCKQUOTE { font-size: larger }EM { font-size: 150% }EM { font-size: 1.5em }
Font属性是以上属性的快捷方式,属性如下:
属性名称: 'font'属性值: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]适合对象: 所有元素是否继承: yes百分比备注: 只在font-size使用
例如:
P { font: 12pt/14pt sans-serif } P { font: 80% sans-serif }P { font: x-large/110% "new century schoolbook", serif }P { font: bold italic large Palatino, serif }P { font: normal small-caps 120%/120% fantasy }
CSS属性:
6、文本(Text)属性:
这里的属性将影响WEB文档中的文本显示情况。
text-indent属性描述文本的缩进程度:
属性名称: 'text-indent'属性值: <length> | <percentage>初始值: 0适合对象: 容器元素是否继承: yes百分比备注: 根据父元素的宽度而定
下面的例子表明段落的缩进值为3em:
P { text-indent: 3em }
Alignment属性表明文本的对齐方式:
属性名称: 'alignment'属性值: left | right | center | justify初始值: 依照用户定义适合对象: block-level elements是否继承: yes百分比备注: 被禁止
text-decoration属性描述对文本的修饰方法:
属性名称: 'text-decoration'属性值: none | [ underline || overline || line-through || blink ]初始值: none适合对象: 所有元素是否继承: no (see clarification below)百分比备注: 被禁止
属性值含义分别为:underline:下划线。overline:上划线。line-through:删除线。blink:闪烁(如同Navigator中的blink标记的功能)
text-shadow属性可以为文本加入阴影的特效:
属性名称: 'text-shadow'属性值: none | <color> [, <color> ]*初始值: none适合对象: all是否继承: No百分比备注: 只在描述透明度时有效
例如:
P { text-shadow: black }
上例将在文本的右下方显示黑色阴影,另外阴影将增大BOX的面积。
letter-spacing属性表明文本的字间距:属性名称: 'letter-spacing'
属性值: normal | <length> | auto初始值: normal适合对象: 所有元素是否继承: yes百分比备注: 被禁止
例如:
BLOCKQUOTE { letter-spacing: 0.1em }
word-spacing属性表明文本中单词间距:
属性名称: 'word-spacing'属性值: normal | <length>初始值: normal适合对象: 所有元素是否继承: yes百分比备注: 被禁止
例如:
H1 { word-spacing: 1em }
text-transform属性可以将BOX内的文本按指定的大写或小写形式显示:
属性名称: 'text-transform'属性值: capitalize | uppercase | lowercase | none初始值: none适合对象: 所有元素是否继承: yes百分比备注: 被禁止
属性值含义为:capitalize:把BOX中的每句句首字母变成大写。uppercase:把BOX中所有的字母变成大写。lowercase:把BOX中所有的字母变成小写。
White-space属性描述如何显示文本中的空格,在HTML中,空格是被省略的,也就是说你在一个段落标记的开头无论输入多少个空格都是无效的,要输入空格有两个方法,一是直接输入空格的代码" ",或者使用<pre>标记,CSS中也制定了类似于pre的属性:
属性名称: 'white-space'属性值: normal | pre | nowrap初始值: normal适合对象: 容器元素是否继承: yes百分比备注: 被禁止