CSS基础学习一：CSS概述
最后更新于：2022-04-01 11:29:09
CSS 概述
层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等
文件样式的计算机语言。
CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表
现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对
象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不
同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。
关于CSS概述总结了7点：
1,CSS 指层叠样式表 (Cascading Style Sheets)
2,样式定义如何显示 HTML 元素
3,样式通常存储在样式表中
4,把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
5,外部样式表可以极大提高工作效率
6,外部样式表通常存储在 CSS 文件中
7,多个样式定义可层叠为一
CSS的出现解决了很多HTML的问题：
### 一,样式解决了一个普遍的问题
HTML 标签原本被设计为用于定义文档内容。通过使用 < h1>、< p>、< table> 这样的标签，HTML 的初衷是表
达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。
由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属
性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。
为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在
HTML 4.0 之外创造出样式（Style）。所有的主流浏览器均支持层叠样式表。
### 二,样式表极大地提高了工作效率
样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部
的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
由于允许同时控制多重页面的样式和布局，CSS 可以称得上Web设计领域的一个突破。作为网站开发者，你能够
为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，
然后网站中的所有元素均会自动地更新。
### 三,多重样式将层叠为一个
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一
个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
层叠次序
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
1,浏览器缺省设置
2,外部样式表
3,内部样式表（位于 <head> 标签内部）
4,内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签
中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
说了这么多我们可以简单的见识一下CSS的背景色的效果：
~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS背景色演示</title>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
p.no2 {background-color: gray; padding: 20px;}
</style>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<p>这是段落</p>
<p class="no2">这个段落设置了内边距。</p>
</body>
</html>
~~~
运行结果为：
