CSS - Cascading Style Sheets
实现结构（HTML）与样式（CSS）的分离
1. 分类
行内式（内联式）：
使用频率：偶尔使用，当局部样式跟整体样式不同的时候使用
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3; "> 内容 </标签名>
内部样式表
用于相同页面处理相同风格的标签
一般定义在head中
<style>
选择器 {
属性1:值1;
属性2:值2;
}
选择器2 {
属性1:值1;
属性2:值2;
}
</style>
外部样式表（外链式）
用于多个页面显示相同风格的标签
在head中使用link标签
<link rel="stylesheet" type="text/css" href="testcss/test.css">
type可以省略
2. CSS基础选择器（选择器分类）
2.1 标签选择器*
见上面，都是标签选择器，修改标签的属性。
PS：只能使用已有的标签来作为标签选择器
2.2 类选择器*
head用'.'声明，标签中用'class'调用
.类名{
属性1:属性值1;
属性2:属性值2
}
标签中使用属性class="类名"即可
类选择可以选择一个或多个标签
2.3 多类名选择器
用于同一个标签实现2个样式类的效果，例如一个类定义字体颜色，一个类定义字体大小
head用'.'声明，标签中用'class'调用
.类名1{
属性1:属性值1;
属性2:属性值2
}
.类名2{
属性1:属性值1;
属性2:属性值2
}
标签中使用属性class="类名1 类名2"即可
PS：
如果2个类中有同样的样式，则按样式定义的顺序，后来居上（与调用时的顺序无关，只看样式的定义顺序选择最后一个类的冲突的属性）
例3.1和3.2中无论googleBlue在前还是googleRed在前，G都显示红色，因为在例2.1中.gooleRed是后定义的
2.4 id选择器*
定义和使用方法和类选择器非常类似
head用'#'声明，标签中用'id'调用
#id名1{
属性1:属性值1;
属性2:属性值2
}
#id名2{
属性1:属性值1;
属性2:属性值2
}
标签中使用属性id="id名1 id名2"即可
2.5 id选择器和类选择器区别
理论上id选择器和类选择的定义和使用区别不大。
但是，规范上类选择器可以被重复使用，id选择器只能使用一次。
例4中我们虽然重复使用了id选择器（例如id2、id3）没有出错，是因为google浏览器兼容性比较好（也许未来所有浏览器都能做到兼容性），但是应该避免违反规范的使用
2.6 通配符选择器*
将所有标签都选择了，应该避免使用，常用于设置页面整体的字体
3. CSS字体样式属性
3.1 font-size
单位一般只使用px和em， px最常用
现在普遍使用14~16px为页面的font-size，而且尽量使用偶数
旧版本页面一般字体都很小，因为分辨率很高
3.2 font-family
一般中文网站常用字体有：宋体、微软雅黑、Arial。但最好使用系统默认字体
如果有些浏览器不支持某些字体，可以多定义几个字体，字体间间用逗号',' 隔开。字体选择顺序就是定义的顺序，如果定义的字体都没有，就选择系统默认字体
字体不是一个单词的需要加双引号，字体是一个单词则不用加双引号。例如：font-family:"Times New Roman", Arial
有些页面样式中定义了unicode字体，只需要查表就知道使用的是什么字体：
3.3 font-weight字体加粗
查询CSS手册
HTML是使用b或者strong标签，而CSS可通过样式实现加粗效果
设置字体粗细时，建议用数字
3.4 font-style：字体风格
查表，略
*4. 字体连写
字体连写语法：
选择器{font: font-style font-weight font-size/line-height font-family;}
顺序是严格的，不能更换顺序，各个属性以空格隔开！
其中不需要隔开的可以省略（省略的将会取默认值），但必须保留font-size和font-family属性，否则font选择器将不起作用
个人不建议使用，除非加上注释，否则代码可读性不好
一般连写只是选择size和family就够了：font: 25px "宋体"
5. CCS外观属性
5.1 color文本颜色
查CSS颜色表
1. 预定义颜色值：red、green、blue、yellow......
2. 十六进制：如#ff0000 #00ff00 #0000ff等（常用）
可简写为 #f00 #0f0 #00f
红 绿 蓝
#fd0a00则不能简写
可使用FSCapture软件获取颜色的十六进制值
3. RGB表示 rgb(255,0,0) rgb(100%,0%,0%)
5.2 line-height行高
一般建议比font-size大7，8个像素
5.3 text-align:水平对齐
默认左对齐 left
在CSS中没有垂直对齐方式
5.4 text-indent首行缩进
例：段落首行缩进2个字
text-indent: 2em;
1em是一个字的距离
5.5 文本装饰text-decoration
查表
属性有：none underline blink overline line-through
*5.6 总结HTML样式标签 和 CSS样式属性
6. CSS复合选择器
面试笔试常见
6.1 后代选择器 与 子代选择器
使用较少
6.1.1 后代选择器（包含选择器）
又称为包含选择器
例1：只希望修改test5、test6的样式
定义一个样式，test5和test6实际上都是div中的p
例2：在修改了div里的p的基础上，修改test6的效果
例3：常用场景：ul里的li，ol里的li
6.1.2 子代选择器
看一个例子即可：
如果使用后代选择器，ul li a{color: red} 这样的话2级菜单也会改变颜色
6.1.3 后代、子代选择器对比
都是选择后代
后代选择器是选择所有后代，子代选择器只能选择亲儿子
子代使用较少，后代使用较多
*6.2 交集选择器 与 并集选择器
6.2.1 交集选择器
使用较少，特殊情况使用
需求：只希望交集选择器3改变样式。可以使用类选择器
使用交集选择器后，只会将交集选择器3改变样式
*6.2.2 并集选择器
使用并集选择器
6.3 符合选择器总结
7. 链接伪类选择器
伪类选择器用于向某些选择器添加特殊效果。比如给链接添加特殊效果，例如鼠标移上去改变颜色
语法：
为了和类选择器相区别，类选择器是一个点.className
伪类选择器使用2个点:link等
链接伪类选择器：
:link -未访问的链接
:visited -已访问过的链接
:hover -鼠标移动到链接上
:active -鼠标选定的链接，点击但未松开
PS：
lvha的顺序非常重要！！！
可以用LoVe HAte两个单词来记忆
PS2:
实际开发中的应用：
1. 如果是文章链接，可以走上面标准流程
*2. 如果是淘宝的导航栏，则需要省略link/visited/active，只需要定义a和a:hover样式因为访问过，样式不需要改变，见下例：
8. 6和7综合练习（面试题）
需求：在不该body里代码的情况下
1. 登录链接为红色，主导航栏里所有链接为蓝色
2. 主导航栏和侧导航栏里面文字都是14px 且是 微软雅黑
3. 主导航栏里面的一级菜单链接文字颜色为绿色
