最火下载站首页
手机版
最火下载站
关注公众号
最火下载站

当前位置:首页 > 网络知识 > 网络编程 > 编程综合> 综合CSS以及字体控制属性建优秀网站

综合CSS以及字体控制属性建优秀网站

文章作者:网友投稿 发布时间:2008-07-22 来源:网络

你修改一个网页的字样通常采用什么方法呢?是不是把相关的文本嵌套到标签中并用属性来控制它的颜色、大小和式样呢?是的,这是一般常用到的方法,也是最具体最基本的方法。现在,人们已不再认同这种方法,因为它将视觉式样和实际的内容标记混合起来。如今我们推荐

你修改一个网页的字样通常采用什么方法呢?是不是把相关的文本嵌套到标签中并用属性来控制它的颜色、大小和式样呢?是的,这是一般常用到的方法,也是最具体最基本的方法。现在,人们已不再认同这种方法,因为它将视觉式样和实际的内容标记混合起来。如今我们推荐使用将字样式样信息集中到一个叫做层叠式样表(CSS)的单独文件中的方法。

将字体信息集中到一个CSS文件中具有许多明显的优点:它易于操作,不需要任何特殊的软件,并且能够在大多数主流浏览器中统一运行。更重要的是,由于信息集中到一个单独的位置,修改网页的视觉外观相当方便:你只需简单修改主式样表的字体或颜色,相关改变就会立即“层叠”到你的整个网站中。

听起来很有趣,是吗?那么请继续阅读下去,因为我将在本文中探讨CSS font属性,它旨在替代旧有的元素,如果你需要对HTML页面的字样、颜色、文字大小和间距进行集中控制,它是一个可利用的强大工具。

控制字样

字体属性定义了对应元素所使用的字体。这个属性通常包含一个由逗号隔开的字体名称列表;并可以用引号来封套那些包含空白的名称。应用时,浏览器将使用它在列表中找到的第一个字体,或如果没有找到有效字体,就使用默认的标准浏览器字体。

列表A中是这个指示的一个应用实例:

列表A

To be 0r not to be, that is the question.

图A显示输出结果。

图A

 

Font_family #p#分页标题#e#

记住重要的一点,这个指示十分依赖于客户端系统所显示的字体;在上面的例子中,如果系统没有显示Bookman Old Style和Verdana字体,就将使用默认的浏览器字体。要避免这个问题,最好是在特殊字体名称列表后增加一个通用字体名称列表,如serif、sans-serif或cursive;这告诉浏览器使用那个字体类别中最相匹配的字体。列表B是上面实例的一个修订版本,它正好解决上述问题。

列表B

To be 0r not to be, that is the question.

控制颜色

字体颜色使用color属性进行控制,它接受十六进制的RGB值或“颜色值”,如red、silver或blue。列表C显示了一个实例。

列表C

div class="quote">To be 0r not to be, that is the question.

图B显示其输出结果。#p#分页标题#e#<

图B

 

颜色

控制文字大小

接下来说明文字大小控制。字体大小由font-size属性进行控制,它接受绝对值(数字单位或关键字,如xx-samll、samll、medium、large、x-large)或相对值(larger和smaller)。字体大小可以用点、百分比或em(12点活字)为单位。列表D中为一个实例;它将字体扩大到正常大小的400%。

列表D

To be 0r not to be, that is the question.

图C为输出结果。

图C

 

#p#分页标题#e#

字体大小

控制突出

字体突出由font-style和font-weight属性控制,它们分别与HTML的元素相对应。font-style属性接受normal、italic和oblique中的任何一个值;而font-weight属性可接受“加粗”范围为100-900的数字值,或者是normal、bold、bolder和lighter这样的关键字。列表E是一个说明这两个属性的实例。

列表E

To be 0r not to be, that is the question.

-- Hamlet

图D为输出结果:

图D

字体粗细和式样

控制字间距、字符间距和行距

CSS还可以通过对应的word-spacing、character-spacing和line-spacing属性分别对字间距、字符间距和行距进行控制。与font-size属性一样,这些属性的值也可以用点、像素和em为单位。列表F是一个实例。#p#分页标题#e#

列表F

To be 0r not to be, that is the question.

-- Hamlet, Act 3, Scene 1

图E说明输出结果:

图E

 

间距

当然,这些实例仅仅只是CSS字体处理冰山的一角。但是,它们可为你实际应用这些属性提供有益的启示;现在你应该有足够的知识可以开始自己的实践,那你还等什么

共有0条评论网友评论