CSS - 包含

上一页
下一页

有四种方法可以将样式与 HTML 文档关联。最常用的方法是内联 CSS 和外部 CSS。

嵌入式 CSS - <style> 元素

您可以使用 <style> 元素将 CSS 规则放入 HTML 文档中。此标签放置在<头部>...</head>标签。使用此语法定义的规则将应用于文档中所有可用的元素。这是通用语法：


<!DOCTYPE html>
<html>
	 <head><title>七 科 普 css 教程</title>
			<style type = "text/css" media = "all">
				 body {
						background-color: linen;
				 }
				 h1 {
						color: maroon;
						margin-left: 40px;
				 }
			</style>
	 </head>   
	 <body>
			<h1>这是七科普的标题</h1>
			<p>这是七科普 Qi Ke pu.com的段落.</p>
	 </body>
</html>

属性

与 <style> 元素关联的属性包括：

属性 值 描述
type text/css 将样式表语言指定为内容类型（MIME 类型）。这是必需属性。
media

screen

tty

tv

projection

handheld

print

braille

aural

all

 指定将在其上显示文档的设备。默认值为 all。这是一个可选属性。

 内联 CSS - style 属性

您可以使用任何 HTML 元素的 style 属性来定义样式规则。这些规则将仅适用于该元素。这是通用语法 -


<element style = "...style rules....">

属性

属性 值 描述
style style rules style 属性的值是用分号 （;) 分隔的样式声明的组合。

示例

以下是基于上述语法的内联 CSS 示例：


<html>
	 <head><title>七 科 普 css 教程</title>
	 </head>
	 <body>
			<h1 style = "color:#36C;">
				 这是内联 CSS 
			</h1>
	 </body>
</html>

外部 CSS - <link> 元素

<link> 元素可用于在 HTML 文档中包含外部样式表文件。

外部样式表是一个单独的文本文件，扩展名为 .css 。您可以在此文本文件中定义所有样式规则，然后可以使用 <link> 元素将此文件包含在任何 HTML 文档中。

这是包含外部CSS文件的通用语法:


<head>
	 <link type = "text/css" href = "..." media = "..." />
</head>

属性

与 <style> 元素关联的属性包括：

属性 值 描述
type text css 将样式表语言指定为内容类型（MIME 类型）。此属性是必需的。
href URL 指定具有样式规则的样式表文件。此属性是必需的。
media

screen

tty

tv

projection

handheld

print

braille

aural

all

 指定将在其上显示文档的设备。默认值为 all。这是可选属性。

示例

考虑一个简单的样式表文件，其名称mystyle.css具有以下规则：


h1, h2, h3 {
	 color: #36C;
	 font-weight: normal;
	 letter-spacing: .4em;
	 margin-bottom: 1em;
	 text-transform: lowercase;
}

现在，您可以将此文件mystyle.css包含在任何HTML文档中，如下所示 -


<head>
	 <link type = "text/css" href = "mystyle.css" media = " all" />
</head>

导入的 CSS - @import规则

@import 用于以类似于 <link> 元素的方式导入外部样式表。以下是@import规则的通用语法。


<head>
	 @import "URL";
</head>

此处 URL 是具有样式规则的样式表文件的 URL。您也可以使用另一种语法 -


<head>
	 @import url("URL");
</head>

示例

以下示例向您展示如何将样式表文件导入到HTML文档中 -


<head>
	 @import "mystyle.css";
</head>

CSS 规则覆盖

我们已经讨论了在 HTML 文档中包含样式表规则的四种方法。以下是覆盖任何样式表规则的规则。

  • 任何内联样式表都具有最高优先级。因此，它将覆盖 <style> 中定义的任何规则......</style>在任何外部样式表文件中定义的标记或规则。
  • 在 <style> 中定义的任何规则...</style> 标记将覆盖任何外部样式表文件中定义的规则。
  • 在外部样式表文件中定义的任何规则都具有最低优先级，并且仅当上述两个规则不适用时，才会应用此文件中定义的规则。

处理旧浏览器

仍然有很多老浏览器不支持CSS。因此，在 HTML 文档中编写嵌入式 CSS 时，我们应该小心。以下代码片段展示了如何使用注释标签从旧浏览器中隐藏 CSS：


<style type = "text/css">
	 <!--
			body, td {
				 color: blue;
			}
	 -->
</style>

CSS注释

很多时候，您可能需要在样式表块中添加其他注释。因此，在样式表中注释任何部分都非常容易。你可以简单地把你的评论放在 /*.....这是样式表中的注释.....*/。

您可以使用 /* ....*/ 以类似于 C 和 C++ 编程语言的方式注释多行块。

示例


<!DOCTYPE html>
<html>
	 <head>
			<style>
				 p {
						color: red;
						/* 这是注释 */
						text-align: center;
				 }
				 /* 这是注释*/
			</style>
	 </head>

	 <body>
			<p>七 科 普 教 程，你好！</p>
	 </body>
</html>
本页
上一页
下一页