CSS详介、发展史、特点及如何使用【宝典篇】
目录
什么是CSS？
CSS发展史？
CSS的语法结构？
HTML中如何引入CSS样式？
1、行内样式
2、内部样式表
3、外部样式表
什么是CSS？
CSS(Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。CSS 的主要作用是定义网页的样式（美化网页），对网页中元素的位置、字体、颜色、背景等属性进行精确控制。CSS 不仅可以静态地修饰网页，还可以配合 JavaScript 动态地修改网页中元素的样式，并且市面上各大知名浏览器厂商都支持CSS。
CSS发展史？
20 世纪 90 年代初 HTML 语言诞生，这时的 HTML 只包含很少的属性来控制网页的显示效果。伴随着 HTML 的成长，各式各样的样式语言也随之出现，不同的浏览器结合它们各自的样式语言来控制页面的显示效果。
经过不断的发展，HTML 中添加了越来越多的属性来满足页面设计者的需求，随着这些属性的增加，HTML 变的越来越杂乱，而且 HTML 页面也越来越臃肿，于是 CSS 便诞生了。
1994 年，哈坤·利提出了 CSS 的最初建议，并决定与正在设计 Argo 浏览器的伯特·波斯（Bert Bos）合作，共同开发 CSS。
1994 年底，哈坤·利在芝加哥的一次会议上第一次正式提出了 CSS 的建议，之后又在 1995 年的 WWW 网络会议上再次提出了 CSS，在会议上伯特·波斯展示了支持 CSS 的 Argo 浏览器，哈坤·利也展示了支持 CSS 的 Arena 浏览器。
同年，W3C组织（World WideWeb Consortium）成立，该组织对 CSS 的发展很感兴趣，为此还专门组织了一次讨论会。最终 CSS 的全部开发成员都加入了 W3C 组织，并负责 CSS 标准的制定，至此 CSS 的发展走上正轨。
W3C诠释：W3C，中文名为“万维网联盟”，也称为“W3C理事会”，由万维网的发明者 蒂姆·伯纳斯·李 于 1994 年 10 月在麻省理工学院计算机科学实验室成立，是 Web 技术领域最具权威和影响力的国际中立性技术标准机构。
发展至今，CSS 总共经历了 4 个版本的迭代：
CSS1.0 ：
1996 年 12 月 W3C 发布了 CSS 的第一个版本——CSS1.0
url：Cascading Style Sheets, level 1
CSS2.0 ：
1998 年 5 月，CSS2.0 版本正式发布
url：Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
CSS2.1：
2004 年 2 月，CSS2.1 正式发布。该版本在 CSS2.0 的基础上略微做了改动，删除了许多不被浏览器支持的属性。
CSS3：
早在 2001 年，W3C 就着手开始准备开发 CSS 的第三个版本，到目前为止该版本还没有最终定稿。虽然完整的 CSS3 标准还没有最终发布，但各主流浏览器已经开始支持其中的绝大部分特性。
CSS的语法结构？
上图的作用剖析：
- 选择器：body 表示要为网页中的
标签定义样式； - 属性：font-size表示字体大小，值12px则表示将字体大小设置为12像素；
- 属性：color 表示字体颜色，值 #333 则表示将字体颜色设置为颜色代码为#333的颜色；
为了使CSS更具可读性，可以在定义CSS时每一行代码上只放置一个声明，如下所示：
body{
font-size: 12px;
color: #333;
}小贴士：CSS 中的属性和大部分值都是不区分大小写的，但 CSS 中的选择器通常区分大小写，例如类选择器 .fontsize 和 .FontSize 就表示两个不同的选择器。CSS 中的《选择器》有多种不同的类型，比如：标签选择器、类选择器、id选择器等等。
HTML中如何引入CSS样式？
CSS 应用于文档的三种方法：行内样式、内部样式表、外部样式表。
CSS样式优先级：行内样式 > 内部样式表 > 外部样式表(遵循就近原则)
1、行内样式
行内样式是影响单个 HTML 元素的 CSS 声明，包含在元素的 style 属性中。在一个 HTML 文档中，行内样式的实现是这样的：
Title
Hello!
这是一个CSS示例
效果：
尽可能避免以这种方式使用CSS，这不符合最佳实践。首先，这是对 CSS 的维护效率最低的实现，一个样式的改变可能需要在一个网页中进行多次编辑。其次，行内 CSS 还将CSS表现性代码与 HTML 内容混合在一起，使一切都更难阅读和理解。将代码和内容分开，可以使所有从事网站工作的人更容易维护。
有几种情况下，内联样式是比较常见的。如果你的工作环境有很大的限制，你可能不得不使用内联样式。例如，也许你的内容管理系统（CMS）只允许你编辑 HTML 主体。你也可能在 HTML 电子邮件中看到大量的内联样式，以实现与尽可能多的电子邮件客户端的兼容。
2、内部样式表
一个内部样式表驻留在 HTML 文档内部。要创建一个内部样式表，你要把 CSS 放置在HTML标签中 head元素里的style标签内。一个内部样式表的 HTML 代码实现是这样的：
Title
Hello!
这是一个CSS示例
效果：
在某些情况下，内部样式表可能是有用的。例如，也许你正在使用一个内容管理系统，其外部 CSS 文件是不可以直接修改的。
但对于有多个页面的网站来说，内部样式表就变成了一种不太有效的工作方式。要使用内部样式表在多个页面上应用统一的 CSS 样式，你必须在每个要使用该样式的网页上都有一个内部样式表。这种效率的下降也会影响到网站的维护。在内部样式表中使用 CSS，存在这样的风险：即使是一个简单的样式变化，也可能需要对多个网页进行编辑。
3、外部样式表
外部样式表存在于一个单独的扩展名为 .css 的文件中。这是将 CSS 应用到文档中最常见和最有用的方法。你可以将一个 CSS 文件链接到多个网页上，用同一个 CSS 样式表为所有网页确定样式。使用 元素来链接外部样式表文件：
演示一个示例：
HTML文件：
Title
Hello!
这是一个CSS示例
CSS样式表：
body{
background-color: pink;
}
span{
color: orangered;
background-color: white;
}
p{
color: blue;
}效果：
link标签的 href 属性需要引用你文件系统中的一个文件。在上面的例子中，CSS 文件与 HTML 文档在同一个文件夹中，但你可以把它放在其他地方，并调整路径。
看完点赞~人美心善！