CSS的优势


先提出以下需要,看如何实现如下页面效果:


一、使用HTML标签实现效果

我们可以简单的写出栏目一和栏目五,但是这些栏目的字体,字体大小,字体颜色。如何定义,可以使用html的<font属性>,例如:

<font color="red" face="宋体" size="20px">栏目一</font>


但是查看文档,发现font标签的属性,都不赞成使用
这里其实是涉及到页面的显示效果,我们应该使用css 进行实现


二、体验如何使用css美化页面?
我们知道css可以将网页变得漂亮,我们想要通过css 调整字体的大小和颜色,,查看文档,找到css 的属性(很多), 其中有字体(font),发现了font-size 属性和color属性.。
在标签span中的属性style 可以添加css属性。

代码如下:

<html>
	<head>
	</head>
	<body>
		<span style="font-size: 30px; color: green;">栏目一</span>
		<br />
		<span style="font-size: 20px; color: yellow;">栏目二</span>
		<br />
		<span style="font-size: 20px; color: blue">栏目三</span>
		<br />
		<span style="font-size: 30px; color: red">栏目四</span>
		<br />
		<span style="font-size: 30px; color: blue">栏目五</span>
		<br />
	</body>
</html>


效果: