Css
Css 基础
Css：即 Cascading Style Sheet（层叠样式表），是用来控制网页的表现的一门技术，使用 Css 能让单调的 Html 网页更富表现力，Css 使 Html 文档的表现形式与结构分离开来。
Css 语法：
Css 规则有两个主要部分组成：选择器，以及一条或多条声明。如下
p{
color:red;
text-indent:2em;
}选择器就是需要改变样式的 Html 元素。每条声明由一个属性和一个值组成，属性是设置的样式属性（style attribute），每个属性都有一个值，属性和值用冒号分隔。
Css 声明总是以分号 ; 结束，声明组以大括号 {...} 括起来。为了让 Css 可读性更强，可以每行只描述一个属性。
Css 注释
Css 注释是用来解释代码，并且可以随意编辑，浏览器会忽略它。Css注释以 /* 开始，以 */ 结束。如下：
p{
color:red;
text-indent:2em; /* 段落缩进2个字，即段落开头空2个汉字的位置。 */
}Css 引用方式
- 外部样式表
- 内部样式表
- 内联样式表
- 导入外部样式表
外部样式表
外部样式表是最理想的 Css 引用方式。所谓的 外部样式表 就是把 Css 代码和 Html 代码单独放在不同的文件中，然后在 Html 文档中使用 link 标签来引用 Css 样式。
<head>
<link rel="stylesheet" type="text/Css" href="Css/style.Css">
</head>注意：
<link>标签中rel="stylesheet" type="text/Css"是固定代码格式，不可更改。
外部样式表可以在任何文本编辑器中进行编辑，样式文件不能包含任何的 Html 标签，样式表以 .Css 扩展名进行保存。
内部样式表
就是把 Html 代码和 Css 代码放在同一个文件中，其中 Css 代码放在 <style></style> 标签对内，并且 <style></style> 标签对是放在head标签对内。
<head>
<style>
p{
color:blue;
font-size:14px;
}
</style>
</head>内联样式表
也是把 Html 代码和 Css 代码放在同一个文件中，但是跟内部样式表不同的是内联样式不是在 <style></style> 标签对内定义，而是在标签的 style 属性中定义：
<div style="width:200px;height:100px;border:1px solid black;"></div>由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。因此需要慎用这种方法，例如当样式仅需要在一个元素上应用一次时，可以使用内联样式。
要使用内联样式，需要在相关的标签内使用样式属性定义，style 属性可以包含任何 Css 属性。
导入外部样式文件
一般不推荐使用该方式，语法：
#import "样式文件" 或者 @import url(“样式文件”)@import 语句也是放在 <style></style> 标签内
四种引用方式的优先级：内联 > 内部 > import > link
Css 选择器
元素的 id 和 class 是 Html 元素中最基本的两个公共属性。
id属性被赋予了表示页面元素的唯一身份。如果一个页面出现了多个相同的id属性取值，Css选择器或者javascript就无法分辨要控制的元素。有了
class属性，我们可以为同一个页面的相同元素或不同元素设置相同的class，然后使得相同的class元素具有相同的Css样式。
对于元素的id和class，需要注意以下两点：
一个标签可以同时定义多个
classid也可以想成name，区别在于name是Html中的标准，而id是xHtml中的标准。现在网页的标准都是使用id。
**选择器：就是一种选择元素的方式。**语法：
选择器｛
样式属性1：属性值1；
样式属性2：属性值2；
}id 和 class 选择器
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>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>id 选择器和 class 选择器的区别
相同点：
- 可以应用于任何元素。
不同点：
id选择器只能在文档中使用一次。与类选择器不同，在一个Html文档中，id选择器只能使用一次，而且仅一次。而类选择器可以使用多次。可以使用
class选择器为一个元素同时设置多个样式。在一个Html文档中，可以为一个元素同时设置多个样式，但只可以用类选择器的方法实现，id选择器是不可以的，即一个元素可以指定多个类名，如<span class="one two three">文本</span>，而id只能指定一个。
元素选择器
最常见的 Css 选择器就是元素选择器，即标签选择器。即 Html 的元素就是最基本的选择器。语法：
元素｛属性1：属性值1；属性2：属性值2｝示例：
h1 {
color:red;
text-align:center;
}子选择器
就是指选中某个元素或某一类元素下的子元素，然后对该子选择器设置Css样式。（选择器嵌套的一种）语法：
// （父选择器#father和子选择器#p1之间用一个空格隔开）
#father #p1 {
color：red；
}相邻选择器
指选择该元素的下一个兄弟元素。其操作的对象是该元素的同级元素。语法：
#lv+div {
color：red;
}群组选择器
指同时对几个选择器进行相同的操作。语法：
h3,div,p,span{
color:blue;
}对于群组选择器，两个选择器之间必须用逗号隔开
其他
伪类选择器：hover
结构性伪类选择器：E:after、E:before、E:nth-child()、E:first-child、E:latest-childCss 属性
字体样式
字体类型: 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
字体大小可以是绝对或相对大小。
- 绝对大小：
- 指定文字大小
- 不允许用户在所有浏览器中改变文字大小
- 确定了输出的物理尺寸时，绝对大小很有用
- 相对大小：
- 相对于周围的元素来设置大小
- 允许用户在浏览器中改变文字大小
字体的大小可以使用 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>
</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>
</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 前缀来区分两类不同的性质。
文本水平对对齐方式 text-align
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通过拉伸字符来排齐内容。
文本修饰：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;设置文本下划线。
文本缩进：text-indent
属性是用来指定文本的首行缩进，允许为负值，如果为负数，第一行向左缩进。
语法：text-indent:2em；行高：line-height
属性用于设置行高，不允许为负值。
字间距：letter-spacing 和 word-spacing
这两个属性都可用来增减或减少文本间的空白，即字间距。不同的是
letter-spacing属性设置字符间距word-spacing属性设置单词间距
注意:
word-spacing属性对中文无效，因此在设置中文的字间距时请使用letter-spacing属性。
letter-spacing和text-align:justify是两个冲突的属性，不能同时使用。
文本空白处理：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> 标签。</p>
<p class="p2">white-space:pre 空白会被浏览器保留，该方式类似 Html 中的 <pre> 标签。</p>
<p class="p3">white-space:pre-wrap 保留空白符序列，但是正常地进行换行。<mark>1——</mark> 保 留 空 白 符 序 列，但 是 正 常 地 进 行 换 行。<mark>2——</mark> 保留 空白 符序列，但是 正常地 进行换行。<mark>3——</mark> 保 留 空 白 符 序 列，但 是 正 常 地 进行换行。</p>
</body>文本转换：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 属性有以下五种：
background-color
background-image
background-repeat
background-position
background-attachment背景颜色: background-color
background-color 属性定义了元素的背景颜色。页面的背景颜色可以使用 body 元素选择器进行定义：
body{
background-color:gray;
}Css 中定义颜色值通常使用以下方式定义：
十六进制，如：
#ff0000，类似这样的形式，可以缩写为#f00RGB，如：
rgb(255，0，0)关键字：如
red
背景图像: background-image
background-image 属性描述了元素的背景图像，默认背景下，背景图像进行平铺重复显示，以覆盖整个元素实体，页面背景图片设置如下：
body{
background-image:url('images/wallpaper.jpg');
}背景图像平铺设置: background-repeat
默认情况下，background-image 属性会在页面的水平或者垂直方向平铺。
一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些：background-repeat:repeat-x，定义垂直方向平铺语法：background-repeat:repeat-y。
在使用背景图像时，默认会平铺重复显示，这样不仅不具有美感，还会影响文本的排版。如果不想让图像平铺，并且只显示一次，那么就这样定义：background-repeat:no-repeat。
<head>
<style>
body{
background-image:url('images/wallpaper.jpg');
background-repeat:no-repeat;
}
</style>
</head>
<body>
<h1 class="center col">class 选择器</h1>
<p class="center col">我是一个段落。</p>
<p class="center col font">我是另一个段落。</p>
<h2 class="center">h2 标题</h2>
</body>背景图像设置定位: background-position
在上面的例子中，背景图像与文本显示在同一个位置，这样不利于文本的阅读，为了让页面排版更加合理，可以利用 background-position 属性改变图像在背景中的位置：
body{
background-image:url('images/wallpaper.jpg');
background-repeat:no-repeat;
background-position:right top;
}此时，背景图像会显示在页面的右上角。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 精灵）时，将十分重要。
背景图像设置固定或滚动: background-attachment
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动，默认值是 scroll，背景图片随页面的其余部分滚动。如果需要设置图像不随着页面的其他部分滚动，那么属性值则使用 fixed，定义背景图像是固定的，如下：
<head>
<style>
body{
height:2000px;
background-image:url('images/fix.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>
<body>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
</body>背景属性的缩写
在上面实例中，设置页面的背景效果时，通过很多的单个属性来进行定义，这样代码就显得很繁琐，为了简化这些属性的代码，可以将这些属性合并在同一个属性中，如下：
body{
background:green url('images/fix.gif') no-repeat fixed 12px 24px;
}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 伪类，在鼠标移动到元素上时添加的特殊样式，可用于所有元素，不只是链接，常被用来做鼠标滑过动画。
当应用到链接上时，可以使用列表布局导航栏菜单，也叫选项卡，当鼠标移动到链接菜单上时，可以显示特殊的样式。
<head>
<style>
*{padding:0;margin:0;font:bold 18px '微软雅黑';}
a{
color:black;
background-color:green;
text-decoration:none;//取消连接下划线
display:block;
width:120px;
padding:10px;
margin:20px;
text-align:center;
}
a:hover{
color:white;
background-color:lightgray;
text-shadow:0 0 4px red;//文字阴影
}
</style>
</head>
<body>
<a href="#" >Css 基础知识</a>
</body>图片样式
图片大小：在
Css中，对图片的大小，我们也是用width和height这两个属性来定义。图片边框：在
Css中，设置图片边框，也是使用border属性来设置图片水平到齐：在
Css中，设置图片水平对齐，也是使用text-align属性来设置图片垂直对齐：在
Css中，使用vertical-align属性来定义图片的垂直对齐方式
语法：
vertical-align：属性值；属性值的取值有：
top：顶部对齐；
middle：中部对齐；
baseline：基线对齐；
bottom：底部对齐；W3C 对 vertical-align 属性的定义是：vertical-align 属性定义行内元素相对于该元素的垂直对齐方式。
列表样式
从某种意义上讲，不是描述性的文本的任何内容都可以认为是列表，比如家谱、人口普查、太阳系，甚至你的所有朋友都可以表示为一个列表或者是列表的列表。
由于列表如此多样，这使得列表相当重要，在 Html 中，有两种类型的列表：
- 无序列表 - 列表项标记用特殊图形，默认以小黑点样式显示。
- 有序列表 - 列表项的标记默认以数字样式显示。
Css 列表属性作用如下：
- 设置不同的列表项标记。
- 设置列表项标记为图像。
通过 Css，可以列出进一步的样式，并可用图像作列表项标记。修改列表项标记使用 list-style-type，使用图像作为标记可以利用 list-style-image 属性完成。
无序列表项标记
无序列表可被用来做导航栏菜单，通常都需要隐藏无序列表项的标记，那么就使用 list-style-type:none，表示无标记。list-style-type 属性的默认值为 disc 实心圆，即小黑点。
<head>
<style>
ul{
list-style-type:none;
}
</style>
</head>
<body>
<ul>
<li>Html 超文本标记语言</li>
<li>Css 层叠样式表</li>
<li>JavaScript 赋予 Html 动态交互</li>
<li>jQuery 最好用的JS库</li>
<li>Bootstrap 前端开发框架</li>
</ul>
</body>无序列表除了可以无标记之外，还可以修改标记类型，如 circle 空心圆，square 实心方块。实例：
<head>
<style>
.ul1{
list-style-type:circle;
}
.ul2{
list-style-type:square;
}
</style>
</head>
<body>
<ul class="ul1">
<li>Html 超文本标记语言</li>
<li>Css 层叠样式表</li>
<li>JavaScript 赋予 Html 动态交互</li>
</ul>
<ul class="ul2">
<li>jQuery 最好用的JS库</li>
<li>Zepto 兼容 jQuery 语法的移动端JS库</li>
<li>Bootstrap 前端开发框架</li>
</ul>
</body>有序列表
有序列表项标记默认使用数字样式显示，即 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指定以大写英文字母作为标记。
图像作为列表项标记
要指定列表项标记的图像，可以使用 list-style-image 属性，只需要简单地设置一个 url() 值，就可以将图像作为标记类型。
<head>
<style>
ul{
list-style-image:url('images/ul-icon.jpg');
}
</style>
</head>
<body>
<ul>
<li>Html 超文本标记语言</li>
<li>Css 层叠样式表</li>
<li>JavaScript 赋予 Html 动态交互</li>
<li>jQuery 最好用的JS库</li>
<li>Bootstrap 前端开发框架</li>
</ul>
</body>列表项标记的位置
list-style-position 属性可以设置列表中列表项标记的位置。默认值为 outside 保持标记位于文本的左侧，列表项标记放置在文本以外，且环绕文本不根据标记对齐。inside 则指定列表项目标记放置在文本以内，且环绕文本根据标记对齐。如下：
<head>
<style>
.ul1{
list-style-position:outside;
}
.ul2{
list-style-position:inside;
}
li{
margin:5px;
border:2px solid red;
}
</style>
</head>
<body>
<ul class="ul1">
<li>Html 超文本标记语言</li>
<li>Css 层叠样式表</li>
<li>JavaScript 赋予 Html 动态交互</li>
<li>jQuery 最好用的JS库</li>
<li>Bootstrap 前端开发框架</li>
</ul>
<ul class="ul2">
<li>Html 超文本标记语言</li>
<li>Css 层叠样式表</li>
<li>JavaScript 赋予 Html 动态交互</li>
<li>jQuery 最好用的JS库</li>
<li>Bootstrap 前端开发框架</li>
</ul>
</body>在上面例子中，使用了2个无序列表，第一个列表项标记位置为默认，第二个列表项标记被放置在文本以内，为了增强演示效果，给每个列表项都设置外边距和边框，在浏览器中可以很直观的看到二者的不同，默认值的标记在边框外，而 inside 则在边框内，还有一点需要注意：在 Chrome 和 Firefox 中这两个值的标记位置与列表项之间的空白都是相等的，而在IE中可以很明显的看到，使用 inside 值后，标记位置与列表项之间的空白比默认值宽。
列表属性简写
在单个属性中可以指定所有的列表属性，可以将以上 3 个列表样式属性合并为一个方便的属性：list-style。
当使用简写属性时，属性值的顺序依次为：
list-style-type-->list-style-position-->list-style-image
可以不设置其中的某个值，比如 list-style:square inside 也是允许的，未设置的属性将使用默认值。
无序列表项的标记在隐藏时，使用简写属性，且考虑到浏览器的兼容性，可以定义为：list-style:none outside none; 或者不设置第三个值也好。
表格样式
表格表框
给表格设置边框，可以使用 Css 的 border 属性定义，也可以使用表格标签的 border 属性定义。如下：
<head>
<style>
table,th,td{
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>粗粮</th>
<th>蔬菜</th>
<th>水果</th>
</tr>
<tr>
<td>大豆</td>
<td>黄瓜</td>
<td>香蕉</td>
</tr>
<tr>
<td>高粱</td>
<td>菠菜</td>
<td>柠檬</td>
</tr>
</table>
</body>注意，这样设置的表格具有双线条边框，这是由于 table、th 以及 td 元素都有独立的边框。为了显示一个单线条边框的表格，就使用 border-collapse 属性。
折叠边框
border-collapse 属性设置是否将表格边框合并为单一线条的边框。该属性的默认值为 separate 边框会分开显示，不会忽略 border-spacing 和 empty-cells 属性。
collapse 如果可能，边框会合并为一个单一的边框，该值会忽略 border-spacing 和 empty-cells 属性，即设置这两个属性无效。如下：
<head>
<style>
table{
border-collapse:collapse;
}
table,th,td{
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>粗粮</th>
<th>蔬菜</th>
<th>水果</th>
</tr>
<tr>
<td>大豆</td>
<td>黄瓜</td>
<td>香蕉</td>
</tr>
<tr>
<td>高粱</td>
<td>菠菜</td>
<td>柠檬</td>
</tr>
</table>
</body>border-spacing属性用于设置相邻单元格的边框间的距离，仅用于边框分离模式，即双线条边框表格。使用px、cm等单位指定距离，不允许使用负值。如果定义一个参数，那么定义的是水平和垂直间距。如果定义两个参数，那么第一个设置水平间距，而第二个设置垂直间距。empty-cells属性设置是否显示表格中的空单元格，仅用于边框分离模式，即双线条边框表格。该属性用于定义不包含任何内容的表格单元格如何显示，如果显示，就会绘制出单元格的边框和背景。该属性的默认值为 show 在单元格周围绘制边框，hide 不在单元格周围绘制边框。
除非表格的边框显示为双线条边框，否则这两个属性都无效。
<head>
<style>
.tab1{
empty-cells:hide;
border-spacing:10px;
}
.tab2{
border-spacing:20px 50px;
margin-top:20px;
}
</style>
</head>
<body>
<table border="1" class="tab1">
<tr>
<th>粗粮</th>
<th>蔬菜</th>
<th>水果</th>
</tr>
<tr>
<td></td>
<td>黄瓜</td>
<td></td>
</tr>
<tr>
<td>高粱</td>
<td></td>
<td>柠檬</td>
</tr>
</table>
<table border="1" class="tab2">
<tr>
<th>粗粮</th>
<th>蔬菜</th>
<th>水果</th>
</tr>
<tr>
<td></td>
<td>黄瓜</td>
<td></td>
</tr>
<tr>
<td>高粱</td>
<td></td>
<td>柠檬</td>
</tr>
</table>
</body>表格宽度和高度
width 和 height 属性定义表格的宽度和高度。
表格对齐
text-align 和 vertical-align 属性用于设置表格中文本的对齐方式。
text-align属性设置水平对齐方式，比如左对齐，右对齐和居中。vertical-align属性设置垂直对齐方式，比如顶部对齐，底部对齐或中间对齐。vertical-align:top; 顶部对齐。vertical-align:middle;中间对齐。vertical-align:bottom; 底部对齐。
caption-side 属性可以设置表格标题的位置，默认值为 top 将标题定位在表格之上，bottom 可以把表格标题定位在表格之下。
表格内边距
如果需要控制表格中内容与边框的距离，就应该增加内容的内边距，即为 td 和 th 元素设置 padding 属性。
表格颜色
可以为表格的边框指定边颜色，也可以为表头以及单元格指定背景颜色，还可以设置文本的颜色。
综合实例：
<head>
<style>
#tab{
width:50%;
font-family:"微软雅黑";
border-collapse:collapse;
}
#tab th,#tab td{
border:1px solid #7AC942;
padding:5px 10px;
}
#tab th{
color:white;
background-color:#9C3;
font-size:1.125em;
text-align:left;
padding-top:4px;
padding-bottom:8px;
}
#tab .list td{
color:#000;
background-color:#FFC;
}
caption{
margin-bottom:10px;
font-weight:bold;
font-size:1.5em;
}
</style>
</head>
<body>
<table id="tab">
<caption>食物类别</caption>
<thead>
<tr class="list">
<th>粗粮</th>
<th>蔬菜</th>
<th>水果</th>
</tr>
</thead>
<tbody>
<tr>
<td>大豆</td>
<td>黄瓜</td>
<td>香蕉</td>
</tr>
<tr class="list">
<td>高粱</td>
<td>菠菜</td>
<td>柠檬</td>
</tr>
<tr>
<td>玉米</td>
<td>辣椒</td>
<td>芒果</td>
</tr>
<tr class="list">
<td>燕麦片</td>
<td>白菜</td>
<td>西瓜</td>
</tr>
</tbody>
</table>
</body>Css 盒子模型
在 Css 盒子模型中，页面内的所有元素都可以看成盒子，并且占据着一定的页面空间。
一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型可以从两方面来理解：一个理解单独盒子的内部结构，二是理解多个盒子之间的相互关系。
每个元素都看成一个盒子，盒子模型由 content（内容），padding（内边距），border（边框），margin（外边距）这四个属性组成。此外，在盒子模型中，还有宽度 width 和高度 height 两大辅助性属性。（一个盒子的宽度或高度是由 content+padding+border+margin 组成，页面中的所有元素都可以看作一个盒子）
content （内容）
content（内容区）：是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分，其他的三部分都是可选的。内容区有三个属性：width、height和overflow。width、height两个属性是针对内容区而言，并不包括padding部分。当内容信息太多，超出了内容区所占的范围时，可以使用overflow溢出来指定处理方法。overflow属性的取值：hidden（溢出隐藏）auto（自适应加滚动条）scroll（无论溢出与否都加滚动条）
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；顺序是上右下左。border（边框）
在 Css 盒子模型中，边框跟我们之前学的边框是一样的。
margin（外边距）
指的是两个盒子之间的距离，他可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。
外边距使得元素之间不必紧凑的连接在一起，是 Css 布局的一个重要手段。语法：
margin：20px；
margin：20px 40px；
margin：10px 20px 30px 40px;顺序与padding设置顺序一致。浮动布局 floatHtml` 文档流
正常文档流
Html 文档流：就是元素在页面出现的先后顺序。
正常文档流，将窗体自上而下分成一行一行，块元素独占一行，相邻行内元素在每行中按从左到右依次排列元素。
脱离正常文档流
相对于正常文档流而言，正常文档流就是我们没有用Css样式去控制的Html文档结构，你写的界面的顺序就是网页展示的顺序。
所谓脱离正常文档流就是指它所显示的位置和文档代码顺序不一致。
在 Css 布局中，我们可以使用浮动或者定位这两种技术来实现“脱离正常文档流”，从而随心所欲地控制页面的布局。
浮动 float（不完全脱离文档流）
浮动属性 float 是 Css 布局的最佳利器，我们可以通过不同的浮动属性值灵活地定位 div 元素，以达到布局网页的目的。
可以说通过 Css 的属性 float 使元素向左或向右浮动。
在 Css 中，任何元素都可以浮动。
浮动元素会生成一个块级框，而不论它本身是何种元素。
语法：float：取值；（取值包括 left 和 right）
如果子元素是浮动的。则撑不开父元素的高度，（解决办法是给父元素田间一个 overflow：hidden）
清除浮动 clear
在 Css 中，清除浮动都是在定义了浮动的元素之后设置的。
语法：clear：取值；（取值主要包括：left取消左浮动，right清除右浮动，both左右浮动一起清除）
定位布局 position
定位布局使得用户精准定位页面中的任意元素成为可能，页面布局操作变的更加随心所欲。
定位布局共有四种：固定定位、相对定位、绝对定位、静态定位
固定定位 fixed
当元素的 position 属性设置为 fixed 时，这个元素就被固定了，被固定的元素不会随着滚动条的拖动而改变位置。
在视野中，固定定位的元素位置是不会改变的。即它是指定元素相对于可视区域的位置，原来位置消失，不能与 float 连用。语法：position：fixed；
top：像素值；
bottom：像素值；
left：像素值；
right：像素值；
left和top的优先级高于right和bottom。相对定位 relative
采用相对定位的元素，其位置是相对于它原始位置计算而来的。语法：position：relative；
top：像素值；
bottom：像素值；
left：像素值；
right：像素值；绝对定位 absolute
使用最为广泛，能够将元素移动到你想要的位置。
一个元素变成了绝对定位元素，这个元素就完全脱离了正常文档流了，绝对定位的前面或后面的元素会认为这个元素并不存在，即这个元素浮于其他元素上方，它是独立出来的。语法：position：absolute；
top：像素值；
bottom：像素值；
left：像素值；
right：像素值；静态定位 static
如果没有指定元素的 position 属性值，也就是默认情况下：元素是静态定位。
只要是支持 position 属性的 Html 对象都是默认的 static，static 是 position 属性的默认值，他表示块保留在应该在的位置，不会重新定位。
z-index 属性
用于调整定位时重叠块的上下位置，当块设置了 position 属性时，该值便可以设置各项的重叠高低关系，默认值为0；
flex 布局
Flex 是 Flexible Box 的缩写，也叫”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局
.box {
display: flex;
}一旦给父元素设置了 display:flex; ，这个父元素称为Flex容器。它的所有子元 素自动成为该容器成员，称为Flex项目，简称项目
主轴方向 flex-direction
flex-direction 属性决定主轴的方向(既项目的排列方向)
.box{
flex-direction: row | row-reverse | column | column-reverse
}
换行 flex-wrap
默认情况下，子项目都排在一条轴线上。 flex-wrap 属性定义如果一条轴线排不下，如何换行。
.box{
flex-wrap:nowrap | wrap | wrap-reverse;
}nowrap(默认):不换行wrap:换行，第一行在上方wrap-reversse: 换行，第一行在下方
flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 ro
w nowrap
主轴对齐 justify-content
justify-content 属性定义了项目在主轴上的对⻬方式
.box {
justify-content: flex-start | flex-end | center |
space-between | space-around;
}具体对⻬方式与轴的方向有关。假设主轴从左到右
flex-start(默认值):左对⻬flex-end:右对⻬center: 居中space-between:两端对⻬，项目之间的间隔都相等。space-around:每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间
交叉轴对齐 align-items
align-items 属性定位项目在垂直交叉轴上如何对⻬
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}flex-start:交叉轴的起点对⻬。flex-end:交叉轴的终点对⻬。center:交叉轴的中点对⻬。baseline: 项目的第一行文字的基线对⻬。stretch(默认值):如果项目未设置高度或设为auto，将占满整个容器的高度。