基于web的级联样式表

1、简介

CSS是级联样式表的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。
网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。

元素的class值可以多个，也可以重复。

2、样式生效方式

一般有三种方法：外部样式表，内部样式表，内联样式。
外部样式表：
新建如下内容的一个 HTML文件，在同一目录新建一个样式表文件mycss.css。
一般我们会在项目目录下建一个文件夹如css专门存放样式表文件，如此我们引入样式文件时路径就变为 ./css/mycss.css之类的。
内部样式表
样式放在 HTML 文件中，这称为内部样式表。
一般而言，只有页面的样式规则较少时可采用这种方式。
内联样式
直接把样式规则直接写到要应用的元素中。
内联样式是最不灵活的一种方式，完全将内容和样式合在一起，实际应用中非常少见。
优先级：
从高到低：内联样式、内部样式表或外部样式表、浏览器缺省样式

3、CSS语法规则

CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明:

选择器是您需要改变样式的对象（上图的规则就一级标题生效）。
每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{}包裹，且声明用;分割）
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

选择器

一个页面上的元素众多，选择器就用于在页面中找到/选择需要应用这个样式的对象。
除我们前示的元素选择器外，还有id和class选择器。其中class选择器使用非常普遍。
id选择器

# key{
   
color:red;
} 

<p id="key">she 生命的钥匙</p>

id 选择器适用范围只有一个元素。
class选择器

.red{
   
  color: red;
}

<p class =