认识会用CSS样式表的文本属性

认识会用CSS样式表的文本属性

    文本(text):css控制的文本属性主要包括以下四个: text-indent, text-align, text-decoration, text-transform;
    1. text-align:属性text-align指文本的对齐方式,其有向左,向右,居中对齐以及自动适应四种对齐方式:
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
例:css代码:
body {
font: normal 12px/1.5 Georgia, sans-serif;
text-align:left;
background:#444 url(images/bodybg.jpg) repeat-y;
}
    在选择器body中声明属性text-align为left,可以避免在其他需要文本左对齐的选择器中重复声明. 
    2. text-indent:属性text-indent指段落首行的缩进, 既然是段落的属性,一般用于选择器p(段落)中,代码如下:
p {
text-indent: 26px;
} 
    本站的段落缩进为0, 所以在css文件中能找到text-indent: 0;,不声明即此属性,即默认为0.
    3. text-decoration:属性text-decoration为文本修饰, 其包括下划线, 上划线, 中划线和无四种修饰方式, 代码如下:
text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
    在这就不例举具体的下划线, 上划线, 中划线的例子, 相信大家很容易想像的到它的效果. 需要强调的是属性值none, 如果你查看本站css的话, 可以看到所有属性text-decoration的值均为none. 这是因为目前的浏览器对于选择器a(即超级链接), 默认text-decoration属性值为underline. 这就会使很多你不希望出现的下划线大量涌现, 而且由于无法约束下划线的粗细, 以及浏览器之间的差异, 甚至会出现各种粗细, 不同浏览器显示不同的下划线.
    例:你可以看到本站文章内的超级链接的文本修饰是点划线, 这个效果不是属性text-decoration所能实现的, 其需要下边框属性的支持, 将会在边框属性时说明. 实现方法如下:
    1.在全局声明中将选择器a的text-decoration属性值设为none, 代码如下:
a {    
    color: #545454;
    text-decoration:none;
} 
    2.为使文章正文部分的超级链接显示蓝色点划线的效果,代码如下:
.post_body a{
    color:#0061CA;
    padding:0;
    border-bottom:1px dotted #0061CA;
} 
    4. text-transform: 这个属性可能大家不太熟悉, 因为这个属性是只为英文服务的, 用于转换字母大小写之用. 其包括首字母大写, 大写, 小写和无变化四种属性值, 代码如下:
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: none;
例:首字母转化为大写的css代码如下:
.comment_author {
    text-transform:capitalize;
}