这是我参与「第五届青训营」伴学笔记创作活动的第 2 天

一、本堂课重点内容：

本堂课的知识要点有哪些？

认识CSS
CSS工作原理
选择器selector
颜色与字体
CSS特异度specificity（优先级）
CSS继承
CSS布局
学习建议

二、详细知识点介绍：

本堂课介绍了哪些知识点？

认识CSS
CSS是什么？CSS的全称是cascading style sheets（层叠样式表）主要用来定义页面元素的样式，包括设置字体与颜色、设置位置与大小以及添加动画效果。
CSS基本语法如下图所示：

在页面中使用CSS主要有三种方式：外链（最主要的使用方式）嵌入以及内联

CSS工作原理
CSS是如何工作的？其实与HTML一样，经过浏览器解析后创建DOM树，展示给用户端。其主要工作原理如下图所示：

选择器selector
选择器的作用就是选择页面中的一些元素，对其针对性的进行设置样式。选择器可以是标签名、类名以及id；也可以是按照属性选择；按照在DOM树中的位置。
通配选择器
顾名思义，该选择器即星号，将页面中所有的内容进行设置样式。案例如下：

<h1>This is heading</h1>
<p>this is some paragraph.</p>

<style>
* {
  color: red;
  font-size: 20px;
}
</style>

实现效果：

标签选择器即如下代码中的h1以及p

<h1>This is heading</h1>
<p>this is some paragraph.</p>

<style>
h1 {
  color: orange;
}
p {
  color: gray;
  font-size: 20px;
}
</style>

实现效果：

id选择器即如下代码中的#logo

<h1 id="logo">
  <img src="https://assets.codepen.io/59477/h5-logo.svg" alt="HTML5 logo" width="48" />
  HTML5 文档
<h1>

<style>
  #logo {
    font-size: 60px;
    font-weight: 200;
  }
</style>

实现效果：

类选择器即如下代码中的.done

<h2>Todo List</h2>
<ul>
  <li class="done">Learn HTML</li>
  <li class="done">Learn CSS</li>
  <li>Learn JavaScript</li>
</ul>
<style>
.done {
  color: gray;
  text-decoration: line-through;
}
</style>

实现效果：

属性选择器即如下代码中的.done

<label>用户名：</label>
<input value="zhao" disabled />
<!--disabled即锁定输入，不可以再输入其他内容-->
<label>密码：</label>
<input value="123456" type="password" />

<style>
  [disabled] {
    background: #eee;
    color: #999;
  }
</style>

实现效果：

不同的属性选择会对不同的属性设置样式，示例如下：

<p>
  <label>密码：</label>
  <input type="password" value="123456" />
</p>

<style>
  input[type="password"] {
    border-color: red;
    color: red;
  }
</style>

实现效果：

不同的属性选择会对不同的属性设置样式，示例如下：

<p><a href="#top">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>

<style>
  a[href^="#"] {
    color: #f54767;
    background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
    padding-left: 1.1em;
  }
 
  a[href$=".jpg"] {
    color: deepskyblue;
    background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
    padding-left: 1.2em;
  }
</style>

实现效果：

伪类（pseudo-classes）即不基于标签或者属性选择元素，而是通过状态伪类，结构性伪类进行设置样式。如下代码中的a:link、a:visited、a:hover、a:active、:focus皆为伪类。

<a href="http://example.com">
  example.com
</a>

<label>
  用户名：
  <input type="text">
</label>

<style>
a:link {
  color: black;
}

a:visited {
  color: gray;
}

a:hover {
  color: orange;
}

a:active {
  color: red;
}

:focus {
  outline: 2px solid orange;
}
</style>

实现效果：

如下代码中的li:first-child、li:last-child皆为伪类。

<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>星球大战：原力觉醒</li>
  <li>复仇者联盟 3</li>
  <li>侏罗纪世界</li>
</ol>

<style>
li {
  list-style-position: inside;
  border-bottom: 1px solid;
  padding: 0.5em
}

li:first-child {
  color: coral
}

li:last-child {
  border-bottom: none;
}
</style>

如下代码中的input.error为伪类。

<label>
  用户名：
  <input class="error" value="aa">
</label>
<span class="error">
  最少3个字符
</span>

<style>
  .error {
    color: red;
  }
  
  input.error {
    border-color: red;
  }
</style>

实现效果：

组合（Combinators）

代码示例组合：

<article>
  <h1>拉森火山国家公园</h1>
  <p>拉森火山国家公园是位于...</p>
  <section>
    <h2>气候</h2>
    <p>因为拉森火山国家公园...</p>
    <p>高于这个高度，气候非常寒冷...</p>
  </section>
</article>

<style>
  article p {
    color: black;
  }

  article > p {
    color: blue;
  }

  h2 + p {
    color: red; 
  }
</style>

实现效果：

选择器组即想要设置相同的样式，可以将这些选择器全部写进一个组合统一设置样式。

颜色与字体
颜色的设置方法很多种，常见的是RGB（红绿蓝三原色）
还有HSL（Hue Saturation Lightness）

还有可以直接写颜色的英文，如下图，超多英文单词，不过不太常用。

字体
font family 是一系列的字体族，可以自动设置不同的字体给不同的内容

<h1>卡尔斯巴德洞窟（Carlsbad Caverns）</h1>
<p>卡尔斯巴德洞窟（Carlsbad Caverns）是美国的
一座国家公园，位于新墨西哥州东南部。游客可以通过天
然入口徒步进入，也可以通过电梯直接到达230米的洞穴
深处。</p>

<style>
  h1 {
    font-family: Optima, Georgia, serif;
  }
  body {
    font-family: Helvetica, sans-serif;
  }
</style>

实现效果：

通用字体族即一些常见的字体族

Web Fonts

<h1>Web fonts are awesome!</h1>

<style>
  @font-face {
    font-family: "Megrim";
    src: url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2) format('woff2');
  }

  h1 {
    font-family: Megrim, Cursive;
  }
</style>

实现效果：

字体还可以自定义，然后让浏览器自己去寻找这些字体文件进行解析

<style>
  @font-face {
    font-family: f1;
    src: url("//s2.ssl.qhimg.com/static/ff00cb8151eeecd2.woff2") format("woff2");
  }

  @font-face {
    font-family: f2;
    src: url("//s3.ssl.qhimg.com/static/a59a90c9e8f21898.woff2") format("woff2");
  }

  @font-face {
    font-family: f3;
    src: url("//s2.ssl.qhimg.com/static/58324737c4cb53a5.woff2") format("woff2");
  }

  h1 {
    font-size: 50px;
  }
</style>

<h1 style="font-family: f1, serif">落霞与孤鹜齐飞，秋水共长天一色。</h1>
<h1 style="font-family: f2, serif">落霞与孤鹜齐飞，秋水共长天一色。</h1>
<h1 style="font-family: f3, serif">落霞与孤鹜齐飞，秋水共长天一色。</h1>

实现效果：

字体大小
可以通过关键字：small medium large进行设置
可以通过长度：px、em进行设置
百分数：相对于父元素字体大小进行设置

<section>
  <h2>A web font example</h2>
  <p class="note">Notes: Web fonts ...</p>
  <p>With this in mind, let's build...</p>
</section>

<style>
  section {
    font-size: 20px;
  }

  section h1 {
    font-size: 2em;
  }

  section .note {
    font-size: 80%;
    color: orange;
  }
</style>

实现效果：

其他字体样式设置范例

<p class="normal">Normal Text</p>
<p class="italic">Italic Text</p>

<style>
  p {
    font-size: 36px;
    font-family: "Helvetica Neue", sans-serif;
  }

  .normal {
    font-style: normal;
  }

  .italic {
    font-style: italic
  }
</style>

实现效果：

字重设置示例

<ul>
  <li class="w1">锦瑟无端五十弦（100）</li>
  <li class="w2">锦瑟无端五十弦（200）</li>
  <li class="w3">锦瑟无端五十弦（300）</li>
  <li class="w4">锦瑟无端五十弦（400-normal）</li>
  <li class="w5">锦瑟无端五十弦（500）</li>
  <li class="w6">锦瑟无端五十弦（600）</li>
  <li class="w7">锦瑟无端五十弦（700-bold）</li>
  <li class="w8">锦瑟无端五十弦（800）</li>
  <li class="w9">锦瑟无端五十弦（900）</li>
</ul>

<style>
  .w1 { font-weight: 100 }
  .w2 { font-weight: 200 }
  .w3 { font-weight: 300 }
  .w4 { font-weight: 400 }
  .w5 { font-weight: 500 }
  .w6 { font-weight: 600 }
  .w7 { font-weight: 700 }
  .w8 { font-weight: 800 }
  .w9 { font-weight: 900 }
</style>

实现效果：

行高设置

<section>
  <h1>Font families recap</h1>
  <p>As we looked at in fundamental text and font styling, the fonts applied to your HTML can be controlled using the font-family property. This takes one or more font family names. </p>
</section>

<style>
  h1 {
    font-size: 30px;
    line-height: 45px;
  }

  p {
    font-size: 20px;
    line-height: 1.6;
  }
</style>

实现效果：

字体设置省略写法：

文字对齐即text-align可以设置为left、center、right、justify
间距即spacing可以设置letter-spacing、word-spacing控制字母或者单词的间距
缩进即text-indent，可以设置文本缩进字符
文字修饰即text-decoration可以设置为none、underline、line-through、overline

CSS特异度specificity（优先级）

选择器：

id选择器(#myid)
类选择器(.myclass)
属性选择器(a[rel="external"])
伪类选择器(a:hover, li:nth-child)
标签选择器(div, h1, p)
伪元素选择器(p::first-line)
相邻选择器（h1 + p）
子选择器(ul > li)
后代选择器(li a)
通配符选择器(*)

优先级：

！important
内联样式
ID选择器
类选择器 / 属性选择器 / 伪类选择器
标签选择器 / 伪元素选择器
关系选择器 / 通配符选择器

一般优先级的顺序如下：
!important > 行内样式> id选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

CSS继承
某些属性会自动继承其父元素的计算值，除非显式指定一个值。
如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性;
如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多高);

值得注意的是:继承过来的是计算值, 而不是设置值

CSS求求值过程：请见如下链接（非常详细的过程，值得收藏）： CodePen - 青训营/CSS/取值过程 (cdpn.io)

CSS布局
布局（Layout）是确定内容的大小和位置的算法，主要根据元素、容器、兄弟节点以及内容等信息来计算。

布局的相关技术概览：主要包括常规流：行级、块级、表格布局、FlexBox和Grid布局；除此之外还有浮动以及绝对定位。
盒模型示意图：

由图易知：
width:指定了content box的宽度，取值通常是长度、百分数以及auto；auto由浏览器根据其他属性确定，百分数通常是相对于容器的content box的宽度。
height:指定了content box的高度，取值通常是长度、百分数以及auto；auto由内容计算得知，百分数通常是相对于容器的content box的宽度；容器有指定的高度时，百分数才会有效。
关于Padding(内边距)

padding可以分别设置上、右、下、左内边距，设置时可以仅设置1项（即四个内边距采用统一设置）、2项（上下、左右）4项（上右下左）

border指定该容器边框样式、宽度和颜色有着border-style; border-width; border-color;三种基本属性；以及border-top；border-right；border-bottom；border-left四种方向，可以分别进行设置。

margin可以分别设置上、右、下、左外边距，取值通常是长度、百分数以及auto；百分数相对于容器宽度。
使用margin：auto可以实现水平居中。
margin collapse（外边距合并）指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
overflow：
visible：默认值。内容不会被修剪，可以呈现在元素框之外。
hidden:如果需要，内容将被剪裁以适合填充框。不提供滚动条。
scroll:如果需要，内容将被剪裁以适合填充框。浏览器显示滚动条，无论是否实际剪切了任何内容。（这可以防止滚动条在内容更改时出现或消失。）打印机仍可能打印溢出的内容。

块级元素行级元素

常规流（normal flow）：主要包括行级排版、块级排版、Table排版、Flex排版和Grid排版。
行级排版：

块级排版：

Flex Box：

justify-content：

align-items:

Flexibility:

Grid布局：

grid area 划分网格区域：

float属性：
float：left\right\none（默认）

position属性：
static是position的默认属性，元素会按正常的文档流进行排序，不会受到top，bottom，left，right的影响
relative相对定位的元素会较正常文档流中的位置进行偏移，受top，bottom，left，right的影响。就是元素还在文档流中像static一样占着位置，但视觉上会有偏移，多用于absolute绝对定位的父元素。