一、CSS的四种引入方式
1、外部样式表
<link rel="stylesheet" type="text/css" href="文件路径">
rel(relative)：引入的是一个CSS样式表
type:这是标准的CSS
2、内部样式表
<style type="text/css">
样式内容
</style>
3、行内样式表
<div style="background-color: red;">这是一个示例区域</div>
内部样式表和行内样式表类似，但两者有着本质区别：内部样式表的CSS是在head中的“style标签”内定义的，而行内样式表的CSS实在“标签的style属性”内定义的。
4、@import导入方式
<style>
@import url("test.css");
</style>
@import导入方式和外部样式表引入方式类似，但@import导入方式先加载ＨＴＭＬ文件后加载ＣＳＳ文件，给用户的体验感较差，实际开发中通常使用外部样式表。
二、CSS选择器
选择器的格式：
选择器
{
属性1：取值1；
...
属性n：取值n;
}
1、元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style type="text/css">
div{color: blue;}
</style>
</head>
<body>
<div>学习使我快乐</div> <!--字体显示为蓝色 -->
<p>学习使我快乐</p>
<span>学习使我快乐</span>
<div>学习使我快乐</div> <!--字体显示为蓝色 -->
</body>
</html>
2、id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style type="text/css">
#blue{color: blue;}
</style>
</head>
<body>
<div id="blue">学习使我快乐</div> <!--字体显示为蓝色 -->
<p>学习使我快乐</p>
<span>学习使我快乐</span>
<div>学习使我快乐</div>
</body>
</html>
对于id选择器，id名前面必须要加上#，表明这是一个id选择器。要注意的是，同一个页面中不能出现两个相同的id。
3、类选择器
类选择器，也就是class选择器，可以为“相同的元素”或者“不同的元素”定义相同的class属性，然后针对拥有同一个class属性的元素进行样式操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class选择器</title>
<style type="text/css">
.blue{color: blue;}
</style>
</head>
<body>
<div id="blue">学习使我快乐</div>
<p class="blue">学习使我快乐</p> <!--蓝色 -->
<span class="blue">学习使我快乐</span> <!--蓝色 -->
<div>学习使我快乐</div>
</body>
</html>
对于类选择器，class名前面必须要加上前缀英文句号（.），表明这是一个类选择器。
4、后代选择器
父元素和后代元素必须要用空格隔开，表明选中父元素内部的后代元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class选择器</title>
<style type="text/css">
#blue span{color: blue;}
p.red{color: red;}
</style>
</head>
<body>
<div id="blue">
<span>学习使我快乐</span> <!--蓝色 -->
</div>
<p>
<span class="red">学习使我快乐</span> <!--红色 -->
</p>
<span class="blue">学习使我快乐</span>
<div>学习使我快乐</div>
</body>
</html>
5、群组选择器
对于群组选择器，多个选择器之间必须要用英文逗号（,）隔开，否则无法生效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class选择器</title>
<style type="text/css">
#blue span,p .red,.blue,div{color: blue;}
</style>
</head>
<body>
<div id="blue">
<span>学习使我快乐</span> <!--蓝色 -->
</div>
<p>
<span class="red">学习使我快乐</span> <!--蓝色 -->
</p>
<span class="blue">学习使我快乐</span> <!--蓝色 -->
<div>学习使我快乐</div> <!--蓝色 -->
</body>
</html>
三、字体样式
1、字体类型：font-family
font-family: 字体1，字体2...字体n;
对于font-family，如果字体类型是多个英文单词或是中文的，需要加上英文双引号。
2、字体大小：font-size
font-size: 像素值;
两种取值方式：
a.关键字：small、medium、large等。
b.像素值：如10px、20px。
3、字体粗细：font-weight
font-weight: 取值;
两种取值方式：
a.100-900的数值。实际开发红不建议使用。
b.关键字：normal正常（默认）、lighter(较细)、bold(较粗)、bolder(很粗)，其中常用bold。
4、字体风格：font-style
font-style: 取值;
CCS中可以使用该样式设置斜体：normal、italic/oblique。
italic是字体的一个属性，但并非所有的字体都有这个属性，这种情况下使用oblique。
5、字体颜色：color
color: 取值;
两种取值方式：
a.关键字
b.十六进制RGB值。#000000黑色 #FFFFFF白色
四、CSS注释
/* CSS注释内容 */
快键键：Ctrl+/
五、文本样式
字体样式和文本样式的区别：字体样式针对的是“文字本身”的形体效果，而文本样式针对的是“整个段落”的排版效果。
1、首行缩进：text-indent
text-indent:像素值
text-indent的值应当是字体大小font-size的两倍。
2、水平对齐：text-align
text-align:left/center/right
默认水平左对齐。
3、文本修饰：text-decoration
text-decoration:none(默认值)/underline/line-through/overline;
下划线标明重点，中划线用于促销场景。
4、大小写：text-transform
text-transform:none(默认)/uppercase/lowercase/capitallize;
5、行高：line-height
line-height:像素;
6、间距：letter-spacing、word-spacing
letter-spacing:像素值;
word_spacing:像素值;
多用于英文网页。
六、边框样式
1、整体样式
想要设置元素的边框样式，需要同时确定属性border-width、border-style、border-color的值。
border-style:none（无样式）/dashed（虚线）/solid（实线）
注意简写形式。
2、局部样式
上边框：border-top;下边框：border-botton;左边框：border-left;右边框：border-right;
局部样式也需要设置宽度、外观、颜色。
六、列表样式
1、列表项符号：list-style-type
无序列表的ul属性，有序列表的ol属性，都使用属性list-style-type确定列表项符号。
list-style-type:none;去除列表样式
2、列表项图片:list-style-image
想要使用图片替代列表项符号时，可以使用list-style-image
list-style-image:url(图片路径);
实际开发中这种情况会使用更为高级的CSS3中的iconfont图标技术实现。
七、表格样式
1、表格标题位置：caption-side
caption-side:top/bottom;
在元素table和caption中定义该属性的效果是一致的。
2、表格边框合并：border-collapse
border-collapse:separate(默认）/collapse;
3、表格边框间距：border-spacing
用于设置表格边框的间距。
八、图片样式
1、图片大小
width:像素值
height:像素值
2、图片边框
同边框样式。
3、图片对齐
(1)水平对齐：text-align
同文本水平对齐，注意图片对齐是在父元素中对齐。
(2)垂直对齐：vertical-align
vertical-aligh:top(顶部对齐)/middle(中部对齐)/baseline(基线对齐)/bottom(底部对齐);
该属性定义周围的行内元素或文本相对于该元素的垂直方式。
4、文字环绕:float
图文混排：文字环绕着图片进行布局。
float:left(元素向左浮动)/right(元素向右浮动);
九、、背景样式
该样式涉及背景颜色和背景图片。
1、背景颜色：background-color
color设置文本颜色，注意区分。
2、背景图片样式：background-image
background-image:url(图片路径);
3、背景图片重复：background-repeat
background-repeat:repeat(默认值)/repeat-x/repeat-y/no-repeat;
4、背景图片位置：background-position
background-positon:像素值/关键字（水平 垂直）
这两种设置方式都需要同时设置水平方向距离和垂直方向距离。
例如：background-position:12px 24px;
background-position:top left;
该样式一般用于实现CSS Spirit(精灵图片)。
5、背景图片固定：background-attachment
background-attachment:scroll(默认值)/fixed;
该样式用于定义背景图片是随元素一起滚动还是固定不动。
十、、超链接样式
1、超链接伪类
超链接伪类用于定义在鼠标单击的不同时期的样式。
a:link{...} 未访问时
a:visited{...} 访问后
a:hover{...} 经过a元素时
a:active{...} 单击激活时
这4中样式的定义顺序不能改变，“爱恨原则”love hate。
2、:hover
该伪类可以定义任何一个元素在鼠标经过时的样式。
元素：hover{}
3、鼠标样式
（1）浏览器鼠标样式
cursor:取值;
常用的有default(默认值)、pointer、text。
（2）自定义鼠标样式
cursor:url(图片地址)，属性值;
其中鼠标图片后缀名一般都是".cur"。
十一、盒子模型
1、CSS盒子模型
CSS盒子模型的组成部分有4个：content(内容)、padding(内边距)、margin(外边距)、border(边框)。
（1）内容区
内容区是盒子模型必要的组成成分，其它3个部分是可选的。
内容区的3个属性：width、height、overflow。
当内容过多，超出width和height时，可使用overflow属性来指定溢出处理方式。
（2）内边距
可以看成是内容区的背景区域
内边距的5种属性：padding-top、padding-bottom、padding-left、padding-right。
（3）外边距
指的是两个盒子之间的距离。
外边距的5种属性：margin-top、margin-bottom、margin-left、margin-right。
CSS允许给外边距属性指定负数值，即“负margin技术”。
（4）边框
同前文边框方式。
2、宽、高：width、height
只有块元素才可以设置width和height,行内元素的宽高不能被设置，只能靠内容区撑开。（暂不考虑inline-block元素）
CSS中可以使用display属性将行内元素和块元素进行相互转换。
3、内边距：padding
padding简写形式有三种：
padding:像素值； //4个方向
padding:像素值1 像素值2； //上下 左右
padding:像素值1 像素值2 像素值3 像素值4； //顺时针上右下左
如果要让文本在一个元素内部居中，可以使用padding实现。
4、外边距：margin
外边距指的是边框到“父元素”或“兄弟元素”之间的那一部分。
当既有“父元素”又有“兄弟元素”时，优先以“兄弟元素”为参考。
margin的简写形式同padding。
怎么使用浏览器控制台辅助开发？*
十二、浮动布局
1、文档流/普通流：从上至下的排列顺序。
浮动多用于实现多列并排。脱离正常文档流。
图片浮动，文本环绕着图片。
2、清除浮动
clear:left/right/both;
浮动是个小难点。
十三、定位布局
1、固定定位：fixed
固定定位指的是被固定的元素不会随着滚动条的拖动而改变位置。
position:fixed;
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;
2、相对定位：relative
position:relative;
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;
默认情况下，固定定位元素的位置是相对浏览器的，而相对定位元素的位置是相对于原始位置的。
3、绝对定位：absolute
position:absolute;
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;
经过绝对定位的元素会完全脱离文档流，附在其它元素之上，独立出来。
4、静态定位：static
position的值默认为static,CSS中不常用到静态定位，js中有涉及。
