首页 > 教程 > 关键词  > CSS最新资讯  > 正文

使用CSS和字体控制属性建立优秀网站

2008-05-29 10:15 · 稿源:互联网

过去,修改一个网页的字样通常是指把相关的文本嵌套到<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>

举报

  • 相关推荐
  • AI 工具导航网站哪个好?超全 AI 工具导航网站推荐指南

    本文介绍了当前主流AI工具导航平台的特点和优势,帮助用户快速找到合适工具。重点推荐了5个平台:Futurepedia收录3000+工具,分类细致并提供实测指南;Insidr.ai含500+工具,适合专业用户查找;AI Parabellum对4500+工具进行深度测评;Product Hunt适合发现前沿新品;AIBase覆盖13000+工具,支持多维度筛选。特别推荐AIBase因其工具覆盖广、分类细、更新快、界面友好,并提供详细使用教程和API文档,是寻找AI工具的一站式解决方案。

  • 国内有哪些AI工具导航网站?2025年最全AI工具导航网站盘点

    本文介绍了国内主要AI工具导航网站,帮助用户快速找到合适的AI资源。重点推荐了AIbase、AI工具集、人工智能导航和AI导航站等平台,这些网站收录了上万种AI工具,涵盖聊天助手、办公、视频、编程、写作、图像等多个领域。文章分析了各平台特色:AIbase规模大、分类全;AI工具集界面简洁更新快;人工智能导航提供综合学习资源;AI导航站有智能推荐系统。建议用户根据需求选择内容丰富、分类清晰、体验良好的导航网站,并关注更新和社区互动,以充分利用AI工具提升效率。

  • AI 工具多到头疼?AI 工具大全看这个网站就够了

    本文针对AI工具过多、难以筛选的问题,推荐了多个优质AI工具导航平台。文章首先指出当前AI工具数量庞大、信息碎片化严重,普通用户难以快速找到优质工具。随后重点推荐了Insidr.ai、Futurepedia.io、Toolify.ai等国际平台,以及国内平台AIbase,这些平台收录了数千款主流AI工具,覆盖写作、图像生成、编程、办公自动化等各类场景,支持分类检索、工具评测和对比功能。文章特别

  • 在线 AI 工具大盘点:哪个生图更好用?超实用导航网站推荐

    文章介绍了当前在线AI工具在各领域的广泛应用,重点分析了写作、设计和教育三大领域的代表性工具。写作方面,ChatGPT和豆包能快速生成各类文本内容;设计领域,Adobe Firefly和Canva通过AI简化创作流程;教育工具如松鼠Ai提供个性化学习方案。文章还对比了Midjourney、Stable Diffusion和文心一格等生图工具的优劣,最后推荐AIbase导航网站帮助用户快速找到合适工具。这些AI工具显著

  • 最全AI工具导航网站盘点:国内优质AI工具导航平台深度解析

    本文介绍了国内主流AI工具导航网站,帮助用户在海量AI工具中精准定位所需。随着AI技术发展,优质导航网站不仅能系统性分类各类工具,还能提供实时更新的评测和使用指南。重点推荐了5个平台:AIbase(收录超1万工具)、AI工具集(注重实用性评估)、优设AI导航(设计师专用)、AI导航网(创新性工具推荐)、AI工具网(智能搜索匹配)。建议用户根据工具收录量、分类体�

  • 樱花动漫网站运营者被捕 被判2年3个月:因侵犯著作权

    据日本内容海外流通协会消息,中国知名动漫网站“樱花动漫”的运营者于2023年10月14日被四川省成都市公安局正式立案调查,涉及刑事案件。经过一年多的司法程序,2024年12月13日,四川省成都市天府新区人民法院对该案作出一审判决:运营者因侵犯著作权罪被判处有期徒刑2年,并处罚金人民币1万元;同时,因伪造私文书罪被判处有期徒刑7个月,并处罚金人民币5000元。两罪并�

  • 成都地铁官方回应“防走光”设计:后续会考虑普及其他站点

    ​近日,有网友在社交平台上分享了成都地铁的一项人性化设计细节:部分站点的步梯与扶梯之间安装了非透明的磨砂玻璃。这一发现迅速引发了公众的关注和讨论。记者实地走访后确认,成都地铁确实在部分站点采用了这样的磨砂玻璃设计。 针对这一设计,成都地铁官方给出了正式回应。官方表示,这一改变源于此前乘客的反馈意见。有乘客提出,在步梯上行走时,由于透�

  • 荣耀Magic V Flip2官宣:背板采用独特工艺 璀璨星空设计

    今日,荣耀正式对外官宣了新一代小折叠旗舰——荣耀Magic V Flip2,瞬间吸引了众多数码爱好者的目光。不过,官方目前尚未公布该机的具体发布时间,但提前晒出了新机外观图,让大众得以一窥其背板设计的独特魅力。 此次荣耀Magic V Flip2再度携手Professor Jimmy Ch oo周仰杰博士精心打造。据介绍,从设计细节来看,每一处都精准到毫米,尽显优雅气质;每一次开合手机,都仿佛能

  • Checkout.com携手Visa推出发卡业务 (Card Issuing)

    Checkout.com与Visa达成战略合作,在英国及欧洲地区推出全方位发卡业务。通过Visa全球支付网络,商户可即时获取收款资金用于支付供应商款项,显著提升资金使用效率。该合作特别针对旅游业企业,解决其支付流程分散、资金周转慢的痛点。Checkout.com每年处理数千亿交易的技术能力与Visa网络结合,帮助商户消除预存资金需求,优化现金流管理。双方表示这将大幅提升欧洲商户运营效率,释放增长潜力。

  • iPhone 17 Pro长得像充电宝上热搜 全新设计引网友热议

    距离苹果新一代旗舰手机iPhone17 系列正式登场仅剩约 1 个月时间,目前新机外观已基本确定,据称这将是苹果史上变化最大的手机。今日,“iPhone17Pro长得像充电宝”这一词条冲上微博热搜榜,瞬间引发网友们的热烈讨论。 从设计细节来看,iPhone 17 Pro系列采用了横向大矩阵Deco设计,摄像头布局别具一格,左侧安置三摄,右侧则集成闪光灯与LiDAR扫描仪。不仅如此,该系列在材