文本(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;例:
复制内容到剪贴板
代码:
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所能实现的, 其需要下边框属性的支持, 将会在边框属性时说明. 实现方法如下(请查看本站css代码):
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;
}
字体(Font)
css控制的字体属性包括font-family, font-style, font-variant, font-weight, font-size.
1.font-family:
由字体名(family-names)和字组名(generic families)两个部分组成.首先来看个实例,例:查看Jorux.com首页的css文件,可以看到以下代码:
复制内容到剪贴板
代码:
body {
font: normal 12px/1.5 Georgia, sans-serif;
text-align:left;
background:#444 url(images/bodybg.jpg) repeat-y;
}蓝色加亮部分就是font的属性值, 这种写法为简写, 可将其还原为:
复制内容到剪贴板
代码:
font-weight: normal;
font-size: 12px;
line-height: 1.5;
font-family: Georgia, sans-serif;行高(line-height)其实并不属于font属性, 但可以在简写时归入font属性值内. 现在我们先只看最后一行font-family的部分. “Georgia“即为字体名(有simhei, arial, verdana等), “sans-serif“即为字组名(包括衬线字体(Serif), 非衬线字体(Sans-Serif) 和等宽字体(MonoSpace)三种).
由于Windows自带的汉字字体极为有限. 但一般中文Windows系统都支持宋体(默认, SimSun)和黑体(SimHei)和楷体(kaiti_gb2312). 我们来看看这几种汉字字体(要注意这几种字体名, 楷体的英文字体名为kaiti_gb2312, Firefox对汉字字体支持不良)。
中国人看到西方字体名可能会比较迷惑, 但就如同学习英文时所遇到的英文名一样, 一些常用的字体名的表现和拼写必须要掌握, 对于中文学习者, 目前只推荐掌握以下几种英文字体:
Arial Verdana Georgia Courier
这几种字体的一般用法如下:
1. Arial: 是目前最为流行的正文字体, 几乎所有的web2.0站点(如Google, Flickr, Wikipedia等)都使用arial字体作为正文甚至是标题的字体. 特点是亲和力比较强, 阅读起来不易疲劳;
2. Verdana: 是1996年微软邀请顶级字体设计师花了两年时间出品的字体, 免费提供给windows用户. 和arial用法比较相似, 是目前使用最为广泛的字体, 几乎能在任何地方看到;
3. Georgia: 这个后起之秀, 由于其花哨的衬线(后说明), 被很多网页设计师所青睐, 逐渐取代了Times New Roman在serif字组中的核心地位. 本网站的标题也使用的是Georgia字体.
4. Courier: 隶属于Monospace字组, 由于其字母的宽度均一, 一般用于对单词长度控制比较严格的地方, 比如网页导航条和报纸(印刷品).
英文有那么多字体, 但都隶属于serif, sans-serif和monospace三种字组. 由于英文本身的特点, 不同于方块字(汉字), 英文字母的宽度是不相等的, 这就给出版业如报纸的排版工作增加了难度, 于是发明了等宽字体(monospace).
[
本帖最后由 月飞春秋 于 2008-9-8 14:09 编辑 ]
