简介
本文介绍在前端HTML中写CSS的三种方法。
有内联样式、内部样式、外部样式。优先级为：内联样式 > 内部样式 > 外部样式。当同一个样式在不同位置定义时，会使用优先级高的样式。
内联样式
行内样式，又叫做标签样式，写在标签的 style 属性上。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
</head>
<body>
<div style="color: green">
这是div元素
</div>
</body>
</html>内部样式
写法1：写到head
将CSS样式写到页面头部，写在<style></style>之间。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
<style>
div {
color: green;
}
</style>
</head>
<body>
<div>
这是div元素
</div>
</body>
</html>写法2：写到body
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
</head>
<body>
<style>
div {
color: green;
}
</style>
<div>
这是div元素
</div>
</body>
</html>外部样式
把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内使用<link>标签将css样式文件链接到HTML文件内。
CSS文件（demo.css）
div {
color: green;
}HTML文件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
<link rel="stylesheet" href="./demo.css">
</head>
<body>
<div>
这是div元素
</div>
</body>
</html>
扫一扫
1881
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
