css教程之将 CSS 应用到 (X)HTML

当前位置:

首页 > 网站开发 > HTML >

css教程之将 CSS 应用到 (X)HTML

将 CSS 应用到 (X)HTML（相关css教程）
　　要开始应用您的 CSS，您需要告诉浏览器在哪里找到它。这应该是真正惟一 (X)HTML 引用 CSS 的地方。可以通过两种方式进行引用：“quick and dirty” <style> 标记或不显眼的 “quick and clean”<link> 标记。

　　quick and dirty：设置标记样式
　　此方法可能是查看应用到一个网页的样式的最快方法，它会使用非 HTML 代码 “弄脏” 网页。但是它只是您应用样式的一个网页（当然，除非使用服务器端语言来包含一个头部），如果将此样式复制并粘贴到另一个网页，会增加网页大小（这里指的是 KB 而不是宽度和高度）。因此，会增加每个网页的加载时间，让用户等待更长时间。时间对于用户而言比人们想象的更加重要，纵然您生活在超高速互联网时代。
　　那么它是如何完成的？非常简单，将以下标记添加到您的 HTML <head> 标记中：
<style>
/** Your CSS goes here **/
</style>
　　quick and clean：悄悄链接到 CSS
　　此方法可能是应用样式的比较整洁的方法。如果 CSS 位于外部文件中，可以从其他网页链接到它，进而确保您拥有整洁的 HTML 和较小的页面（再次说明，这里指的是 KB 而不是宽度和高度）。使用此方法更加简单：将以下代码添加到您的 HTML <head> 标记部分：
<link href="http://www.example.com/styles/style.css" media="screen" rel="stylesheet" type="text/css" />
　　其中 style.css 是一个纯文本文件，其中包含您的 CSS 代码。作为一种不错的做法，我为我网站的公共 html 文件夹使用以下基础结构：
· /public_html 文件夹，包含 HTML 文件或服务器端脚本（比如 PHP）
· /index.html（或用于 PHP 开发的 index.php），用于主页/启动页面
· /styles/ 目录，用于存储各种 CSS 文件
· /scripts/ 目录，用于存储各种 JavaScript 文件和库
　　此结构允许所有内容都整洁地包装 —— 同时保持分离并允许引用。
　　样式设置指南
　　本节详细介绍在浏览器不支持 CSS 版本 3 (CSS3) 时应用该版本会发生什么 —— 浏览器将忽略它并退回到默认设置。本节还将介绍 CSS3 样式（以 -moz、-webkit 等开头的样式）的特定于浏览器的实现。

栏目列表