CSS样式书写规则:
三种引入CSS样式表:
行内式(内联样式)(使用较少)
优点: 书写方便,权重高
缺点: 没有实现样式与结构分离
控制范围: 一个标签
<html>
<head>
<title>行内样式表</title>
</head>
<body>
<h1 style="color: red; font-size: 18px;">行内样式表</h1> #直接在标签内引用
</body>
</html>
内部样式表(内嵌样式表)(使用较多)
优点: 部分结构与样式分离
缺点: 没有彻底分离
控制范围:一个页面
<html>
<head>
<meta charset="utf-8">
<title>内部样式表</title>
<style type="text/css">
h1 {
color: green;
font-size: 20px;
}
p {
color: blue;
}
</style>
</head>
<body>
<h1>内部样式表1</h1>
<p>内部样式表2</p>
</body>
</html>
外部样式表(外链式)(强烈推荐)
优点: 完美实现结构与样式分离
缺点: 需要引入
控制范围: 整个站点
<html>
<head>
<meta charset="utf-8">
<title>外部样式表</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>外部样式表1</h1>
<p>外部样式表2</p>
</body>
</html>
未经本人允许禁止转载