CSS基础学习

本文转载自Thoughtworks学习平台的训练营的学习任务，仅供个人笔记回忆之用

CSS它允许有选择性地为HTML文档的元素添加样式。CSS规则如下图所示：

CSS规则

1. 基础语法：

• 选择器（Selector）
  HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 p 元素）。要给不同元素添加样式只需要更改选择器就行了。
• 声明（Declaration）
  一个单独的规则比如 color: red; 这指定了你想要添加样式元素的属性。
• 属性（Properties）
  这是你改变 HTML 元素样式的方法。（在这个例子中 color 就是

  元素的属性。）在 CSS 中，你通过选择合适的属性来改变你的规则。

• 属性值（Property value）
  在属性的右边，冒号后面，我们拥有属性值，用于从指定的属性里的非常多的外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。

---

注意其他重要的语法：

• 每个规则集（除了选择器的部分）都应该包含在成对的大括号里（{}）。
• 在每个声明里，你应该用冒号（:）分离开属性与属性值。
• 在每个规则集里，你应该用分号（;）分离开各个声明。

2. 如何在HTML中引用CSS？

想要在HTML文档中应用CSS，有三种方法：

• 外链：

• 嵌入：

html
  

• 内联：

Example Content

3. 当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中。

• 最低：浏览器缺省设置
• 低：外部样式表
• 高：内部样式表（位于 标签内部）
• 最高：内联样式（在 HTML 元素内部）

4. CSS注释

在CSS中可以通过 / 我是注释 / 这样的形式添加注释，示例如下

/* 设置按钮宽度 */
.form button {
  width: 240px;
}

5. CSS中基本长度单位

绝对单位	度量	相对单位	值
px	像素，对应显示器的一个像素点	em	相对于该元素的一个 font-size
px	像素，对应显示器的一个像素点	rem	相对于 html 元素的 font-size
in	英寸	vh	浏览器窗口高度的 1%
cm	厘米	vw	浏览器窗口宽度的 1%
mm	毫米	vmin	vh 和 vw 中的较小者
pt	磅 (1 pt 等于 1/72 英寸)	vmax	vh 和 vw 中的较大者

6. CSS中的颜色

• 关键字，如：red → 红色，blue → 蓝色等
• Hex，用三位16进制的数字来表示，分别代表rgb三色的值大小，从 0 到 ff，以此代表0-255，如：#4286f4
• RGB & RGBA，rgb分别代表红色、绿色、蓝色，值分别为0-255，其中a代表透明度，如：rgb(66, 134, 244), rgba(66, 134, 244,0.5),
• HSL & HSLA，代表色相、饱和度和亮度，色相是色彩的基本属性,就是平常所说的颜色名称，如红色、黄色等，以0-360度衡量，饱和度(S)是指色彩的纯度,越高色彩越纯,低则逐渐变灰，亮度越高颜色越亮，饱和度和亮度使用0%-100%的范围，其中a代表透明度，值为0-1，如：hsl(120, 100%, 50%)