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>


效果:

 

一点教程,一个分享编程知识的公众号。跟着站长一起学习和进步。

通俗易懂,深入浅出,一篇文章只讲一个知识点。

在公交、在地铁、在厕所都可以阅读,随时随地涨姿势。

文章不涉及代码,不烧脑细胞,人人都可以学习。

当你决定关注「一点教程」,你已然超越了90%的程序员!

一点教程二维码