首先插入样式表的方法有三种:
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style)
一.内部样式表
与笔记一的实例相同，直接使用 style 标签在文档头部定义内部样式表就可以了
<style>
h1
{
color:red;
font-size:12px;
}
</style>
二.外部样式表
如何创建外部样式表？
例如：
1.将下列代码保存为mystyle.css文件
h1
{
color:red;
font-size:12px;
}
.center
{
text-align:center; /*居中*/
}
p
{
text-align:center;
font-size:24px;
}
p.blue
{
color:blue;
}
p.yellow
{
color:yellow
}
#green
{
color:green;
}
2.在自己所需的html文件里使用link标签链接到自己的外部样式表
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/>
<link rel = "stylesheet" type = "text/css" href = "mystyle.css"/>
<title>外部样式表</title>
</head>
<body>
<h1 class = "center">我一个h1的标题怎么这么小？</h1>
<p>我只是一个普通的居中段落</p>
<p id = "green">羊村大草原</p>
<p class = "yellow">我变成黄色了</p>
<p class = "blue">我又成为蓝色了！</p>
</body>
</html>
结果：
三.内联样式
只需要在相关的标签内使用样式（style）属性。
由于会损失掉样式表的许多优势，所以此方法慎用。
例如：
<p style="color:green;font-size:24px">这是一个段落。</p>
四.多重样式
样式表允许以多种方式规定样式信息。
样式可以规定在单个的 HTML 元素中(内联样式)，在 HTML 页的头元素中(内部样式表)，或在一个外部的 CSS 文件中(外部样式表)。
甚至可以在同一个 HTML 文档内部引用多个外部样式表。
一般情况下，优先级如下：
内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style
sheet > 浏览器默认样式
30万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
