看了一段时间CSS，这个东西所见即所得，没有太复杂的逻辑，很多零碎的东西没必要硬记，写的时候达到效果就可以了
CSS 层叠样式表 (cascade style sheet)
对于一个网页来说
HTML是框架及内容，HTML表达了网页有哪些结构，内容是什么
CSS规定展现样式
JS负责逻辑处理
CSS的使用方式
行间样式
在标签里规定style属性内容
<div style="
width: 100px;
height: 100px;
font: 16px 'Comic Sans MS';">
html css javascript
</div>
页面级css
在<head>标签里用<style>标签定义应用到整个页面的css
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
font: 16px 'Comic Sans MS';
}
</style>
</head>
使用外部css文件
在<head>标签里使用<link>标签导入外部css文件
（浏览器解析到这里时会开一个线程去加载这个外部的css文件）
<link rel="stylesheet" type="text/css" href="/style.css" />
<!--导入目录下名为style.css的文件-->
当一个HTML元素使用了多个样式时，所有的样式会层叠于一个新的虚拟样式表中（叠加），且优先权如下：
内联样式（在 HTML 元素内部）> 内部样式表（位于 <head> 标签内部） > 外部样式表 > 浏览器缺省设置
CSS 基础语法
selector {
declaration1;
declaration2;
...
declarationN
}
CSS 规则由两个主要的部分构成：选择器（selector），以及一条或多条声明（declaration）
每条声明由一个属性和一个值组成
复合属性，及一个属性名对应多个意义不同的属性值，如 font 属性，可以认为是一系列相关属性的简写，一般都可以拆分为对应的多个属性名
selector {property: value;[property: value;]}
这里的声明类似键值对
selector
id选择器
定义在HTML标签的属性中
<div id="content" >
html css javascript
</div>
CSS中对于使用id选择器筛选
#content{
background-color: red;
}
id与标签是一对一的映射关系
类选择器
与id选择器使用形式类似，不过类选择器是多对多的关系，而且前缀使用"."
<div class="content text" >
html css javascript
</div>
<div class="text" >
html+css+javascript
</div>
CSS中对于使用类选择器筛选
.content{
background-color: red;
}
.text{
background-color: green;
}
在一个标签具有多个class属性值时，后声明的优先级高
属性选择器
属性选择器定义格式为：[ 属性 [= 值] ]
<div id="content" class="content happy" style="font-size: 100px" height="10px">
html css javascript
</div>
<div id="" height="100px">
html css javascript
</div>
[height ="100px"]{
font: 16px 'Comic Sans MS';
}
[height]{
font: 16px 'AmdtSymbols';
}
可对定义了该属性的标签进行选择，也可对某属性取特定值的标签进行选择
对属性进行的选择比属性取特定值的选择优先级高
标签选择器
<div id="" height="100px">
html css javascript
</div>
<div id="" height="100px">
css html javascript
</div>
div{
padding: 10px;
}
以上几种选择器通过比较权重的方式决定优先级
| 选择器 | 权重（256进制） |
|---|---|
| !important | INFINITY 定量正无穷 |
| 行间样式（style）属性 | 1000 |
| id选择器 | 100 |
| class选择器|属性选择器|伪类选择器（eg ::before） | 10 |
| 标签选择器|伪元素（eg :hover） | 1 |
| 通配符选择器 * | 0 |
!important > 行间样式 > id选择器 > class选择器、属性选择器 > 标签选择器 > 通配符
多个选择器间不是覆盖关系，而是按照优先级的叠加关系
父子选择器 / 派生选择器
下面的例子通过派生选择器选择第一个<div>中的<span>
<div id="id" class="test" hegit='100px'>
<span>html css javascript</span>
</div>
<span id = "haha">html css javascript</span>
div span{
padding: 10px;
}
上面的 div span也可以写成
.test #haha、#id span、[height] span、[height] #haha等等形式
派生选择器可以将任意类型的选择器组合，也可以多层嵌套，也不一定是直接的父子关系
直接子元素选择器
在派生选择器的基础上加入 父子关系限制
<div id="id" class="test" hegit="100px">
<em>html css javascript</em>
</div>
<div>
<span id = "haha"><em>html css javascript</em></span>
</div>
div > em{
padding: 10px;
}
这样第二个<div>标签中的<em>中的内容就不会被选中
浏览器解析派生选择器（直接父子选择器）时 从右向左排查
并列选择器
下面这个例子用上面学过的选择器无法只选出一个数字定义样式，除非修改HTML
但是用并列选择器可以做到，并列选择器增加了&关系
与派生选择器的语法区别是 各选择器间没有空格
<div>1</div>
<div class="test"><p>2</p></div>
<p class="test">3</p>
div.demo{
padding: 10px;
}
注意各选择器的顺序，为了避免混淆，没有特殊标识的标签选择器要放到并列选择器的第一个位置
并列选择器比较优先级时 权重值相加后比较
分组选择器
以逗号分隔的多个选择器
div, .demo, #first{
padding: 10px;
}
<div>标签及class="demo"以及id="first"的标签都使用该样式定义（被同时选中）
选择相邻兄弟
选择紧接在另一个元素后的元素，而且二者有相同的父元素
例如，如果要增加紧接在 一级标题后出现的段落的上边距，可以这样写：
h1 + p {
margin-top:50px;
}
CSS伪类
CSS 伪类用于向某些选择器添加特殊的效果
选择到某些符合特定条件的元素
伪类名大小写不敏感
行内样式表无法使用伪类
语法
注意格式 冒号:两边不能有空格 : )
selector:pseudo-class {
property: value;
}
<a>标签与伪类的结合使用
a:link {color: blue}
a:visited {color: purple}
a:hover {color: red}
a:active {color: yellow}
link：选择链接
hover：定义获得鼠标焦点时，展现的样式
visited：被访问过后
active：被点击时
CSS 中，
a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的
a:active 必须被置于 a:hover 之后，才是有效的
first-child 伪类
selector : first-child{property: value;}
选择作为别人第一个子元素的且被selector选中的元素
即增加条件：作为某些元素的第一个子元素
lang 伪类
为不同的语言定义特殊的规则
CSS伪元素
CSS 伪元素用于向某些选择器设置特殊效果
语法
selector:pseudo-element {property:value;}
first-line 伪元素
向文本的首字母设置特殊样式
只能用于块级元素
font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
first-letter 伪元素
用于向文本的首字母设置特殊样式
只能用于块级元素
font
color
background
margin
padding
border
text-decoration
vertical-align (仅当 float 为 none 时)
text-transform
line-height
float
clear
关于颜色的定义
预置选择：red、blue、yellow … transparent（透明色）
RGB码方式：分别表示红绿蓝三种颜色的饱和程度，及 用量
R G B
00 ~ FF 00 ~ FF 00 ~ FF
RGB码的简写：若R/G/B都为两位相同数字（同RGB码，16进制），可简写为1位
rgb函数：rgb(r,g,b)（十进制）
2019/5/14