1.在HTML中引入CSS共有3种方式：
（1）外部样式表：把CSS代码和HTML代码都单独放在不同文件中，然后在HTML文档中使用link标签来引用CSS样式表
外部样式表在单独文件中定义，并且在标签对中使用link标签来引用。
<head>
<title></title>
<!--在HTML页面中引用文件名为index的css文件-->
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
（2）内部样式表：指的就是把CSS代码和HTML代码放在同一个文件中，其中CSS代码放在标签对是放在标签对内的。
<head>
<title></title>
<!--这是内部样式表，CSS样式在style标签中定义-->
<style type="text/css">
p{color:Red;}
</style>
</head>
CSS样式在
（3）内联样式表：把CSS代码和HTML代码放在同一个文件中，但是跟内部样式表不同，CSS样式不是在标签对中定义，而是在标签的style属性中定义。
<body>
<p style="color:Red; ">绿叶学习网</p>
<p style="color:Red; ">绿叶学习网</p>
<p style="color:Red; ">绿叶学习网</p>
</body>
2.id、class
(1)id
同一个HTML页面中，不允许出现两个相同的id
(2)class
①为同一个页面的相同元素或者不同元素设置相同的class，然后使得相同的class具有相同的CSS样式；
②一个标签可以同时定义多个class；
③id也可以写成name，区别在于name是HTML中的标准，而id是XHTML中的标准，现在网页的标准都是使用id，所以大家尽量不要用name属性；
3.css选择器
（1）元素选择器
元素选择器，就是“选中”相同的元素，然后对相同的元素设置同一个CSS样式。
（2）id选择器
为元素设置一个id，然后针对这个id的元素进行CSS样式操作
id名前面必须要加上前缀“#”，否则该选择器无法生效。id名前面加上“#”，表明这是一个id选择器
（3）class选择器
类选择器”，对“相同的元素”或者“不同的元素”设置一个class（类名），然后针对这个class的元素进行CSS样式操作
（4）子元素选择器
选中某个元素下的子元素，然后对该子元素设置CSS样式。
父元素与子元素必须用空格隔开，从而表示选中某个元素下的子元素。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#father1 div{color:blue;}
#father2 #p1{color:red;}
</style>
</head>
<body>
<div id="father1">
<div>绿叶学习网</div>
<div>绿叶学习网</div>
</div>
<div id="father2">
<p id="p1">绿叶学习网</p>
<p id="p2">绿叶学习网</p>
<span>绿叶学习网</span>
</div>
</body>
</html>
（5）相邻选择器
相邻选择器，就是选中该元素的下一个兄弟元素，在这里注意一点，相邻选择器的操作对象是该元素的同级元素。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#lv+div{color:red;}
</style>
</head>
<body>
<div>绿叶学习网</div>
<div id="lv">
<p>绿叶学习网</p>
</div>
</body>
</html>
（6）群组选择器
同时对几个选择器进行相同的操作
（1）font-family 字体类型
例：font-family:微软雅黑;
（2）font-size 字体大小
例：font-size:像素值;
（3）font-weight 字体粗细
font-weight属性一般仅用到bold、normal这两个属性值完全就可以了，粗细值不建议使用数 值（100~900）。
（4）font-style 字体斜体
font-style:取值;
取值情况：
normal 默认值，正常体
italic 斜体，这是一个属性
oblique 将字体倾斜，将没有斜体变量（italic）的特殊字体，要应用oblique
（5）color 颜色
5.文本样式总结
（1)text-decoration
定义字体下划线、删除线和顶划线。
text-decoration:属性值;
属性值：
none 默认值，可以用这个属性值也可以去掉已经有下划线或删除线或顶划线的样式
underline 下划线
line-through 删除线
overline 顶划线
（2）text-transform
转换文本的大小写，这个是针对英文而言，因为中文不存在大小写之分。
text-transform:属性值;
属性值
none 默认值，无转换发生
uppercase 转换成大写
lowercase 转换成小写
capitalize 将每个英文单词的首字母转换成大写，其余无转换发生
（3）font-variant
把文本设置成小型大写字母，这也是针对英文而言，因为中文不存在大小写之分。
属性
normal 默认值，正常效果
small-caps 小型大写字母的字体
（4）text-indent
控制文本首行的缩进。
text-indent:像素值;
（5）text-align
使用text-align属性控制文本的水平方向的对齐方式：左对齐、居中对齐、右对齐。
text-align:属性值;
属性
left 默认值，左对齐
center 居中对齐
right 右对齐
只能针对文本文字和标签，对其他标签无效
（6）line-height
line-height属性指的是行高，而不是行间距。
line-height:像素值;
（7）letter-spacing
letter-spacing:像素值;1
letter-spacing控制的是字间距，每一个中文文字作为一个“字”，而每一个英文字母也作为一个“字”
（8）word-spacing
word-spacing:像素值;
定义词间距，以空格为基准进行调节，如果多个单词被连在一起，则被word-spacing视为一个单词；如果汉字被空格分隔，则分隔的多个汉字就被视为不同的单词，word-spacing属性此时有效。
6.边框样式
（1）
border-width:像素值; 边框的宽度
border-style:属性值; 边框的外观，用于设置边框的外观，例如实线边框和虚线边框。
border-color 边框的颜色
（2）
上边框 border-top
下边框border-bottom
左边框-left
右边框border-right
border-right-width:1px;
border-right-style:solid; = border-right:1px solid red;
border-right-color:red;
7.背景样式
（1）background-color属性来控制元素的背景颜色
color和background-color区别：color是文本颜色，background-color是背景颜色
（2）
background-image:url(“图像地址”); 定义背景图像的路径，这样图片才能显示嘛；图像地址可以是相对地址，也可以是绝对地址。
background-repeat 定义背景图像显示方式，例如纵向平铺、横向平铺
属性：
no-repeat 表示不平铺
repeat 默认值，表示在水平方向（x轴）和垂直方向（y轴）同时平铺
repeat-x 表示在水平方向（x轴）平铺
repeat-y 表示在垂直方向（y轴）平铺
background-position 定义背景图像在元素哪个位置，需要定义横向纵向的位置，单位px
background-attachment 定义背景图像是否随内容而滚动
8.超链接样式
（1）定义这四个伪类，必须按照“link、visited、hover、active”（未访问样式、鼠标经过样式、点击时样式、访问后样式）的顺序进行，不然浏览器可能无法正常显示这4种样式。
（2）:hover”伪类可以定义任何一个元素在鼠标经过时的样式
“元素”可以是任意的块元素和行内元素。
例如：
#div1:hover{background-color: #286E0A;}
img:hover{border:1px solid gray;}
（3）使用text-decoration去除链接下划线
9.鼠标样式
（1）使用cursor属性来定义鼠标的样式
#div_default{cursor:default;}
#div_pointer{cursor:pointer;}
10.图片样式
（1）定义大小
width:像素值;
height:像素值;
（2）边框border
border-width:像素值;
border-style:属性值;
border-color:颜色值;
简洁写法：border:1px solid gray;
（3）图片水平对齐text-align
text-align:属性值;
属性：
left 默认值，左对齐
center 居中对齐
right 右对齐
**图片是要在父元素中进行水平对齐的。
（4） 图片垂直对齐
vertical-align:属性值;
属性：
top 顶部对齐
middle 中部对齐
baseline 基线对齐
bottom 底部对齐
11.文字环绕效果
(1).float属性
float:取值;
属性：
left 元素向左浮动
right 元素向右浮动
(2).设置图片与文字的间距
margin属性
margin-top:像素值;
margin-bottom:像素值
margin-left:像素值;
margin-right:像素值;
12.元素中定义列表项符号list-style-type
自定义列表符号 list-style-image
13.表格样式
只需要在table元素设置就可以生效
1.表格边框合并border-collapse：去除单元格之间的空隙
separate 默认值，边框分开，不合并
collapse 边框合并，如果相邻，则共用一个边框
2.boder-spacing表格边框间距
该属性指定单元格边界之间的距离。当只指定了1个像素值时，这个值将作用于横向和纵向上的间距；当指定了2个length值时，第1个作用于横向间距，第2个作用于纵向间距。
3.表格标题位置caption-side
top 默认值，标题在顶部
bottom 标题在底部
**14.盒子模型
1、内容区
内容区是CSS盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分，其他的3部分都是可选的。
内容区有3个属性：width、height和overflow。使用width和height属性可以指定盒子内容区的高度和宽度。在这里注意一点，width和height这两个属性是针对内容区而言，并不包括padding部分。
当内容信息太多时，超出内容区所占范围时，可以使用overflow溢出属性来指定处理方法。对于overflow这个属性，我们在后面会详细讲解到。
2、内边距
内边距，指的是内容区和边框之间的空间，可以被看做是内容区的背景区域。
关于内边距的属性有5种，即padding-top、padding-bottom、padding-left、padding-right以及综合了以上4个方向的简洁内边距属性padding。使用这5种属性可以指定内容区域各方向边框之间的距离
3、边框
在CSS盒子模型中，边框跟我们之前学过的边框是一样的。
边框属性有border-width、border-style、border-color以及综合了3类属性的快捷边框属性border。
其中border-width指定边框的宽度，border-style指定边框类型，border-color指定边框的颜色。
“border-width:1px;border-style:solid;border-color:gray;”等价于“border:1px solid gray;”。
4、外边距
外边距，指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。
外边距使得元素之间不必紧凑地连接在一起，是CSS布局的一个重要手段。
外边距的属性也有5种，即margin-top、margin-bottom、margin-left、margin-right以及综合了以上4个方向的简洁内边距属性margin。
同时，CSS允许给外边距属性指定负数值，当指定负外边距值时，整个盒子将向指定负值的相反方向移动，以此可以产生盒子的重叠效果。
例如：
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
div元素是块元素，因此可以设置width和height这两个属性。
span元素是行内元素，因此span元素无法设置width和height这两个属性（设置了变无效）。
12.浮动布局
1.正常文档流
2.脱离正常文档流
正常
脱离
脱离文档流就是指它所显示的位置和文档代码的顺序不一致了，比如可以用CSS控制，把最后一个div元素显示在第一个div元素的位置，
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
