本文是一篇面向编程小白和新人的快速入门文章,希望能用一篇文章的篇幅来介绍清楚 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
属性,建议不要使用。