13、CSS基础——为网页添加样式

为网页添加样式

1. CSS规则

h1{
    color: blueviolet;
    background-color: cyan;
    text-align: center;
}

上面的代码称为一条CSS规则

CSS规则 = 选择器 + 声明块

1.1 选择器

选择器：选中元素，确定样式的范围

3种基本选择器：

1. id选择器：#id{}，选中的是对应id的元素，因为元素的id属性是唯一的，因此id选择器只能选中特定的一个元素；
2. 元素选择器，element{}，直接选中所有指定元素名的同名元素；
3. 类选择器，.class{}，选中对应类名的元素，可以选中多个指定元素。

• id选择器选择范围太小，只能选择某一个特定的元素；
• 元素选择器选择范围则太大；
• 类选择器的选择范围适中，是最常用的选择器。

1.2 声明块

出现在大括号中。

声明块中包含了很多声明（属性），每一个声明（属性）表达了某一方面的样式。

2. CSS代码书写位置

2.1 内部样式表[200行以内代码推荐]

书写在style元素中，style元素的位置不固定，但是放在head元素中比较好。

2.2 内联样式表（元素样式表）[常用于测试]

直接书写在元素的style属性中。<element style="样式声明"> xxx </element>。

2.3 外部样式表[推荐]

将样式书写在独立的CSS文件中。
公司大部分使用的是外部样式表。

需要使用link元素（是一个空元素），一般写到head元素里面，用于引用外部的CSS规则。

<link rel="stylesheet" href="路径">

1). 外部样式表可以解决多页面样式重复的问题；
2). 有利于浏览器缓存，从而提高页面的响应速度；
3). 有利于代码分离（HTML和CSS），更容易阅读和维护；