内嵌样式表
1、格式
<a style="font-family: 黑体;font-style: italic; font-size: 20px;color: blue;" >内嵌样式表</a>
2、说明
- 直接写在标签内的样式,为内嵌样式。
- 只对其所在标签起作用
内部样式表
1、格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
font-family: "黑体";
size: 10px;
color: blueviolet;
}
</style>
</head>
<body>
<p>
内部样式表
</p>
</body>
</html>
2、说明
- 应用style标签
外部样式表
1、格式
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="p.css">
</head>
<body>
<p>外部样式表</p>
</body>
</html>
p.css
p{
font-family: 楷体;
font-size: large;
color: chartreuse;
font-style: italic;
}
2、说明
- 应用< link >标签
- 导入外部.css文件
导入样式表
1、格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@import url("p.css");
</style>
</head>
<body>
<p>导入样式表</p>
</body>
</html>
2、说明
- 在style标签内引用@import url(" ");