在上一期的代码中,我们用到 h1,p,a 等标签,这些标签确定了我们想在网页中展示一个标题,一个段落,和一个链接。
在上一节我们也看到了,浏览器会给我们的标签“渲染”一个默认的样式,包括默认的字体大小,颜色,间距等。
那么,如果我们想自己改变这些字体大小和颜色的话,该怎么做呢?这一期,我们来谈谈所谓“样式”。
所谓样式
我们所说的样式,是特指可以改变 HTML 表现的一种代码,全称叫做“层叠样式表”,英文为 CSS( Cascading Style Sheets),稍后我们会再深入讲解。
我们首先从“内联样式”开始,内联样式是以 HTML 属性(回复 002 )的形式定义的,属性名为 style。
我们再次打开记事本,编辑上一次的 index.html 文件并保存:
<h1 style="font-size: 14px; color: red;">此非然并卵</h1>
这里,从字面意思上大致可以猜到,一个是设置了字体大小(font-size),一个是设置了颜色(color)。那么让我们来预览一下效果:
我们可以看到图中的 h1 标签已经变成了我们设置的字体和颜色了。接下来,我们再做一点点改变:
<a style="text-decoration:none;" href=“http://diao.it” target=“_blank” title=“Why are you so diao?”>DIAO.IT</a>
这个单词貌似复杂一点了... 这个属性是用来设置文本的一些“装饰”性的表现的,类似 Word 里面的 U 和 I 功能。
这里,我们设置 text-decoration:none; 意思就是让文本没有任何修饰,所以下划线也就不复存在了:
关于 CSS 还有很多属性可以设置,几乎可以控制一切你能想到的方方面面。想了解更多 CSS 属性,建议去 www.w3school.com.cn 学习或查找资料。
当然,对于你安装的不同浏览器来说,同样的代码在显示的时候会略有差异,处理这些浏览器之间的展示差异,也是前端工程师的重要工作内容之一。
下一节,我们将简单介绍一下与这些兼容性相关的东西。