CSS入门教程（三）——字体、颜色和背景属性蚂蚁公主_冰河星矢

http://blog.sina.com.cn/u/1223244273

首页博文目录关于我

个人资料

微博

加好友发纸条

写留言加关注

博客等级：
博客积分：

博客访问：
关注人气：
获赠金笔：0支
赠出金笔：0支
荣誉徽章：

正文字体大小：大中小

CSS入门教程（三）——字体、颜色和背景属性蚂蚁公主

(2006-05-03 10:17:53)

CSS的基本语句就可以看出，属性是CSS非常重要的部分。熟练掌握了CSS的各种属性将会使您编辑页面更加得心应手。前面介绍的基础较枯燥，下面就借助一些生动实例来讲解。

一、字体属性

Ants

第一行只是采用了“font-family”属性，代码是这样的：
　　Ants
　　这行代码定义了“hongen”将以“lucida console”的字体显示；
　　第二行font-family为默认值，而是定义了“font-style”属性为“italic”斜体，代码如下：
　　Ants
　　第三行font-family为默认值，font-style为“oblique”，另外还定义了“font-weight”属性为“bold”，“font-size”属性为24pt（缺省情况下为absolute size绝对大小）代码如下：
　　Ants
　　最后一行只是在第三行定义的基础上又增添了“font-variant”属性为“small-caps”（小体大写），代码如下：
　　Ants
　　值得注意的是：“font-variant”属性值“small-caps”在指定的小体大写字体不存在的时候，CSS将用大写字母代替所有的小写字母。
　　可能您会问：定义一个字体怎么有那么长的代码呢？其实字体属性中还一个“font”属性，可以实现简便定义。我们来看下面这段代码：
　　Leaf
此代码产生的效果是这样的（如下图）：

http://www.hongen.com/pc/homepage/css/img/css004.gif蚂蚁公主" />

这段代码定义了“leaf”的字体为GlitzyCurl，并且是斜体、小体大写、粗体、36号字。这段代码等同于：
　　Leaf
　　相比而言前者精简了许多。
　　但需要注意的是：如果您用属性直接定义，一定要注意属性值的排放顺序。它的排放规则是按照“font-style”、“font-variant”、“font-weight”、“font-size”、“font-family”的顺序，其中没有定义的以默认值显示。
　　其实我们习惯上还是不用FONT属性来统一定义，因为分开来定义的代码虽然很长，但是看上去很直观，一目了然。
　　遗憾之处就是CSS对中文字体的支持不是很好。

二、颜色和背景属性
　　如果给用属性定义的文本添上颜色那就更好了。下面我们就讲一下CSS的颜色和背景属性。
例如前面讲到的“LEAF”字体，我们在其中加入颜色属性，在<style>再加入以下代码：
　　color：rgb（204，82，28）；
　　background-img：url(ss01038.jpg)；
　　background-repeat：no-repeat；margin-right：15em

★ 设置前景色的rgb值为(204，82，28)，您也可以用颜色的英文名称直接定义；设置背景图案的地址；设置背景图案不重复显示；另外还设置了页边距margin属性。
　　加入代码后“Leaf”的字体显示效果是这样的（如下图）：

http://www.hongen.com/pc/homepage/css/img/css005.gif蚂蚁公主" />

怎么样，是不是比光是定义属性显得更加漂亮了。当然您也可以简便的定义background属性（象定义font属性那样），下面我告诉一下您background属性的书写格式：

属性：background
属性值：<background-color>||<background-image>|| 　　　　<background-repeat>||<background-attacement>||<background-position>　　使用background属性可以一次定义前面讲到的一切有关背景的属性，包括背景色、背景图案等等。因此，上面定义“leaf”颜色属性中有关背景的代码也可以写成这样："background：url（ss01038.jpg）no-reapeat"

阅读┊ 收藏 ┊ 喜欢 ▼ ┊打印┊举报/Report

前一篇：CSS入门教程（二）——如何编写CSS

后一篇：CSS入门教程（四）

新浪BLOG意见反馈留言板　欢迎批评指正

CSS入门教程（三）——字体、颜色和背景属性 蚂蚁公主

CSS入门教程（三）——字体、颜色和背景属性蚂蚁公主