CSS基础学习
2019-03-07 本文已影响0人
酵母小木
CSS它允许有选择性地为HTML文档的元素添加样式。CSS规则如下图所示：本文转载自Thoughtworks学习平台的训练营的学习任务，仅供个人笔记回忆之用
CSS规则
1. 基础语法：
- 选择器（Selector）
HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 p 元素）。要给不同元素添加样式只需要更改选择器就行了。 - 声明（Declaration）
一个单独的规则比如 color: red; 这指定了你想要添加样式元素的属性。 - 属性（Properties）
这是你改变 HTML 元素样式的方法。（在这个例子中 color 就是 <p> 元素的属性。）在 CSS 中，你通过选择合适的属性来改变你的规则。 - 属性值（Property value）
在属性的右边，冒号后面，我们拥有属性值，用于从指定的属性里的非常多的外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。
注意其他重要的语法：
- 每个规则集（除了选择器的部分）都应该包含在成对的大括号里（{}）。
- 在每个声明里，你应该用冒号（:）分离开属性与属性值。
- 在每个规则集里，你应该用分号（;）分离开各个声明。
2. 如何在HTML中引用CSS？
想要在HTML文档中应用CSS，有三种方法：
- 外链：
<link rel="stylesheet" href="/path/to/style.css">
- 嵌入：
html
<style type="text/css">
li { margin: 0; list-style: none; }
p { margin: 1em 0; }
</style>
- 内联：
<p style="margin:1em 0">Example Content</p>
3. 当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中。
- 最低：浏览器缺省设置
- 低：外部样式表
- 高：内部样式表（位于 <head> 标签内部）
- 最高：内联样式（在 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%)
