前言
这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
今天主要学习了前端中CSS相关的一些知识，包括有：
- 什么是CSS？如何使用CSS？
- CSS如何工作？
- 选择器如何使用？
- 如何在游览器里调试？
一. CSS简介
-
HTML的局限性以及什么是CSS？
尽管HTML有其自带的样式，但大多并不符合实际开发的需求，并且不能一次控制多个网页的显示，有时需要我们自行将HTML修改成想要的显示，做到结构(HTML)与样式(CSS)相分离.
CSS 全称 Cascading Style Sheets，即级联样式表，它用来设置页面元素的样式：
- 字体类型、粗细和大小
- 元素位置和宽高
- 一定的动画效果
- ......
-
CSS的怎么引入？
2.1 外链
这个方式将CSS 写到在扩展名为.css的单独文件中，并从 HTML<link>元素引用它
其特点是影响多个页面
如下图所示2.2 内嵌
这个方法将CSS 放在 HTML 文件<head>标签里的<style>标签之中
其特点是影响整个页面
如下图2.3 内联（并不推荐） 这个方法将CSS 写到 HTML元素的
style属性之中。
其特点是每个 CSS 表只影响一个元素
如下图 -
CSS如何工作？
可以用一张图来说明（并不包含JS的说明）
二. 选择器
首先需要了解CSS的语法规则：选择器 { 属性 : 属性值; }
可以看出是由 选择器+声明块 组成，选择器找出页面中的想要设置样式的元素，
声明块包含一个或多个以分号分隔的声明，用来设置具体样式
选择器可划分为：
- 简单选择器（根据标签名称、类、id选择元素）
- 组合选择器（根据元素之间的特定关系选择元素）
- 伪类选择器（根据某种状态选择元素）
- 伪元素选择器（选择元素的一部分并设置样式）
- 属性选择器（根据属性或属性值选择元素）
-
常用的选择器常用常熟，不多记述
-
伪类与伪类选择器
伪类用于定义元素的特定状态，例如：
- 当用户将鼠标悬停在元素上时设置元素样式
- 访问和未访问链接的样式不同
- 元素获得焦点时设置样式
- ......
语法：选择器 : 伪类 { ...; }
- 伪元素与伪元素选择器
伪元素用于为元素的指定部分设置样式，如：
- 为元素的第一个字母或行设置样式
- 在元素内容之前或之后插入内容
语法：选择器 :: 伪元素 { ... }
- 组合选择器
CSS 中有四种不同的组合选择器，分别采用不同的连接符
- 后代选择器（空格） - 选择指定元素的所有后代元素
- 子选择器 (>) - 选择指定元素的所有子元素
- 相邻兄弟选择器 (+) - 选择紧接着指定元素的后一个元素
- 通用兄弟选择器 (~) - 选择指定元素的下一个兄弟的所有元素
三. CSS文本属性
- 颜色：{
color、background-color} - 文本对齐：{
text-align、text-align-last、direction、unicode-bidi、vertical-align} - 文本间距： {
text-indent、letter-spacing、line-height、word-spacing、white-space} - ......
四、 游览器调试
既可以右键检查，也可按F12快捷键调出，详细的调试技巧推荐阅读：
