<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span style="font-size: 30px;color:blue">栏目一</span><br/>
<span style="font-size: 10px;color: red;font-style: italic;">栏目一</span><br/>
<span style="font-size: 40px;color: green;font-weight: bold;">栏目一</span><br/>
<span style="font-size: 20px;color: pink;font-weight: lighter;">栏目一</span><br/>
<span style="font-size: 30px;color: red;font-weight: lighter;">栏目一</span><br/>
</body>
</html>
没有使用css时候
css分内部css与外部css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.style2{
font-size: 20px;
color: red;
font-weight: bold;
font-style: italic;
text-decoration: underline;
}
</style>
</head>
<body>
<span class="style2">栏目一</span><br/>
<span class="style2">栏目一</span><br/>
<span class="style2">栏目一</span><br/>
<span class="style2">栏目一</span><br/>
<span class="style2">栏目一</span><br/>
</body>
</html>
汶川地震的时候网页都变黑白，怎么实现
css的滤镜体验：
变黑白;
<!DOCTYPE html>
<!--实现滤镜功能-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img {
filter: grayscale(100%);
}
</style>
</head>
<body>
<img src="img/help_steps.jpg">
<img src="img/login_step1.jpg">
<img src="img/login_step2.jpg">
</body>
</html>
鼠标悬浮变色功能;
<!DOCTYPE html>
<!--实现滤镜功能-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link {
filter: grayscale(100%);
}
a:hover {
filter: grayscale(0%);
}
;
</style>
</head>
<body>
<a href="#"> <img src="img/help_steps.jpg"></a>
<a href="#"> <img src="img/login_step1.jpg"></a>
<img src="img/login_step2.jpg">
</body>
</html>
eg；
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>
</head>
<body>
<p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p>
<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p>
<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p>
</body>
</html>