字体和常用文本和背景属性.doc

CSS字体属性字体名称属性(font-family)这个属性设定字体名称，如Arial, Tahoma, Courier等。例句如下：.s1 font-family:Arial字体名称属性 font-family.s1 font-family:Arial.s2 font-family:Tahoma.s3 font-family:Courier.s4 font-family:Verdana.s5 font-family:Book AntiquaThe font-family value of the text is the browser default font.The fon-family value of the text is Arial。The fon-family value of the text is Tahoma。/The fon-family value of the text is Courer。/The fon-family value of the text is Verdana。/The fon-family value of the text is Book Antiqua。/The font-family value of the text is the browser default font.The fon-family value of the text is Arial。The fon-family value of the text is Tahoma。 The fon-family value of the text is Courer。 The fon-family value of the text is Verdana。 The fon-family value of the text is Book Antiqua。 字体大小属性(font-size)这个属性可以设置字体的大小。字体大小的设置可以有多种方式，最常用的就是pt和px(pixel)。例句如下：.s2 font-size:16pt字体大小属性 font-sizeBODYfont-size:10pt.s1 font-size:16px.s2 font-size:16pt.s3 font-size:80%.s4 font-size:larger.s5 font-size:xx-large这段文字大小是10pt。这段文字大小是16px。这段文字大小是16pt。这段文字大小是10pt的80%。这段文字的大小比10pt大。这段文字的大小是特大号(xx-large)。这段文字大小是10pt。这段文字大小是16px。这段文字大小是16pt。这段文字大小是10pt的80%。这段文字的大小比10pt大。这段文字的大小是特大号(xx-large)。字体浓淡属性(font-weight)这个属性常用值是normal和bold，normal是缺省值。例句如下：这段文字字体的浓淡属性(font-weight)值是bold。字体浓淡属性 font-weight这段文字没有设浓淡属性。这段文字字体的浓淡属性(font-weight)值是bold。这段文字字体的浓淡属性(font-weight)值是lighter。这段文字字体的浓淡属性值(font-weight)是200。这段文字字体的浓淡属性值(font-weight)是800。字体变量属性(font-variant)这个属性有两个值，normal和small-caps，normal是缺省值。small-caps表示小的大写字体。例句如下：.s1 font-variant:small-caps字体属性(font)这个属性是各种字体属性的一种快捷的综合写法。这个属性可以综合字体风格属性(font-style)，字体变量属性(font-variant)，字体浓淡属性(font-weight)，字体大小属性(font-size)等属性。例句如下：.s1 font:italic normal bold 11pt arial字体颜色(color)字体颜色用CSS中的color属性来表示。参见CSS常用文本属性。CSS常用文本属性文本对齐属性(text-align)这个属性用来设定文本的对齐方式。有以下值： left (居左，缺省值) right (居右) center (居中) justify (两端对齐) 示例代码如下：.p2 text-align:right文本对齐属性 text-align.p1text-align:left.p2 text-align:right.p3text-align:center这段的本文对齐属性(text-align)值为居左。这段的本文对齐属性(text-align)值为居右。这段的本文对齐属性(text-align)值为居中。文本修饰属性(text-decoration)这个属性主要设定文本划线的属性。有以下值： none (无，缺省值) underline(下划线) overline (上划线) line-through (当中划线)示例代码如下：.p2 text-decoration: underline文本修饰属性(text-decoration)的缺省值是none。这段的文本修饰属性(text-decoration)值是underline。这段的文本修饰属性(text-decoration)值是line-through。这段的文本修饰属性(text-decoration)值是overline。文本缩进属性(text-indent)这个属性设定文本首行缩进。其值有以下设定方法： length (长度，可以用绝对单位(cm, mm, in, pt,pc)或者相对单位 (em, ex, px) percentage (百分比，相当于父对象宽度的百分比)示例代码如下：.p1 text-indent: 8mm文本缩进属性 text-indent.p1 text-indent: 8mm.d1 width:300px.p2 text-indent:50%下面两端都设定CSS文本缩进属性(text-indent)，第一段用长度方法设值，第二段用百分比方法设值。芙蓉姐姐说道：“我那妖媚性感的外形和冰清玉洁的气质让我无论走到哪里都会被众人的目光无情地揪出来。我总是很焦点。我那张耐看的脸，配上那副火爆得让男人流鼻血的身体，就注定了我前半生的悲剧。”芙蓉姐姐说道：“我那妖媚性感的外形和冰清玉洁的气质让我无论走到哪里都会被众人的目光无情地揪出来。我总是很焦点。我那张耐看的脸，配上那副火爆得让男人流鼻血的身体，就注定了我前半生的悲剧。”下面两端都设定CSS文本缩进属性(text-indent)，第一段用长度方法设值，第二段用百分比方法设值。芙蓉姐姐说道：“我那妖媚性感的外形和冰清玉洁的气质让我无论走到哪里都会被众人的目光无情地揪出来。我总是很焦点。我那张耐看的脸，配上那副火爆得让男人流鼻血的身体，就注定了我前半生的悲剧。”芙蓉姐姐说道：“我那妖媚性感的外形和冰清玉洁的气质让我无论走到哪里都会被众人的目光无情地揪出来。我总是很焦点。我那张耐看的脸，配上那副火爆得让男人流鼻血的身体，就注定了我前半生的悲剧。”行高属性(line-height)这个属性设定每行之间的距离。其值有以下设定方法： normal (缺省值) length (长度，可以用绝对单位(cm, mm, in, pt,pc)或者相对单位 (em, ex, px) percentage (百分比，相当于父对象高度的百分比)示例代码如下：.p1 line-height:1cm字间距属性(letter-spacing)这个属性用来设定字符之间的距离。 normal (缺省值) length (长度，可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px)示例代码如下：.p1 letter-spacing: 3mm颜色属性(color)用颜色属性(color)可以改变文本的字体颜色。字体颜色代码请参见HTML颜色参考(HTML Color Reference)。示例代码如下：.p1color:gray颜色属性 color.p1color:gray.p2 color:#FF0000.p3color:#3300FF这段没有设置颜色属性(color)。这段的颜色属性(color)值是灰色。这段的颜色属性(color)值是红色。这段的颜色属性(color)值是蓝色。这段没有设置颜色属性(color)。这段的颜色属性(color)值是灰色。这段的颜色属性(color)值是红色。这段的颜色属性(color)值是蓝色。CSS背景属性背景颜色属性(background-color)这个属性为HTML元素设定背景颜色，相当于HTML中bgcolor属性。body background-color:#99FF00;上面的代码表示Body这个HTML元素的背景颜色是翠绿色的。背景颜色 background-colorbody background-color:#99FF00;这个HTML使用了CSS的background-color属性，将HTML的背景颜色变成翠绿色。背景图片属性(background-image)这个属性为HTML元素设定背景图片，相当于HTML中background属性。上面的代码为Body这个HTML元素设定了一个背景图片。背景图片background-image这个HTML使用了CSS的background-image属性，设置了背景图片。背景重复属性(background-repeat)这个属性和background-image属性连在一起使用，决定背景图片是否重复。如果只设置background-image属性，没设置background-repeat属性，在缺省状态下，图片既横向重复，又竖向重复。 repeat-x 背景图片横向重复 repeat-y 背景图片竖向重复 no-repeat 背景图片不重复body background-image:url(./images/css_tutorials/background.jpg); background-repeat:repeat-y上面的代码表示图片竖向重复。背景重复 background-repeatbody background-image:url(./images/css_tutorials/background.jpg); background-repeat:repeat-y这个HTML使用了CSS的background-repeat属性，使背景图片竖向重复。常用的background-repeat的属性值有: repeat-x(横向重复)，repeat-x(横向重复), no-repeat(不重复)。background-repeat属性要和background-image一起用。背景位置属性(background-position)这个属性和background-image属性连在一起使用，决定了背景图片的最初位置。body background-image:url(./images/css_tutorials/background.jpg);background-repeat:no-repeat; background-position:20px 60px上面的代码表示背景图片的初始位置距离网页最左面20px，距离网页最上面60px。背景属性(background)这个属性是设置背景相关属性的一种快捷的综合写法， 包括background-color, backgroun