快速业务通道

css对于颜色和文本属性的控制

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-04
本颜色,边框颜色等,对于背景颜色和边框颜色会在以后说明,在这主要解释文本颜色的表现.

在如上所示style.css的选择器h1中,文本颜色的属性是用color表示的,h1的颜色的属性值为#FF0000(一个#加上十六进制值),简写为#F00. 我们甚至可以用英文单词red表示属性值: color: red; 效果是一样的. 颜色的其他属性值还有RGB值,在css中不太常用,这里就不再叙述.

例:查看Jorux.com首页的css文件,可以看到以下代码:

a {   
    color: #545454;
    text-decoration:none;
}
a:hover {
    color: #919191;
}

在选择器a中,文本颜色的属性值为#545454, 即存在超级链接的文本颜色为#545454; 而a:hover为伪类选择器(表现依赖于浏览器的状态), 它的属性值为#919191, 即鼠标在超级链接上悬停时文本的颜色. 你可以用ColorZilla验证本站首页的标题文字颜色.

文本(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;

例:查看Jorux.com首页的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. 这就会使很多你不希望出现的下划线大量涌现, 而且由于无法约束下划线的

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号