一. 引入CSS的方式
一共有 4 种方式引入CSS样式, 我们只介绍最常用的 3 种.
1.1 内联样式表(行内样式表)
就是把CSS样式属性直接添加到标签的style属性上.
<p style="color: red;">哈哈哈哈, 我要🔥了</p>
说明:
这种方式添加样式称之为行业样式或内联样式
直接在
style属性的值中添加需要的css属性即可.当我们需要用
Javascript动态的更改样式的时候,其实就是修过添加的行内样式. 其他情况使用较少. 具体使用Javascript阶段再详细介绍.
1.2 内部样式表
就是添加一个style标签, 然后把样式属性书写在此标签内
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p{
color: blue;
}
</style>
</head>
<body>
<p>哈哈哈哈, 我要🔥了</p>
</body>
</html>
说明:
理论上
<style>标签可以添加到HTML页面中的任意位置, 但是通常情况下都是直接嵌套在<head>标签内.type属性表示类型. 在HTML5中这个属性可以省略.内部样式表在样式属性比较少且这些样式只在当前页面使用的时候比较方便
在课堂上为了方便, 我们大部分情况使用内部样式表.
1.3 外部样式表
我们把样式书写在单独的一个.css文件中, 然后在HTML文件中使用<link>标签引入.
- html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="a.css"/>
</head>
<body>
<p>哈哈哈哈, 我要🔥了</p>
</body>
</html>
- a.css 文件内容:
p{ background-color: pink; }
说明:
href:表示css文件的地址rel:固定为stylesheet可以在多个
HTML文件中使用同一个css文件.在大型的项目中, 使用外部样式表较多.
再次强调: 为了授课方便,课堂上大多数情况下使用内部样式.
二. css语法
2.1 认识新名词
从最基本的层次来看，CSS是由两块内容组合而成的：
属性（
Propertie）：一些人类可理解的标识符，这些标识符指出你想修改哪一些样式，例如：字体，宽度，背景颜色等。属性值（
Value）：每个指定的属性都需要给定一个值，这个值表示你想把那些样式特征修改成什么样，例如，你想把字体，宽度或背景颜色改成什么。
属性和属性值被称为CSS声明。CSS声明会被放置在一个CSS声明块中。
最后，CSS声明块与选择器相结合形成一个CSS规则集（或CSS规则）。
2.2 CSS声明
给 CSS 属性设置特定的值是 CSS 语言的核心功能。
CSS 引擎会通过计算，将对应的 CSS 声明应用到页面的每一个元素上，从而使得元素们以适当的方式布局，并展示出适当的样式。
特别需要记住的是，CSS 的属性和属性值都是区分大小写的。属性和属性值之间，用英文半角冒号 (:) 隔
CSS 有超过300 个不同的属性以及几乎无穷无尽的属性值。属性和属性值不能任意组合：每个属性都有一个已经定义好的可用属性值范围。
注意:
如果使用了未知属性，或者给属性赋予了无效值，该声明会被视为无效，浏览器的 CSS 引擎会完全忽略它。
在 CSS（和其他网络标准）中，使用美式拼写作为单词的标准写法。例如，颜色（见于上述代码所见）应始终拼写为 color。写成 colour 会无法正常工作。
2.3 CSS声明块
声明被按块分组，每一组声明都用一对大括号包裹，用 { 开始，用 } 结束。
声明块里的每一个声明必须用半角分号;分隔，否则代码会不生效（至少不会按预期结果生效）。
声明块里的最后一个声明结束的地方，不需要加分号，但是最后加分号是个好习惯，因为可以防止在后续增加声明时忘记加分号。
注意:
- 声明块的内容可以为空, 这是完全允许的.
2.4 CSS选择器和规则
前面的声明块中的属性要生效, 必须要告诉他应该把属性用在哪些元素上.
通过在每个声明块前加上选择器（selector）来完成这一动作.
选择器是一种模式，它能在页面上匹配一些元素。这将使相关的声明仅被应用到被选择的元素上。
选择器加上声明块被称为规则集（ruleset），通常简称规则（rule）。
注意:
- 选择器可以很复杂, 也是我们的声明块能够起作用的关键所在. 下面我们开始专门研究选择器.