好学IT学院：IT信息技术分享交流平台
好学网>>好学IT学院>软件开发技术>>Web前端技术
web标准化、XHTML与CSS层叠样式表的关系
来源：派生网络学院  作者：不详  发布时间：2006-09-05  ★★★〖加入收藏〗〖手机版〗
摘要：Web标准把网页分成三个独立组成部分: * 结构:HTML，XHTML，XML* 表现:CSS1，CSS2* 行为:ECMAScript, DOMWeb标准至今没有对外观审美做任何指导方针和戒律，对站点的外观和感觉没有做任何限制，它们只不过……

1. 外联/导入

<link rel="StyleSheet" href="/styles/mystylesheet.css" type="text/css" media="all />

或

<style type="text/css" media="all">

@import "/styles/mystylesheet.css";

</style>

或

<style type="text/css" media="all">

@import url("/styles/mystylesheet.css");

</style>

注:@Import 法只有5.0以上的浏览器支持

2. 嵌入(在XHTML页面head位置嵌入)

以下是引用片段：

<head>

<style type="text/css">

<!-

…

-->

</style>

…

</head>

使用嵌入的原因:

* 该样式表只用于本页面

* 用户还在使用IE3

* 设计师不断修改样式表，需要立即看到效果

3. 内联(在元素上加上样式属性)

为整个站点指定字体:

* body { font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, sans-serif; }

* 由多个字母组成的字体名称须用引号包括;

* 如果排在前面的字体不存在，则使用后面第一个存在的字体。

* "Lucida Grande"-Mac OS X　，Verdana-Windows　，Lucida---Unix　，Arial----旧windows　，Helvetica----旧Unix

* 利用冗余解决浏览器不支持继承的问题，如:

Body { font-family: Verdana, sans-serif; }P, td, ul, ol, ul, li, dl, dt,dd

{ font-family: Verdana, sans-serif; }

将无序列表前的黑点替换为一个图片:

* ul.inventory{ list-style: disc url(/path/to/pic.gif) inside; }

对颜色的定义:

* P { color: red; }

* P { color: #ff0000; }

* P { color: #f00; }

* P { color: rgb(255,0,0); }

* P { color: rgb(100%,0%,0%); }

# 根据元素表现的内容来决定元素的样式，避免过度的class，保持标记的简洁整齐。

# 如:列表项里strong显示为斜体而不是黑体。Li strong { Font-style: italic; Font-weight: normal; }

# 选择器的两部分内容之间，以空格相隔，其中前一部分可以是一般选择、id选择器、或类选择器。

# 现代布局中，id选择器经常出现在内容选择器里

如: #sidebar p {font-style:italic; text-align: right; margin-top: 0.5em; }

# 不能出现在或等标记的内联元素中。

# Id选择器标记的元素每个页面只能出现一次，但一个id选择器可多次用于定义内容/派生选择器定义。

web标准化XHTMLCSS层叠样式表关系