- 行内样式**
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>位置1_行内样式</title>
</head>
<body>
<h1 style="color: green; font-size: 60px;">你好，孙笑川！</h1>
</body>
</html>2. 内部样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>位置2_内部样式</title>
<style>
h1{
color: lightgreen;
font-size: 60px;
}
h2{
color: orange;
font-size: 30px;
}
p{
color: lightcoral;
font-size: 25px;
}
img{
width: 400px;
}
</style>
</head>
<body>
<h1>你好，孙笑川！</h1>
<h2>大家好，我是药水哥！</h2>
<p>北京欢迎你</p>
<p>上海欢迎你</p>
<p>广州欢迎你</p>
<img src="../images/IMG_0003.JPG" alt="照片">
</body>
</html>3. 外部样式
position.css
h1{
color: lightgreen;
font-size: 60px;
}
h2{
color: orange;
font-size: 30px;
}
p{
color: lightcoral;
font-size: 25px;
}
img{
width: 400px;
}<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>位置2_内部样式</title>
<link rel="stylesheet" href="./position.css">
</head>
<body>
<h1>你好，孙笑川！</h1>
<h2>大家好，我是药水哥！</h2>
<p>北京欢迎你</p>
<p>上海欢迎你</p>
<p>广州欢迎你</p>
<img src="../images/IMG_0003.JPG" alt="照片">
</body>
</html>
评论 (0)