CSS 的三种样式
2018-08-09 本文已影响11人
醉叶惜秋
概念
Caseading Style Sheets 层叠样式表
编写格式是键值对形式比如：
color : red;
font-size:20px;
3种书写形式
行内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内样式</title>
</head>
<body>
<div style="color: blue; font-size: 28px;background-color: blueviolet">我是容器标签</div>
<p style="border: 5px solid chartreuse">我是段落标签</p>
</body>
</html>
页内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页内样式</title>
<!--公共样式-->
<style>
div{
color: red;
font-size: 30px;
border: 4px solid yellow;
}
p{
color: blue;
font-size: 14px;
}
</style>
</head>
<body>
<div>我是容器标签</div>
<div>我是容器标签</div>
<div>我是容器标签</div>
<p>我是段落标签</p>
<p>我是段落标签</p>
<p>我是段落标签</p>
</body>
</html>
外部样式
在单独的 CSS 文件中书写。然后再网页中用 link 标签引用。
image.png
在需要调用的地方引用css 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部样式</title>
<!--引用外部样式-->
<link rel="stylesheet" href="CSS/Index.css">
</head>
<body>
<div>我是容器标签</div>
<div>我是容器标签</div>
<div>我是容器标签</div>
<p>我是段落标签</p>
<p>我是段落标签</p>
<p>我是段落标签</p>
</body>
</html>
总结
css的规律：
1.就近原则
2.叠加原则（你有的样式我就用你的，你们，你没有的我就用前面的）
