CSS
CSS
CSS简介
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
css特点
CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。
总体来说，CSS具有以下特点：
1：丰富的样式定义
CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
2：易于使用和修改
CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。
3：多页面应用
CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
4：层叠
简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。
5：页面压缩
在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程度的缩减了页面的体积，减少下载的时间。
css工作原理
CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。
样式规则是可应用于网页中元素，如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中，外部样式单保存在独立的文档中，网页通过一个特殊标签链接外部样式单。
名称CSS中的“层叠（cascading）”表示样式单规则应用于HTML文档元素的方式。具体地说，CSS样式单中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定，从而实现级联效果。
一，css四种引入方式
1：行内间引用
直接将css代码写在指定标签内部。
<!--第一种引入方式：--> <div style="color: darkred;font-size: 50px">hello kelvin</div>
2：内嵌式
在head标签内添加一个style标签，在style标签内写css代码。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p{
color:#f40;
background-color: gray;
}
a{
text-decoration: none;
}
</style>
</head>
3：导入式
导入外部样式单的功能与链接外部样式单的功能差不多，只是语法上存在差别。导入外部样式单主要通过@import方式导入CSS文件，有两种导入方式 。
a、在style元素中导入CSS文件
<style type="text/css">
@import "CSS样式文件的绝对地址";
@import url("样式文件的绝对地址");
</style>
url可省略，所以只需指定样式单地址即可，在标准CSS的语法中，@import还有sMedia属性，用于指定CSS的可作用的设备，目前还没得到广泛的支持，所以sMedia可以不写。
b、在CSS文件中再导入CSS文件
/*某个CSS文件*/
@import "另一个CSS文件的地址";
.test{
width: 100px;
height: 100px;
line-height: 20px;
background-color: red;
}
在CSS文件中再导入CSS文件，会给服务器造成太大的文件请求压力，最好不要这样做。 @import是由CSS提供的一种导入样式的方式，当页面被加载时，@import会等到页面全部被加载完成时再加载CSS样式，所以在页面还未加载完成期间，页面还没有CSS样式效果，会导致“屏闪”，通过@import导入的CSS样式是无法用DOM去控制的。
4：链接式
就是将一个.css文件引入到HTML文件中，但它与导入式不同的是链接式使用HTML规则引入外部CSS文件，它在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件。
<link type="text/css" rel="stylesheet" href="CSS样式文件的地址">
**必须有href属性，用于指定需要引入的CSS文件的路径 。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。
使用CSS样式时，尽量将CSS代码与HTML代码分离，css的引入最好使用链接式，即最好使用引入外部CSS文件的方式。
二，css选择器
1：基本选择器
1：* 表示匹配所有标签
例：*{
color: red;
}
效果：所有标签内容字体颜色变红。
2：标签名 表示匹配指定名称的标签
例：p{
color:red;
}
效果：所有p标签内的字体颜色变红。
3："#"+id 表示匹配指定id的标签。
例：#div1{
color: red;
}
效果：id名为div1的标签内容字体颜色变红。
4："."+class名 表示匹配指定类名的标签。
例：.class1{
color: red;
}
效果：class名为class1的标签内容字体颜色变红。
注：基本选择器可以组合使用。例如：div.div1{color：red} 选择div标签中id为div1的标签。
2：组合选择器
E,F表示基本选择器
1：E,F（并列选择器） 表示筛选E和F两个或两类标签，对其进行同样的操作。
例： p,#div1{
color:green;
}
效果：p标签和id为div1的标签内容字体颜色变红。
2：E F（后代选择器）表示筛选E下面的F标签。
例： div .goods{
color:green;
}
效果：div标签内部的class名为goods的标签内容字体颜色变红。
3：E>F （父子选择器） 筛选E的下一级的F标签
例： div>.goods{
color:green;
}
效果：div标签下一级的class名为goods的标签内容字体颜色变红。
4：E+F（毗邻选择器） 筛选紧随E之后的同级元素F
例:.div1>.div2{
color: red;
}
效果：只会选择class=div1子代的class=div2的标签。
注意（嵌套规则）：
1：块级标签可以嵌套块级标签和行级标签，但是行级标签只能嵌套行级标签。
2：特殊的块级标签只能嵌套行级标签，不能嵌套块级标签。h* p dt
3：li内可以嵌套div
4：块级标签与块级标签并列，行级标签与行级标签并列。
3：属性选择器
E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。） p[title] { color:#f00; }
E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td[class~=”name”] { color:#f00; }
E[attr^=val] 匹配属性值以指定值开头的每个元素 div[class^="test"]{background:#ffff00;}
E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}
E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}
4：伪类
CSS伪类是用来给选择器添加一些特殊效果。
anchor伪类：专用于控制链接的显示效果
a:link（没有接触过的链接）,用于定义了链接的常规状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
伪类选择器 : 伪类指的是标签的不同状态:
a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
示例：当鼠标移入div盒子内，上半部分背景色变红。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#outer{
width: 100px;
height: 200px;
background-color: green;
}
#top{
width: 100px;
height: 100px;
background-color: green;
}
#bottom{
width: 100px;
height: 100px;
background-color: green;
}
#outer:hover #top{
background-color: red;
}
</style>
</head>
<body>
<div id="outer">
<div id="top"></div>
<div id="bottom"></div>
</div>
</body>
</html>
before after伪类 ：
:before p:before 在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容
p:before 在每个 <p> 元素的内容之前插入内容 p:before{content:"hello";color:red}
p:after 在每个 <p> 元素的内容之前插入内容 p:after{ content:"hello"；color:red}
5：css优先级和继承
CSS优先级:
所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是： 1 内联样式表的权值最高 style=""-------------------1000； 2 统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－100 3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10 4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-1
按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。
CSS的继承性:
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {
color: #ff4400;
}
</style>
</head>
<body>
<p>hello</p>
</body>
</html>
p标签中的文字会继承body{color：#ff4400}，然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。
我们只需要给加个颜色值就能覆盖掉它继承的样式颜色。由此可见：任何显示申明的规则都可以覆盖其继承样式。
此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。
注意：
1、文内的样式优先级为1,0,0,0，所以始终高于外部定义。这里文内样式指形如<div style="color:red>blah</div>的样式，而外部定义指经由<link>或<style>卷标定义的规则。 2、有!important声明的规则高于一切。 3、如果!important声明冲突，则比较优先权。 4、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。 5、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。
三，css常用属性
1：颜色属性
*背景颜色*/ background:transparent; /*透视背景*/ background-image : url(/image/bg.gif); /*背景图片*/ background-attachment : fixed; /*浮水印固定背景*/ background-repeat : repeat; /*重复排列-网页默认*/ background-repeat : no-repeat; /*不重复排列*/ background-repeat : repeat-x; /*在x轴重复排列*/ background-repeat : repeat-y; /*在y轴重复排列*/ 指定背景位置 background-position : 90% 90%; /*背景图片x与y轴的位置*/ background-position : top; /*向上对齐*/ background-position : buttom; /*向下对齐*/ background-position : left; /*向左对齐*/ background-position : right; /*向右对齐*/ background-position : center; /*居中对齐*/
2：css文字属性
color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ font-style:itelic; /*文字斜体*/ font-variant:small-caps; /*小字体*/ letter-spacing : 1pt; /*字间距离*/ line-height : 200%; /*设置行高*/ font-weight:bold; /*文字粗体*/ vertical-align:sub; /*下标字*/ vertical-align:super; /*上标字*/ text-decoration:line-through; /*加删除线*/ text-decoration: overline; /*加顶线*/ text-decoration:underline; /*加下划线*/ text-decoration:none; /*删除链接下划线*/ text-transform : capitalize; /*首字大写*/ text-transform : uppercase; /*英文大写*/ text-transform : lowercase; /*英文小写*/ text-align:right; /*文字右对齐*/ text-align:left; /*文字左对齐*/ text-align:center; /*文字居中对齐*/ text-align:justify; /*文字分散对齐*/ vertical-align属性 vertical-align:top; /*垂直向上对齐*/ vertical-align:bottom; /*垂直向下对齐*/ vertical-align:middle; /*垂直居中对齐*/ vertical-align:text-top; /*文字垂直向上对齐*/ vertical-align:text-bottom; /*文字垂直向下对齐*/
3：css边框空白
padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/ padding-bottom:10px; /*下边框留空白*/ padding-left:10px; /*左边框留空白
4：css符号属性
list-style-type:none; /*不编号*/ list-style-type:decimal; /*阿拉伯数字*/ list-style-type:lower-roman; /*小写罗马数字*/ list-style-type:upper-roman; /*大写罗马数字*/ list-style-type:lower-alpha; /*小写英文字母*/ list-style-type:upper-alpha; /*大写英文字母*/ list-style-type:disc; /*实心圆形符号*/ list-style-type:circle; /*空心圆形符号*/ list-style-type:square; /*实心方形符号*/ list-style-image:url(/dot.gif); /*图片式符号*/ list-style-position: outside; /*凸排*/ list-style-position:inside; /*缩进*/
5：css链接属性
a /*所有超链接*/
a:link /*超链接文字格式*/
a:visited /*浏览过的链接文字格式*/
a:active /*按下链接的格式*/
a:hover /*鼠标转到链接*/
鼠标光标样式：
链接手指 CURSOR: hand
十字体 cursor:crosshair
箭头朝下 cursor:s-resize
十字箭头 cursor:move
箭头朝右 cursor:move
加一问号 cursor:help
箭头朝左 cursor:w-resize
箭头朝上 cursor:n-resize
箭头朝右上 cursor:ne-resize
箭头朝左上 cursor:nw-resize
文字I型 cursor:text
箭头斜右下 cursor:se-resize
箭头斜左下 cursor:sw-resize
漏斗 cursor:wait
光标图案(IE6) p {cursor:url(“光标文件名.cur”),text;}
6：css框线一览表
border-top : 1px solid #6699cc; /*上框线*/ border-bottom : 1px solid #6699cc; /*下框线*/ border-left : 1px solid #6699cc; /*左框线*/ border-right : 1px solid #6699cc; /*右框线*/ 以上是建议书写方式,但也可以使用常规的方式 如下: border-top-color : #369 /*设置上框线top颜色*/ border-top-width :1px /*设置上框线top宽度*/ border-top-style : solid/*设置上框线top样式*/ 其他框线样式 solid /*实线框*/ dotted /*虚线框*/ double /*双线框*/ groove /*立体内凸框*/ ridge /*立体浮雕框*/ inset /*凹框*/ outset /*凸框*/
7：css边界样式
margin-top:10px; /*上边界*/ margin-right:10px; /*右边界值*/ margin-bottom:10px; /*下边界值*/ margin-left:10px; /*左边界值*/
8：最常用！
一：字体
1 字体样式{font:font-style font-variant font-weight font-size font-family}
2 字体类型{font-family:"字体1","字体2","字体3",...}
3 字体大小 {font-size:数值|inherit| medium| large|larger| x-large| xx-large| small| smaller| x-small| xx-small}
4 字体风格{font-style:inherit|italic|normal|oblique}
5 字体粗细 {font-weight:100-900|bold|bolder|lighter|normal;}
6 字体颜色 {color:数值;}
7 阴影颜色{text-shadow:16位色值}
8 字体行高 {line-height:数值|inherit|normal;}
9 字间距 {letter-spacing:数值|inherit|normal}
10 单词间距{word-spacing:数值|inherit|normal}
11 字体变形{font-variant:inherit|normal|small-cps }
12 英文转换{text-transform:inherit|none|capitalize|uppercase|lowercase}
13 字体变形 {font-size-adjust:inherit|none}
14 字体{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal|semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}
15 行间距 {line-height:数值|inherit|normal;}
16 文本修饰{text-decoration:inherit|none|underline|overline|line-through|blink}
17 段首空格 {text-indent:数值|inherit}
18 水平对齐{text-align:left|right|center|justify}
19 垂直对齐{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
20 书写方式{writing-mode:lr-tb|tb-rl}
二：背景样式
1 背景颜色{background-color:数值}
2 背景图片{background-image: url(URL)|none}
3 背景重复{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4 背景固定{background-attachment:fixed|scroll}
5 背景定位 {background-position:数值|top|bottom|left|right|center}
6 背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置}
三：框架样式(BoxStyle)
1 边界留白{margin:margin-top margin-right margin-bottom margin-left}
2 补 白{padding:padding-top padding-right padding-bottom padding-left}
3 边框宽度{border-width:border-top-width border-right-width border-bottom-widthborder-left-width}
宽度值：thin|medium|thick|数值
4 边框颜色{border-color:数值数值数值数值} 数值：分别代表top、right、bottom、left颜色值
5 边框风格{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
6 边 框{border:border-width border-style color}
上边框{border-top:border-top-width border-style color}
右边框{border-right:border-right-width border-style color}
下边框{border-bottom:border-bottom-width border-style color}
左边框{border-left:border-left-width border-style color}
7 宽 度 {width:长度|百分比| auto}
8 高 度 {height:数值|auto}
9 漂 浮{float:left|right|none}
10 清 除{clear:none|left|right|both}
四：分类列表
1 控制显示{display:none|block|inline|list-item}
2 控制空白{white-space:normal|pre|nowarp}
3 符号列表{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}
4 图形列表{list-style-image:URL}
5 位置列表{list-style-position:inside|outside}
6 目录列表 {list-style:目录样式类型|目录样式位置|url}
7 鼠标形状{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}
