手册
目录
前言：
当浏览器读取一个样式表时，它会根据样式表中的信息来格式化 HTML 文档。
插入样式表的三种方式：
使用外部样式表，只需修改一个文件，就可以改变整个网站的外观！
每个 HTML 页面都必须在 head 部分中通过 <link> 元素引用外部样式表文件。
外部样式在 HTML 页面的 <head> 部分中的 <link> 元素内定义：
<br></br><html><br></br><head><br></br><link rel="stylesheet" href="mystyle.css"><br></br></head><br></br><body><br></br><br></br><h1>This is a heading</h1><br></br>
<p>This is a paragraph.</p><br></br><br></br></body><br></br></html>运行实例 »点击 "运行实例" 按钮查看在线实例
外部样式表可以在任何文本编辑器中编写，且必须以 .css 为扩展名保存。
外部的 .css 文件中不应包含任何 HTML 标签。
以下是 "mystyle.css" 文件的内容：
body {<br></br>background-color: lightblue;<br></br>}<br></br><br></br>h1 {<br></br>color: navy;<br></br>margin-left: 20px;<br></br>}运行实例 »点击 "运行实例" 按钮查看在线实例
注意： 属性值（20）和单位（px）之间不要加空格：
错误（带空格）：margin-left: 20 px;
正确（无空格）：margin-left: 20px;
如果某个 HTML 页面具有独特的样式，可以使用内部样式表。
内部样式在 head 部分中的 <style> 元素内定义。
内部样式在 HTML 页面的 <head> 部分中的 <style> 元素内定义：
<br></br><html><br></br><head><br></br><style><br></br>body {<br></br>
background-color: linen;<br></br>}<br></br><br></br>h1 {<br></br> color: maroon;<br></br>
margin-left: 40px;<br></br>} <br></br></style><br></br></head><br></br><body><br></br><br></br><h1>This is a
heading</h1><br></br><p>This is a paragraph.</p><br></br><br></br></body><br></br></html>运行实例 »点击 "运行实例" 按钮查看在线实例
行内样式可用于为单个元素应用独特的样式。
使用行内样式时，需要向相关元素添加 style 属性。该属性可以包含任意 CSS 属性。
行内样式在相关元素的 "style" 属性中定义：
<br></br><html><br></br><body><br></br><br></br><h1 style="color:blue;text-align:center;">This
is a heading</h1><br></br><p style="color:red;">This is a paragraph.</p><br></br><br></br>
</body><br></br></html>运行实例 »点击 "运行实例" 按钮查看在线实例
提示： 行内样式失去了样式表的许多优势（混合了内容和表现）。建议谨慎使用这种方法。
如果不同的样式表中为同一个选择器（元素）定义了某些属性，那么最后读取的样式表中的值将被使用。
假设一个外部样式表中为 <h1> 元素定义了以下样式：
h1
{<br></br>
color: navy;<br></br>
}运行实例 »点击 "运行实例" 按钮查看在线实例
再假设一个内部样式表中也为 <h1> 元素定义了以下样式：
h1
{<br></br>
color: orange;
<br></br>}运行实例 »点击 "运行实例" 按钮查看在线实例
如果内部样式定义在外部样式表的链接之后，那么 <h1> 元素的颜色将为 "orange"：
<head><br></br><link rel="stylesheet" type="text/css" href="mystyle.css"><br></br>
<style><br></br>h1 {<br></br>color: orange;<br></br>}<br></br></style><br></br></head>运行实例 »点击 "运行实例" 按钮查看在线实例
但是，如果内部样式定义在外部样式表的链接之前，那么 <h1> 元素的颜色将为 "navy"：
<head><br></br><style><br></br>h1 {<br></br>color: orange;<br></br>}<br></br></style><br></br><link rel="stylesheet" type="text/css" href="mystyle.css"><br></br>
</head>运行实例 »点击 "运行实例" 按钮查看在线实例
当一个 HTML 元素有多个样式被指定时，哪个样式会被使用？
页面中的所有样式将按照以下规则“层叠”成一个新的“虚拟”样式表，其中编号越小优先级越高：
因此，行内样式的优先级最高，会覆盖外部样式、内部样式和浏览器默认样式。
听说过 PHP中文网 吗？在这里你可以免费创建自己的网站，或者保存代码片段以备后用。
立即开始 ❯ *无需信用卡
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.3万人学习
共49课时
77.7万人学习
共29课时
62.2万人学习
共25课时
39.6万人学习
共43课时
71.5万人学习
共25课时
62.1万人学习
共22课时
23.2万人学习
共28课时
34.2万人学习
共89课时
126.3万人学习
