2.1 走近前端技术栈-理解CSS

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

简介

了解 CSS 的概念和工作原理、各种 CSS 选择器以及盒模型和常用的布局方式。
[直接作用于页面元素及样式]

课程重点

2.1.1 CSS 代码构成（是什么）
2.1.2 CSS 使用方法（在页面中使用）
2.1.3 CSS 流程之选择器组、文本渲染（是如何工作的）
2.1.4 调试 CSS

课前阅读预习

了解 CSS 中的基础概念：
MDN文档 —— CSS - 学习 Web 开发 | MDN (mozilla.org)

课后阅读材料

W3C CSS 相关的规范：
All Standards and Drafts - W3C

CSS 相关文章：
Learn CSS (web.dev)

（一）CSS概念

CSS是什么

（二）CSS代码构成

CSS代码构成

选择器+{ } 为一条规则

（三）CSS使用方法

CSS调用方法

推荐外链写法（不推荐内联）
【开发范式】单文件组件式开发——可分离关注点

（四）CSS工作原理

CSS工作原理

（五）选择器 Selector

选择器

通配选择器

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

标签选择器

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

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

id选择器注意：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>

属性选择器

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

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

<style>
  [disabled] {
    background: #eee;
    color: #999;
  }
  input[type="password"] {
    border-color: red;
    color: red;
  }
</style>

注意input属性为disabled的表示方法

^=表示匹配以其开头的属性值
$=表示匹配以其结尾的属性值

（六）伪类 pseudo-classes

状态伪类

代码中link,visited等表示用户交互时的不同状态

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

结构伪类

根据DOM结点于DOM树中出现的位置决定是否选择元素

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

结构伪类2

（七）组合

（八）选择器组

选择器组

（九）颜色

RGB(A)

HSL(A)

HSL

关键字指定常用颜色:

color

Alpha不透明度（0:完全透明 1:完全不透明）

新版本浏览器不需要编写rgba() 直接rgb()+括号内传入4个值即可

（十）{font属性}

font

仅font-size和font family为必需

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

指定多个字体的值：网页可能由不同设备访问其安装字体有限不可能所有设备支持同一字体

通用字体族

设置font-family时注意：最后指定通用的字体族(统一风格或分类) 浏览器渲染时可于设备已有字体检索目标风格的字体

使用建议

中英文混排时建议英文写在中文字体前保证中英文字符分别对应中英文字体 (中文字体包含英文字符而英文字体不包括中文字符)

Web Fonts

【若需要展示特定字体】使用Web Fonts将字体文件置于服务器必产生性能开销例如Blog渲染

中文字体包文件大通常使用工具对字体进行裁切

font-size

font-size 指定方法（相对）:

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

  section h1 {
    font-size: 2em;
  }

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

font-weight

字重以100-900表示
需要字体支持多种字重

line-height

默认HTML行高不适合阅读(约1.1-1.2倍) 表示基准线的间距
无单位的数字N表示字体大小的N倍推荐使用该表示方法直观

（十一）其他（段落）

text-align{}

left
center
right
justify

分散\两端对齐justify对最后一行不成立视觉效果不佳

spacing 文字间距

letter spacing 字符间距
word spacing 单词间距

text-incent 首行缩进（段落-应用略少）

text-decoration 文本装饰

none
underline 下划线
line-through 删除线
overline 上划线

white-space 【▲易误导】

HTML中对空白符处理规则：默认情况下多个连续空格与换行将被合并为1个

通过CSS的wide space属性控制空白符的展示方法：

normal 默认合并为1
nowrap 强制无换行
pre 保留所有空格与换行(同原始代码)
pre-wrap 一行内无法完全显示时自动换行
pre-line 需要合并空格而保留换行）

【习惯】调试CSS方法

调试CSS

理解CSS-走近前端技术栈 ｜ 青训营笔记