一、CSS介绍
CSS即层叠样式表/级联样式表，简称样式表
html：写网页结构内容
css：写网页样式
实现了内容与表现的分离，提高了代码的重用性和维护性
CSS注释不被浏览器解析，给开发人员一个标注
快捷键：ctrl+/
语法：/* 注释的内容 */
二、CSS特点
1）继承性
子元素可以继承祖先元素的样式，如果子元素有自己的样式，就不继承（不是所有样式都有继承性）
有继承性的样式：color、font-*、text-*、line-height
2）层叠性
一个元素可以多次设置同一个样式
3）优先级
样式冲突，优先级高的样式生效，优先级相同，后写的生效
三、CSS语法
选择器{
属性:属性值;
属性:属性值;
属性:属性值;
}
说明：
选择器：选中写样式的元素
最后一个键值对的分号可以省略
常见CSS属性
width:; 元素的宽度
height:; 元素的高度
background-color:; 背景颜色
color:; 字体颜色
float:left; 左浮，块级元素水平显示
四、引入方式
4.1 行内样式 内联样式
利用HTML的style属性（除了br，其他所有元素都有的属性），style的属性值是css样式
<div style="width: 200px;height: 200px;background-color: red;"></div> 
缺点：只对当前元素生效，代码重用性低，不利于开发和维护
4.2 内部样式
利用style标签，推荐写在head中
<head>
<style>
/* css地盘 */
.box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
缺点：只对当前页面生效
4.3 外部样式
利用link标签，写在head中
步骤：
1）新建.css文件
2）在HTML文件中引入css文件
<head> <link rel="stylesheet" href="css文件路径"> </head>3）HTML写结构，css写样式
优点：实现了内容与表现的完全分离，提高了代码的重用性和维护性
4.4. 优先级
行内样式 > 内部样式(外部样式)
内部样式和外部样式优先级相同，后写的生效
2.5. 导入式(了解)
css文件中引入css
1）语法
<style>
@import "css文件的路径";
</style>2)link和@import的区别
①加载顺序不同，link是同时加载HTML文件和css文件，@import是先加载HTML文件，再加载css文件
②兼容性问题，link没有兼容性，@import IE5以下不支持
③link还可以引入其他内容，@import只能引入css
引入网页图标：<link rel="icon" href="图标路径">
图标一般大小是16X16
④js只能操作link引入的样式，@import引入的样式js不能操作
五、选择器
作用：选中写样式的元素
5.1 基础选择器
1）全局选择器 通用选择器
*{
color: red;
} 
范围：选中页面所有的元素，当所有元素有共同的样式可以使用
2）元素选择器
所有html元素都可以是元素选择器
div{}
p{}
a{}
img{}
input{}
h3{}
div{
color: green;
}
范围：选中所有指定的元素
3）类选择器
利用html的class属性，除了br，其他元素都有的属性
.className{}
注意：类名可以重复，一个class可以起多个名字，用空格隔开，不区分前后顺序
小驼峰命名法：第一个单词首字母小写，其余单词首字母大写
4）ID选择器
利用html的id属性，除了br，其他元素都有的属性
#idName{}
注意：id具有唯一性
class和id的命令规则：
①可以包含数字、字母、_、-
②不可以以数字开头
③区分大小写
④建议起有意义的名字
5）优先级
行内样式 > ID选择器 > 类选择器 > 元素选择器 > 全局选择器
权重：1000 100 10 1
6）合并选择器
选择器1,选择器2,...{
共同的样式
}
六. HTML通用属性
除了br，其他元素都有的属性
1）style：行内样式
2）class：类选择器
3）id：ID选择器
4）title：鼠标悬停给予提示
七. 字体属性（有继承性）
1）字体颜色
color:red;2）字体大小
font-size:16px;浏览器默认字体大小为16px，支持的最小字体为12px
3）字体粗细
font-weight:normal;默认值normal--不加粗
取值bold--加粗、100-900(400=normal,700=bold)
4）字体倾斜
font-style:italic;默认值normal，取值italic--倾斜
5）字体
font-family:宋体,楷体,微软雅黑;默认为微软雅黑 ,可以取多个字体，用逗号隔开，从左往右支持，当字体包含多个英语单词，必须加引号
颜色的取值
1）关键词 red green pink等
2）十六进制 包含【0-9，a-f，A-F】 #000000：黑色，简写#000 #ffffff：白色，简写#fff
3）rgb(,,) 取值0-255 rgb(0,0,0):黑色 rgb(255,255,255):白色
4）rgba(,,,) a：透明度，取值0-1,0：完全透明，1：不透明，0.5=.5、 0.18=.18
八. 文本属性 (有继承性)
1）元素内容的水平对齐方式
text-align:left|center|right;可以设置文字、行内元素在容器中水平排列方式（块元素不行）
2）文本装饰
text-decoration:;text-decoration:;none:不显示
underline：下划线
overline：上划线
line-through:删除线
3）英文字母大小写
/体全部转换为大写*/
/text-transform:uppercase;
/全部转换为小写*/
/*text-transform:Lowercase;
*/
/体每，个单次的首字母大写*/
text-transform:capitalize;
