链接送上CSS学习笔记一20200315
在CSS中设置颜色
初始状态:
<style>
body {
background-color: black;
}
</style>
表示CSS中的颜色其中一种方式称为 hexadecimal code（十六进制编码），简写为 hex code。
我们通常使用 decimals，也就是十进制数字，它对每一位数字使用符号0到9来表示。Hexadecimals （或 hex）是十六进制数字，这意味着它使用十六个不同的符号。像十进制一样，符号 0-9 代表数值零到九，那么 A、B、C、D、E、F 代表数值十到十五。总共，用 0 到 F 可以表示 hexadecimal 中的每一位数字，共为我们提供 16 个可能的数值。
在 CSS 中，我们可以使用 6 个十六进制数字来表示颜色，每 2 个分别表示红 ®、绿 (G) 和蓝(B) 成分。例如，#000000 是黑色，同时也是可能的数值中最小的。
<style>
body {
background-color: #000000;
}
</style>
数字 0 是十六进制代码中最低的数字，表示完全没有颜色。 数字 F 是十六进制代码中最高的数字，表示最大可能的亮度。
<style>
body {
background-color: #ffffff;
}
</style>
hex code（十六进制代码） 遵循 red-green-blue（红-绿-蓝），或者叫 rgb 格式。hex code 中的前两位表示颜色中红色的数量，第三四位代表绿色的数量，第五六位代表蓝色的数量。
eg:绝对的纯红色就是在第一和第二位使用 F （最大可能的数值），且在第三、第四、第五和第六位使用 0 （最小可能数值）。
eg:橙色是纯红，与一些绿色混合，没有蓝色。在十六进制代码中，这转换为 ＃FFA500。
注意：用正确的十六进制代码替换 <style> 元素中的颜色词。
从这三种纯色（红、绿、蓝），我们能得到 1600 万种其它的颜色。
我们也可以通过平均混合所有三种颜色得到不同灰度等级的灰色。
<style>
body {
background-color: #808080;
}
</style>
能理解平均嘛？
CSS 十六进制RGB表达式缩写
太长记不住的话，看看这个：
<style>
body {
background-color: #F00;
}
</style>
这个缩写形式给出一个数字为红色，一个数字为绿色，一个数字为蓝色。
这将把所有可能的颜色总数减少到大约4000种，但是浏览器会把 #FF0000 和 #F00 解释为完全相同的颜色。
在 CSS 中表示颜色的另一个方法是使用 RGB 值。
代表黑色的 RGB 值如下所示：
rgb(0, 0, 0)
代表白色的 RGB 值如下所示：
rgb(255, 255, 255)
使用 RGB，是使用RGB指定每个颜色的亮度，数字介于0到255之间，而不是像使用十六进制代码那样使用六个十六进制数字。(16*16=255)
<style>
body {
background-color: rgb(0,0,0);
}
</style>
说实话，好像没区别
红色
<style>
body {
background-color: rgb(255, 0, 0);
}
</style>
over
咱们来大总结?
摆术语了嗷
多页面应用同一个样式
通常保存在外部的独立的.css文件（该文件不属于任何页面文件）可以在多个页面中使用同一个CSS样式表。通过在任何的页面文件中引用.css文件，你可以设置具有一致风格的多个页面。
样式层叠
样式层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。
样式层叠次序
当同一个 HTML 元素定义了多个样式时，应该使用哪个样式？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于 <head>标签内部）
- 内联样式（在 HTML 元素内部）
CSS 注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 “/∗” 开始, 以 “∗/” 结束
是这个*，我找不到字符实体了。
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
ID属性只能在每个 HTML 文档中出现一次。
class 选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示
CSS 创建
插入样式表的方法有三种:
- 外部样式表
- 内部样式表
- 内联样式
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。
样表：
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(/images/back40.gif);}
不要在属性值与单位之间留有空格。假如你使用 "margin-left: 20 px" 而不是 "margin-left: 20px" ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。
内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表
不放例子了，前面的文章都是这样写的。
内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。
多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
例子：
外部样式表拥有针对 h3 选择器的三个属性：
h3
{
color:red;
text-align:left;
font-size:8pt;
}
内部样式表拥有针对 h3 选择器的两个属性：
h3
{
text-align:right;
font-size:20pt;
}
假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：
color:red;
text-align:right;
font-size:20pt;
即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。
多重样式优先级顺序
下列是一份优先级逐级增加的选择器列表，其中数字 7 拥有最高的优先权：
通用选择器（*）
元素(类型)选择器
类选择器
属性选择器
伪类
ID 选择器
内联样式
!important 规则例外
当 !important 规则被应用在一个样式声明中时，该样式声明会覆盖CSS中任何其他的声明，无论它处在声明列表中的哪里。尽管如此，!important规则还是与优先级毫无关系。使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。
一些经验法则：
Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important
Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important
Never 永远不要在全站范围的 css 上使用 !important
Never 永远不要在你的插件中使用 !important
其他的去查手册去手册
重要的都在这里了，我觉得看完应该可以做一点简单的模板修改了。前面我的HTML笔记中也有一部分，可以参考
