深入理解 CSS

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

什么是 CSS

CSS：Cascading Style Sheet，层叠样式表

CSS 的作用

设置字体和颜色
设置位置和大小
添加动画效果等

CSS 的组成

一般的 CSS 样式如下：

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

CSS 由选择器(Selector)、选择器(Property)、属性值(Value)组成：

选择器：h1
选择器：color、font-size
属性值：white、14px

💡选择器➕属性值组成了声明(Declaration)

选择器 Selector

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

选择器分类：通配选择器、id 选择器、类选择器、属性选择器、标签选择器

伪类 Pseudo-Classes

不基于标签和属性定位元素
几种伪类
- 状态伪类：:link、:visited、:hover、:focus 等
- 结构性伪类：:first-child、:last-child

组合 Combinators

名称	语法	说明	示例
直接组合	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

在页面使用 CSS

<!-- 外链 -->
<link rel="stylesheet" href=" /assets/style.css ">
<!-- 嵌入 -->
<style> 
  li { margin: 0; list-style: none; }
  p { margin: 1em 0; }
</style> 
<!-- 内联 --> 
<p style= "margin: 1em O">Example Content</p>

调试 CSS

右键点击页面，选择**「检查」**
使用快捷键
- Ctrl+Shift+I (Windows)
- Cmd+Opt+I (Mac)

颜色

RGB

可以有：#ffffff 或者 rgb(255, 255, 255)

HSL

Hue：色相(H)是色彩的基本属性，如红色、黄色等；取值范围是0-360
Saturation：饱和度(S)是指色彩的鲜艳程度，越高约鲜艳；取值范围0-100%
Lightness：亮度(L)指颜色的明亮程度，越高颜色越亮；取值范围是0-100%

alpha

可以有：#ffffff00 或者 rgba(255, 255, 255, 0)

字体

通用字体族

衬线体：线条不均一
无衬线体：线条均一，现在浏览器用的多
手写体
Fantasy：比较夸张的字体
等宽字体：字符宽度都是一样的

字体样式

font-size

关键字
- Small、medium、 large
长度
- px、em
百分数
- 相对于父元素字体大小

font-weight

用 100 - 900 表示

normal：400；bold：700

line-height

表示两行文字 base-line 的距离

如果用纯数字表示与自身字体大小的比例，比如：字体大小为 20px，line-height 为 1.6，那么计算后结果为 20px * 1.6 = 32px

深入理解 CSS | 青训营笔记