你不懂得HTML与CSS的恋情发展史

发布时间：2020-07-26 14:51:58 作者：狐狸菌
来源：网络阅读：864

HTML与CSS

样式表的历史科普

自从1990年代初HTML被发明，
作为HTML代码辅助的样式表，
就以各种形式出现；

最初，不同的浏览器结合了它们各自的样式语言，
读者可以使用这些样式语言来调节网页的显示方式；
一开始样式表是给读者用的，
最初的HTML版本只含有很少的显示属性，
读者来决定网页应该怎样被显示。

但随着HTML的成长、为了满足设计师的要求，
HTML获得了很多特效显示功能，
随着这些功能的增加，
外来定义样式的语言越来越没有意义了。

1994年哈坤·利提出了CSS的最初的思路和建议，
即【Cascading Style Sheets】；
1995年伯特·波斯（Bert Bos）参与其中、
与哈坤合作设计CSS。
　　
当时已经有过一些样式表语言的思想，
但CSS是第一个含有“层叠”概念的；
在CSS中，
一个文件的样式可以从其他的样式表中继承下来，
读者在有些地方可以使用他自己更喜欢的样式，
在其他地方则继承或“层叠”作者的样式,
这种层叠的方式使作者和读者都可以灵活地加入自己的设计、
同时也可以保留或混合各自的偏好。

当时W3C刚刚建立、对CSS的发展很感兴趣，
甚至为此特地组织了一次讨论会，
哈坤、波斯和其他一些人（比如微软的托马斯·雷尔登）
是这个项目的主要技术负责人。

1996年底12月CSS第一版本被出版。

1997年初，
W3C内组织了由克里斯·里雷专门负责的CSS工作组，
开始讨论第一版中没有涉及到的问题，
其结果是1998年5月出版的第二版。

采用CSS+DIV进行网页重构，
相对与传统的TABLE网页布局而具有以下3个显著优势：
1.
表现和内容相分离，
将设计部分剥离出来放在一个独立样式文件中，
HTML文件中只存放文本信息，
页面内容更易于被检索（也即易于被搜索引擎抓取）；
2.
提高页面浏览速度，
对于同一个页面视觉效果，
采用CSS+DIV重构的页面，
容量要比TABLE编码的页面文件容量小得多，
从而减轻了浏览器的编译负荷；
3.
易于维护和改版，
你只要简单的修改几个CSS内的配置，
就可以重新设计整个网站的页面。

附：一些通俗的概念解释

【1】网址
现代网址通常指可供远程访问的网站地址，
但是最初的“网址”仅仅是指某台交换机或服务器在网络中的编号或名称，
这个“网络”甚至只是由两台各自具备独立操作功能的电脑的互联，
而现代则泛指一切具备远程交互能力的计算或存储网络；
URL是指“统一资源定位符”，通常指向服务器的地址；
HTTP:则是支持http协议的网址；
FTP:是支持文档传输协议的网址、GOPHER:针对gopher检索、
HTTPS:则是增加了SSL加密的HTTP；
域名，
是由一串用点分隔的字符组成的Internet上某一台计算机或计算机组的名称，
用于在数据传输时标识计算机的电子方位
（有时也指地理位置，地理上的域名，指代有行政自主权的一个地方区域）。
也是一个IP地址上的“面具”。
【2】网页
网页是通过浏览器来阅读的一个可视化的包含内容和数据等信息的页面；
网页通过浏览器或其他可视化工具将服务器数据转化成可视化的控件。
【3】浏览器
将外部数据解析、在终端系统平台上、用可视化界面来展示信息，
这样一整套流程需要一个工具或软件来实现，
通常以浏览阅读为主要功能的软件称为“浏览器”；
如果是以修改源码或编译代码为主的软件，
一般不会被称为“浏览器”。
【4】样式表
通过独立的样式配置、来定义可视化效果的参数，
使浏览器可以更快获取视图和控件的配置，
简化了服务器数据的复杂度、
减轻了浏览器对数据解析重构的负荷，
同时也提高了视图和控件的配置代码的重用性和规范化。

附：什么是CascadingStyleSheets（层叠样式表）？

CSS == CascadingStyleSheets
(层叠样式表)

CSS 语言是一种标记语言，
它可以直接由浏览器解释执行（属于浏览器解释型语言）。

在标准网页设计中
CSS负责网页内容的表现；
CSS文件也可以说是一个文本文件，
它包含了一些CSS标记，
CSS文件必须使用css为文件名后缀；
可以通过简单的更改CSS文件中的配置
来改变网页的整体表现形式，
可以减少代码量和工作量；
CSS标准是由W3C的CSS工作组制定和维护的。

附：常规的浏览器展示网页的流程
1.
浏览器下载的顺序是从上到下，
渲染的顺序也是从上到下，
下载和渲染是同时进行的。
2.
在渲染到页面的某一部分时，
其上面的所有部分都已经下载完成
（并不是说所有相关联的元素都已经下载完）；
3.
如果遇到语义解释性的标签嵌入文件
（JS脚本，CSS样式），
那么此时浏览器的下载过程会启用单独连接进行下载；
4.
下载后对脚本和样式进行解析，
解析过程中暂停其后的元素的下载；
5.
样式表在下载完成后，
将调用之前下载的所有样式表一起进行解析，
并在解析完成后
对此前所有元素（含以前已经渲染的）重新进行渲染；
6.
脚本和样式中如有重定义，
其后定义的配置将覆盖前定义配置。

渲染效率与下面三点有关：
1.css选择器的查询定位效率、
2.浏览器的渲染模式和算法、
3.要进行渲染内容的大小。

附：浏览器对CSS的匹配原理

浏览器CSS匹配不是从左到右进行查找，
而是从右到左进行查找；
比如
DIV#divBoxpspan.red{color:red;}，
浏览器的查找顺序如下：
先查找html中所有class=’red’的span元素，
找到后，再查找其父辈元素中是否有p元素，
再判断p的父元素中是否有id为divBox的div元素，
如果都存在则根据CSS匹配。

浏览器从右到左进行查找的好处
是可以尽早过滤掉一些无关的样式规则和元素。
firefox称这种查找方式为
keyselector（关键字查询），
所谓的关键字就是样式规则中最后(最右边)的规则，
上面的key就是span.red。

附：CSS样式表的使用方式

HTML页面有三种使用CSS样式表的方式：
1、
内联样式表：
样式规定在单个的元素中，
写在元素的style属性里；
2、
内部样式表：
样式定义在HTML页面的头元素中；
3、
外部样式表：
将样式定义在一个外部的CSS文件中，
然后由HTML页面引用样式表文件。

附：如何理解CSS样式表的层叠性

CSS使用层叠（Cascade）的原则来考虑
继承、层叠次序和优先级
等重要特征，从而判断相互冲突的规则中应依据哪一个规则。

继承性：
许多CSS的样式规则不但影响选择器所定义的元素，
而且会被这些元素的后代继承；

层叠性：
当一个Web页面使用多个样式表，
多个样式表中的样式可层叠为一个；
在多个样式表之间所定义的样式没有冲突的时候，
浏览器会显示所有的样式。

优先级：
当发生样式定义冲突时，
浏览器首先会按照不同样式规则的优先级来应用样式；
同等优先级下，以最后定义的样式为准；
CSS样式的优先级如下所示（其中数字3拥有最高的优先权）：
1、
浏览器缺省设置；
2、
外部样式表（.css 文件）或者内部样式表（位于<head>元素内部）；
3、
内联样式（作为某个元素的style属性的值）。

附：CSS选择器中，元素选择器和类选择器的区别是什么？

在 CSS 中，选择器是一种模式，
用于选择需要添加样式的元素。

元素选择器是最常见的CSS选择器，
即，文档的元素就是最基本的选择器；
选择器通常是某个HTML元素，
比如<p>、<h2>、<em>、<a>等，
甚至可以是<html>元素本身。

类选择器用于将样式规则与附带class属性的元素匹配，
其中该class属性的值为类选择器中指定的值；
使用类选择器时，首先需要定义样式类，其语法为：
.className { }
所有能够附带class属性的元素都可以使用此样式声明；
只需要将class属性的值设置为“className”，
则可以将类选择器的样式与元素关联。

在实际使用时如果需要为某种元素定义样式，
则往往使用元素选择器；
如果要应用样式而不考虑具体设计的元素，
最常用的方法就是使用类选择器。

你不懂得HTML与CSS的恋情发展史

相关阅读