CSS详解.doc

1、内嵌样式内嵌式样式 (Inline Style)这个内嵌样式(Inline Style)定义段落里面的文字是 20pt 字体，字体颜色是红色。这段文字没有使用内嵌样式。显示：这个内嵌样式(Inline Style)定义段落里面的文字是20pt字体，字体颜色是红色。这段文字没有使用内嵌样式。内部样式表H1.mylayout border-width: 1; border: solid; text-align: center;color:red这个标题使用了 Style。这个标题没有使用 Style。这个标题使用了 Style。这个标题没有使用 Style。外部样式表这个标题使用了 Style。这

2、个标题没有使用 Style。显示：这个标题使用了 Style。这个标题没有使用 Style。通用样式Generic Class Selector .center text-align:center这个标题居中显示。这个段落居中显示。显示：这个标题居中显示。这个段落居中显示。Tag Class 选择器Class Selectorp.right text-align:rightp.center text-align:center这一段居中显示。这一段是居右显示。 显示：这一段居中显示。这一段是居右显示。关联选择器Class Selectorp em color:red这个段落中用 em 强调的字是

3、 红色的。这个标题中用 em 强调的字 不是红色的。显示：这个段落中用 em强调的字是 红色 的。这个标题中用 em 强调的字 不是红色 的。CSS 背景属性实例背景颜色属性背景颜色 background-colorbody background-color:#99FF00;这个 HTML 使用了 CSS 的 background-color 属性，将 HTML 的背景颜色变成翠绿色。显示：这个 HTML使用了 CSS的 background-color属性，将 HTML的背景颜色变成翠绿色。背景图片属性背景图片 background-image这个 HTML 使用了 CSS 的 backgr

4、ound-image 属性，设置了背景图片。 显示：这个 HTML使用了 CSS的 background-image属性，设置了背景图片。（不显示图片）背景重复属性背景重复 background-repeatbody background-image:url(./images/css_tutorials/background.jpg); background-repeat:repeat-y这个 HTML 使用了 CSS 的 background-repeat 属性，使背景图片竖向重复。常用的 background-repeat 的属性值有: repeat-x(横向重复)，repeat-x(横向

5、重复), no-repeat(不重复)。background-repeat 属性要和 background-image 一起用。显示：这个 HTML使用了 CSS的 background-repeat属性，使背景图片竖向重复。 常用的 background-repeat的属性值有: repeat-x(横向重复)，repeat-x(横向重复), no-repeat(不重复)。background-repeat属性要和 background-image一起用。（不显示图片，图片为竖向排列，半边）背景位置属性背景位置属性 background-positionbody background-imag

6、e:url(./images/css_tutorials/background.jpg);background-repeat:no-repeat; background-position:20px 60px这个 HTML 使用了 CSS 的 background-position 属性。这个属性和background-image 属性连在一起使用，决定了背景图片的最初位置。上面的代码表示背景图片的初始位置距离网页最左面 20px，距离网页最上面 60px。显示：这个 HTML使用了 CSS的 background-position属性。这个属性和 background-image属性连在一起使

7、用，决定了背景图片的最初位置。上面的代码表示背景图片的初始位置距离网页最左面 20px，距离网页最上面60px。（不显示图片）背景属性背景属性 backgroundbody background:#99FF00 url(./images/css_tutorials/background.jpg) no-repeat fixed 40px 100px这个属性是设置背景相关属性的一种快捷的综合写法， 包括 background-color, background-image, background-repeat, backgroundattachment, background-position。

8、这个 HTML 所用的背景属性表示，网页的背景颜色是翠绿色，背景图片是background.jpg 图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面 40px，距离网页最上面 100px。这个属性是设置背景相关属性的一种快捷的综合写法， 包括 background-color, background-image, background-repeat, backgroundattachment, background-position。这个 HTML 所用的背景属性表示，网页的背景颜色是翠绿色，背景图片background.jpg 图片，背景图片不重复显示，背景图片不随

9、内容滚动而动，背景图片距离网页最左面 40px，距离网页最上面 100px。这个属性是设置背景相关属性的一种快捷的综合写法， 包括 background-color, background-image, background-repeat, backgroundattachment, background-position。这个 HTML 所用的背景属性表示，网页的背景颜色是翠绿色，背景图片是background.jpg 图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面 40px，距离网页最上面 100px。显示：这个属性是设置背景相关属性的一种快捷的综合写法， 包括

10、 background-color, background-image, background-repeat, backgroundattachment, background-position。这个 HTML所用的背景属性表示，网页的背景颜色是翠绿色，背景图片是background.jpg图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面 40px，距离网页最上面 100px。这个属性是设置背景相关属性的一种快捷的综合写法， 包括 background-color, background-image, background-repeat, backgroundatta

11、chment, background-position。这个 HTML所用的背景属性表示，网页的背景颜色是翠绿色，背景图片background.jpg图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面 40px，距离网页最上面 100px。这个属性是设置背景相关属性的一种快捷的综合写法， 包括 background-color, background-image, background-repeat, backgroundattachment, background-position。这个 HTML所用的背景属性表示，网页的背景颜色是翠绿色，背景图片是backgroun

12、d.jpg图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面 40px，距离网页最上面 100px。字体大小属性(font-size)字体大小属性 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-la

13、rge)。显示：这段文字大小是 10pt。这段文字大小是 16px。这段文字大小是 16pt。这段文字大小是 10pt的 80%。这段文字的大小比 10pt大。这段文字的大小是特大号(xx-large)。字体属性(font)字体属性 font.s1 font:italic normal bold 11pt Arial.s2 font:normal small-caps normal 14pt Courier这段文字的字体风格(font-style) 属性值是 italic，字体变量(font-variant)属性值是 normal，字体浓淡(font-weight)属性值是 bold，字体大小

14、(font-size)属性值是 11pt，字体名称(font-family)属性值是 Arial。这段文字的字体风格(font-style)属性值是 normal，字体变量(font-variant)属性值是 small-caps，字体浓淡(font-weight)属性值是 normal，字体大小(font-size)属性值是 14pt，字体名称 (font-family)属性值是 Courier。显示：这段文字的字体风格 (font-style)属性值是 italic，字体变量 (font-variant)属性值是normal，字体浓淡 (font-weight)属性值是 bold，字体大小

15、 (font-size)属性值是11pt，字体名称 (font-family)属性值是 Arial。这段文字的字体风格(FONT-STYLE)属性值是 NORMAL，字体变量(FONT-VARIANT)属性值是 SMALL-CAPS，字体浓淡(FONT-WEIGHT )属性值是 NORMAL，字体大小(FONT -SIZE)属性值是 14PT，字体名称(FONT-FAMILY)属性值是 COURIER。文本修饰属性(text-decoration)文本修饰属性 text-decoration.p1text-decoration: none.p2 text-decoration: underli

16、ne.p3text-decoration: line-through.p4 text-decoration:overline文本修饰属性(text-decoration)的缺省值是 none。这段的文本修饰属性(text-decoration)值是 underline。这段的文本修饰属性(text-decoration)值是 line-through。这段的文本修饰属性(text-decoration)值是 overline。显示：文本修饰属性(text-decoration)的缺省值是 none。这段的文本修饰属性(text-decoration)值是 underline。这段的文本修饰属性

17、(text-decoration)值是 line-through。这段的文本修饰属性(text-decoration)值是 overline。（线在文字项端）文本对齐属性(text-align)文本对齐属性 text-align.p1text-align:left.p2 text-align:right.p3text-align:center这段的本文对齐属性(text-align)值为居左。这段的本文对齐属性(text-align)值为居右。这段的本文对齐属性(text-align)值为居中。显示：这段的本文对齐属性(text-align)值为居左。这段的本文对齐属性(text-align)值为居右。这段的本文对齐属性(text-align)值为居中。