了解 CSS | 青训营笔记

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

课前预习

课前准备

课堂笔记

CSS 是什么

CSS (Cascading Style Sheets) 层叠样式表
用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果

CSS 规则举例：

h1 {
	color: white;
	font-size: 14px;
}

<h1> 为选择器（Selector）

color 是一种属性（Property）； white 是属性值（Value）

font-size: 14px; 属性与属性值共同构成 CSS 规则中的一条声明（Declaration）

在页面中使用CSS

<!-- 外链 -->
<link rel="stylesheet" href="/assets/style.css">

<!-- 嵌入 -->
<style>
  li { margin: 0; list-style: none; }
  p { margin: 1em 0; }
</style>

<!-- 内联 -->
<p style="margin:1em 0">Example Content</p>

外链： html 文件与 css 文件分离，做到内容与样式的分离，推荐使用
嵌入：在 html 文件中使用 <style> 标签嵌入 CSS 规则
内联：在 html 的标签中用 style 属性直接定义样式，使用较少

例子

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Blog</title>
  <style>
    h1 {
      color: orange;
      font-size: 24px;
    }
    p {
      color: gray;
      font-size: 14px;
      line-height: 1.8;
    }
  </style>
</head>
<body>
  <h1>Web框架的架构模式探讨</h1>
  <p>在写干货之前，我想先探讨两个问题，
  模式的局限性？模式有什么用？</p>
</body>
</html>

CSS是如何工作的

选择器 Selector

找出鞋面中的元素，以便给他们设置样式
使用多种方式选择元素
- 按照标签、类名或 id
- 按照属性
- 按照 DOM 树中的位置

通配选择器

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

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

语法： *

标签选择器

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

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

语法： elementname

id 选择器

<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-size: 200;
  }
</style>

语法： #idname

id 需要是为唯一的值

类选择器

较为常用

<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>

语法： .classname

属性选择器

<label>用户名：</label>
<input value="zhao" disabled />

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

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

[attr] 选中一种属性

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

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

[attr=value] 选中一种特定值的属性

<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>

[attr^=value] 匹配前缀
[attr$=value] 匹配后缀

伪类 Pseudo-calsses

不基于标签和属性定位元素
几种伪类
- 状态伪类
- 结构性伪类
语法： selector:psuedo-class { property: value; }

状态伪类：

<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>

状态伪类是根据元素所处的状态设定样式
上面例子中的状态伪类：静态（link）、访问过（visited）、悬停（hover）、点击时（active）、光标聚焦（focus）

结构性伪类：

<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>

结构性伪类是根据 DOM 树中的相对位置来确定需要设置样式的元素
上面例子中的结构性伪类：第一个子结点（first-child）、最后一个子结点（last-child）

组合 Combinators

先看一个直接组合的例子

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

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

.error 选中所有类为 error 的元素

input.error 选中标签既为 input ，类又为 erroe 的元素

组合方式：

名称	语法	说明	示例
直接组合	AB	满足A同时满足B	input:focus
后代组合	A B	选中B，如果它是A的子孙	nav a
亲子组合	A > B	选中B，如果它是A的子元素	section > p
兄弟选择器	A ~ B	选中B，如果它在A后且和A同级	h2 ~ p
相邻选择器	A + B	选中B，如果它紧跟在A后面	h2 + p

例子

<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>

article p 选中的是 p ，运用了后代组合， p 是 article 的一个子孙结点

article > p 选中的是 p ，运用了亲子组合， p 是 article 的一个子结点

h2 + p 选中的是 p ，运用了相邻组合， h2 和其后的 p相邻

选择器组 Selector list

选择所有能被列表中的任意一个选择器选中的节点。

语法：element, element, element { style properties }

body, h1, h2, h3, h4, h5, h6, ul, ol, li {
  margin: 0;
  padding: 0;
}

[type="checkbox"], [type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

颜色

通常用 color 属性来设置，其属性值有以下表示方式。

RGB

RGB（Red Green Blue），三原色混合形成各种颜色，最常用的颜色属性参数值

语法
- #000000
- rgb(0, 0, 0)

RGB 模拟演示

HSL

HSL（Hue Saturation Lightness），色相、饱和度、亮度

语法
- hsl(0, 100%, 50%)

Hue

色相 (H) 是色彩的基本属性，如红色、黄色等。取值范围是 0 - 360 。

Saturation

饱和度 (S) 是指色彩的鲜艳程度，越高约鲜艳；取值范围 0 - 100% 。

Lightness

亮度 (L) 指颜色的明亮程度；越高颜色越亮；取值范围是 0 - 100% 。

HSL 模拟演示

关键字

black white red blue ...

透明度 alpha

alpha 值为 1 时完全不透明，值为 0 时完全透明

语法
- #ff0000ff
- rgba(255, 0, 0, 1)
- hsla(0, 100%, 50%, 1)

透明度模拟演示

字体

字体种类

用 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>

多种字体之间用逗号隔开，从左往右取设备上有的字体

通用字体族：

serif 衬线体：Georgia、宋体等
sans-serif 无衬线体：Arial、Helvetica、黑体、微软雅黑等
cursive 手写体：Caflisch Script、楷体
fantasy 花体：Comic Sans MS、Papyrus、Zapfino 等
monospace 等宽字体：Consolas、Courier、中文字体等

字体使用建议：

字体列表最后写上通用字体族
英文字体放在中文字体前面

使用 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>

从服务器上下载字体渲染，带来额外的性能开销

语法：@font-face { font-family: "fontname"; src: url(urladress) format('fileformat') }

中文 Web Fonts：

<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>

字体样式

斜体：属性值 italic 表示斜体

使用 font-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>

字体粗细

字重，范围 100 - 900 ，字重 400 为 normal ，字重 700 为 bold ，中间数值可以自定义

使用 font-weight 属性设置

<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>

字体行距

行高，两行文字基准线间的距离，可用字体大小单位和相对于字体大小的倍数表示。

使用 line-height 属性设置

<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>

字体属性简写

使用 font 属性融合各种字体样式

语法： font: style weight size/height family

一般最简单的形式就是只写字体大小和字体族

h1 {
  /* 斜体 粗细 大小/行高 字体族 */
  font: bold 14px/1.7 Helvetica, sans-serif;
}

p {
  font: 14px serif;
}

文本对齐

使用 text-align 属性设置

属性值有： left 左对齐、 center 居中、 right 右对齐、 justify 两端对齐

两端对齐在最后一行不生效

文本对齐演示

字体间距

使用 spacing 属性设置
- letter-spacing 字母间距
- word-spacing 单词间距

字体间距演示

首行缩进

使用 text-indent 属性设置

首行缩进演示

文字修饰

使用 text-decoration 属性设置
属性值
- none 无修饰
- underline 下划线
- line-through 删除线
- overline 上划线

字体修饰演示

空白字符控制

使用 white-space 属性设置
属性值
- normal 合并多个空格，只保留为一个空格
- nowrap 强制不换行（宽度不够补上滚动条）
- pre 保留所有空格和换行
- pre-wrap 保留所有空格，保留换行
- pre-line 合并多个空格，保留换行

空白字符控制演示

调试 CSS

右键点击页面，选择「检查」
使用快捷键
- Ctrl+Shfit+I（Windows）
- Cmd+Opt+I（Mac）

课后巩固

课后阅读

W3C CSS 相关的规范
- www.w3.org
CSS 相关文章
- Learn CSS (web.dev)