一、CSS基础
CSS：即Cascading Style Sheet（层叠样式表），是用来控制网页的表现的一门技术，使用css能让单调的html网页更富表现力，css使html文档的表现形式与结构分离开来。
CSS语法：
CSS规则有两个主要部分组成：选择器，以及一条或多条声明。如下
1 p{ 2 color:red; 3 text-indent:2em; 4 }
选择器就是需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成，属性是设置的样式属性（style attribute），每个属性都有一个值，属性和值用冒号分隔。CSS 声明总是以分号 ; 结束，声明组以大括号 {...} 括起来。为了让 CSS 可读性更强，可以每行只描述一个属性。
CSS 注释是用来解释代码，并且可以随意编辑，浏览器会忽略它。CSS注释以 "/*" 开始，以 "*/" 结束。如下：
1 p{ 2 color:red; 3 text-indent:2em; /* 段落缩进2个字，即段落开头空2个汉字的位置。 */ 4 }
1、css的四种引用方式：外部样式表，内部样式表，内联样式表，导入外部样式表
（1）外部样式表
外部样式表是最理想的css引用方式。所谓的“外部样式表”就是把css代码和html代码单独放在不同的文件中，然后在html文档中使用link标签来引用css样式。
1 <head> 2 <link rel="stylesheet" type="text/css" href="css/style.css"> 3 </head>
注意：<link> 标签中 rel="stylesheet" type="text/css" 是固定代码格式，不可更改。外部样式表可以在任何文本编辑器中进行编辑，样式文件不能包含任何的 HTML 标签，样式表以 .css 扩展名进行保存。
（2）内部样式表：就是把html代码和css代码放在同一个文件中，其中css代码放在<style></style>标签对内，并且<style></style>标签对是放在head标签对内。
1 <head> 2 <style> 3 p{ 4 color:blue; 5 font-size:14px; 6 } 7 </style> 8 </head>
（3）内联样式表：也是把html代码和css代码放在同一个文件中，但是跟内部样式表不同的是内联样式不是在<style></style>标签对内定义，而是在标签的style属性中定义：
<div style="width:200px;height:100px;border:1px solid black;"></div>
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。因此需要慎用这种方法，例如当样式仅需要在一个元素上应用一次时，可以使用内联样式。要使用内联样式，需要在相关的标签内使用样式属性定义，style 属性可以包含任何 CSS 属性。
（4）导入外部样式文件（一般不推荐使用该方式）
语法：#import "样式文件" 或者 @import url(“样式文件”)
@import语句也是放在<style></style>标签内
四种引用方式的优先级：
内联 > 内部 > import > link
二、CSS选择器
1、元素的id和class：是html元素中最基本的两个公共属性、
id属性被赋予了表示页面元素的唯一身份。如果一个页面出现了多个相同的id属性取值，css选择器或者javascript就无法分辨要控制的元素。
有了class属性，我们可以为同一个页面的相同元素或不同元素设置相同的class，然后使得相同的class元素具有相同的css样式。
对于元素的id和class，需要注意以下两点：
a、一个标签可以同时定义多个class
b、id也可以想成name，区别在于name是html中额标准，而id是xhtml中的标准。现在网页的标准都是使用id。
2、选择器：就是一种选择原始的方式。
语法：
选择器｛
样式属性1：属性值1；
样式属性2：属性值2；
}
3.id和class选择器
（1）id选择器：可以为标有特定id的HTML元素指定特定的样式，id属性和身份证一样具有唯一性。HTML元素以id属性来设置id选择器，css中id选择器以“#”来定义。（id属性不能以数值开头）
<head> <style> #heading{ color:red; text-align:center; } </style> </head> <body> <h1 id="heading">CSS 选择器</h1> </body>
（2）class选择器：用于描述一组元素的样式，也叫做类选择器，class选择器有别于id选择器，class可以在多个元素中使用，并且一个元素也可以指定多个类名。class选择器在HTML中以class属性表示，在CSS中，类选择器以一个“.”号来定义。可以设置所有带指定class的HTML元素，也可以指定特定的HTML元素使用class。（class的第一个字符也能使用数字）。
<head> <style> .center{ text-align:center; } .col{ color:red; } .font{ font-size:18px; font-family:"Microsoft YaHei"; } </style> </head> <body> <h1 class="center">class 选择器</h1> <p class="center col">我是一个段落。</p> <p class="center font">我是另一个段落。</p> </body>
(3)、ID 选择器和类（class）选择器的区别
相同点：可以应用于任何元素。
不同点：
①、ID 选择器只能在文档中使用一次。与类选择器不同，在一个 HTML 文档中，ID 选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
②、可以使用类选择器为一个元素同时设置多个样式。在一个 HTML 文档中，可以为一个元素同时设置多个样式，但只可以用类选择器的方法实现，ID 选择器是不可以的，即一个元素可以指定多个类名，如 <span class="one two three">文本</span>，而 ID 只能指定一个。
4、元素选择器
最常见的css选择器就是元素选择器，即标签选择器。即HTML的元素就是最基本的选择器。
语法：元素｛属性1：属性值1；属性2：属性值2｝
h1{
color:red;
text-align:center;
}
5、子选择器
就是指选中某个元素或某一类元素下的子元素，然后对该子选择器设置css样式。（选择器嵌套的一种）
语法：#father #p1｛color：red；｝（父选择器#father和子选择器#p1之间用一个空格隔开）
6、相邻选择器
指选择该元素的下一个兄弟元素。其操作的对象是该元素的同级元素。
语法：#lv+div｛color：red；｝
7、群组选择器
指同时对几个选择器进行相同的操作
语法：h3,div,p,span{color:blue;}
对于群组选择器，两个选择器之间必须用逗号隔开
三、字体样式
1、css字体样式属性
font-family:字体类型
font-family：用于设置文本的字体系列。应该始终为font-family属性设置多个字体名称作为一种后备机制。
注意事项：如果字体系列的名称超过一个字，他必须用引号，如font-family：“黑体”，“Microssoft YaHei”，中文也是需要加引号的。
font-family:Arial,"Microsoft YaHei","黑体","宋体",sans-serif; font-family:Helvetica,'Microsoft Yahei','微软雅黑',Arial,sans-serif;
font-size:字体大小
字体大小可以是绝对或相对大小：
绝对大小：a、指定文字大小。b、不允许用户在所有浏览器中改变文字大小。c、确定了输出的物理尺寸时，绝对大小很有用。
相对大小：a、相对于周围的元素来设置大小。b、允许用户在浏览器中改变文字大小。
字体的大小可以使用px、em、%组合来设置。
px：通过像素设置文本大小，可以对字体进行完全控制，虽然可以通过浏览器的缩放工具调整文本大小，但是，这种调整是整个页面，而不仅仅是文本。
em：em是W3C推荐使用的尺寸单位，可以使用em代替px。1em等于当前字体尺寸，在浏览器中默认的文字大小是16px，因此，1em的默认大小是16px。可以通过公式：px/16=em，将像素转换为em。
<head> <style> .p1{ font-size:2.5em; /* 40px/16=2.5em */ } .p2{ font-size:1.25em; /* 20px/16=1.25em */ } .p3{ font-size:0.875em; /* 14px/16=0.875em */ } </style> </head> <body> <p class="p1">我是第一个段落</p> <p class="p2">我是第二个段落</p> <p class="p3">我是最后一个段落</p> </p> </body>
如果不指定一个字体的大小，那么默认大小和普通文本段落一样，是 16 像素，即 1个汉字 = 16px = 1em。
使用%和em组合设置字体大小：在所有浏览器的解决方案中，设置<body>元素的默认字体大小是100%，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。
<head> <style> body{ font-size:100%; } .p1{ font-size:2.5em; /* 40px/16=2.5em */ } .p2{ font-size:1.25em; /* 20px/16=1.25em */ } .p3{ font-size:0.875em; /* 14px/16=0.875em */ } </style> </head> <body> <p class="p1">我是第一个段落</p> <p class="p2">我是第二个段落</p> <p class="p3">我是最后一个段落</p> </p> </body>
font-weight:字体加粗
有四个属性值：normal：标准字体 bold：粗体字体 bolder：更粗的字体 lighter：更细的字体
或者使用数值指定：从100-900定义由细到粗的字体。
font-style:字体斜体
有三个属性值：normal：默认值，正常显示文本 italic：斜体，浏览器斜体的字体样式 oblique：定义斜的文字，和斜体非常类似。
italic和oblique的区别：
这两个值都可以设置文本向右倾斜显示。一种字体有粗体、斜体、划线等多种字体属性，但是一些字体，或许只有正常体，并没有斜体，这时候就可以用 oblique 定义，他可以让没有斜体属性的文字倾斜，从 CSS 规范中就可以看出，italic 定义的是斜体，而 oblique 定义的是倾斜的文字，注意是倾斜的文字，而不是斜体字，这就是他们的区别。那么，如果一种字库中没有提供斜体字，当使用 italic 时，浏览器实际上是按 oblique 显示的。
color: 字体颜色
font-variant：字体变形,设置以小型大写字体(small-caps)或者正常字体显示文本(normal)。
<head> <style> .p1{ font-variant:normal; } .p2{ font-variant:small-caps; } </style> </head> <body> <p class="p1">Why are you so diao ?</p> <p class="p2">Why are you so diao ?</p> <p>Why are you so diao ?</p> </body>
四、文本样式
字体样式主要涉及字体本身的形体效果，而文本样式主要涉及多个文字的排版效果，即整个段落的排版效果。字体样式注重个体，文本样式注重整体。所以css在命名时，特意使用了font和text前缀来区分两类不同的性质。
1、文本水平对对齐方式：text-align（包括居中center、left、right、justify（两端对齐）四个取值，默认值为left）
当 text-align 属性的值设置为 justify 时，则表示文本两端对齐，每一行将被展开为宽度相等，左、右外边距对齐，就像杂志和报纸那样，常应用于书刊杂志排版。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上，然后，调整单词和字母间的间隔，使各行的长度恰好相等。那就是说对于英文这样定义是可以的，但是对于中文两端对齐支持并不是很好。解决办法就是再定义 text-justify 属性，将其值设置为 inter-ideograph，用表意文本来对齐内容，他增加或减少表意字和词间的空格。表意字顾名思义，就是字形有一定表达意思性的文字，汉字属于表意文字，他是文字萌芽时期的产物，是汉语形成历史中最早的一种文字。该属性值的默认值为 auto，让浏览器决定两端对齐算法。
<head> <style> .part{ color:red; text-align:justify; text-justify:inter-ideograph; } .p1{ width:300px; } .p2{ width:300px; } .p3{ width:400px; } .p4{ width:300px; } </style> </head> <body> <h1>text-align 实例</h1> <p class="part p1">当 text-align 属性的值设置为 justify 时，每一行将被展开为宽度相等，左、右外边距是对齐的，即文本两端对齐，如杂志和报纸那样。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。也就是说对于英文这样定义就可以了，但是对于中文这样定义是不行的。解决办法就是使用 text-justify 属性。</p> <p class="part p2">当 text-align 属性的值设置为 justify 时,每一行将被展开为宽度相等,左,右外边距是对齐的,即文本两端对齐,如杂志和报纸那样.在两端对齐文本中,文本行的左右两端都放在父元素的内边界上.然后,调整单词和字母间的间隔,使各行的长度恰好相等.也就是说对于英文这样定义就可以了,但是对于中文这样定义是不行的.解决办法就是使用 text-justify 属性.</p> <p class="part p3">当 text-align 属性的值设置为 justify 时，每一行将被展开为宽度相等，左、右外边距是对齐的，即文本两端对齐，如杂志和报纸那样。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。也就是说对于英文这样定义就可以了，但是对于中文这样定义是不行的。解决办法就是使用 text-justify 属性。</p> <p class="part p4">当属性的值设置为时，每一行将被展开为宽度相等，左、右外边距是对齐的，即文本两端对齐，如杂志和报纸那样。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。也就是说对于英文这样定义就可以了，但是对于中文这样定义是不行的。解决办法就是使用属性。</p> </body>
综上所述，如果文本是中文，文本两端的对齐效果十分理想。如果文本是中英文混合的，通过适当的调整宽度，文本两端对齐效果相对来说比较理想，但对于宽度的调整可能会影响到整体布局，其实不调整宽度，显示效果也无伤大雅。如果文本的标点符号使用半角，或者半角和全角混合使用，那么文本两端对齐效果则相当糟糕。
text-justify 属性是 CSS3 版本中定义的属性，用于规定当 text-align 被设置为 justify 时的齐行方法，该属性指定如何对齐文本以及对齐间距，目前只有 IE 支持该属性，其他主流浏览器都不支持，如果不设置该属性，在 IE 中两端对齐则无效果，但是对于其他浏览器则无影响。该属性有多个值，除了上面提到的2个值之外，还有 none 禁用齐行。inter-word 通过增加/减少单词间的间隔对齐文本。inter-cluster 只对不包含内部单词间隔的内容进行排齐，比如亚洲语系。distribute 类似报纸版面，除了在东亚语系中最后一行是不齐行的。kashida 通过拉伸字符来排齐内容。
2、文本修饰：text-decoration，用来设置或删除文本的修饰。从设计角度来讲该属性主要是用来删除超链接的下划线，如下：
<head> <style> .a1{ text-decoration:none; } </style> </head> <body> <a href="#" target="_blank">默认带有下划线的超链接</a><br/><br/> <a class="a1" href="#" target="_blank">text-decoration:none; 删除超链接下划线</a> </body>
也可以使用其他值来设置文本的修饰，text-decoration:overline; 设置文本上划线。text-decoration:line-through; 设置文本中间划线。text-decoration:underline; 设置文本下划线。
3.文本格式：text-indent（文本缩进）、line-height（行高）、letter-spacing/word-spancing（字间距）、white-space（文本空白处理）
（1）文本缩进：text-indent属性是用来指定文本的首行缩进，允许为负值，如果为负数，第一行向左缩进。
语法：text-indent:2em；
（2）行高：line-height属性用于设置行高，不允许为负值。
（3）字间距：letter-spacing和word-spacing这两个属性都可用来增减或减少文本间的空白，即字间距。不同的是：letter-spacing属性设置字符间距，而word-spacing属性设置单词间距。注意:word-spacing属性对中文无效，因此在设置中文的字间距时请使用letter-spacing属性。
需要注意：letter-spacing 和 text-align:justify 是两个冲突的属性，不能同时使用。
（4）文本空白处理：white-space属性指定元素内的空白如何处理，默认值为normal，空白会被浏览器忽略。
其他属性值有：
nowrap：禁止换行，文本不会换行，文本会在同一行上继续，知道遇到<br/>标签为止。
pre：文本空白会被浏览器保留，这种方式类似HTML中的<pre>标签，用于定义预格式文本。
pre-wrap：指定保留空白符序列，但是正常地进行换行。
pre-line：指定合并空白符序列，但保留换行符，并允许自动换行。
<head> <style> .p1{ white-space:nowrap; } .p2{ white-space:pre; } .p3{ white-space:pre-wrap; } </style> </head> <body> <p class="p1">white-space:nowrap 指定文本不换行，直到遇到 <br> 标签。。<mark>1——</mark> 指定文本不换行，直到遇到 <br> 标签。。<mark>2——</mark> 指定文本不换行，直到遇到 <br> 标签。。<mark>3——</mark> 指定文本不换行，直到遇到 <br> 标签。。<mark>4——</mark> 指定文本不换行，直到遇到 <br> 标签。。<br/><mark>5——</mark> 指定文本不换行，直到遇到 <br> 标签。。 </p> <p class="p2"> white-space:pre 空白会被浏览器保留，该方式类似 HTML 中的 <pre> 标签。 white-space:pre 空白会被浏览器保留，该方式 类似 HTML 中的 <pre> 标签。 </p> <p class="p3"> white-space:pre-wrap 保留空白符序列，但是正常地进行换行。<mark>1——</mark> 保 留 空 白 符 序 列，但 是 正 常 地 进 行 换 行。<mark>2——</mark> 保留 空白 符序列，但是 正常地 进行换行。<mark>3——</mark> 保 留 空 白 符 序 列，但 是 正 常 地 进行换行。 </p> </body>
4、文本转换：text-transform属性控制文本中间的字母。文本转换属性是用来指定在一个文本中的大写和小写字母，可用于将所有字母变成大写或小写字母，或每个单词的首字母大写。
属性值有：capitalize---文本中每个单词首字母大写
uppercase---文本中每个单词中的字母都大写
lowercase---文本中每个单词中的字母都小写
<head> <style> .p1{ text-transform:capitalize; } .p2{ text-transform:uppercase; } .p3{ text-transform:lowercase; } </style> </head> <body> <p class="p1">this is some text. 单词以大写字母开头。</p> <p class="p2">this is some text. 仅有大写字母。</p> <p class="p3">This IS SOme Text. 仅有小写字母。</p> </body>
五、边框样式
任何一个元素都可以设置边框属性。要定义一个元素的边框必须要设置以下三个方面：
边框宽度：border-width：像素值；
边框外观：border-style ：（none | hidden | solid | dashed | dotted | double）；
none：无样式
hidden：与none相同，不过应用于表除外，对于表hidden用于解决边框冲突
solid：实线
dashed：虚线
dotted：点线
double：双线（宽度等于border-width）
另外，border-style还有一些3D属性值：inset：内凹，outset：外凸，ridge：脊线，growe：槽线
常用的属性值主要是solid和dashed
边框颜色：border-color ：颜色值；
img{ border-width:1px; border-style:solid; border-color:red; }
border属性的简洁方法：border：1px solid red;
局部边框样式：上边框：border-top：1px solid red；
六、背景样式
background属性用于定义HTML元素的背景。 定义元素的背景效果的css属性有以下五种：
a、background-color
b、background-image
c、background-repeat
d、background-position
e、background-attachment
1、background-color：背景颜色
background-color属性定义了元素的背景颜色。页面的背景颜色可以使用body元素选择器进行定义：
1 body{ 2 background-color:gray; 3 }
css中定义颜色值通常使用以下方式定义：
a、十六进制，如：#ff0000，类似这样的形式，可以缩写为#f00
b、RGB，如：rgb（255，0，0）
c、关键字：如red
2、background-image：背景图像
background-image属性描述了元素的背景图像，默认背景下，背景图像进行平铺重复显示，以覆盖整个元素实体，页面背景图片设置如下：
1 body{ 2 background-image:url('images/wallpaper.jpg'); 3 }
3、background-repeat：背景图像设置水平或垂直平铺或不平铺
默认情况下，background-image 属性会在页面的水平或者垂直方向平铺。一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些：background-repeat:repeat-x，定义垂直方向平铺语法：background-repeat:repeat-y。
在使用背景图像时，默认会平铺重复显示，这样不仅不具有美感，还会影响文本的排版。如果不想让图像平铺，并且只显示一次，那么就这样定义：background-repeat:no-repeat。
1 <head> 2 <style> 3 body{ 4 background-image:url('images/wallpaper.jpg'); 5 background-repeat:no-repeat; 6 } 7 </style> 8 </head> 9 <body> 10 <h1 class="center col">class 选择器</h1> 11 <p class="center col">我是一个段落。</p> 12 <p class="center col font">我是另一个段落。</p> 13 <h2 class="center">h2 标题</h2> 14 </body>
4、background-position：背景图像设置定位
在上面的例子中，背景图像与文本显示在同一个位置，这样不利于文本的阅读，为了让页面排版更加合理，可以利用 background-position 属性改变图像在背景中的位置：
1 body{ 2 background-image:url('images/wallpaper.jpg'); 3 background-repeat:no-repeat; 4 background-position:right top; 5 }
此时，背景图像会显示在页面的右上角。background-position 属性设置背景图像的位置，如果背景图像要重复，也将从这一点开始。
background-position 属性值可以使用关键字表示：left | right | center，如果仅指定一个关键字，其他值将会是 "center"。该方法可能的值的有：left top、left center、left bottom、right top、right center、right bottom、center top、center center、center bottom。
background-position 属性值也可以使用百分比表示：x％y％，默认值为：0％0％，第一个值是水平位置，第二个值是垂直位置。左上角是 0％0％，右下角是 100％100％。如果仅指定了一个值，其他值将是 50％。
background-position 属性值还可以使用长度单位精确表示，单位可以是像素或任何其他 CSS 单位，通常都使用像素。第一个值是水平位置，第二个值是垂直位置，左上角是 0 0，两个数值之间用空格隔开，例如：background-position:12px 24px; 表示背景图片距离该元素左上角的水平方向位置是 12px，垂直方向位置是 24px。该属性就是图像左上角相对于元素左上角的位置偏移，如果取负值，则向上向左偏移。该方法在制作 CSS 雪碧图（即 CSS Sprite，也叫做 CSS 精灵）时，将十分重要。
5、background-attachment：背景图像设置固定或滚动
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动，默认值是 scroll，背景图片随页面的其余部分滚动。如果需要设置图像不随着页面的其他部分滚动，那么属性值则使用 fixed，定义背景图像是固定的，如下：
1 <head> 2 <style> 3 body{ 4 height:2000px; 5 background-image:url('images/fix.gif'); 6 background-repeat:no-repeat; 7 background-attachment:fixed; 8 } 9 </style> 10 </head> 11 <body> 12 <p>我是一个段落,我是一个段落</p> 13 <p>我是一个段落,我是一个段落</p> 14 <p>我是一个段落,我是一个段落</p> 15 <p>我是一个段落,我是一个段落</p> 16 <p>我是一个段落,我是一个段落</p> 17 <p>我是一个段落,我是一个段落</p> 18 <p>我是一个段落,我是一个段落</p> 19 <p>我是一个段落,我是一个段落</p> 20 <p>我是一个段落,我是一个段落</p> 21 <p>我是一个段落,我是一个段落</p> 22 <p>我是一个段落,我是一个段落</p> 23 <p>我是一个段落,我是一个段落</p> 24 <p>我是一个段落,我是一个段落</p> 25 <p>我是一个段落,我是一个段落</p> 26 <p>我是一个段落,我是一个段落</p> 27 <p>我是一个段落,我是一个段落</p> 28 <p>我是一个段落,我是一个段落</p> 29 <p>我是一个段落,我是一个段落</p> 30 <p>我是一个段落,我是一个段落</p> 31 <p>我是一个段落,我是一个段落</p> 32 <p>我是一个段落,我是一个段落</p> 33 </body>
6、背景属性的缩写
在上面实例中，设置页面的背景效果时，通过很多的单个属性来进行定义，这样代码就显得很繁琐，为了简化这些属性的代码，可以将这些属性合并在同一个属性中，如下：
1 body{ 2 background:green url('images/fix.gif') no-repeat fixed 12px 24px; 3 }
background 属于复合属性，也叫快捷属性，他可以简化代码，提高页面的运行效率，但是在使用 JS 时却不能使用复合属性来获取元素的样式，需要使用单个属性精确获取，如果一个元素定义了多个背景样式，那么使用复合属性获取，浏览器并不知道你到底需要哪个样式，就出错了。类似这样的复合属性还有：font、border、padding 和 margin 等。
当使用简写属性时，属性值的顺序依次为：
background-color --> background-image --> background-repeat --> background-attachment --> background-position
以上属性无需全部使用，可以按照页面的实际需要使用，比如只定义背景颜色，就可以这样设置：background:#90C;
七、超链接样式
不同的链接可以设置不同的样式，设置链接样式可以用任何 CSS 属性（如 color，background，font 等），链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
在所有浏览器中，链接的默认外观如下：
①：未被访问的链接带有下划线而且是蓝色的。
②：已被访问的链接带有下划线而且是紫色的。
③：活动链接带有下划线而且是红色的。
文本修饰属性 text-decoration:none 可用于删除链接中的下划线。
链接的四种状态是：
①：a:link - 正常，未访问过的链接。
②：a:visited - 已访问过的链接。
③：a:hover - 当鼠标滑动到链接上时。
④：a:active - 链接被点击的那一刻。
当为链接的不同状态设置样式时，必须遵循以下顺序规则：
①：a:hover 必须跟在 a:link 和 a:visited 后面。
②：a:active 必须跟在 a:hover后面。
在这四种状态中，最常被应用到的状态是 a:hover，:hvoer 是一个 CSS 伪类，在鼠标移动到元素上时添加的特殊样式，可用于所有元素，不只是链接，常被用来做鼠标滑过动画。当应用到链接上时，可以使用列表布局导航栏菜单，也叫选项卡，当鼠标移动到链接菜单上时，可以显示特殊的样式。
1 <head> 2 <style> 3 *{padding:0;margin:0;font:bold 18px '微软雅黑';} 4 a{ 5 color:black; 6 background-color:green; 7 text-decoration:none;//取消连接下划线 8 display:block; 9 width:120px; 10 padding:10px; 11 margin:20px; 12 text-align:center; 13 } 14 a:hover{ 15 color:white; 16 background-color:lightgray; 17 text-shadow:0 0 4px red;//文字阴影 18 } 19 </style> 20 </head> 21 <body> 22 <a href="#" >CSS 基础知识</a> 23 </body>
八、图片样式
1、图片大小：在css中，对图片的大小，我们也是用width和height这两个属性来定义。
2、图片边框：在css中，设置图片边框，也是使用border属性来设置
3、图片水平到齐：在css中，设置图片水平对齐，也是使用text-align属性来设置
4、图片垂直对齐：在css中，使用vertical-align属性来定义图片的垂直对齐方式
语法：vertical-align：属性值；
属性值的取值有：top：顶部对齐； middle：中部对齐； baseline：基线对齐； bottom：底部对齐；
W3C对vertical-align属性的定义是：vertical-align属性定义行内元素相对于该元素的垂直对齐方式。
九、列表样式
从某种意义上讲，不是描述性的文本的任何内容都可以认为是列表，比如家谱、人口普查、太阳系，甚至你的所有朋友都可以表示为一个列表或者是列表的列表。
由于列表如此多样，这使得列表相当重要，在 HTML 中，有两种类型的列表：①：无序列表 - 列表项标记用特殊图形，默认以小黑点样式显示。②：有序列表 - 列表项的标记默认以数字样式显示。
CSS 列表属性作用如下：①：设置不同的列表项标记。②：设置列表项标记为图像。
通过CSS，可以列出进一步的样式，并可用图像作列表项标记。修改列表项标记使用list-style-type，使用图像作为标记可以利用list-style-image 属性完成。
1、无序列表项标记
无序列表可被用来做导航栏菜单，通常都需要隐藏无序列表项的标记，那么就使用list-style-type:none，表示无标记。list-style-type 属性的默认值为disc 实心圆，即小黑点。
1 <head> 2 <style> 3 ul{ 4 list-style-type:none; 5 } 6 </style> 7 </head> 8 <body> 9 <ul> 10 <li>HTML 超文本标记语言</li> 11 <li>CSS 层叠样式表</li> 12 <li>JavaScript 赋予 HTML 动态交互</li> 13 <li>jQuery 最好用的JS库</li> 14 <li>Bootstrap 前端开发框架</li> 15 </ul> 16 </body>
无序列表除了可以无标记之外，还可以修改标记类型，如circle 空心圆，square 实心方块。实例：
1 <head> 2 <style> 3 .ul1{ 4 list-style-type:circle; 5 } 6 .ul2{ 7 list-style-type:square; 8 } 9 </style> 10 </head> 11 <body> 12 <ul class="ul1"> 13 <li>HTML 超文本标记语言</li> 14 <li>CSS 层叠样式表</li> 15 <li>JavaScript 赋予 HTML 动态交互</li> 16 </ul> 17 <ul class="ul2"> 18 <li>jQuery 最好用的JS库</li> 19 <li>Zepto 兼容 jQuery 语法的移动端JS库</li> 20 <li>Bootstrap 前端开发框架</li> 21 </ul> 22 </body>
2、有序列表
有序列表项标记默认使用数字样式显示，即 list-style-type:decimal，也可以将标记项修改为其他类型，cjk-ideographic 则指定汉语数字(表意数字)作为标记。decimal-leading-zero 指定以0开头的数字作为标记，如 01, 02, 03, 等。lower-roman 指定以小写罗马数字作为标记，如 i, ii, iii, iv, v, 等。upper-roman 指定以大写罗马数字作为标记，如 I, II, III, IV, V, 等。lower-alpha 指定以小写英文字母作为标记。upper-alpha 指定以大写英文字母作为标记。
3、图像作为列表项标记
要指定列表项标记的图像，可以使用 list-style-image 属性，只需要简单地设置一个 url() 值，就可以将图像作为标记类型。
1 <head> 2 <style> 3 ul{ 4 list-style-image:url('images/ul-icon.jpg'); 5 } 6 </style> 7 </head> 8 <body> 9 <ul> 10 <li>HTML 超文本标记语言</li> 11 <li>CSS 层叠样式表</li> 12 <li>JavaScript 赋予 HTML 动态交互</li> 13 <li>jQuery 最好用的JS库</li> 14 <li>Bootstrap 前端开发框架</li> 15 </ul> 16 </body>
4、列表项标记的位置
list-style-position 属性可以设置列表中列表项标记的位置。默认值为 outside 保持标记位于文本的左侧，列表项标记放置在文本以外，且环绕文本不根据标记对齐。inside 则指定列表项目标记放置在文本以内，且环绕文本根据标记对齐。如下：
1 <head> 2 <style> 3 .ul1{ 4 list-style-position:outside; 5 } 6 .ul2{ 7 list-style-position:inside; 8 } 9 li{ 10 margin:5px; 11 border:2px solid red; 12 } 13 </style> 14 </head> 15 <body> 16 <ul class="ul1"> 17 <li>HTML 超文本标记语言</li> 18 <li>CSS 层叠样式表</li> 19 <li>JavaScript 赋予 HTML 动态交互</li> 20 <li>jQuery 最好用的JS库</li> 21 <li>Bootstrap 前端开发框架</li> 22 </ul> 23 <ul class="ul2"> 24 <li>HTML 超文本标记语言</li> 25 <li>CSS 层叠样式表</li> 26 <li>JavaScript 赋予 HTML 动态交互</li> 27 <li>jQuery 最好用的JS库</li> 28 <li>Bootstrap 前端开发框架</li> 29 </ul> 30 </body>
在上面例子中，使用了2个无序列表，第一个列表项标记位置为默认，第二个列表项标记被放置在文本以内，为了增强演示效果，给每个列表项都设置外边距和边框，在浏览器中可以很直观的看到二者的不同，默认值的标记在边框外，而inside则在边框内，还有一点需要注意：在Chrome 和Firefox 中这两个值的标记位置与列表项之间的空白都是相等的，而在IE中可以很明显的看到，使用inside值后，标记位置与列表项之间的空白比默认值宽。
5、列表属性简写
在单个属性中可以指定所有的列表属性，可以将以上 3 个列表样式属性合并为一个方便的属性：list-style。
当使用简写属性时，属性值的顺序依次为：
list-style-type --> list-style-position --> list-style-image
可以不设置其中的某个值，比如 list-style:square inside 也是允许的，未设置的属性将使用默认值。
无序列表项的标记在隐藏时，使用简写属性，且考虑到浏览器的兼容性，可以定义为：list-style:none outside none; 或者不设置第三个值也好。
十、表格样式
使用css可以大大提高HTML表格的外观。
1、表格表框
给表格设置边框，可以使用 CSS 的 border 属性定义，也可以使用表格标签的 border 属性定义。如下：
1 <head> 2 <style> 3 table,th,td{ 4 border:1px solid black; 5 } 6 </style> 7 </head> 8 <body> 9 <table> 10 <tr> 11 <th>粗粮</th> 12 <th>蔬菜</th> 13 <th>水果</th> 14 </tr> 15 <tr> 16 <td>大豆</td> 17 <td>黄瓜</td> 18 <td>香蕉</td> 19 </tr> 20 <tr> 21 <td>高粱</td> 22 <td>菠菜</td> 23 <td>柠檬</td> 24 </tr> 25 </table> 26 </body>
注意，这样设置的表格具有双线条边框，这是由于 table、th 以及 td 元素都有独立的边框。为了显示一个单线条边框的表格，就使用 border-collapse 属性。
2、折叠边框
border-collapse 属性设置是否将表格边框合并为单一线条的边框。该属性的默认值为 separate 边框会分开显示，不会忽略 border-spacing 和 empty-cells 属性。collapse 如果可能，边框会合并为一个单一的边框，该值会忽略 border-spacing 和 empty-cells 属性，即设置这两个属性无效。如下：
1 <head> 2 <style> 3 table{ 4 border-collapse:collapse; 5 } 6 table,th,td{ 7 border:1px solid black; 8 } 9 </style> 10 </head> 11 <body> 12 <table> 13 <tr> 14 <th>粗粮</th> 15 <th>蔬菜</th> 16 <th>水果</th> 17 </tr> 18 <tr> 19 <td>大豆</td> 20 <td>黄瓜</td> 21 <td>香蕉</td> 22 </tr> 23 <tr> 24 <td>高粱</td> 25 <td>菠菜</td> 26 <td>柠檬</td> 27 </tr> 28 </table> 29 </body>
border-spacing 属性用于设置相邻单元格的边框间的距离，仅用于边框分离模式，即双线条边框表格。使用 px、cm 等单位指定距离，不允许使用负值。如果定义一个参数，那么定义的是水平和垂直间距。如果定义两个参数，那么第一个设置水平间距，而第二个设置垂直间距。
empty-cells 属性设置是否显示表格中的空单元格，仅用于边框分离模式，即双线条边框表格。该属性用于定义不包含任何内容的表格单元格如何显示，如果显示，就会绘制出单元格的边框和背景。该属性的默认值为 show 在单元格周围绘制边框，hide 不在单元格周围绘制边框。
除非表格的边框显示为双线条边框，否则这两个属性都无效。
1 <head> 2 <style> 3 .tab1{ 4 empty-cells:hide; 5 border-spacing:10px; 6 } 7 .tab2{ 8 border-spacing:20px 50px; 9 margin-top:20px; 10 } 11 </style> 12 </head> 13 <body> 14 <table border="1" class="tab1"> 15 <tr> 16 <th>粗粮</th> 17 <th>蔬菜</th> 18 <th>水果</th> 19 </tr> 20 <tr> 21 <td></td> 22 <td>黄瓜</td> 23 <td></td> 24 </tr> 25 <tr> 26 <td>高粱</td> 27 <td></td> 28 <td>柠檬</td> 29 </tr> 30 </table> 31 <table border="1" class="tab2"> 32 <tr> 33 <th>粗粮</th> 34 <th>蔬菜</th> 35 <th>水果</th> 36 </tr> 37 <tr> 38 <td></td> 39 <td>黄瓜</td> 40 <td></td> 41 </tr> 42 <tr> 43 <td>高粱</td> 44 <td></td> 45 <td>柠檬</td> 46 </tr> 47 </table> 48 </body>
3、表格宽度和高度
width 和 height 属性定义表格的宽度和高度。
4、表格对齐
text-align 和 vertical-align 属性用于设置表格中文本的对齐方式。
①、text-align 属性设置水平对齐方式，比如左对齐，右对齐和居中。
②、vertical-align属性设置垂直对齐方式，比如顶部对齐，底部对齐或中间对齐。
vertical-align:top; 顶部对齐。vertical-align:middle; 中间对齐。vertical-align:bottom; 底部对齐。
caption-side 属性可以设置表格标题的位置，默认值为 top 将标题定位在表格之上，bottom 可以把表格标题定位在表格之下。
5、表格内边距
如果需要控制表格中内容与边框的距离，就应该增加内容的内边距，即为 td 和 th 元素设置 padding 属性。
6、表格颜色
可以为表格的边框指定边颜色，也可以为表头以及单元格指定背景颜色，还可以设置文本的颜色。
综合实例：
1 <head> 2 <style> 3 #tab{ 4 width:50%; 5 font-family:"微软雅黑"; 6 border-collapse:collapse; 7 } 8 #tab th,#tab td{ 9 border:1px solid #7AC942; 10 padding:5px 10px; 11 } 12 #tab th{ 13 color:white; 14 background-color:#9C3; 15 font-size:1.125em; 16 text-align:left; 17 padding-top:4px; 18 padding-bottom:8px; 19 } 20 #tab .list td{ 21 color:#000; 22 background-color:#FFC; 23 } 24 caption{ 25 margin-bottom:10px; 26 font-weight:bold; 27 font-size:1.5em; 28 } 29 </style> 30 </head> 31 <body> 32 <table id="tab"> 33 <caption>食物类别</caption> 34 <thead> 35 <tr class="list"> 36 <th>粗粮</th> 37 <th>蔬菜</th> 38 <th>水果</th> 39 </tr> 40 </thead> 41 <tbody> 42 <tr> 43 <td>大豆</td> 44 <td>黄瓜</td> 45 <td>香蕉</td> 46 </tr> 47 <tr class="list"> 48 <td>高粱</td> 49 <td>菠菜</td> 50 <td>柠檬</td> 51 </tr> 52 <tr> 53 <td>玉米</td> 54 <td>辣椒</td> 55 <td>芒果</td> 56 </tr> 57 <tr class="list"> 58 <td>燕麦片</td> 59 <td>白菜</td> 60 <td>西瓜</td> 61 </tr> 62 </tbody> 63 </table> 64 </body>
十一、CSS盒子模型
1、css盒子模型
在css盒子模型中，页面内的所有元素都可以看成盒子，并且占据着一定的页面空间。
一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型可以从两方面来理解：一个理解单独盒子的内部结构，二是理解多个盒子之间的相互关系。
每个元素都看成一个盒子，盒子模型由content（内容），padding（内边距），border（边框），margin（外边距）这四个属性组成。此外，在盒子模型中，还有宽度width和高度height两大辅助性属性。
（一个盒子的宽度或高度是由content+padding+border+margin组成，页面中的所有元素都可以看作一个盒子）
（1）content（内容区）：是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分，其他的三部分都是可选的。
内容区有三个属性：width、height和overflow
width、height两个属性是针对内容区而言，并不包括padding部分。
当内容信息太多，超出了内容区所占的范围时，可以使用overflow溢出来指定处理方法。
overflow属性的取值：hidden（溢出隐藏） auto（自适应加滚动条） scroll（无论溢出与否都加滚动条）
（2）padding（内边距）：指的是内容和边框之间的空间，可以看作是内容区的背景区域。
关于内边距的属性有5中，即padding-top、padding-bottom、padding-left、padding-right以及综合了以上四个方向的简洁内边距属性padding。
语法：
padding：20px；四个方向的padding值都是20px
padding：20px 40px；上下为20px，左右为40px
padding：10px 20px 30px 40px；顺序是上右下左。
（3）border（边框）：在css盒子模型中，边框跟我们之前学的边框是一样的。
（4）margin（外边距）：指的是两个盒子之间的距离，他可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。
外边距使得元素之间不必紧凑的连接在一起，是css布局的一个重要手段。
语法：
margin：20px；
margin：20px 40px；
margin：10px 20px 30px 40px;顺序与padding设置顺序一致。
十二、浮动布局
1、HTML文档流
（1）正常文档流
html文档流：就是元素在页面出现的先后顺序。
正常文档流，将窗体自上而下分成一行一行，块元素独占一行，相邻行内元素在每行中按从左到右依次排列元素。
（2）脱离正常文档流
相对于正常文档流而言，正常文档流就是我们没有用css样式去控制的html文档结构，你写的界面的顺序就是网页展示的顺序。
所谓脱离正常文档流就是指它所显示的位置和文档代码顺序不一致。
在css布局中，我们可以使用浮动或者定位这两种技术来实现“脱离正常文档流”，从而随心所欲地控制页面的布局。
2、浮动float（不完全脱离文档流）
浮动属性float是css布局的最佳利器，我们可以通过不同的浮动属性值灵活地定位div元素，以达到布局网页的目的。
我i么可以说通过css的属性float使元素向左或向右浮动。
在css中，任何元素都可以浮动。
浮动元素会生成一个块级框，而不论它本身是何种元素。
语法：float：取值；（取值包括left和right）
如果子元素是浮动的。则撑不开父元素的高度，（解决办法是给父元素田间一个overflow：hidden）
3、清除浮动clear
在css中，清除浮动都是在定义了浮动的元素之后设置的。
语法：clear：取值；（取值主要包括：left取消左浮动，right清除右浮动，both左右浮动一起清除）
十三、定位布局position
定位布局使得用户精准定位页面中的任意元素成为可能，页面布局操作变的更加随心所欲。
定位布局共有四种：固定定位、相对定位、绝对定位、静态定位
（1）固定定位fixed
当元素的position属性设置为fixed时，这个元素就被固定了，被固定的元素不会随着滚动条的拖动而改变位置。
在视野中，固定定位的元素位置是不会改变的。即它是指定元素相对于可视区域的位置，原来位置消失，不能与float连用。
语法：position：fixed；
top：像素值；
bottom：像素值；
left：像素值；
right：像素值；
left和top的优先级高于right和bottom。
（2）相对定位relative
采用相对定位的元素，其位置是相对于它原始位置计算而来的。
语法：position：relative；
top：像素值；
bottom：像素值；
left：像素值；
right：像素值；
（3）绝对定位absolute
使用最为广泛，能够将元素移动到你想要的位置。
一个元素变成了绝对定位元素，这个元素就完全脱离了正常文档流了，绝对定位的前面或后面的元素会认为这个元素并不存在，即这个元素浮于其他元素上方，它是独立出来的。
语法：position：absolute；
top：像素值；
bottom：像素值；
left：像素值；
right：像素值；
（4）静态定位static
如果没有指定元素的position属性值，也就是默认情况下：元素是静态定位。只要是支持position属性的html对象都是默认的static，static是position属性的默认值，他表示块保留在应该在的位置，不会重新定位。
（5）z-index属性用于调整定位时重叠块的上下位置，当块设置了position属性时，该值便可以设置各项的重叠高低关系，默认值为0；
浙公网安备 33010602011771号