原创作品,未经许可不得转载
在学习“HTML基础课程”时,我们所做的网页都是“平平淡淡”的,虽然可在网页中加入图像、视频,还可使用<strong>
、<em>
等元素显示不同的字体样式,但还是显得太单调,并且网页也不够美观。
在接下来的课程里,我们将学习如何使用CSS使网页变得漂亮起来。
CSS,是Cascading Style Sheet的缩写,即层叠样式表,它描述了HTML元素应该如何被渲染。
如果将HTML比作刚刚建好的、还未装修的房子,那么CSS就是用来对房子进行装饰的。
通过对之前课程的学习,你现在应该对<h1>
比较熟悉了,包含在此元素中的文本在网页上会显得成比较大。运行下方的代码,看看包含在<h1>
中的文本是什么样子:
你现在见到的是<h1>
在网页上的默认表现形式,也就是它的默认样式,你可以通过代码改变它,运行下方的示例看看:
<h1 style="font-size:15px">这是包含在h1中的文本</h1>
是不是字体变小了?
分析一下上方示例的代码:为<h1>
元素设置了一个style
属性,并将它的值设为了font-size:15px
。
style
属性是用来设置元素的样式的。如果你不喜欢元素的默认样式,就可通过给它设置style
属性来改变它的样式。
上面的示例中,将<h1>
的style
属性的值设为了font-size:15px
,意思就是:将该元素中包含的文本的字体大小设为15px。
还记得在前面的课程中提到过吗?px
是像素的意思,是计算机上一种常用的度量单位,就如我们日常生活中的“厘米”、“毫米”一样。
font-size
的值越大,则显示出来的字体越大。
<h1 style="font-size:12px">将字体大小设为12px的示例</h1>
<h1 style="font-size:15px">将字体大小设为15px的示例</h1>
<h1 style="font-size:18px">将字体大小设为18px的示例</h1>
<h1 style="font-size:21px">将字体大小设为21px的示例</h1>
<h1 style="font-size:24px">将字体大小设为24px的示例</h1>
请留意style
属性的值的语法。font-size:15px
,冒号:
前面的font-size
是样式的名称,冒号:
后面的15px
是样式的值。