CSS样式-背景与文本
背景样式：
1）背景色
可以使用background-color属性为元素设置背景色，这个属性接受任何合法的颜色值。默认值为transparent，有透明的意思。
2）背景图像
要把图像放入背景中，使用background-image属性。默认值为none。
3）背景重复
如果需要背景图像在页面上平铺，使用background-repeat属性。属性值 repeat 导致图像在水平垂直方向上都平铺，repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
4）背景定位
利用background-position属性，改变图像在背景中的位置。为 background-position 属性提供值有很多方法。可以使用一些关键字：top、bottom、left、right 和 center。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。
5）背景关联
如果文档较长，可以通过background-attachment属性防止背景图像随文档向下滚动。默认值是scroll滚动，可设置为fixed固定。
注：背景属性均不可继承。
<html> <head> <style type="text/css"> body { background-color: gray; background-image: url(www.wddoer.com/i/eg_bg_03.gif); background-repeat: repeat-x; background-position:66% 33%; background-attachment:fixed; } </style> </head> <body> </body> </html>
文本样式：
1）文本颜色
<html> <head> <style type="text/css"> body {color:red} h1 {color:#00ff00} p.ex {color:rgb(0,0,255)} </style> </head> <body> <h1>这是 heading 1</h1> <p>这是一段普通的段落。请注意，该段落的文本是红色的。在 body 选择器中定义了本页面中的默认文本颜色。</p> <p class="ex">该段落定义了 class="ex"。该段落中的文本是蓝色的。</p> </body> </html>
2）行间距
<html> <head> <style type="text/css"> <!-- line-height不仅可以使用百分比值（默认115%），夜可使用像素值（默认20px）或数值（默认1） --> p.small {line-height: 90%} p.big {line-height: 200%} </style> </head> <body> <p> 这是拥有标准行高的段落。 在大多数浏览器中默认行高大约是 110% 到 120%。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 </p> <p class="small"> 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 </p> <p class="big"> 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 </p> </body> </html>
3）缩进文本
CSS提供了text-indent属性实现首行缩进。
text-indent可以使用所有长度单位，包括负值。
不过在为 text-indent 设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距。
text-indent可以使用百分比值，代表相对于缩进元素父元素的宽度。
text-indent属性可以继承。
<!-- 负缩进 --> p {text-indent: -5em;} <!-- 负缩进，外边距 --> p {text-indent: -5em; padding-left: 5em;} <!-- 缩进父元素的20%，即100个像素 --> div {width: 500px;} p {text-indent: 20%;} <div> <p>this is a paragragh</p> </div> <!-- 继承inner缩进50像素 --> div#outer {width: 500px;} div#inner {text-indent: 10%;} p {width: 200px;} <div id="outer"> <div id="inner">some text. some text. some text. <p>this is a paragragh.</p> </div> </div>
4）水平对齐
text-align属性，影响文本行的对齐方式。属性值有：left,right,center,justify.
5）字间隔
word-spacing属性，影响字之间的间隔。默认值normal与设置值0是一样的。
<html> <head> <style type="text/css"> p.spread {word-spacing: 30px;} p.tight {word-spacing: -0.5em;} </style> </head> <body> <p class="spread">This is some text. This is some text.</p> <p class="tight">This is some text. This is some text.</p> </body> </html>
6）字母间隔
letter-spacing属性，修改字符与字母之间的间隔。默认关键字是normal与0值相同。
<html> <head> <style type="text/css"> h1 {letter-spacing: -0.5em} h4 {letter-spacing: 20px} </style> </head> <body> <h1>This is header 1</h1> <h4>This is header 4</h4> </body> </html>
7）字符转换
text-transform属性，处理文本的大小写。属性值有none,uppercase,lowercase,capitalize.
<html> <head> <style type="text/css"> h1 {text-transform: uppercase} p.uppercase {text-transform: uppercase} p.lowercase {text-transform: lowercase} p.capitalize {text-transform: capitalize} </style> </head> <body> <h1>This Is An H1 Element</h1> <p class="uppercase">This is some text in a paragraph.</p> <p class="lowercase">This is some text in a paragraph.</p> <p class="capitalize">This is some text in a paragraph.</p> </body> </html>
8）文本装饰
text-decoration属性，提供了很多有趣的行为。属性值有：none,underline,overline,line-through,blink.
underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。
<html> <head> <style type="text/css"> h1 {text-decoration: overline} h2 {text-decoration: line-through} h3 {text-decoration: underline} h4 {text-decoration:blink} a {text-decoration: none} </style> </head> <body> <h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> <h4>这是标题 4</h4> <p><a href="http://www.w3school.com.cn/index.html">这是一个链接</a></p> </body> </html>
9）处理空白符
white-space属性，影响用户代理对源文件中的空格，换行和tab字符的处理。属性值有：normal,nowrap,pre,pre-line,pre-warp.
10）文本方向
direction属性，影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。属性值有ltr和rtl两个。
<html> <head> <style type="text/css"> div.one { direction: rtl } div.two { direction: ltr } </style> </head> <body> <div class="one">Some text. Right-to-left direction.</div> <div class="two">Some text. Left-to-right direction.</div> </body> </html>
11）字间距
<html> <head> <style type="text/css"> p.spread {word-spacing: 30px;} p.tight {word-spacing: -0.5em;} </style> </head> <body> <p class="spread">This is some text. This is some text.</p> <p class="tight">This is some text. This is some text.</p> </body> </html>
字体样式：
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
