文章目录

1. CSS层叠样式表
- 1.1 学习目标
2. HTML的局限性
3. CSS 网页的美容师
4. CSS初识
5. 引入CSS样式表（书写位置）
- 5.1 行内式（内联样式）
- 5.2 内部样式表（内嵌样式表）
- - 5.2.1 综合案例
- 5.3 外部样式表（外链式）
- - 5.3.1 example01
- 5.4 三种样式表总结（位置）
- - 5.4.1 团队约定-代码风格
  - 5.4.2 团队约定-代码大小写
6. 5. 总结CSS样式规则
7. @拓展阅读
- 7.1 第一个提案
- 7.2 Viola 以及原始浏览器之战
- 7.3 Web 之前的样式表
- 7.4 图灵完备的样式表
- 7.5 为什么样式表达到了终点
- 7.6 最大的可能
- 7.7 CSS 的元魂
- 7.8 接下来就是你所知的 CSS
- 7.9 终极大 Boss
- 7.10 最大的可能

1. CSS层叠样式表

1.1 学习目标

理解
- css的目的作用
- css的三种引入方式
应用
- css三种引用方式的书写
- 通过样式规则给标签添加简单的样式

2. HTML的局限性

说起HTML，这其实是个非常单纯的家伙，他只关注内容的语义，

比如<h1>表明这是一个大标题，用<p> 表明这是一个段落，用<img> 表明这儿有一个图片，用<a> 表示此处有链接。

很早的时候，世界上的网站虽然很多，但是他们都有一个共同的特点：丑。

这个是一个外国比较早的购物网站

有些人就忍受不了了，你就不能把自己打扮得漂亮一点吗？

HTML说，我试试…

如果要改变下高度或者变一个颜色，就需要大量重复操作

总结：

HTML满足不了设计者的需求
操作html属性不方便
HTML里面添加样式带来的是无尽的臃肿和繁琐

3. CSS 网页的美容师

让我们的网页更加丰富多彩，布局更加灵活自如。
CSS的最大贡献就是：让 HTML 从样式中脱离，实现了 HTML 专注去做结构呈现，样式交给css

我们理想中的结果：结构(html)与样式(css)相分离 这句话要记住

而且 CSS 做的很出色，如果JavaScript是网页的魔法师，那么CSS它是我们网页的美容师，不信，你看:

4. CSS初识

概念：

CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表）
作用：
- 主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
- CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

5. 引入CSS样式表（书写位置）

要书写css样式，那css样式书写的位置在哪呢？

5.1 行内式（内联样式）

概念：

称行内样式、行间样式.

是通过标签的style属性来设置元素的样式
其基本语法格式如下：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

实际上任何HTML标签都拥有style属性，用来设置行内式。

案例：

<div style="color: red; font-size: 12px;">内容</div>

注意：
- style其实就是标签的属性
- 样式属性和值中间是:
- 多组属性值之间用;隔开。
- 只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余
缺点：
- 没有实现样式和结构相分离

5.2 内部样式表（内嵌样式表）

概念：

称内嵌式

是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义
其基本语法格式如下：

<head>
<style type="text/CSS">选择器（选择的标签） { 属性1: 属性值1;属性2: 属性值2; 属性3: 属性值3;}
</style>
</head>

<style>div {color: red;font-size: 12px;}
</style>

注意：
- style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
- type=“text/css” 在html5中可以省略。
- 只能控制当前的页面
缺点：

没有彻底分离

5.2.1 综合案例

<style>/*选择器{属性:值；}*/p {color:#06C; font-size:14px;  }  /*文字的颜色是 蓝色*/h4 {color:#900;}h1 {color:#090; font-size:16px; }body { background:url(bg2.jpg);}
</style>

<!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=utf-8" />
<title>无标题文档</title>
<style>/*选择器{属性:值；}*/p{color:#06C; font-size:14px;  text-indent:2em;}  /*文字的颜色是 蓝色*/h4{color:#900;}h1{color:#090; font-size:16px; text-align:center;}body{ background:url(bg2.jpg);}
</style>
</head><body>
<h1>忆江南(1)</h1>唐.白居易<p>江南好，风景旧曾谙。(2) 日出江花红胜火，春来江水绿如蓝，(3) 能不忆江南。</p><h4>作者介绍</h4><p>白居易(772－846) ，字乐天，太原(今属山西)人。唐德宗朝进士，元和三年(808)拜左拾遗，后贬江州(今属江西)司马，移忠州(今属四川)刺史，又为苏州(今属江苏)、同州(今属陕西大荔)刺史。晚居洛阳，自号醉吟先生、香山居士。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐大家。也是早期词人中的佼佼者，所作对后世影响甚大。</p>
<h4>注释</h4><p> (1)据《乐府杂录》，此词又名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。又名《望江南》、《梦江南》等。分单调、双调两体。单调二十七字，双凋五十四字，皆平韵。(2)谙(音安)：熟悉。(3)蓝：蓝草，其叶可制青绿染料。</p>
<h4>品评</h4><p> 此词写江南春色，首句“江南好”，以一个既浅切又圆活的“好”字，摄尽江南春色的种种佳处，而作者的赞颂之意与向往之情也尽寓其中。同时，唯因“好”之已甚，方能“忆”之不休，因此，此句又已暗逗结句“能不忆江南”，并与之相关阖。次句“风景旧曾谙”，点明江南风景之“好”，并非得之传闻，而是作者出牧杭州时的亲身体验与亲身感受。这就既落实了“好”字，又照应了“忆”字，不失为勾通一篇意脉的精彩笔墨。三、四两句对江南之“好”进 　行形象化的演绎，突出渲染江花、江水红绿相映的明艳色彩，给人以光彩夺目的强烈印象。其中，既有同色间的相互烘托，又有异色间的相互映衬，充分显示了作者善于著色的技巧。篇末，以“能不忆江南”收束全词，既托出身在洛阳的作者对江南春色的无限赞叹与怀念，又造成一种悠远而又深长的韵味，把读者带入余情摇漾的境界中。</p>
</body>
</html>

展示

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.01
Branch： branch01

commit description：a0.01（内部样式表综合案例）

tag：a0.01

思考：1. 如何实现结构与样式完全分离？2. 如何实现css样式共享？

5.3 外部样式表（外链式）

概念：

称链入式

是将所有的样式放在一个或多个以**.CSS**为扩展名的外部样式表文件中，

通过link标签将外部样式表文件链接到HTML文档中
其基本语法格式如下：

<head><link rel="stylesheet" type="text/css" href="css文件路径">
</head>

注意：
- link 是个单标签
- link标签需要放在head头部标签中，并且指定link标签的三个属性

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
type	定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。我们都可以省略
href	定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

5.3.1 example01

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet"  href="style.css" />
</head>
<body><h3>测试01</h3>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet"  href="style.css" />
</head>
<body><h3>测试02</h3>
</body>
</html>

style.css

h3 {color: deeppink;font-size: 20px;
}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.02
Branch： branch01

commit description：a0.02（外部样式表案例example01）

tag：a0.02

5.4 三种样式表总结（位置）

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现样式和结构相分离	较少	控制一个标签（少）
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
外部样式表	完全实现结构和样式相分离	需要引入	最多，强烈推荐	控制整个站点（多）

5.4.1 团队约定-代码风格

样式书写一般有两种：

一种是紧凑格式 (Compact)

h3 { color: deeppink;font-size: 20px;}

一种是展开格式（推荐）

h3 {color: deeppink;font-size: 20px;
}

5.4.2 团队约定-代码大小写

样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。

/* 推荐 */
h3{color: pink;
}/* 不推荐 */
H3{COLOR: PINK;
}

6. 5. 总结CSS样式规则

使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，

具体格式如下：

总结：

选择器用于指定CSS样式作用的HTML标签，花括号内是对该对象设置的具体样式。
属性和属性值以“键值对”的形式出现。
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
属性和属性值之间用英文“:”连接。
多个“键值对”之间用英文“;”进行区分。

7. @拓展阅读

实话说，在过去这一年，这已经成为我好心情的固定来源。即不断地告诉一波波想要像在 TeX、Microsoft Word 等常见的文档处理工具中那样方便地控制 HTML 文档的样式的人们说——安全带系好，受伤别怪我：“很不好意思，你完蛋了！” —— 马克·安德森 1994年

在1991年，蒂姆·伯纳斯·李首次提出 HTML 的时候，并没有给页面添加样式的方法。给定的 HTML 该如何渲染决定于浏览器本身，常常还受到用户偏好输入的影响。然而，这看起来确实是一个不错的想法，为网页创建标准，用户可以提供“建议”该以什么样的风格渲染页面。

但要知道五年后才有 CSS，十年后 CSS 才获得全面的实现。因此这是一个群雄逐鹿的时代，很多多热心的工作和变革，产生了多个互相竞争的样式方案，看上去很有可能成为标准。

尽管这些语言在今天并没有用起来，但是我发现思考彼时的未来会变成什么样子真的很有奇妙。更让人惊讶的是，碰巧这些可能成为 CSS 的语言包含的一些特性正是如今开发者希望出现在 CSS 中的。

7.1 第一个提案

1993年年初，Mosaic 还没有发布 1.0，当时其他已有的浏览器还在搞怎么处理 HTML。并没有什么方法可以来给 HTML 添加样式。总之就是，<h1>的样式完全取决于浏览器。

在这年的6月，Robert Raisch 在www-talk的邮件列表中给出了一个提案，创建了“一个解析容易与 Web 文档一起发布的样式信息的格式”，赐名 RRP。

@BODY fo(fa=he,si=18)

看不懂这段代码也很正常。在没有 gzip，网络传输速度只有 14.4k 的时代，尽力压缩新格式的大小是非常合理的。这段规则的实际上是设置字体（font family ->fa）为helvetica（he），字号（font size -> si）为 18 像素。

这个提案缺少一个有意思的东西就是单位，所有数字对应的单位决定于他们使用的上下文（例如字体的大小都是以像素为单位的）。这可以说明 RRP 设计的目的是作为“一系列指导渲染的指示或者建议的集合”，而不是作为标准。这是值得考虑的，因为同一份样式表必须在 common line mode 浏览器和图形浏览器（例如 [Lynx](https://en.wikipedia.org/wiki/Lynx_(web_browser)）都能正常工作，后一种浏览器变得越来越流行。

有趣的是，RRP 包含设置列布局的方式，这个特性直到2011年才引入到 CSS 中。例如，3列每列80单位就是下面这样子：

@P co(nu=3,wi=80)

这解析起来有点困难，但应该没有white-space: nowrap难。

值得一提的是，RRP 并不支持如今所用的“层叠”样式表。一个文档同一时刻只能激活一个样式表，这从逻辑上来说是合理的，但是今天看来就有点奇怪了。

马克·安德森（一个曾经最流行的浏览器 Mosaic 的创造者）知道 RRP 提案，但是并没有在 Mosaic 中实现它。Mosaic 很快（同时也是遗憾地）就采用了通过 HTML 来定义样式的方案，引入像<FONT>和<CENTER>这样的标签。

7.2 Viola 以及原始浏览器之战

现在台面上已经有多个样式表的提案，为什么你不选其中一个实现之？只要正确地实现了问题就将得到解决。

因此，我必须告诉大家，“好了，你需要学习这种语言来撰写你的文档，然后学习另外种语言来来把你的文档定义成你想要的样子。”噢，他们会喜欢这样的。 —— 马克·安德森 1994

反直觉的是，Mosaic 并不是第一个图形化的浏览器。ViolaWWW 要比它还早，Pei-Yuan Wei 起初花了四天时间写出的图形化的浏览器。

Pei-Yuan Wei 创建了一个样式表语言，支持某种嵌套式的结构，这已经被我们用在了今天的 CSS 之中：

(BODY fontSize=normalBGColor=whiteFGColor=black(H1   fontSize=largestBGColor=redFGColor=white)
)

在上例中，为 body 设置颜色，并给出现在 body 中的 h1 设置样式。PWP 并没有采用重复的选择器来表示层级，而是使用圆括号系统。这让我联想到了想 Stylus 和 SASS 使用的缩进系统，如今这在某些 CSS 开发者中很流行。从这方面来讲，PWP 的语法比 CSS 更好，不过后者已经成为了 Web 的通用语言。

值得一提的是 PWP 还是引用外部样式表方法的提出者，到今天也一直在用：

<LINK REL="STYLE" HREF="URL_to_a_stylesheet">

遗憾的是，ViolaWWW 只能在 X Window System 下工作，后者只在 Unix 系统上受欢迎。当 Mosaic 移植到到 Windows 后，Viola 就消失不见了。

7.3 Web 之前的样式表

只有计算机科学家才能接受 HTML 这种东西。它确实可以表达一个文档的内在结构，但一个文档不只包含文本数据的结构。它们需要有视觉的冲击力。HTML 完全抹杀了文档设计者本应该有的视觉创造力。—— Roy Smith1993

实时上，对定义文档样式语言的需求早在互联网出现之前就有了。

你要知道 HTML 也是基于一种互联网之前就存在的语言 SGML 制定的。早在1987年，美国国防部就决定调研 SGML 是否可以简化文档的存储和传输，他们有大量的文档需要处理。与其他好的政府项目一样，没有时间浪费在起一个好听的名字上。这个小组名字一开始叫做 Computer-Aided Logistics Support（计算机辅助后勤支持），后来更名为 Computer-aided Acquisition and Logistics Support（计算机辅助采集和后勤支持），最后是 Continuous Acquisition and Life-cycle Support（持续采办与全寿命支持计划）。总之首字母缩写就是 CALS。

CALS 团队创造了一门语言来定义 SGML 文档的样式，名为 FOSI，毫无疑问也是某四个单词的缩写。他们发布了一份语言规范，尽管全面，但理解不能。

互联网一个不变的铁律就是：在你能证明某人错误之前必须做更多的事情。1993年，在 Pei-Yuan 给出提案的第四天，Steven Heaney 提出使用 FOSI 一个变体来定义 Web 的样式，他并没有“重新发明轮子”。

FOSI 文档直接就用 SGML 写成，这对于熟悉 SGML 变体 HTML 的 Web 开发者来说有一种逻辑上的转换。文档示例：

<outspec><docdesc><charlist><font size="12pt" bckcol="white" fontcol="black"/></charlist></docdesc><e-i-c gi="h1"><font size="24pt" bckcol="red", fontcol="white"/></e-i-c><e-i-c gi="h2"><font size="20pt" bckcol="red", fgcol="white"/></e-i-c><e-i-c gi="a"><font fgcol="red"/></e-i-c><e-i-c gi="cmd kbd screen listing example"><font style="monoser"/></e-i-c></outspec>

你搞不清楚docdesc和charlist是什么意思对吧？www-talk成员也搞不清楚。唯一可以给出上下文信息的只有e-i-c，即“element in context”。FOSI 值得傲娇的是引入了 em 作为字体的单位，现在已经作为熟悉 CSS 的开发者的首选方式。

语言之间的战争就如语言本身一样古老。当时正值“lisp-style”函数式语言与申明式语言的战争。Pei-Yuan 把自己的语法描述为是“LISP式的”，但这只是时间的问题，LISP 真正的变种语言马上就要出现了。

7.4 图灵完备的样式表

受累于复杂性，FOSI 被看做是解决文档格式问题的临时过度方案。长远的方案是基于函数式语言 Scheme 创建一门新的语言，基于强大的能力，能对文档进行任何你可以想到的转换。这门语言叫做 DSSSL。用贡献者 Jon Bosak 的话来讲：

把 DSSSL 和脚本语言放在一起是一种错误。没错，DSSSL 是图灵完备的，它确实是一枚编程语言。但是脚本语言（至少我是这么叫的）是程序化的；DSSSL 则完全不一样。它完全就是函数式的，完全没有副作用。在 DSSSL 样式表没有任何影响，样式表是一个巨大的函数，它的价值是一个抽象的，与设备无关的，非过程化的，对文档格式的描述，作为一种规范（也可称其为申明）送到显示区域逐级渲染过程中。

得益于它的简洁，DSSSL 实际上是一种很容易理解的样式语言：

(element H1(make paragraphfont-size: 14ptfont-weight: 'bold))

同时作为编程语言，你甚至可以定义函数：

(define (create-heading heading-font-size)(make paragraphfont-size: heading-font-sizefont-weight: 'bold))(element h1 (create-heading 24pt))
(element h2 (create-heading 18pt))

还可以在样式中使用计算，比如定义一个黑白相间的表格：

(element TR(if (= (modulo (child-number) 2)0)…   ;even-row…)) ;odd-row

最后还有让你嫉妒心爆棚的特性，DSSSL 甚至可以把继承的属性值作为变量，在上面进行计算。

(element H1(make paragraphfont-size: (+ 4pt (inherited-font-size))))

不幸的是，DSSSL 同时具备了所有 Scheme 类语言的致命弱点：括号太多了。更糟糕的是，规范最终发布时，认为其太过复杂的声音不绝于耳，这让浏览器开发者感到胆怯。DSSSL 标准包含了超过210项独立的样式属性。

这个团队继续创建了 XSL，用来定义文档的转化，虽然依然让人困惑，但是确实更流行一些。

7.5 为什么样式表达到了终点

CSS 并没有包含父选择符（一种用来定义包含特定子节点的节点样式定义方法）。这个问题在 Stack Overflow 上频繁地被问道，但事实证明这个特性的缺失事出有因。尤其在互联网的早期，有一个重要的观点被普遍认可，在文档被完全加载之前，页面必须是可渲染的。换句话说，大家希望在构成页面底部的 HTML 全部加载完成之前，就可以渲染页面起始的 HTML。

一个父选择器意味着随着 HTML 文档的加载样式可能会有变化。像 DSSSL 这样的语言，如果被完全实现，因为它们自己可以操作文档，所以在开始渲染时，页面很可能是不可用的。

第一个贡献者 Bert Bos，在1995年3月提出了这个问题，并给出了一个工作良好的语言，他的提议中包含了“smiley”表情

0基础快速入门CSS技术栈（1）—图解详细阐述初识CSS（附详细案例源码解析过程）相关推荐

0基础快速入门CSS技术栈（4）—图解详细阐述CSS的复合选择器、标签显示模式、行高、CSS背景，及最为重要的CSS三大特性附带权重计算笔试题（附详细案例源码解析过程）
文章目录 1. 0基础快速入门CSS技术栈(4) 2. 重点提炼 3. CSS复合选择器 3.1 后代选择器(重点) 3.1.1 example01 3.2 子元素选择器 3.2.1 exmaple0 ...
0基础快速入门CSS技术栈（3）—图解详细阐述CSS文字文本样式及综合案例、样式调试工具、快速开发html的emment语法（附详细案例源码解析过程）
文章目录 1. CSS字体样式属性调试工具 2. font字体 2.1 font-size:大小 2.2 font-family:字体 2.2.1 CSS Unicode字体 2.3 font-wei ...
0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）
文章目录 1. 重点提炼 2. 配置环境 3. Plugins(插件) 3.1 HtmlWebpackPlugin 3.1.1 example01 3.1.1.1 example01-1 3.1.1. ...
0基础快速入门CSS技术栈（6）—图解详细阐述说透CSS的浮动及应用、浮动的扩展及清除浮动和详解快速·1photoshop切图（附详细案例源码解析过程）2021-01-07更新
文章目录 1. 浮动(float)重点提炼 2. CSS 布局的三种机制 3. 为什么需要浮动? 3.1 example01 4. 什么是浮动(float) 4.1 作用 4.1.1 example0 ...
0基础快速入门CSS技术栈（5）—图解详细阐述说透CSS的盒子模型（超级重要）、圆角边框、盒子阴影及相关重要的笔试题——css的核心中的核心（附详细案例源码解析过程）2021.01.07更新
文章目录 1. 盒子模型(CSS重点) 1.1 看透网页布局的本质 1.2 盒子模型(Box Model) 1.3 盒子边框(border) 1.3.1 边框综合设置 1.3.2 example01 ...
乐学偶得《零基础Python入门编程全栈量化AI》课程238课的详细完整代码怎么样实现？靠谱答案来啦啦啦╭(╯^╰)╮
学习打卡内容搬运于乐学偶得公众号:乐学Fintech ,仅用于我学习打卡之用.也在此和学习Python的小伙伴分享~ 我学习的是乐学偶得<零基础Python入门编程全栈量化AI>课程,属于 ...
【0基础快速入门】Python学习快速参考手册
Python学习快速参考手册目录文章目录 Python学习快速参考手册目录 @[toc] 下载 Python下载与配置 IDE下载与配置第一章 · Python的基本语法变量数据类型注释 ...
javascript（JS） 0基础快速入门（二）（this指向问题）
this 函数的 this 关键字在 JavaScript 中的表现略有不同,此外,在严格模式和非严格模式之间也会有一些差别. 在绝大多数情况下,函数的调用方式决定了 this 的值(运行时绑定).t ...
0基础快速入门Python，小白必看
1. python的基本语法 1.1 变量 1.12 如何定义变量 1.13 输出一个变量 1.14 变量的数据类型 1.15 变量的运算 1.16 变量的输入 1.17 变量的类型转换 1.18 变 ...
0基础快速入门C语言单片机编程
qt的安装路径必须是全英文的,其余默认便可第一步:点击New project或者在编辑中项目中选择新建项目,或者点击左上角的文件选择新建文件或项目第二步:在弹出的对话框中选择Non-QT proj ...

0基础快速入门CSS技术栈（1）—图解详细阐述初识CSS（附详细案例源码解析过程）