书接上文,上回书咱们了解了一下 HTML 这妹子的好闺蜜 CSS,知道了 CSS 是谁,为啥她能和 HTML 成为这么好的闺蜜,以及她的成长背景。
接下来,咱们要继续深入 CSS,为啥?因为你看到过不化妆就出门的妹子吗?!还是的,现在的 HTML 和 CSS 基本上是形影不离的。咱们想要把 HTML 搞到手,就得先从 CSS 下手。
怎么使用 CSS
在上文书中咱们了解到 CSS 主要是用来让 HTML 变得更漂亮的,所以 CSS 肯定是要用在 HTML 文档中的。那么,接下咱们就看看在 HTML 文档中要怎么使用 CSS。
内联样式
HTML 元素的属性中有一种叫做通用属性,其中有个叫做 style
的属性,通过这个属性咱们就可以为元素设置 CSS 样式。像这个样子:
<h1 style="color: lightcoral;">内联样式</h1>
咱们可以看到,style
属性的值就是 CSS 样式内容了。
当然了,现在咱们不用太过在意 CSS 样式的内容是怎么样的,饭也是要一口一口吃地嘛!那咱们先回到内联样式本身,咱们可以发现这种方式设置 CSS 样式是比较简单、直接的,毕竟 HTML 所有的元素都可以设置 style
属性。
可是,这种所谓的内联样式呢,也有一些问题:
- 由于
style
属性是属于 HTML 元素的,所以就导致了 HTML 结构和 CSS 样式混合在一起了。虽说 CSS 是 HTML 形影不离的闺蜜,但是多少还是要保持一定距离的!总不至于将来娶个 HTML,再陪嫁个 CSS 吧,你说是吧! - 这种通过
style
属性设置的 CSS 样式只能作用在一个元素,这就可能出现多个元素要编写相同的 CSS 样式了。这种重复完全是不必要的,也会让咱们和 HTML 之间变得枯燥无趣。
内嵌样式表
为了解决内联样式的这些问题,HTML 也想了一些方法,其中一种就是内嵌样式表。这种方式实际上是通过 <head>
元素中的 <style>
元素来为 HTML 元素设置 CSS 样式。像这个样式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内嵌样式表</title>
<style>
h1 {
color: lightcoral;
}
</style>
</head>
<body>
<h1>内联样式</h1>
</body>
</html>
由于这种方式是通过 CSS 选择器把 CSS 样式和 HTML 元素进行关联的,所以在多个 HTML 元素之间就可以使用同一个 CSS 样式内容了。
但是呢,这种方式也不是说就没有问题了:虽说这种方式下,CSS 样式没有写在元素上,但依旧还是在 HTML 中的,所以 HTML 和 CSS 还是混合在一起的。
外联样式
想要彻底地解决 HTML 和 CSS 不要混合在一起的方法就是使用外联样式。这种方式实际上是通过 <head>
元素中的 <link>
元素来引入外部的 CSS 样式文件。
比如咱们可以先来创建一个扩展为 .css
的文件,然后把 CSS 样式都放在这个文件中。像这个样子:
然后,再通过 <link>
元素把这个 CSS 文件引入到 HTML 中就可以了:
关于 <link>
元素咱们得说清楚这里用到的两个属性:
rel
属性:这是用来设置引入文件和 HTML 之间的关系的,比如现在使用的stylesheet
表示引入的是 CSS 样式文件。href
属性:这是用来设置引入文件的路径。换句话讲,就是通过这个路径 HTML 文档可以找个 CSS 文件。
还有个事件,咱们也得说清楚:就是现在咱们硬是把 HTML 和 CSS 拆成了两个文件,相互之间独立,仅仅是通过 HTML 中的 <link>
元素产生了联系。这就导致了浏览器在加载的时候,也是单独加载 HTML 和 CSS 的。不信的话,你可以看一下具体的过程:
CSS 的语法结构
在 HTML 中使用 CSS 的三种方式咱们都了解了,那接下来咱们就再深入一点,来看看 CSS 样式的语法结构是怎么样的。在真正研究 CSS 语法结构之前,咱们先写个 CSS 样式吧:
h1 {
color: lightcoral;
font-weight: 400;
}
基于这样的一个 CSS 示例代码,咱们再来研究 CSS 的语法结构就容易的多了。废话不多说,咱们接下来就来看看 CSS 的语法结构是怎么样的吧:
实际上,CSS 语法结构非常地简单,主要就是选择器和声明块两个。而 CSS 的选择器是接下来咱们要重点学习的;声明块里面的样式属性都是 CSS 已经提供好了的,咱们只要掌握这些属性的作用和用法就好了。