使用style设置属性：如a，p，h1等的颜色，背景：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第二个程序</title>
<style type="text/css">
h1 {
color: red
}
p {
color: blue
}
a {
color:green;
background:black
}
</style>
</head>
<body>
<h1> head是红色吗？</h1>
<p> 段落是蓝色吗？ </p>
<a href="https://blog.csdn.net/weixin_42721412" target="_black">我的博客</a herf>
</body>
</html>
效果：
更加细致的美化1：设置网页的背景：
<style type="text/css">
body{
background-image: url("./shaohan.png")
}
</style>居中，或者比例设置：
居中：
h1{
text-align: center;
color: white;
}比例：
h2{
margin-left: 60%;
color: white;
}效果：
分别是：缩进，字体尺寸，行高：
p {
text-indent: 32px;
font-size: 16px;
line-height: 32px;
color: white;
}效果：
图片相关：
代码：
img {
position: absolute;
left: 50%;
margin-left: -500px;
}效果：
media：
如，为打印专本设置一个样式：
<style media:"print">
</style>表示战门为打印模式设置一个style：
表示在电脑屏幕显示时，并且最少为512 最大为1024
上述示例：
有意思吧！代码：
<style media="screen and (min-width:521px) and (max-width:1024)">
body{
background-image: url("./mm.jpg")
}
</style>因为不满足and执行的是：
<style type="text/css">
body{
background-image: url("./shaohan.png")
}本节所有代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第二个程序</title>
<style type="text/css">
body{
background-image: url("./shaohan.png")
}
h1{
text-align: center;
color: white;
}
h2{
margin-left: 60%;
color: white;
}
p {
text-indent: 32px;
font-size: 16px;
line-height: 32px;
color: white;
}
img {
position: absolute;
left: 50%;
margin-left: -500px;
}
</style>
<style media:"print">
</style>
<style media="screen and (min-width:521px) and (max-width:1024)">
body{
background-image: url("./mm.jpg")
}
</style>
</head>
<body>
<a href="https://blog.csdn.net/weixin_42721412" target="_black">我的博客</a herf>
<h1> head是红色吗？</h1>
<h2> 故事开始了：</h2>
<p>
其实这是一个很长的故事，山里的老和尚讲的故事：山里的老和尚讲的故事：
山里的老和尚讲的故事：山里的老和尚讲的故事：山里的老和尚讲的故事：
山里的老和尚讲的故事：山里的老和尚讲的故事：山里的老和尚讲的故事：
山里的老和尚讲的故事：山里的老和尚讲的故事：山里的老和尚讲的故事：
山里的老和尚讲的故事：山里的老和尚讲的故事：山里的老和尚讲的故事：
山里的老和尚讲的故事：山里的老和尚讲的故事：山里的老和尚讲的故事：
山里的老和尚讲的故事：山里的老和尚讲的故事：山里的老和尚讲的故事：
</p>
<p>
hhaha,结束了!!!
</p>
<img alt="mm正在赶到" src="./mm.jpg" width="1000px" height="666px">
</body>
</html>
style那么长，我们可以将其放入一个后缀为。css的文件：
styles就是之前在style《css》中的代码。
其他的也可以：
href：里面是外部样式的文件名。
设置网页的图标：
但是据说有的浏览器不解析，比如我的就没有变化：
<link rel="icon" type="image/x-icon" href="./shaohan.ico">base简化超链接
上述代码会使得三个网页都是上述那个，并且在新窗口中打开！
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第二个程序</title>
<style type="text/css">
body{
background-image: url("./shaohan.png")
}
h1{
text-align: center;
color: white;
}
h2{
margin-left: 60%;
color: white;
}
p {
text-indent: 32px;
font-size: 16px;
line-height: 32px;
color: white;
}
img {
position: absolute;
left: 50%;
margin-left: -500px;
}
</style>
<style media:"print">
</style>
<style media="screen and (min-width:521px) and (max-width:1024)">
body{
background-image: url("./mm.jpg")
}
</style>
<link rel="icon" type="image/x-icon" href="./shaohan.ico">
</head>
<body>
<a href="https://blog.csdn.net/weixin_42721412" target="_black">我的博客</a herf>
<h1> head是红色吗？</h1>
<h2> 故事开始了：</h2>
<p>
其实这是一个很长的故事，山里的老和尚讲的故事：山里的老和尚讲的故事：
山里的老和尚讲的故事：山里的老和尚讲的故事：山里的老和尚讲的故事：
山里的老和尚讲的故事：山里的老和尚讲的故事：山里的老和尚讲的故事：
山里的老和尚讲的故事：山里的老和尚讲的故事：山里的老和尚讲的故事：
山里的老和尚讲的故事：山里的老和尚讲的故事：山里的老和尚讲的故事：
山里的老和尚讲的故事：山里的老和尚讲的故事：山里的老和尚讲的故事：
山里的老和尚讲的故事：山里的老和尚讲的故事：山里的老和尚讲的故事：
</p>
<p>
hhaha,结束了!!!
</p>
<img alt="mm正在赶到" src="./mm.jpg" width="1000px" height="666px">
</body>
</html>
，