插入 CSS 的三种方法
有三种插入样式表的方法：
- 外部 CSS
- 内部 CSS
- 内联 CSS
外部 CSS
带有一个 外部样式表，您可以通过更改来更改整个网站的外观只需一个文件！
每个 HTML 页都必须包含对内部外部样式表文件的引用 <link>元素，位于头部部分内。
<!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”文件的外观（不要在属性值(20)和单位(px)之间添加空格）：margin-left: 20 px是错误的;
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
内部 CSS
内部样式在 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>
内联 CSS
内联样式可用于为单个元素应用唯一样式。要使用内联样式，请将样式属性添加到相关元素。这 style 属性可以包含任何 CSS 属性。
<!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>
但是，如果在指向外部样式表的链接之前定义了内部样式，则 <h1> 元素将是 “深蓝”：
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
级联顺序
当为 HTML 元素指定了多个样式时，将使用什么样式？
页面中的所有样式都将“级联”为新的“虚拟”样式 按以下规则表，其中第一名具有最高优先级：
- 内联样式（在 HTML 元素内）
- 外部和内部样式表（在头部部分）
- 浏览器默认值
因此，内联样式具有最高优先级，并将覆盖外部和内部样式和浏览器默认值。
网友评论