zzxworld

CSS 教程:十分钟入门 CSS

本文是一篇面向编程小白和新人的快速入门文章,希望能用一篇文章的篇幅来介绍清楚 CSS。跟 HTML 一样,CSS 代码层面的概念并不复杂,只不过需要自己花时间多了解和练习。所以十分钟入门还是没有问题的,让我们马上开始。

CSS 是什么

CSS 是 Cascading Style Sheets 的简称。翻译为中文叫「层叠样式表」。这是个让人刚接触时摸不着头脑,掌握后恍然大悟的名字。所以先不用在意它。

CSS 可以理解为一套样式配置规则。它可以用来为 HTML 这类标记语言内容定义在不同媒介上的显示效果。这些媒介可以是手机或电脑的屏幕,也可以是打印机的纸张。所谓的显示效果可以是位置,大小和颜色,也可以是一些动画效果。

简单来比喻,如果 HTML 是一个裸露的身体,CSS 就类似于衣服。HTML 不一定需要 CSS,但没有 CSS 会不好看;而 CSS 离不开 HTML,否则也就失去了价值。

CSS 代码格式

下面是一段简单的 CSS 代码:

h1 {
    color: red;
}

这段代码中有三个字符串,它们的解释如下:

  • h1 是选择器,用来匹配 HTML 中的标签名称。
  • color 是要操作的属性名称。
  • red 是要使用的属性值。

所以上面的这段 CSS 代码可以理解为在 HTML 中选择 h1 标签,然后把它们的显示颜色设置为红色。除了文字,这段代码还有几个标点符号,它们同样也有各自的用途:

  • {} 大括号用来定义选择器所包含的属性。
  • : 用来隔开属性名称和属性值。
  • ; 是属性结束符号。

{} 中可以包含多个属性。比如在刚才的 CSS 代码再添加一个字号设置:

h1 {
    color: red;
    font-size: 36px;
}

记住这个 CSS 代码格式,因为只要熟悉了这个规则。CSS 就算是入门了,剩下来的只不过是了解各种选择器和属性名称而已。

CSS 选择器

CSS 的选择器功能非常强大,上面使用的标签选择器只是其中一种。还有一种常用的方式是 class 选择器,它的使用方式如下:

.title {
    color: red;
}

使用这种选择器,它匹配的是 HTML 标签中的 class 属性。上面的选择器会匹配下面代码中的 h1 标签,因为它定义了 class="title" 属性:

<div>
    <h1 class="title">这是标题</h1>
    <p>这是内容</p>
</div>

除此之外,还有 id 选择器:

#title {
    color: red;
}

更多其他关于选择器的介绍,可以参考 MDN - CSS 选择器 来了解学习。

CSS 属性

选择器解决了 CSS 定位样式标签的问题,而要如何来显示标签内容,就需要靠 CSS 属性了。CSS 有着十分庞大的属性,要想凭脑力记住这些属性名称和属性值并非易事。所以更靠谱的方案是在需要的时候来查阅。我推荐使用 MDN 的 CSS 参考:

在 HTML 中使用 CSS

在 HTML 中使用 CSS 代码有三种方式。

一是通过 style 属性:

<div style="color: red;"></div>

二是通过 <style> 标签:

<style>
div {
    color: red;
}
</style>

三是把 CSS 样式代码写到以 .css 命令的文件中,然后通过 <link> 标签引用:

<link rel="stylesheet" href="/css/app.css" type="text/css" charset="utf-8"/>

在实际使用中,推荐优先使用第三种文件引用的方式,这样方便维护和管理。遇到特殊情况时,可以选择第二种 <style> 标签方式。至于 style 属性,建议不要使用。