最常用的方法是内联CSS和外部CSS。
嵌入Style标签
您可以使用<style>元素将CSS规则放入HTML文档中。 该标签位于<head> ... </head>标签内。通用语法-
<!DOCTYPE html> <html> <head> <style type="text/css" media="all"> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
它将产生以下输出-
与<style>元素关联的属性是-
属性 | 值 | 说明 |
---|---|---|
type | text/css | 将样式表语言指定为内容类型(MIME类型)。这是必填属性。 |
media |
screen tty tv projection handheld braille aural all |
指定将在其上显示文档的设备,默认值为all,这是一个可选属性。 |
嵌入Style属性
您可以使用任何HTML元素的 style 属性来定义样式规则。这些规则将仅应用于该元素。这是通用语法-
<element style="...style rules....">
属性 | 值 | 说明 |
---|---|---|
style | 样式规则 | style 属性的值是用分号(;)分隔的样式声明的组合。 |
以下是基于上述语法的内联CSS的示例-
<html> <head> </head> <body> <h1 style="color:#36C;"> This is inline CSS </h1> </body> </html>
它将产生以下输出-
嵌入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 braille aural 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>
导入外部样式
@import用于导入外部样式表,其方式类似于<link>元素。 这是@import规则的通用语法。
<head> @import "URL"; </head>
URL是具有样式规则的样式表文件的URL。您也可以使用其他语法-
<head> @import url("URL"); </head>
以下示例显示了如何将样式表文件导入HTML文档-
<head> @import "mystyle.css"; </head>
CSS 优先级
标签属性样式优先级最高。
其次是<style> ... </style>标签中定义的模式。
最后是外部<link>加载的css样式文件。
处理旧浏览器
仍然有许多不支持CSS的旧浏览器。因此,在HTML文档中编写嵌入式CSS时,应格外小心。以下代码段显示了如何使用注释标签对较旧的浏览器隐藏CSS-
<style type="text/css"> <!-- body, td { color: blue; } --> </style>
CSS注释
很多时候,您可能需要在样式表块中添加其他注释。因此,在样式表中注释任何部分都非常容易。您可以简单地将注释放在/* .....这是注释..... * /。
您可以使用/* .... * /来注释多行块,就像在C和C++编程语言中那样。
<!DOCTYPE html> <html> <head> <style> p { color: red; /* This is a single-line comment */ text-align: center; } /* This is a multi-line comment */ </style> </head> <body> <p>Hello World!</p> </body> </html>
它将产生以下输出-