这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
2.1 走进CSS
2.1.1 CSS基本作用方式
选择器：选中页面中的元素再赋予样式
属性property：属性值value —— 声明（是两者合起来）
2.1.2 在页面中使用CSS
-
外链：
<link rel=”stylesheet” href=“/style.css”>（推荐） -
嵌入：直接页面里写样式
<style></style> -
内联：直接在元素中写样式，不用选择器 （不推荐）
2.1.3 CSS是如何运作的
总结：在HTML解析的DOM树上，根据选择器，添加特定样式到指定DOM节点上。
2.1.4 CSS选择器
多种方式选择元素：
-
按照标签名、类名、id
-
按照属性
-
按照DOM树中的位置
通配选择器：* 匹配所有
类选择器： 根据class的属性（比较常用）
属性选择器：根据特定属性如[disabled]，或者[type=“password”]
也可以进行属性匹配，如[href ^= “#”] [href $= “.jpg”] 选中以什么为开头或结尾的属性值
2.1.4 伪类
状态伪类
比如一个链接可以选择不同状态下应用不同样式（输入框同理）
a:link a:visited a:hover a:focus
结构伪类
根据元素的不同位置来进行选中
比如表格中排序的child
li:first-child 选择第一个子项
也可以选择奇数位置、三倍位置、相对位置等。
2.1.5 组合
例：nav a 表示所有在nav标签下的a标签都选中
也可以用使用选择器组来进行
2.1.6 颜色
1.RGB：rgb（255,255,135） #8fac87
2.HSL：Hue色相、Saturation饱和度、Lightness亮度
色相：颜色轮，0-360
饱和度：越高越鲜艳，0-100%
亮度：越高越亮，0-100%
3.颜色关键字
透明度alpha： 本质是不透明度，越低越透明
在实现上为加一个维度：（255,255,13,1） #8fac87ff
2.1.7 字体
font-family：（逗号分割开的多个值）
为什么需要字体family还不是指定单一字体？
不同设备网页上需要不同的字体，所以需要设置多个字体按顺序查找选择
在设置font-family时，要注意最后设置一个通用字体族作保底
中英文混排，英文排在中文字符前面
web fonts：可以将字体文件放在web上 @font-face
font-weight：字体粗细，100-900
line-height：行高，两行文字基准线之间的距离
各类对齐：
letter-space、word-space
white-space：normal、nowrap、pre、pre-wrap、pre-line（保留空格、换行）
2.1.8 调试CSS
浏览器右键“检查”
快捷键：Ctrl + Shift + I
