元素style

HTML文件的基本结构

previous page next page
style
适用DTD：Strict Transitional Frameset   适用浏览器：All
释义 样式信息（style info）

语法
<style 属性="属性值">~标签内容~</style>

说明
style元素用来为文档创建内部样式表，style为head的子元素
在HTML文件中可以将style元素的标签内容（即样式表）用HTML注释<!--与-->包括起来，从而避免旧版本的浏览器因不支持样式表而将样式表当成文字给显示出来
在XHTML文件中，style元素被声明为#PCDATA内容形式，<和&被视为标签的开始，而&lt;和&amp;又会被认为是<和&，所以必须将style元素的内容包括在CDATA标记中，也就是使用XML的CDATA section形式。而在需要以text/html发送的文件中，为了能在不能处理CDATA部分的浏览器中隐藏，CDATA部分的起始和结束标签也需要注释掉
终止标签不可省略

属性
属性 属性值 说明
① type MIME类型 指定样式信息的内容类型，层叠样式表（Cascading Style Sheet）一般总是设置为text/css
② media 媒体类型 指定输出的媒体(media/medium)，可能的属性值有：
  • screen：表示普通计算机屏幕显示；
  • tty：有限显示设备，包括远程系统、终端或者嵌入式设备等；
  • tv：低刷新率、有限色彩和单屏电视屏幕；
  • projection：投影仪；
  • handheld：手持设备；
  • print：多页打印机；
  • braille：盲文回馈系统；
  • aural：语言同步系统；
  • all：适用于所有系统。
可指定多个，中间以英文逗号隔开
③ 通用属性：id、title、dir、lang、xml:lang 查看
nbsp;
同script元素一样，style元素可能也得不到老版本的浏览器的支持（当然，新版本的浏览器也可以让用户停止支持样式表），为了不至于让这些浏览器把样式信息当作普通文本显示在页面上，需要对样式信息进行注释。例如：
<style type="text/css">
<!--
h1 { color: red }
p { color: blue}
-->
</style>

外部样式表
使用style元素在页面中创建的是内联的样式表（目前网页中使用的样式表都是CSS，即层叠样式表:Cascading style sheet），而要链接一个外部样式表则需要使用link元素，具体如下：
  • 为link元素设置href属性，属性值为指向外部样式表文件的URI
  • 设置type属性，用以指明所链接的样式表的语言类型。这样可以避免浏览器下载不被支持的语言类型的样式表
  • 指定样式表的类型：固定的（persistent），首选的（preferred）以及可选的（alternate）：
    • 要使得一个样式表成为固定样式表，设置rel属性取值为"stylesheet"，不要设置title属性
    • 要使得一个样式表成为首选的样式表，设置rel属性取值为"stylesheet"，并且设置title属性以便为该样式表命名
    • 要使得一个样式表成为可选的样式表，设置rel属性取值为"alternate stylesheet"，并且设置title属性以便为该样式表命名
遵循CSS规范的新版浏览器已经向用户提供了查看和选择可选样式的方式，title属性一般作为可选样式在选择列表中的名称。

下面的例子中，定义了一个固定样式表，位于文件mystyle.css：
<link href="mystyle.css" rel="stylesheet" type="text/css">
加入title属性，使之成为作者有限选择的样式表：
<link href="mystyle.css" title="compact" rel="stylesheet" type="text/css">
在rel属性中加入关键字"alternate"，使之成为可选样式表:
<link href="mystyle.css" title="compact" rel="alternate stylesheet" type="text/css">

根据W3C的HTML 4.01规格书，也可以使用meta元素设置首选的样式表，例如设置名为"compact"的样式表为首选的样式表：
<meta http-equiv="Default-Style" content="compact">
使用meta元素(或者HTTP头)设置的首选样式表优先级大于使用link元素设置的。
层叠样式表
下面的例子中设置了两个名为"compact"的可选样式表，用户选择"compact"样式时，浏览器会应用固定样式表"common.css"及"small-base.css"和"small-extras.css"；如果用户选择"big font"样式，浏览器会应用固定样式表common.css和bigfont.css：
<link rel="alternate stylesheet" title="compact" href="small-base.css" type="text/css">
<link rel="alternate stylesheet" title="compact" href="small-extras.css" type="text/css">
<link rel="alternate stylesheet" title="big print" href="bigprint.css" type="text/css">
<link rel="stylesheet" href="common.css" type="text/css">
使用style定义的内部样式表和link定义的外部样式表可以出现在同一文档中：
<LINK rel="stylesheet" href="corporate.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE type="text/css">
p.special { color: rgb(230, 100, 180) }
</STYLE>
使用style定义内部样式表和link定义外部样式表都可以带上media属性，以应用于不同的媒体，用户代理器应该根据媒体的不同选择适合的样式表。
例如，下面的例子中，"techreport.css"定义的样式将应用于所有的媒体，其他的都只适合相应的媒体：
<link rel="stylesheet" media="aural" href="corporate-aural.css" type="text/css">
<link rel="stylesheet" media="screen" href="corporate-screen.css" type="text/css">
<link rel="stylesheet" media="print" href="corporate-print.css" type="text/css">
<link rel="stylesheet" href="techreport.css" type="text/css">
<style media="screen, print" type="text/css">
p.special { color: rgb(230, 100, 180) }
</style>

示范
<style type="text/css">
样式信息
</style>

范例
下面的例子显示了XHTML文件基础结构： 运行打印
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" href="default.css" type="text/css">
<link rel="alternate stylesheet" media="screen" title="蓝色" href="src/blue.css" type="text/css">
<link rel="alternate stylesheet" media="screen" title="粗体" href="src/flat.css" type="text/css">
<link rel="stylesheet" href="default.css" type="text/css">
<title>元素style</title>
<style type="text/css">
p.test{font-size:18px}
</style>
</head>
<body>
<p class="test" style="font-weight:nomal">The cascading mechanism is used when a number of style rules all apply directly to an element. The mechanism allows the user agent to sort the rules by specificity, to determine which rule to apply. If no rule can be found, the next step depends on whether the style property can be inherited or not. Not all properties can be inherited. For these properties the style sheet language provides default values for use when there are no explicit rules for a particular element.</p>
此页面提供了可选样式，可在新版本的浏览器中选择不同的页面风格，例如：<br>
对于IE 8.0，选择菜单“查看-样式”，本例有蓝色粗体两种。<br>
对于FireFox，选择菜单“查看-页面风格”。<br>
</body>
</html>

参阅
link
meta
class属性
id属性

previous page start next page