css基础
CSS简介
CSS（Cascading Style Sheets，层叠样式表、样式表），我们可以根据需要来修改某一个HTML元素的样式。
XHTML是结构标记：哪些地方是段落，哪些地方是项目符号，哪些地方是图片等
CSS是表现、格式：这个段落文本颜色、大小、对齐方式、边框、背景颜色等。
将结构和表现分离：
<style type=“text/css”>
p{
color:#FF0000;
font-size:24px;
font-family: 黑体;
background-color：#f0f0f0;
border:1px dashed #000000;
letter-spacing：10px;
}
</style>
<p>My name is bruce</p>
一个样式表<style></style>由多个样式规则构成；
一个样式规则由“选择器”和“格式声明语句”构成，如：h1就是选择器，{}中的语句就是格式定义；
选择器就是要定义样式的HTML元素(标记)；
格式声明语句放在{}中，{}中由多个格式声明语句构成；比如：color:red;
格式语句由“属性名称”和“属性值”构成，属性名称和属性值间用冒号隔开，每个格式语句必须以分号结束；
CSS选择器：选择HTML标记加样式
一、 基本选择器
（1）通用选择器(*)
格式：*{font-size:24px;}
说明：通用选择器(*)，将匹配所有的HTML标记。
注意：通用选择器(*)，IE6不支持，建议尽量少用。
（2）标签选择器，对应于所学的HTML标记
格式：h1{color:#FF0000;}
举例： h2{color:#FF0000;}
p{font-size:14px;line-height:150%;color:#9900CC;}
li{color:#0000ff;text-decoration:underline;cursor:pointer;}
（3）类样式：就是给一类HTML元素添加样式，类样式以“.”开头。(使用最多的样式)
可以同时给多个HTML元素增加class属性，class属性的值可以一样。
<div class=“news”>Welcome to Guangzhou</div>
<p class=“news”>这是一个段落</p>
<style type=“text/css”>
. news{ color:#FF0000; font-size:24px; }
</style>
（4）id选择器：给标记特定id属性的HTML元素添加样式，id选择器必须以“#”开头。
HTML元素的id属性的值，必须唯一。
Id属性就相当于身份证号一样，不能重复；
HTML元素的id属性，一般是给JS使用；
<div id=“box”></div>
<style type=“text/css”>
#box{color:#FF0000;}
</style>
二、组合选择器
（1）多元素选择器：E,F,G,H{color:#FF0000;}
说明：同时给E元素、F元素、G元素、H元素增加样式，多个元素间用逗号隔开
body,div,ul,li,ol,dt,dd,p,form,a{ margin:0px; padding:0px; }
div.box,div#header,form{ color:#FF0000; }
div.box含义：class=“box”的<div>元素；
div#header含义：id=“header”的<div>元素；
（2）后代元素选择器
格式：E F{color:#FF0000;}
说明：E元素的所有后代的F元素，增加样式，中间用空格隔开
. news li{width:400px;border:1px solid #006600;}
（3）子元素选择器
格式：E > F{color:#FF0000}
说明：匹配E元素的子元素F，增加样式
举例：.news > .title{background-color:#FFCC66;}
三、 伪类选择器：一般是给超级链接<a>增加CSS样式
一个链接有四种状态：正常状态(:link)、放上状态(:hover)、激活状态(:active)、访问过的状态(:visited)
（1）全局链接样式的设置
a:link,a:visited{color:#0000FF;text-decoration:none;}
a:hover{color:#990000;text-decoration:underline;}
（2）局部链接样式的设置：给一类链接加样式
<a class="a1" href="#">市区惊现老虎</a>
a.a1:link,a.a1:visited{color:#009900;font-weight:bold;font-size:18px;}
a.a1:hover{ color:#FF00FF;border:1px solid #996600;}
CSS尺寸属性
width：指定元素的宽度，单位是 px或%
height：指定元素的高度，单位是px或%
注意：任何HTML元素，都可以看成一个“盒子”，都具有width、height、padding(内边距)、margin(外边距)、border、backgroun(背景)。 比如：<b><i><font><span><div><table>等
CSS字体属性
font-family：设置字体
font-weight：粗细，取值：bold，相当于<b>
font-style：斜体，取值：italic，相当于<i>
font-size：文字大小
font：简写的形式，各个属性值间用空格隔开
body{ font-size:24px; font-family:黑体; font-weight:bold; font-style:italic; }
body{ font:bold italic 24px 黑体; }
CSS文本属性
Color：文本颜色，取值：英文单词、10进制、16进制；
text-align：文本的水平对齐，取值：left center right
text-decoration：文本修饰线，取值：none、underline、overline、line-through
text-indent：首行缩进，text-indent:36px;
letter-spacing：字间距
line-height：行高，line-height:150%; line-height:24px;
CSS列表属性
list-style-type：列表的类型，取值：none、disc、circle、square
list-style-image：列表的图片，list-style-image:url(images/li01.gif);
list-style-position：符号的位置，取值：outside(外)、inside(内)
list-style：简写形式
.li01{ list-style-type:none;list-style-image:url(images/li01.gif);list-style-position:outside; }
.li01{ list-style:url(images/li01.gif) disc outside;}
实现：单行文本在一个“容器”中垂直居中，使用的原理是，height和line-height值一样，就可以实现。
CSS背景属性
background-color：背景颜色
background-image：背景图片，格式：background-image:url(images/bg.gif)
background-repeat：背景平铺，取值：no-repeat(不平铺)、repeat(平铺)、repeat-x(水平方向)、repeat-y(垂直方向)
background-position：水平方向 垂直方向，
background-position：left|center|right top|center|bottom; //水平垂直都居中
background-position：50% 50%;
background-position：100px 200px; //背景图距离左边100px，距离顶边200px
background-attachment：当移动滚动条时，背景是固定(fixed)还跟着滚动(scroll)
background：简写形式
.box{ background-image:url(images/bg.gif); background-repeat:no-repeat;background-position:center center;}
.box{background:url(images/bg.gif) no-repeat center center;}
CSS清除和浮动
Float：使HTML元素向左或向右浮动，取值：left、right
浮动的元素，可以向左或向右浮动，直到碰到包围框的边上或者上一个浮动框的边上为止；
浮动的元素将脱离普通文档流，并且不再占用空间，浮动元素的层级要高于普通文档流中的元素。
浮动元素将生成块元素，不管它原来是什么元素(块元素、行元素)。换句话说，行内元素浮动后，将变成块元素，就可以设置width和height。
注意：行内元素<span>设置width和height是没有用的，行内元素主要是靠内容决定width和height。
Clear：清除上面的浮动特性，取值：left(左浮动)、right(右浮动)、both(两者)
（1）如何让包围元素从“视觉上”包住浮动元素呢？就需要在包围元素的最下边(浮动元素)加上一个清除浮动。
（2）清除浮动的后面的其它元素，都将恢复默认排版。
CSS盒子模型
每一个HTML元素，都可以看成一个“盒子”。
一个“盒子”具有：内容的宽或高、边框线、内边距、外边距。
一个“盒子”具有：width和height、border、padding、margin
CSS边框属性
border-left：设置元素的左边线，border-left:粗细 线型 颜色;
例如：border-left:2px solid #FF0000;
border-right：设置元素的右边线
border-top：设置元素的顶边框线
border-bottom：设置元素的下边框线
border：简写形式，同时设置四个边框线；
border:1px solid #FF0000; //同时设置四个边框线
线型的取值：
none：无边线；
solid：实线；
dashed：虚线；
dotted：点状态线
double：双线
CSS内填充(内边距)
padding-top：上内填充距离
padding-right：右内填充距离
padding-bottom：底内填充距离
padding-left：左内填充距离
padding：简写形式
padding：5px; //上右下左内填充分别为5px
padding：5px 10px; //上下分别为5px，左右分别为10px
padding：5px 10px 15px; //上填充5px，左右分别为10px，下填充为15px
padding：5px 10px 15px 20px; //顺序必须为：上右下左，上填充5px，右填充10px，下填充15px，左填充20px；
CSS外边距
margin-top：上外边距
margin-right：右外边距
margin-bottom：下外边距
margin-left：左外边距
margin：简写形式
margin:5px; //上右下左，外边距分别为5px
margin:5px 10px; //上下分别为5px，左右外边距分别为10px
margin:5px 10px 15px; //上外边距5px，左右外边距分别10px，下外边距15px
margin:5px 10px 15px 20px; //分别设置四个外边距，顺序是：上右下左
外边距合并的问题(怪异现象)
两个垂直块元素的上下外边距，会发生合并的问题，取其中较大的一个值。
行内元素、浮动元素、定位元素，外边距不会发生合并；
解决的方法：
（1）只能其中一个元素增加下外边距，另一元素的上外边距设置为0px；
（2）也就是在上下两个元素的中间，加一个100px高的空<div>
HTML引入CSS的方法
1、内嵌式
通过<style></style>标记来引入CSS代码，<style>一般放在<head>标记中；
<stype type=“text/css”>
body{
margin:0px;
padding:0px;
}
</style>
2、外链式：链接外部的CSS文件(.css)
通过<link>标记，来引入外部的CSS文件，<link>标记一般放在<head>标记中。
格式：<link href=“CSS文件路径” rel=“stylesheet” type=“text/css” />
href：指定外部CSS文件的路径和名称；
rel：当前文件与链入的文件的关系，取值：stylesheet；
例如：<link href=“css/public.css” rel=“stylesheet” type=“text/css” />
3、行内式
每一个HTML元素都有一个公共属性style，通过该属性可以直接给该元素添加样式，并且它的优先级最高。
<p style=“width:400px;height:300px;border:1px solid #444;padding:20px;”>这里是一个段落</p>
选择器优先级：行内样式 > ID选择器 > 类选择器 > 标签选择器
CSS继承和优先级
CSS继承性
内部元素将继承外部元素的样式，多个外部元素的样式，最终将叠加到内部元素上；
<body>是一个网页中最大的标记(容器)，它里面定义的样式，会被所有的子元素进行继承；
哪些CSS属性能被继承呢？
主要是CSS文本相关或CSS字体相关的属性，都会被继承。
Font-size、font-family、font-style、font-weight
Color、line-height、text-align、text-indent、letter-spacing、word-spacing、text-decoration等
提示：在继承过程中，是通过层层覆盖来实现相同属性值的替换。也就是说，距离“目标元素”越近，样式的优先级越高。
（2）多个选择器的优先级计算
假设，用1代表标签选择器，10代表类选择器，100代表ID选择器，1000代表行内样式
H2{color:#FF0000} 优先级 1
.news h2{color:#0000FF} 优先级 11
div.news h2{color:#00FF00} 优先级 12
div#news h2{color:#FFFF00} 优先级 102
CSS定位属性
position：元素定位，取值：static(静态定位)、fixed(固定定位)、relative(相对定位)、absolute(绝对定位)
left：设置元素距离左边多远；
right：设置元素距离右边多远；
top：设置元素距离上边多远；
bottom：设置元素距离下边多远；
Static(静态定位)
任何元素，默认情况下都是静态定位。
Fixed(固定定位)
固定定位，是相对于浏览器窗口(大小是一定的)，来进行的定位。
固定定位元素，将脱离普通文档流，并且不再占用空间，层级要高于普通文档中的元素。
固定定位元素，在没有指定定位坐标的前提下，将保持原来的形状和位置。
固定定位元素，是一个“块元素”，不管它原来是什么元素
Relative（相对定位）
相对定位，是相对于“它原来的自己”来进行的定位(偏移)。
相对定位，所占的空间依然保留，层级高于普通元素。
相对定位，在没有设置定位坐标前，将保持原来的形状和位置。
绝对定位(absolute)
绝对定位，是相对于它的祖先定位元素(上级元素是绝对定位元素或相对定位元素)，来进行的定位。如果一直往上层找定位元素，如果没有找到，相对于网页来进行定位。
绝对定位元素，不再占用空间，层级高于普通元素。
CSS兼容性
不兼容性：因为不同的浏览器厂商，对CSS的解析不一样，造成了同一个网页，在不同的浏览器下浏览的结果相差太多，这种现象叫“不兼容”。解决“不兼容”的办法，就是兼容性的调整。
解决不兼容性，大致三种方法：
（1） 常用的全局CSS属性设置
（2） 常用的兼容性设置
（3） CSS HACK
第一种：常用的全局CSS属性设置
（1）清除所有的标记的内外边距
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0}
（2）项目符号
ul,ol,li{list-style:none;}
（3）全局字体颜色设置
body{font-size:12px;color:#444;}
（4）常用标题的设置
h1,h2,h3,h4,h5,h6{font-size:100%}
h1{padding:11px 0 0; margin-bottom:4px;font:normal 20px/30px 黑体;text-align:center;}
h2 { padding:6px 0 0; margin-bottom:4px; font:normal 20px/30px 黑体; text-align:center; }
h3{font-size:12px}
h4{font-size:12px;font-weight:normal}
（5）全局链接
a{text-decoration:none;cursor:pointer}
a:link, a:visited {color:#004276}
a:hover{text-decoration:underline;color:#ba2636}
（6）图片
img{border:none;}
（7）浮动和清除
.float1{float:left;}
.float2{float:right}
.clear{clear:both;}
.blank10{height:10px;clear:both;}
（8）颜色
.red{color:#FF0000;}
.blue{color:#0000FF;}
.green{color:#00ff00;}
第二种：常用的兼容性设置
IETEST软件：可以测试IE6、IE7
（1）网页居中
IE5下的居中，应该是：text-align:center
Firefox下的居中，应该是：margin:0px auto;
body{font-size:12px;color:#444;background:url(../images/bg-body.gif) repeat-x #f1f1f1;text-align:center;}
.box{width:973px;margin:0px auto;text-align:left;}
（2）单行内容垂直中齐
Div{height:80px;line-height:80px;}
（3）IE中元素浮动时，margin左右加倍的问题
解决办法：Display:inline;
（4）实现1px高度的<div>
在IE6下解决办法：overflow:hidden; //超出1px外的部分全部隐藏掉
第三种：CSS HACK简介
CSS HACK，针对不同浏览器，编辑不同的CSS代码的过程，就叫CSS HACK。
（1）CSS属性的HACK：
div{
background-color：#FF0000; //所有浏览器都支持
*background-color：#00FF00; //ie6和IE7支持
_background-color：#0000FF; //IE6认识
}
（2）CSS选择器的HACK(了解一下)
IE7浏览器能识别
*+html div{
}
*html div{
Background-color:#FF0000;
}
注意：CSS HACK虽然可能解决一些浏览器兼容的问题，但必竟不是W3C的规范，因此尽量少用，如果实在调试不过去，偶尔用一下可以。
