CSS基础课程登入/注册
在小屏设备上仅提供基本的浏览功能
请使用电脑打开此网页,体验更多强大功能

初识CSS

原创作品,未经许可不得转载
在学习“HTML基础课程”时,我们所做的网页都是“平平淡淡”的,虽然可在网页中加入图像、视频,还可使用<strong><em>等元素显示不同的字体样式,但还是显得太单调,并且网页也不够美观。
在接下来的课程里,我们将学习如何使用CSS使网页变得漂亮起来。
CSS,是Cascading Style Sheet的缩写,即层叠样式表,它描述了HTML元素应该如何被渲染。
如果将HTML比作刚刚建好的、还未装修的房子,那么CSS就是用来对房子进行装饰的。
通过对之前课程的学习,你现在应该对<h1>比较熟悉了,包含在此元素中的文本在网页上会显得成比较大。运行下方的代码,看看包含在<h1>中的文本是什么样子:

<h1>这是包含在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是样式的值。
练习
1/12
http://localhost/