<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: lightblue
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>p标签拥有浅蓝色背景色！</p>
</body>
</html>
然后保存文件，将后缀名修改为.HTML，然后用浏览器打开，一个简单的网页就出现了。
html:
<!DOCTYPE html>
<html>
<head>
<title>My webpage</title>
</head>
<body>
<div>
<h1>My first div</h1>
<p>This div uses inline CSS to style its content.</p>
<style>
h1 {
color: red
}
p {
font-size: 16px
text-align: center
}
</style>
</div>
<div>
<h1>My second div</h1>
<p>This div uses an external CSS file to style its content.</p>
<link rel="stylesheet" type="text/css" href="styles.css">
</div>
<div>
<h1>My third div</h1>
<p>This div uses an embedded style sheet to style its content.</p>
<style>
/* This is an embedded style sheet */
h1 {
color: blue
}
p {
font-size: 14px
text-align: left
}
</style>
</div>
</body>
</html>
style.css:
/* This is an external style sheet */
h1 {
color: green
}
p {
font-size: 18px
text-align: right
}
这段代码中，第一个div使用内联CSS来样式其内容，第二个div使用外部CSS文件来样式其内容，第三个div使用嵌入式样式表来样式其内容。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）