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

1.课程要点（重点内容）：

• css是什么？css是cascading style sheeets即层叠样式表的意思
• css的组成：
• • 1.选择器（选中页面中的元素，并定义样式）
• • 2.属性
• • 3.属性值
• • 4.声明
• 在页面中使用css的方法：
• • 1.外链（推荐使用,实现了内容和样式的分离) 、
• • 2.嵌入
• • 3.内联（不需要写选择器，不推荐）

2.课程知识点：

1. css的工作方式：

2.选择器：找出页面中的元素，以便给他们设置样式，选择方式有：按标签名、类名或者id，按属性，按在DOM树中的位置

选择器的种类：

1. 通配选择器
2. 标签选择器
3. id选择器（需要预期给元素设置唯一的id）
4. 类选择器（给同一类型的设置样式，用class赋值）
5. 属性选择器 （可通过属性的值区别一样的属性）
6. 伪类选择器（选择不同状态下的样式）

3.颜色

1.颜色（RGB）（指定每种元素的数量来生成颜色）

• 实例：rgb（11，22，11）数量范围为0-255

2.颜色（HSL）：Hue Saturation lightness 色相0-360 饱和度0-100 亮度0-100

• 实例：hsl（11，22%，11%）

3.透明度（alpha）0-1不常用

• 实例：rgba（11，22，11，0.11） hsla（11，22%，11%，0.11）

4.字体（font-family）

• 实例:

font-family: Optima,Geotgia,serif; (设置多个字体的原因的防止设备无字体资源，从前往后进行平替）

• 常用字体：

• 建议：英文字体写到中文字体前
• 使用web fonts
• • 实例：

<style>
  @font-face {
    font-family: "Megrim";
    src: url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2) format('woff2');
  }

  h1 {
    font-family: Megrim, Cursive;
  }
</style>

效果如下

• Web fonts are awesome!

3.小结

• CSS 作为前端技术栈中关键一环，对页面元素及样式呈现起到了直接作用。本节课程对css中的基础操作进行了教学。