层叠样式表(Cascading Style Sheets,简称CSS),是用于为网页添加样式的代码语言。本章节将引导您了解CSS的基础知识,并解答类似问题:如何设置文本颜色、位置以及如何用背景图片或颜色来装饰网页。
与HTML相似,CSS并非真正的编程语言,亦非标记语言。它是一门样式表语言,即人们可以用它来选择性地为HTML元素添加样式。
举个例子,假设我们想选择一个HTML页面里所有的段落元素,并将其中的文本改成红色,可以这样写CSS:
新建一个styles文件夹,并在其中新建一个style.css文件,将以下的CSS代码保存在这个文件中。
接着,需要将该CSS文件与HTML文档连接起来,否则CSS代码不会对HTML文档在浏览器里的显示效果产生任何影响。
操作步骤如下:
- 在文档头(也就是<head>和</head>标签之间)粘贴以下行。
接下来,让我们仔细看看上述的CSS规则:
整个结构称为规则集(通常简称“规则”),各部分释义如下:
- 选择器(Selector):位于规则集开始,选择一个或多个需要添加样式的元素。
- 属性(Properties):改变HTML元素样式的途径。
- 属性的值(Property value):在属性的右边,冒号后面,它从指定属性的众多外观中选择一个值。
注意其他重要的语法:
- 每个规则集(除了选择器的部分)都应该包含在成对的大括号里({})。
还有更多类型的选择器,如类选择器、ID选择器、伪类选择器等。这里只介绍了元素选择器,用于选择HTML文档中的给定元素。但选择的操作可以更加具体和灵活。
在探索了CSS的基础之后,我们可以将更多规则和信息添加至style.css文件中,使示例更加美观。例如,为字体和文本添加更漂亮的样式。
具体操作步骤包括:
- 找到之前Google Font输出的地址。
- 删除style.css文件中已有的规则,并添加新的规则来设定全局字体、字号、背景色等。
在此过程中,还可以使用CSS的其他属性来调整页面的布局和外观,如padding、border、margin等。这些属性定义了元素的空间布局和外观表现。
不要忘记尝试不同的值和组合,看看能得出什么结果。通过不断地实践和尝试,你将能够掌握CSS并创作出自己独特的网页样式。
完成以上步骤后,你将得到一个具有自定义样式和美观布局的网页。