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

一、本堂课重点内容

HTML（内容） CSS（样式） JavaScript（行为)

1.什么是CSS？

• 全称Cascading Style Sheets

• 用来定义页面元素的样式

      1.设置字体和颜色
      2.设置位置和大小
      3.添加动画效果
  

2.CSS怎么用?

• 外链:<link rel="stylesheet" href="/assets/style.css">
• 嵌入: li{ margin:0; list-style：none;} p{margin: lem 0;}
• 内联:<p style=“margin:lem 0”>Example Content<\p>

二、重点知识点

1.选择器Selector

• 找出页面中的元素，以便给他们设置样式

• 使用多种方式选择元素

  1.按照标签名，类名或id

  2.按照属性

  3.按照DOM树中的位置

2.伪类

• 不基于标签和属性定位元素

• 几种伪类

  1.状态伪类

  2.结构性伪类

3.组合Combinators

• 直接组合 A:B
• 后代组合 A B
• 亲子组合 A>B
• 兄弟选择器 A~B
• 相邻选择器 A+B

4.颜色-HSL

• Hue: 色相（取值范围0~360）
• Saturation: 饱和度（取值范围0~100%）
• Lightness: 亮度 （取值范围0~100%）

5.透明度alpha

6.字体样式 font-family

• Serif 衬线体
• Sans-Serif 无衬线体
• Cursive 手写体
• Monospace 等宽字体

7.字体大小 font-size

• 关键字 small，medium，large
• 长度 px,em
• 百分数

8.行间距 line-height

三、代码练习

    颜色-HSLA
<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>

    字体样式
p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

    伪类
/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

四、个人总结

通过这节掘金课程的学习，我学习到了CSS 作为前端技术栈中关键一环，对页面元素及样式呈现起到了直接作用。首先学习了CSS的基本原理，了解了该如何使用CSS，再了解 CSS 基本原理后，通过具体案例对于选择器的特异度展开讲解的学习，知道了各种选择器的区别，也学习到了各种属性方式，在此基础上进一步学习了 CSS 继承与布局。并学习了盒模型中行“行级”与“块级”这两种常见的布局结构，强化 了自己CSS 实战技能，得到了许多新知识。