CSS背景文本字体.doc

CSS背景实例：设置背景颜色：body background-color: yellowh1 background-color: #00ff00h2 background-color: transparentp background-color: rgb(250,0,255)p.no2 background-color: gray; padding: 20px;这是标题 1这是标题 2这是段落这个段落设置了内边距。设置文本背景的颜色：span.highlightbackground-color:yellow这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。设置图像为背景：body background-image:url(/i/eg_bg_04.gif);如何重复背景图像：body background-image: url(/i/eg_bg_03.gif);background-repeat: repeat如何在垂直方向上重复背景图像：body background-image: url(/i/eg_bg_03.gif);background-repeat: repeat-y如何只显示一次背景图像：body background-image: url(/i/eg_bg_03.gif);background-repeat: no-repeat如何放置背景图像：body background-image:url(/i/eg_bg_03.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:center;提示：您需要把 background-attachment 属性设置为 fixed，才能保证该属性在 Firefox 和 Opera 中正常工作。如何用来定位背景图像:body background-image: url(/i/eg_bg_03.gif);background-repeat: no-repeat;background-attachment:fixed;background-position: 30% 20%; 注释：为了在 Mozilla 中实现此效果，background-attachment 属性必须设置为 fixed。如何用像素来定位背景图像：body background-image: url(/i/eg_bg_03.gif);background-repeat: no-repeat;background-attachment:fixed;background-position: 50px 100px;注释：为了在 Mozilla 中实现此效果，background-attachment 属性必须设置为 fixed。如何设置固定的背景图像：body background-image:url(/i/eg_bg_02.gif);background-repeat:no-repeat;background-attachment:fixed图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。图像不会随页面的其余部分滚动。所有属性在一个声明中：body background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center; 这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。CSS文本实例：设置文本颜色：body color:redh1 color:#00ff00p.ex color:rgb(0,0,255)这是 heading 1这是一段普通的段落。请注意，该段落的文本是红色的。在 body 选择器中定义了本页面中的默认文本颜色。该段落定义了 class=ex。该段落中的文本是蓝色的。规定字符的间距：h1 letter-spacing: -0.5emh4 letter-spacing: 20pxThis is header 1This is header 4使用百分比来设置行间距：p.small line-height: 90%p.big line-height: 200%这是拥有标准行高的段落。在大多数浏览器中默认行高大约是 110% 到 120%。这是拥有标准行高的段落。这是拥有标准行高的段落。这是拥有标准行高的段落。这是拥有标准行高的段落。这是拥有标准行高的段落。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。使用像素来设置行间距：p.small line-height: 90%p.big line-height: 200%这是拥有标准行高的段落。在大多数浏览器中默认行高大约是 110% 到 120%。这是拥有标准行高的段落。这是拥有标准行高的段落。这是拥有标准行高的段落。这是拥有标准行高的段落。这是拥有标准行高的段落。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。使用数值来设置行间距:p.smallline-height: 0.5p.bigline-height: 2这是拥有标准行高的段落。默认行高大约是 1。这是拥有标准行高的段落。这是拥有标准行高的段落。这是拥有标准行高的段落。这是拥有标准行高的段落。这是拥有标准行高的段落。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。对齐文本：h1 text-align: centerh2 text-align: lefth3 text-align: right这是标题 1这是标题 2这是标题 3修饰文字：h1 text-decoration: overlineh2 text-decoration: line-throughh3 text-decoration: underlineh4 text-decoration:blinka text-decoration: none这是标题 1这是标题 2这是标题 3这是标题 4这是一个链接缩进文字：p text-indent: 1cm这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。控制文本中的字母： h1 text-transform: uppercase p.uppercase text-transform: uppercase p.lowercase text-transform: lowercase p.capitalize text-transform: capitalizeThis Is An H1 ElementThis is some text in a paragraph.This is some text in a paragraph.This is some text in a paragraph.在元素中禁止拆行：pwhite-space: nowrap这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。增加单词的行距：p.spread word-spacing: 30px;p.tight word-spacing: -0.5em;This is some text. This is some text.This is some text. This is some text.CSS文字实例：设置文字的字体：p.seriffont-family:Times New Roman,Georgia,Serifp.sansseriffont-family:Arial,Verdana,Sans-serifCSS font-familyThis is a paragraph, shown in the Times New Roman font.This is a paragraph, shown in the Arial font.设置字体的尺寸：h1 font-size: 300%h2 font-size: 200%p font-size: 100%This is header 1This is header 2This is a paragraph设置字体的粗细：p.normal font-weight: normalp.thick font-weight: boldp.thicker font-weight: 900This is a paragraphThis is a paragraphThis is a paragraph将所有的字体属性放在一个声明内：p.ex1font:italic arial,sans-serif;p.ex2font:italic bold 12px/30px arial,sans-serif;This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.边框实例：所有发边框在一个声明之中：p border: medium double rgb(250,0,255)Some text设置四种边框形式：p.dotted border-style: dottedp.dashed border-style: dashedp.solid border-style: solidp.double border-style: doublep.groove border-style: groovep.ridge border-style: ridgep.inset border-style: insetp.outset border-style: outsetA dotted borderA dashed borderA solid borderA double borderA groove borderA ridge borderAn inset borderAn outset border设置每一边不同的边框：p.soliddouble border-style: solid doublep.doublesolid border-style: double solidp.groovedouble border-style: groove doublep.three border-style: solid double grooveSome textSome textSome textSome text将所有的边框属性在一个声明中：p.one border-style: solid;border-width: 5pxp.two border-style: solid;border-width: thickp.threeborder-style: solid;border-width: 5px 10pxp.four border-style: solid;border-width: 1px 5px 10px 15pxp.five border-style: solid;border-width: 5px 10px 1px mediumSome textSome textSome textSome textSome text注释：border-width 属性如果单独使用的话是不会起作用的。请首先使用 border-style 属性来设置边框。设置四个边框的颜色：p.oneborder-style: solid;border-color: #0000ffp.twoborder-style: solid;border-color: #ff0000 #0000ffp.threeborder-style: solid;border-color: #ff0000 #00ff00 #0000ffp.fourborder-style: solid;border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)One-colored border!Two-colored border!Three-colored border!Four-colored border!注释：border-width 属性如果单独使用的话是不会起作用的。请首先使用 border-style 属性来设置边框。将所有下边框的属性在一个声明中：p border-style:solid;border-bottom:thick dotted #ff0000;This is some text in a paragraph.设置下边框的颜色：p border-style:solid;border-bottom-color:#ff0000;This is some text in a paragraph.设置下边框的样式：p border-style