当浏览器读取样式表时,它将根据以下格式格式化 HTML 文档 样式表中的信息。
插入样式表的方法有以下三种:
外部CSS
内部CSS
内联CSS
与 外部样式表,您可以通过更改来更改整个网站的外观 只有一个文件!
每个 HTML 页面必须包含对内部外部样式表文件的引用 head 部分内的 元素。
外部样式在 HTML 页面的 <head> 部分的 元素内定义:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
外部样式表可以在任何文本编辑器中编写,并且必须使用 .css 扩展名保存。
外部 .css 文件不应包含任何 HTML 标记。
“mystyle.css”文件的外观如下:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
注意:不要在属性值 (20) 和单位之间添加空格 (像素):
错误(空格):
margin-left: 20 px;
正确(无空格):
margin-left: 20px;
如果单个 HTML 页面具有独特的样式,则可以使用内部样式表。
内部样式在 <style> 元素内部定义,位于 head 内部 部分。
内部样式在 HTML 页面的 <head> 部分的 <style> 元素内定义:
<!DOCTYPE html>
<html>
<head>
<style>
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>
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
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 属性添加到相关元素。这 style 属性可以包含任何 CSS 属性。
内联样式在相关的“style”属性中定义 元素:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This
is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
提示:内联样式失去了样式表的许多优点(通过混合 内容与演示)。谨慎使用此方法。
如果在不同的样式表中为同一个选择器(元素)定义了某些属性, 将使用上次读取的样式表中的值。
假设外部样式表的<h1>元素具有以下样式:
h1
{
color: navy;
}
然后,假设内部样式表的<h1>元素也具有以下样式:
h1
{
color: orange;
}
如果内部样式是在外部样式表链接之后定义的,则 <h1> 元素将是 “橙子”:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>
</body>
</html>
但是,如果内部样式是在外部样式表链接之前定义的,则 <h1> 元素将是 “海军”:
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>
</body>
</html>
当为 HTML 元素指定多个样式时,将使用哪种样式?
页面中的所有样式都会“级联”成新的“虚拟”样式 按以下规则排列,其中第一个具有最高优先级:
内联样式(HTML 元素内)
外部和内部样式表(在头部)
浏览器默认
因此,内联样式具有最高优先级,并且将覆盖外部和 内部样式和浏览器默认值。
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
body {background-color: linen;}
</style>
</head>
<body style="background-color: lavender">
<h1>Multiple Styles Will Cascade into One</h1>
<p>Here, the background color of the page is set with inline CSS, and also with an internal CSS, and also with an external CSS.</p>
<p>Try experimenting by removing styles to see how the cascading stylesheets work (try removing the inline CSS first, then the internal, then the external).</p>
</body>
</html>