- 行内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p style="color:red;">锄禾日当午，汗滴禾下土</p>
</body>
</html>
- 内嵌样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p{
color: red;
}
</style>
</head>
<body>
<p>锄禾日当午，汗滴禾下土</p>
<p>谁知盘中餐，粒粒皆辛苦</p>
</body>
</html>
该网页所有p标签内的内容都会变成红色。
- 单独文件
建立一个website文件夹，在这个文件夹中放入一个html文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<p>离离原上草，一岁一枯荣</p>
<p>野火烧不尽，春风吹又生</p>
</body>
</html>
再在website文件夹中新建一个文件夹css,在这个文件夹中放入一个css文件
p{
color:red;
}
单独文件的特点是：页面结构html代码与样式css代码完全分离；维护方便；如果需要改变网站风格，只需要修改公共css文件。
- 优先级
行内样式>内嵌样式>链接样式(单独文件)>浏览器默认样式
扫一扫
768
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
