这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天。
今天学习三节关于css的课程：
CSS是什么
Cascading Style Sheets（层叠样式表） CSS的作用： 定义页面元素样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
页面中如何使用CSS
<!-- 方法1：外链【推荐使用】 -->
<link rel="stylesheet" href="/assets/style.css">
<!-- 方法2：嵌入 -->
<style>
li {margin:0; list-style:none; }
p {margin:1em0; }
</style>
<!-- 内联 -->
<p style="margin:1em 0">Example Content</p>
CSS如何工作
首先会加载解析HTML，解析HTML时会加载解析CSS，在解析好CSS之后会得到一个渲染树。将这个渲染树对于每一个节点的样式添加到DOM树中，最后实现页面的展示。
选择器的种类
在之前日新更文挑战中总结过css中的选择器，这里就不再总结了。
属性选择器的一些示例：
对
input标签的disabled属性做了样式设置，当HTML中有这个属性出现时就会被赋予这个样式。
当
disabled="password"的时候应用对应的样式。
a[href^="#"]表示当href属性如果以#开始就会被匹配到
a[href$=".jpg"]表示当href属性如果以.jpg结尾就会被匹配到
伪类选择器
- 状态伪类：即之前提到过的，点击时、悬停时、点击后的状态下会被选择并赋予样式。
- 结构性伪类：用
first-child/last-child选择列表中的第一个/最后一个
各种选择器间组合使用
CSS设置颜色
hls( , , )各个字母的含义
给color属性定义属性值时可以参考下图
alpha 透明度，值为1时是不透明，0表示透明
字体（font-family）
**【注意】**页面中有英文有中文的时候，如果写了两种字体需要一个应用于中文一个应用于英文时，要把只适用于单个语言（英文或中文）的字体写在前面，同时适用于两种语言的字体放在后面。
通用字体族
web fonts
浏览器会先从url（）下载字体，然后使用这个字体进行渲染
【注意】 中文字体使用web fonts 时通常需要对原字体文件进行裁切，去除一些不需要的字体。
- 使用建议：
- 字体列表最后写上通用字体族
- 英文字体放在中文字体前面
对空格展示效果的设置
调试CSS
方法一：右击鼠标，选择检查
方法二：快捷键Ctrl+Shift+I（Windows）/Cmd+Opt+I（Mac）
