基础

不会CSS的前端是伪前端

https://developer.mozilla.org/zh-CN/docs/Learn/CSS

https://www.w3school.com.cn/css/index.asp

https://codepan.egoist.sh/

层叠样式表(Cascading Style Sheet, CSS) 是一个强大的工具，能影响一个或一组文档的表现。
CSS 几乎触及 Web 的每个角落，甚至很多非 Web 环境也能见到它的身影。
例如，基于 Gecko 的浏览器使用 CSS 影响窗体自身的表现，很多 RSS 客户端允许使用 CSS 定制订阅源和订阅源中的文章，而且有些即时通信客户端使用 CSS 装饰聊天窗口。
JavaScript 框架，甚至是 JavaScript 自身使用的句法中处处可见 CSS 的身影。

CSS 很棒的一点在于开发人员可以在 HTML 页面之外创建 CSS 文件，再将它应用于网站上所有的页面。
这在构建网页之初及随后对其进行修改时都极大地简化了样式设置工作。
一段时间后，如果需要重新设计网站，而内容和结构保持不变，就可以在 HTML 不发生变动的情况下，为网页提供一套全新的外观

"只需一分钟就能学会，却要用一辈子的时间去精通"，这句话现在略显老套，但我还是很喜欢。
这句话在现代作为《黑白棋》(Othello)游戏的标语而得到普及。
在《黑白棋》游戏中，玩家轮流在棋盘上放置白色或者黑色的棋子。
如果在下了一个白棋后，导致一行黑棋被两个白棋夹在中间，那么所有黑棋将被替换为白棋，整行棋子就变成了白色。

就像黑白棋一样，学会 CSS 的规则并不难。你只需要写一个选择器尝试匹配元素，然后写一些键/值对给元素添加样式即可。
即使是新手也能轻松理解该基础语法。但要精通 CSS，难在需要知道在何时做何事。

CSS 是一种 Web 语言，但是它与编程并不完全相同。CSS 也包含一些逻辑和循环，但它的数学仅限于简单的函数，并且直到最近才拥有变量，更别提安全性了。
比如 Python，CSS 更接近于绘画。你可以尽情使用 CSS 创造，它不会给出任何错误或者编译失败的提示。

精通 CSS，需要学习 CSS 的所有功能。了解得越多，对 CSS 的感受就越自然。
练习得越多，就越能轻松地想到完美的布局和定位方法。读得越多，就越能从容地应对任何涉及。

真正优秀的 CSS 开发人员不会害怕设计。每项工作都变得像解谜游戏一样。能够锻炼你的聪明才智。
真正优秀的 CSS 开发人员对 CSS 的功能有全面而广泛的了解。

https://github.com/sawmac/css_mm_4e

https://github.com/CSSInDepth/css-in-depth

Web 样式简介

1994 年，正值 Web 开始广泛流行开来，CSS 的第一个提案发布了。那时，浏览器为用户提供了各种样式的定制功能。
例如，用户用在 Mosaic 的表现偏好设置中可以为单个元素设定字体族、字号和颜色。而文档编写人员却做不到这一点。
文档编写人员只能把内容标记成一个个段落、一级级标题、一块块预排格式文本，或者一些其他类型的元素。
如果用户愿意，可以把一级标题设为粉红色的小字，而把六级标题设为红色的大字。

CSS 就是在这样的背景下诞生的。
它的目标是提供一个简单的声明式样式语言，而且具有一定的灵活性，能为文档编写人员和用户提供等同的样式化功能。
层叠样式表中的“层叠”是指样式可以结合起来使用，而且具有优先级，文档编写人员和用户都有话语权，不过最终的决策权在用户手中。

草案制定的速度很快，到 1996 年年末，CSS1 完成了。
此后，刚组建的 CSS 工作组开始着手制定 CSS2，而各浏览器则相互协作，努力实现 CSS1。
单独来看，CSS 的每一部分都很简单，但把各部分放在一起就变得异常复杂。而且早期实现有些先天不足，例如不同浏览器对盒模型(box model)的实现之间差异尤其为人诟病。
这些问题直接影响到 CSS 的名声，幸好一些聪明人提出了变通方法，让浏览器的行为保持了一致。
得益于一致性的提高和高调的开发活动，例如使用 CSS 重新设计 Wired 杂志和 CSS Zen Garden，几年之间，CSS 逐渐开始流行。

不过，在此之前，CSS2 规范于 1998 年年初定案。
随后，CSS 工作组立即投身 CSS3 的制定工作，以及 CSS2 的修订工作(制定 CSS2.1)。
与以往不同的是，CSS3 由多个(理论上)独立的模块构成，而不是单独一个臃肿的规范。
XHTML 规范受此启发，也采用了这种模块式机制。

CSS3 分成多个模块的根本原因是各模块可以独立演进，尤其是重要的(或受众广的)魔魁爱可以按照 W3C 的规范向前推进，而不必受其他模块拖累。事实证明，这样做是对的。
截至 2012 年年初，有三个 CSS3 模块(CSS Color Level 3、CSS Namespaces 和 Selectors Levele 3)变成了权利推荐转台，而有七个模块处于候选状态，还有七个模块处在不同的草案状态。
如果采用以前的机制，要等其他部分完成磁能在一份完成的规范中发布颜色、选择符和命名空间的新条款。
得益于模块化，我们无需再等待

但是，这样做也有缺点，即“CSS3 规范”不能涵盖一切。世界上不再有这种叫法，也不可能再有。
即便其他模块在某一时刻到达了 Level 3，比如说 2016 年年末(然而并没有)，Selectors Level 4 也都开始制定了。
那会不会有 CSS4？"CSS3" 哪些尚未正式发布的新特性呢？还有 Grid Layout，它甚至还没到 Level 1?

可见，我们不能指着一摞厚厚的文件说，“这就是 CSS3”，而应该分模块学习不同的特性，模块的灵活性有时可以弥补由此引起的语义不足

元素

元素(element)是文档结构的根基。
HTML 中常用的元素有 p、table、span、a 和 div 等。文档中的每个元素都对文档的表现起一定作用。

置换元素和非置换元素

CSS 依赖元素，但并非每个元素都以同样的方式创建。
例如，图像和段落是不同类型的元素，span 和 div 也不同。对 CSS 来说，元素通常有两种形式: 置换元素和非置换元素

置换元素

置换元素(replaced element)指用来置换元素内容的部分不由文档内容直接表示。
在 HTML 中，最常见的置换元素要数 img，它的内容由文档之外的图像文件替换。其实，通过下面这个简单的例子可以看出，img 元素没有内容:

<img src="howdy.gif">

这段标记只包含一个元素名和一个属性。如不指向外部内容(这里通过 src 属性指定一个图像)，这个元素什么也表示不了。
如果指向的图像文件存在，文档会把那个图像显示出来; 否则，浏览器什么也不显示，或者显示 “图像损坏” 占位图。

input 元素类似，根据类型的不同，会替换成单选按钮、复选框或文本输入框

非置换元素

HTML 元素大部分是非置换元素(nonreplaced element)，即元素的内容由用户代理(通常是浏览器)在元素自身生成的框中显示。
例如，<span>hi there </span> 是非置换元素，用户代理会显示 "hi there" 文本。
段落、标题、单元格、列表，以及 HTML 中其他几乎所有元素都是非置换元素。

元素的显示方式

除了置换元素和非置换元素之外，CSS 还把元素分成块级和行内两种基本类型。
除此之外，还有其他显示类型，不过这两种是最常见的。

块级元素:

块级元素(默认)生成一个填满父级元素内容区域的框，旁边不能有其他元素。
也就是说，块级元素在元素框的前后都“断行”。HTML 中最常见的块级元素是 p 和 div。置换元素可以是块级元素，但往往不是。

列表项目是一种特殊的块级元素，它的表现与其他块级元素没有区别，此外还会在元素框旁边生成一个记号(无序列表通常是圆点，有序列表通常是数字)。
除了多出的这个记号以外，列表项目与其他块级元素之间没有任何区别

行内元素

行内元素在一行文本内生成元素框，不打断所在的行。HTML 中最常见的行内元素是 a。此外还有 strong 和 em。
这类元素不在自身所在元素框的前后"断行"，因此可以出现在另一个元素的内容中，且不影响所在的元素。

注意，HTML 中的块级元素和行内元素虽然有诸多共同点，但是它们之间有个重要的区别: 在 HTML 中，块级元素不能出现在行内元素中。
但是 CSS 并不限制它们的显示方式，相互之间可以嵌套。

为了进一步了解，下面来看一个 CSS 属性 display

取值   [ <display-outside || <display-inside> ] | <display-listitem> | <display-interanl> | <display-box> | <display-legacy>
默认值 inline
适用于 所有元素
计算值 指定的值
继承性 否
动画性 否
<display-outside>
    block | inline | run-in
<display-inside>
    flow | flow-root | table | flex | grid | ruby
<display-listitem>
    list-item && <display-outside>? && [ flow | flow-root]?
<display-internal>
    table-row-group | table-header-group | table-footer-group | table-row | table-cell
    | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container
    | ruby-text-container
<display-box>
    cotents | none
<display-legacy>
    inline-block | inline-list-item | inline-table | inline-flex | inline-grid

可以看出，display 属性可以取很多值，比如 block、inline 和 list-item

现在我们只关注 block 和 inline。来看下述标记:

<body>
<p>This is a paragraph with <em>an inline element</em> within it.</p>
</body>

这里有两个块级元素(body 和 p)及一个行内元素(em)。根据 HTML 规范，em 可以放在 p 里，而反过来却不行。
一般地，HTML 层次结构要求，行内元素可以放在块级元素中，反之则不行。

与此不同，CSS 没有这种限制。在不改变标记的前提下，我们可以像下面这样改变它们的显示方式:

p {
    display: inline;
}
em {
    display: block;
}

这回导致行内框中出现一个块级框。这完全是有效的，不违背任何 CSS 规则。
然而，如果在 HTML 中调换元素之间的嵌套关系，就会出现问题:

<em><p>This is a paragraph improperly enclosed by an inline element.</p></em>

不管通过 CSS 如何改变显示方式，这都不是有效的 HTML

改变元素的显示方式对 HTML 文档来说是有用的，不过对 XML 文档而言的作用更大。

把 CSS 应用到 HTML 上

HTML 文档内部具有一定的结构，这一点前面已经提及，但是有必要重申一次。
以前的网页往往忽略了这一点，我们经常忘记文档内部应该有一定的结构，而这与视觉结构完全是两码事。
我们可能急于创建最酷的网页，可能会以各种方式摆放页面的内容，但却忘了网页应该包含结构化的信息。

这种结构正是 HTML 和 CSS 之间固有关系的一部分，如若不然，二者之间便是泾渭分明。
为了更好地理解这一点，下面以一个 HTML 文档为例，逐一说明各部分:

<!DOCTYPE html>
<html lang="zh">
<head>
  <title>Eric's World of Waffles</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="sheet1.css" media="all">
  <style>
  /* These are my styles! Yay! */
  @import url(sheet2.css);
  </style>
</head>
<body>
  <h1>Waffles!</h1>
  <p style="color: gray;">
  The most wonderful of all breakfast foods is 
  the waffle--a ridged and created slab of home-cooked, fluffy goodness
  that makes every child's heart soar with joy. And they're so easy to make!
  Just a simple waffle-maker and some batter, and you're ready for a morning
  of aromatic ecstasy!
  </p>
</body>
</html>

link 标签

link 标签少有关注，但它完全是有效的标签，在 HTML 规范中已经存在多年，一直等待重用。它的基本作用是把其他文档与当前文档关联起来。

通过 link 标签链接的样式不是 HTML 文档的一部分，但却提供文档使用。我们称这样的样式表为外部样式表(external stylesheet)，因为样式表在 HTML 文档外部

为了正确加载外部样式表，link 标签必须放在 head 元素中，不能放在其他元素中。
Web 浏览器遇到 link 标签时，会查找并加载指定的样式表，使用样式表中的样式渲染 HTML 文档。
还可以通过 @import 声明加载了另一个外部样式表 sheet2.css。@import 声明必须放在所在样式表的开头，此外别无限制

文件扩展名不是必须的，但是如果文件名不以 .css 结尾，即使在 link 元素中把 type 属性的值设为 text/css，有些旧的浏览器也不会将其识别为包含样式表的文件。

属性

link 标签余下的内容，即那些属性和值比较容易理解。rel 是 "relation"(关系)的简称，这里指定的关系是 stylesheet。
type 属性的值始终为 text/css，说明通过 link 标签加载的数据类型。
这样 Web 浏览器才知道加载的样式是 CSS 样式表，然后确定如何处理加载的数据。
以后可能会出现其他样式语言，因此最好声明使用的是哪种语言。

接下来是 href 属性，它的值是样式表的 URL，可以是绝对地址，也可以是相对地址，具体由需求而定。前例使用的是相对 URL。
此外，也可以使用绝对 URL，例如 http://meyerweb.com/sheet1.css

最后是 medis 属性，它的值是一个或多个媒体描述符(media descriptor)，指明媒体的类型和具有的功能。
多个媒体描述符以逗号分开。例如，可以像下面这样链接针对屏幕媒体和投影媒体的样式表:

<link rel="stylesheet" type="text/css" href="visual-sheet.css" media="screen, projection">

注意，一个文档可以关联多个样式表。如果是这样，最初显示文档时只会使用 rel 属性的值为 stylesheet 的 link 标签链接的样式表。
因此，如果想链接两个分别名为 basic.css 和 splash.css 的样式表，可以这么做:

<link rel="stylesheet" type="text/css" href="basic.css">
<link rel="stylesheet" type="text/css" href="splash.css">

这样，浏览器会加载指定的两个样式表，合并样式规则后再应用到文档上。

候选样式表

此外还有候选样式表(alternate stylesheet)，定义方式为把 rel 属性的值设为 alternate stylesheet。仅当用户自己选择，文档才会使用候选样式表渲染
如果浏览器支持候选样式，会使用 link 元素 title 属性的值生成候选样式离诶包。对下面的示例来说:

<link rel="stylesheet" type="text/css" href="sheet1.css", title="Default">
<link rel="alternate stylesheet" type="text/css" href="bigtext.css", title="Big Text">
<link rel="alternate stylesheet" type="text/css" href="zany.css", title="Crazy colors!">

浏览器默认使用第一个样式表(这里是名为 "Default" 的样式表)，此外用户还可以自行选择想使用的样式表。

此外，还可以为不同的候选样式表设定相同的 title 值，把它们分组放在一起。
利用这一点，用户可以为屏幕和印刷媒体选择不同的外观。

style 元素

style 元素也是一种引入样式表的方式，直接写在文档中:

<style type="text/css">...</style>

style 元素应该始终设定 type 属性。对 CSS 文档来说，正确的值是 "text/css"，这与 link 元素是一样的。

style 元素始终以 <style type="text/css"> 开头，后面跟一个或多个样式，然后以 </style> 标签结尾。
style 元素也有 meida 属性，与通过 link 元素链接的样式表功能一样。

开始和结束 style 标签之间的样式称为文档样式表(document stylesheet)或嵌入式样式表(embedded stylesheet，因为这种样式表嵌在文档中)。
style 元素可以直接包含应用到文档上的样式，也可以通过 @import 指令引入外部样式表

@import 指令

下面来看可以出现在 style 标签中的内容。首先是链接的外部样式表中也有的 @import 指令

@import url(sheet2.css)

与 link 一样，Web 浏览器遇到 @import 指令时会加载外部样式表，使用其中的样式渲染 HTML 文档。
二者之间唯一的主要区别在于句法和指令的位置。
可以看出，@import 指令在 style 元素内部，而且必须放在其他 CSS 规则前面，否则不会起作用。比如下面的例子:

<style>
  @import url(style.css);  /* @import 放在开头 */
  h1 { color: gray; }
</style>

与 link 一样，一个文档中可以有多个 @import 语句。
然而，不同的是，@import 指令导入的每个样式表都会使用，无法指定候选样式表。对下面的代码来说:

@import url(sheet2.css);
@import url(blueworld.css);
@import url(zany.css);

三个外部样式表都会加载，而且其中的所有样式都会用于显示文档。
与 link 类似，@import 指令也可以显示导入的样式表应用于何种媒体。方法是在样式表的 URL 后面提供媒体描述符

@import url(sheet2.css) ass;
@import url(blueworld.css) screen;
@import url(zany.css) projection, print;

如果一个外部样式表需要用到另一个外部样式表中的样式，@import 指令的作用就体现出来了。
我们知道，外部样式表不能包含任何文档标记，也就是不能使用 link 元素，但是可以使用 @import 指令。因此，外部样式表中可能包含下述内容:

@import url(http://example.org/library/layout.css);
@import url(basic-text.css);
@import url(printer.css) print;
body { color: red; }
h1 { color: blue; }

行内样式

如果只想为某个元素提供少量样式，不值得动用嵌入式表或外部样式，可以利用 HTML 元素的 style 属性设置行内样式:

<p style="color: gray;">
The most wonderful of all breakfast foods is 
the waffle--a ridged and created slab of home-cooked, fluffy goodness
that makes every child's heart soar with joy. And they're so easy to make!
Just a simple waffle-maker and some batter, and you're ready for a morning
of aromatic ecstasy!
</p>

除了 body 元素之外的标签(如 head 或 title)，所有 HTML 标签都能设定 style 属性。

style 属性的句法相当简单。其实，与 style 元素中的样式规则十分相似，不过是把花括号换成双引号。
因此，<p style="color: maroon; background: yellow;"> 将把文本的颜色设为红褐色，背景色设为黄色，而且只适用于那一段文字，文档中的其他部分不受此影响。

注意，style 属性的值只能是一系列规则声明，而不能包含整个样式表。
因此，不能再 style 属性中使用 @import 指令，也不能有完整的规则。style 属性的值只能是样式规则花括号之间的那一部分

通常不建议使用 style 属性。而且，除了 HTML，XML 很少使用这个属性。
倘若使用 style 属性，CSS 的很多重要有点都不复存在了，例如集中管理样式，控制整个文档或网站中所有文档的外观。
在很多方面，行内样式都不比 font 标签好多少，不过却提供了一定的灵活性。

样式表中的内容

规则的结构

一个规则由两个基本部分构成: 选择符(selector)和声明块(declaration block)。
声明块由一个或多个声明构成，而一个声明包含一个属性(property)和对应的值(value)。
一个样式表由一系列规则构成。

h1 {
    color: red;
    background: yellow;
}

一个声明块由一个或多个声明组成。
一个声明包含一个 CSS 属性及其值。上面的声明块中包含两个声明，第一个声明把文档中部分文本的颜色设为红色，第二个声明把文档中那一部分的北京设为黄色。
因此，文档中的所有 h1 元素(由选择符指定)都将显示为黄底红字

样式(或称规则)由两部分组成:
一部分是选择符，告诉浏览器把格式应用到什么元素上;
另一部分是声明块，列出浏览器用来装饰选中元素的格式指令。

注意: 别忘了在属性和值之后加上分号。
如果没有分号，浏览器无法解析样式表，网页的外观会遭到破坏。

厂商前缀

有时你会发现，CSS 中有些内容的前面有个标注，例如 -o-border-image。这叫厂商前缀(vendor prefix)，浏览器厂商通过它标记实验性或专属(或二者兼具)的属性、值或其他内容。截至 2016 年年末，市面上有不少厂商前缀，其中最常用的见下表:

前缀	厂商
-epub-	国际数字出版社论坛制定的 ePub 格式
-moz-	基于 Mozilla 的浏览器(如 Firefox)
-ms-	微软 Internet Explorer
-o-	基于 Opera 的浏览器
-webkit-	基于 WebKit 的浏览器(如 Safari 和 Chrome)

从表中可以看出，厂商前缀的一般格式是一个英文破折号、一个标注和一个英文破折号。不过也有少量前缀不采用这个格式，开头没有破折号。

使用厂商前缀的原因复杂，不是三言两语就能说清的。
可以说，厂商前缀出现的目的是浏览器厂商为了测试新特性，这么做能保证兼容性，不比担心被过时的行为限制，导致与其他浏览器不兼容。
这样做能避免一系列问题，以免扼制 CSS 的发展。可惜，网页制作者们后来大量使用带前缀的属性，由此引起了一系列新问题。

截至 2016 年年末，厂商前缀的使用有所减缓，因为新版浏览器逐渐删除了对带前缀的属性和值的支持。
如今，编写 CSS 时你完全可以不使用厂商前缀，不过偶尔会遇到比人使用，或者在以前的代码中见到。

媒体查询

创作人员通过媒体查询(media query)定义浏览器在何种媒体环境中使用指定的样式表。
过去，实现这一机制的方法时通过 link 元素或 style 元素的 media 属性设定媒体类型，或者为 @import 或 @media 指令提供媒体描述符。
媒体查询更进一步，允许创作人员通过媒体描述符根据指定媒体类型的特性选择样式表。

媒体查询可以在下述几个地方使用:

• link 元素的 media 属性
• style 元素的 media 属性
• @import 声明的媒体描述符部分
• @media 声明的媒体描述符部分

媒体查询可以是简单的媒体类型，也可以是复杂的媒体类型和特性的组合

简单的媒体查询

在介绍媒体查询的各种可能用法之前，先看几个简单的媒体块。
假设我们想在投影环境(例如幻灯片)中使用一些不同的样式。下面是这个 CSS 中比较简单的两个规则:

h1 {
    color: maroon;
}
@media projection {
    body {background: yellow;}
}

针对这个例子，在所有媒体中，h1 元素的颜色都是红褐色，但是，在投影媒体中 body 元素会有一个黄色背景。

一个样式表中可以有任意多个 @media 块，而且每一个都有自己的一套媒体描述符。
如果愿意，可以把所有规则都放在一个 @media 块里，就像下面这样:

@media all {
    h1 {color: maroon;}
    body { background: yellow; }
}

然而，这与去掉首尾两行的效果一模一样，完全咩有必要。

上述示例中的 projection 和 all 就是设定媒体查询的位置。
媒体查询包括描述媒体类型的词组和对媒体参数的说明(例如分辨率或显示屏高度)，决定块中的 CSS 何时应用。

媒体类型

媒体查询最基本的形式媒体类型，由 CSS2 引入。媒体类型就是指明不同媒体的标注:

all: 用于所有展示媒体
print: 为有视力的用户打印文档时使用。也在预览打印效果时使用。
screen: 在屏幕媒体(如桌面电脑的显示器)上展示文档时使用。在桌面计算机上运行的所有 Web 浏览器都是屏幕媒体用户代理

多个媒体类型使用逗号分隔罗列。
下面四种方式都能把一个样式表(或一个规则块)同时应用到屏幕媒体和印刷媒体上:

<link type="text/css" href="frobozz.css" media="screen, print">
<style type="text/css" media="screen, print"></style>

@import url(frobozz.css) screen, print;
@media screen, print {...}

为媒体类型加上特性描述符(例如，描述指定媒体的分辨率和色深)之后事情就变得有趣了。

媒体描述符

对于在 link 元素或 @import 声明中设定过媒体类型的人来说，一定不会对媒体查询的位置感到陌生

打印成pdf

使用 chrome 浏览器将网页打印成 pdf 时，背景色会丢失，需要在打印时，打印浏览器-》更多设置-》勾选 背景图形 来解决
其他浏览器应该有同样设置的地方

首次编写样式(示例)

https://github.com/sawmac/css_mm_4e

编写行内样式

如果直接在网页的 HTML 中编写 CSS 规则，创建的是行内样式。
与外部样式表相比，行内样式写起来浪费时间，而且消耗的带宽更多，所以专业人士很少使用。
可是，如果只需修改一个网页中一个元素的样式，或许想使用行内样式(例如，使用 HTML 编写电子邮件的内容时，最好使用行内样式。其中一个原因是，只有这么做 Gmail 才能正确应用 CSS 样式)。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Another Page</title>
</head>
<body>
  <h1 style="color: #6A94CC; font-size: 3em;">What Have We Here?</h1>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. </p>
  <h2>Another Page...</h2>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  <h2>To Link a Style Sheet To...</h2>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  <address>
    Copyright 2010, Volutpas Nulla 
  </address>
</body>
</html>

编写内部样式表

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>CSS:The Missing Manual</title>
  <style>
    h1 {
      color: #6A94CC;
      font-size: 3em;
      margin: 0;
    }
    p {
      font-size: 1.25em;  
      color: #616161;
      line-height: 150%;
      margin-top: 10px;
      margin-left: 60px;
    }
  </style>
</head>
<body>
  <h1>CSS: The Missing Manual</h1>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </p>
  <h2>Lorem Ipsum Dolor Sat</h2>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  <h2>Nisi Ut Aliquid </h2>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  <address>
    Copyright 2015, Volutpas Nulla 
  </address>
</body>
</html>

编写外部样式表

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>CSS:The Missing Manual</title>
  <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet'>
  <link href="styles.css" rel="stylesheet">
</head>
<body>
  <h1>CSS: The Missing Manual</h1>
  <p class="intro">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </p>
  <h2>Lorem Ipsum Dolor Sat</h2>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  <h2>Nisi Ut Aliquid </h2>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  <address>
    Copyright 2015, Volutpas Nulla 
  </address>
</body>
</html>

style.css:

html {
  padding-top: 25px;
  background-image: url(images/bg_page.png);
}
body {
  width: 80%;
  padding: 20px;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: 10px 10px 10px rgba(0,0,0,.5);
  background-color: #E1EDEB;
}
h1 {
  font-family: 'Varela Round', 'Arial Black', serif;
  font-weight: normal;
  color: #6A94CC;
  font-size: 3em;
  margin: 0;
}
p, address {
  font-family: "Palatino Linotype", Baskerville, serif;
  font-size: 1.25em;
  color: #616161;
  line-height: 150%;
  margin-top: 20px;
  margin-left: 60px;
}
h2 {
  color: #B1967C;
  font-family: 'Varela Round', 'Arial Black', serif;
  font-weight: normal;
  font-size: 2.2em;
  border-bottom: 2px white solid;
  background: url(images/head-icon.png) no-repeat 10px 10px;
  padding: 0 0 2px 60px;
  margin: 0; 
}
.intro {
  color: #666666;
  font-family: 'Varela Round', Helvetica, sans-serif;
  font-size: 1.2em;
  margin-left: 0;
  margin-bottom: 25px;
}

导入方式

• 内联样式 <div style="color: red; width: 100px; height: 100px; background: yellow;" >苹果</div>
• 内部样式表

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>样式1</title>
    <style>
    div {
        color: red; 
        width: 100px; 
        height: 100px;
        background: yellow;
    }
    </style>
</head>
<body>
    <div>苹果</div>
</body>
</html>

• 外部样式表

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>样式1</title>
    <link rel="stylesheet" href="1.css">
</head>
<body>
    <div>苹果</div>
</body>
</html>

/* 1.css */
div {
    color: red; 
    width: 100px; 
    height: 100px;
    background: yellow;
}

颜色

• rgb 色彩模式:
  R 红色 由浅到深 0~255 G 绿色
  b 蓝色

div {
    color: rgb(255, 0, 0);
    color: rgb(100%,0%,10%);
}

• 名称
  颜色名称
• 16 进制
  #FF0000 -> F00 rgb(255, 0, 0)

RGB颜色值与十六进制颜色码转换工具

选择器

• 作用：通过选择器-》html元素 样式-》元素

浏览器解析方式：从右往左解析，可以加快解析速度

• 元素选择器 a {}
• 伪元素选择器 ::before{}
• 类选择器 .link{}
• 属性选择器 [type=radio]{}
• 伪类选择器 :hover {}
• ID选择器 #id{}
• 组合选择器 [type=checkbox] + label{}
• 否定选择器 :not(.link){}
• 通用选择器 *{}

基本选择器

• 通配符选择器 *

* {
    border: 1px solid black;
}

• 标签选择器

div {
    border: 1px solid black;
}

• id 选择器 id -> 唯一性
  一个元素只能有一个 id

<div>
    div1
    <div>div2</div>
    <p id="txt">p1</p>
</div>
<p>p2</p>

#txt {
    font-size: 60px;
}

div1

div2

p1

p2

p#txt {
    font-size: 60px;
}

div#txt {
    font-size: 60px;
}

• class 选择器

<div>
    div1
    <div>div2</div>
    <p class="txt txt2">p1</p>
</div>
<p class="txt">p2</p>

.txt {
    font-size: 50px;
}
p.txt2 {
    color: red;
}

p.txt {
    font-size: 50px;
}
div.txt2 {
    color: red;
}

组合选择器

把基本选择器 通过特殊符号串在一起

• 分组选择器，多个选择器用,隔开

div, p {
    background: green;
    color: red;
}
p {
    font-size: 50px;
}

• 嵌套选择器，多个选择器用空格隔开

div p {
    background: green;
    color: red;
    font-size: 50px;
}
/* 只要是嵌套在 div 里面的 p 都会生效 */

• 子选择器

div > p {
    background: green;
    color: red;
    font-size: 50px;
}
/* 只有父标签为 div 的 p 标签会生效 */

• 相邻的、同级别的选择器

div + p {
    background: green;
    color: red;
    font-size: 50px;
}

属性选择器

[属性]

• [属性=值]

<p title="caicai">p1</p>

p[title=caicai] {
    background: green;
    color: red;
    font-size: 50px;
}

• [属性~=值] 空格隔开

<div>
    div1
    <p>p2</p>
    <ul>
        <li>
            <p title="caicai2">p3</p>
        </li>
    </ul>
</div>
<p title="caicai zyz">p1</p>

p[title~=caicai] {
    background: green;
    color: red;
    font-size: 50px;
}
/* 只有最后那个 p 标签会生效 */

• [属性^=值] 开始

<div>
    div1
    <p>p2</p>
    <ul>
        <li>
            <p title="caicai2">p3</p>
        </li>
    </ul>
</div>
<p title="caicai zyz">p1</p>

p[title^=caicai] {
    background: green;
    color: red;
    font-size: 50px;
}
/* 最后两个 p 标签都会生效 */

• [属性$=值] 结束

p[title$=caicai] {
    background: green;
    color: red;
    font-size: 50px;
}

伪元素选择器

• 伪元素：不是我们自己写的元素
• 每个标签里面都会默认加上两个伪元素 before 和 after
• 开始：before
• 结束：after

<p>
    <!-- <before> -->
    p1
    <!-- <after> -->
</p>

p::before {
    content: "before";
    font-size: 10px;
}
p::after {
    content: "after";
    font-size: 170px;
}
p {
    background-color: green;
    font-size: 70px;
    color: red;
}

• 块元素第一个字母，第一行
  第一个字母：first-letter
  第一行：first-line

<p>不要香菜不要香菜不要香菜不要香菜不要香菜不要香菜不要香菜不要香菜不要香菜不要香菜不要香菜不要香菜不要香菜不要香菜不要香菜</p>

p::first-letter {
    color: red;
    font-size: 100px;
}
p::first-line {
    color: red;
    font-size: 50px;
}

伪类选择器

根据状态改变，例如 a 标签会发生状态改变

原理

优先原则

选择器权重

• ID选择器 #id{} +100
• 类、属性、伪类 +10
• 元素、伪元素 +1
• 其它选择器 +0

后解析的内容，会覆盖掉之前解析的内容

• 同一个选择器：文件执行是从上从下执行
• 同一类型选择器：从上往下执行

• 先解析低优先级 -> 高优先级 * < div < class < id

• 外部、内部和内联样式的解析
  外部样式 内部样式 合并之后一起解析
  先外部样式 -> 内部样式
  外部 + 内部样式解析完之后，才解析内联样式

• important
  加了 important 字段的，最后执行(一般做调试用)

div {
    background: green!important;
}

继承原则

嵌套里面的标签，拥有外部标签的某些样式，子元素可以继承父元素的属性

• 跟文字、文本 相关的可以被继承

<div class="txt">
    div1
    <div>
        div2
        <p> p2</p>
    </div>
    <p> p1</p>
</div>

div.txt {
    color: red; /* 文字的颜色 */
    border: 1px solid black;
}

• 块级元素如果宽度不被设置，继承父元素，高由内容决定

<div class="txt">
    div1
    <div>
        div2
        <p> p2</p>
    </div>
    <p> p1</p>
</div>

div.txt {
    width: 200px;
    height: 200px;
}
div, p {
    border: 1px solid black;
}

实例

行高

使用line-height进行字体垂直居中

vertical-align: middle也可以垂直居中，设置为top则为顶部对其(按顶线对其)
vertical-align: 5px

图片下面有空白(图片3px缝隙问题)
vertical-align: bottom
display: block

背景使用

body {
    /* background-image: url('logo.png'); */
    /* background-repeat: repeat-x; */
    /* background-repeat: repeat-y; */
    /* background-repeat: no-repeat; */
    /* background-position: 100px 100px; */
    /* background-position: 50% 0%; */
    background-attachment: fixed; /* 背景图片固定，不随滚动移动 */

    background-position: center top;
    /* x: left center right
    y: top center bottom */
    /* height: 1500px; */
    /* background: color image repeat attachment position */
    background: url('logo.png') repeat-y;
}

background: hsl(0, 100%, 50%, .3)
background: rgb(255, 0, 0)
background: rgba(255, 0, 0, .3)
background: url(./test.png)
background: linear-gradient(to left, red, green)
background: linear-gradient(0deg, red, green)
background: linear-gradient(45deg, red, green)

背景图片和属性(雪碧图) 减少HTTP请求数，提高加载性能

base64和性能优化(小图标)，可以打包的时候再做 用于减少HTTP请求；适用于小图片

多分辨率适配

字体

body {
    font-family: "Microsoft YaHei", "黑体","宋体";
    /* 默认 16px => 1em */
    /* font-size: 30px;  */
    /* 100 ~ 900 lighter normal bold */
    font-weight: normal; 
    /* normal italic 斜体  */
    font-style: italic; 
    /* font: style weight size/line-height font-family */
    /* 至少有 size 和 font-family */
    font: italic bold 30px/150px "Microsoft YaHei";
    /* line-height：行高 */
    /* line-height: 60px */
}

• 字体族 serif sans-serif monospace(等宽字体) cursive(手写体) fantasy(花体)
• 多字体fallback
• 网络字体、自定义字体
• iconfont

边框

线型、大小、颜色

边框背景图

border-bottom-color: green
border: 5px dashed red
border: 30px solid transparent
border-bottom: 30px solid red

滚动

overflow: visible
overflow: hidden
overflow: scroll滚动条显示
overflow: auto

文本折行

overflow-wrap通用换行控制，是否保留单词
word-break针对多字节文字，中文句子也是单词
white-space空白处是否断行

overflow-wrap: normal
word-break: break-all
word-break: keep-all
word-break: normal
white-space: normal white-space: nowrap

装饰性属性

字重(粗体)font-weight: normal(400)/bold(700)/bolder/lighter/200(100 - 900的整百)
斜体font-style:itatic 下划线text-decoration 指针: cursor

文本

<p>
    <img src="logo.png" alt="支付宝">
    hEllo world 这是第一段字 hhhhhhhhhh 这是第二段字
</p>
<p class="txt1">hEllo world 这是第二段字 hhhhhhhhhh 这是第二段字</p>
<p class="txt2">hEllo world 这是第三段字 hhhhhhhhhh 这是第二段字</p>

p {
    /* color: red; */
    /* 字符间距 可以为正和负*/
    /* letter-spacing: 0px; */
    /* 空格的距离 */
    /* word-spacing: 0px; */
    /* ltr: left to right */
    /* direction: ltr; */
    /* none line-through overline underline*/
    /* text-decoration: none; */
    /* text-decoration: line-through; */
    /* 文字的对齐方式 center left right justify两端对齐 */
    /* text-align: left; */
    /* 缩进 */
    /* text-indent: 60px; */
    /* 英文大小写字母 uppercase lowercase capitalize*/
    /* text-transform: capitalize; */
    background-color: yellow;
    /* height: 300px; */
    width: 300px;
    /* 省略号 */
    /* white-space: nowrap;
    overflow: hidden; */
    /* clip默认 ellipsis省略号 */
    /* text-overflow: ellipsis; */
}
.txt1 {
    /* letter-spacing: 10px; */
    /* word-spacing: 10px;
    direction: rtl; */
    /* text-decoration: overline; */
    /* text-align: justify; */
    /* text-transform: lowercase; */
}
.txt2 {
    /* letter-spacing: -5px; */
    /* word-spacing: -10px;
    direction: ltr; */
    /* text-decoration: underline; */
    /* text-align: right; */
    /* text-transform: uppercase; */
}
img {
    width: 200px;
    /* 垂直对齐 top center bottom 100% -> 1个行高 可以是 200% 或者负数 */
    /* vertical-align: top; */
    float: left;
}

链接

<a href="#5">这是第一个链接</a>
<br>
<br>
<a href="#3">这是第二个链接</a>

/* 伪类 */
/* 初始状态 */
a:link {
    color: blue;
}
/* 被访问 */
a:visited {
    color: yellow;
}
/* 鼠标移动 */
a:hover {
    color: red;
    font-size: 30px;
}
/* 点击 */
a:active {
    color: green;
}

列表

<ul>
    <li>li1</li>
    <li>li2</li>
</ul>

ul {
    /* none不使用项目符号 disc实心圆 circle空心圆 square实习方块 */
    list-style-type: none;
}
li {
    background-image: url('logo.png');
    background-repeat: no-repeat;
    height: 100px;
    padding: 25px 120px 0;
}

iconfont

https://www.iconfont.cn/

CSS Hack

在一部分浏览器上兼容的写法

浏览器兼容

很难理解和维护

替代方案：特性检测；针对性加class

伪类和伪元素的区别

伪类表状态 伪元素是真的元素
前者单冒号，后者双冒号

如何美化checkbox

label[for]和id
隐藏原生input
:checked + label