论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

{WEB标准}使用CSS和字体控制属性建立优秀网站

文章类别:div+css布局 | 发表日期:2008-9-26 11:55:02

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

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

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

控制字样

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

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

列表A

<html>

<head>

<style type="text/css">

.quote {

font-family: "Bookman Old Style", "Verdana";

}

</style>

</head>

<body>

<div class="quote">To be or not to be, that is the question.</div>

</body>

</html>

图A显示输出结果。

图A

 

Font_family

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

列表B

<html>

<head>

<style type="text/css">

.quote {

font-family: "Bookman Old Style", "Verdana", "cursive";

}

</style>

</head>

<body>

<div class="quote">To be or not to be, that is the question.</div>

</body>

</html>

视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058