CSS（Cascading Style Sheets）层叠样式表。
·传统HTML页面排版和显示效果设置方面的问题。
·引入CSS后：Html标记专门用于定义网页的内容，而是用CSS来设置其效果。
CSS分类：
内嵌样式（Inline Style）：以属性形式直接在HTML标记中给出，用于设置该标记所定义的信息效果。例如：
<body style ="background-color:#ccffee;">
<p style = "font-size:16px;color:red">第一段</p>
</body>
内部样式表（Internal Style Sheet）：在<head>标记中给出，可以同时设置多个标记所定义的信息效果。对当前页面有效，例如：
<html>
<head>
<style type = "text/css">
body{background-color:#ffeecc}
p.mystyle1{font-size:20px;font-color:blue}
p.mystyle2{font-size:40px;font-color:red;text-align:center}
</sty ......
CSS兼容性一直是大家头疼的问题，现在说说如何区分这几个浏览器，IE6、IE7、IE8和FF，IE8均指IE8正式版,版本号:8.0.6001.18702。
以颜色为例来说如何区分这几个浏览器：
.csshack{
color:#f00; /*firefox等对css支持好的浏览器 显示为红色*/
color:#00f\9; /*IE8可识别 覆盖上面规则 显示为蓝色*/
*color:#0f0!important; /*IE7可识别 覆盖上面规则 显示为绿色*/
*color:#000;/*_color:#000;*/ /*IE6可识别 覆盖上面规则 显示为黑色*/
}
这里的"\9"可以区别所有IE� ......
一、CSS 中长度与颜色
1、长度单位说明
in 英寸
cm 公分
mm 公里
cm 以目前字体高度为单位
ex 以小写字母高度为单位（大部分不支持）
pt 1pt/72英寸
pc 1pc/12pt
px 像素（推荐使用）
2、颜色单位： 说明
十六进制如：color:#ff0000
颜色名称如：color:red
三原色单位如：rgb(255,0,0)
一般最常用的是十六进制，三原色单位的原理【红（r）,绿（g）,蓝(b)】混合而成，每个值域在0－255之间
二、CSS 中的文字属性
font-style
normal 正常显示
italic 斜体
bold 粗体
font-size 像素字体大小 百分比字体大小
font-family 字体名称设置字体名称
font-variant
normal 正常显示
small-caps 将英文大小写字母写调为同宽
font-weight normal 正常显示
font属性简化的使用方法：
font:是否斜体是否同宽是否粗体大小字体名称
例如:font:italic bold 200 黑书；
三、CSS中的文本属性
color 十六进制颜色、英文名称颜色、三原色单位颜色
letter-spacing
normal 正常显示
长度 文本间隔
word-spacing
normal 正常显示
数字 单词间距
white-space
normal 文本自动处理换行
pre 换行和空白受保护
nowrap ......
1.区别IE和非IE浏览器
#tip {
background:blue; /*非IE 背景藍色*/
background:red \9; /*IE6、IE7、IE8背景紅色*/
}
2.区别IE6,IE7,IE8,FF
【区别符号】：「\9」、「*」、「_」
【示例】：
#tip {
background:blue; /*Firefox 背景变蓝色*/
background:red \9; /*IE8 背景变红色*/
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}
【说明】：因为IE系列浏览器可读「\9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。
3.区别IE6、IE7、Firefox (方法 1)
【区别符号】：「*」、「_」
【示例】：
#tip {
background:blue; /*Firefox背景变蓝色*/
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}
【说明】：IE7和IE6可读「*」(米字号)，IE6又可以读「_」(底线)，但是IE7却� ......
原文:http://www.52css.com/article.asp?id=1026
从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.
对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明.
1.div的垂直居中问题
vertical-align:middle;
将行距增加到和整个DIV一样高 line-height:200px;
然后插入文字，就垂直居中了。缺点是要控制内容不要换行。
2. margin加倍的问题
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;
例如：
<#div id=”imfloat”>
相应的css为
#IamFloat
{
float:left; margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/
}
3.浮动ie产生的双倍距离
#box{
float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动� ......
使用DIV+CSS构架好处不少，但也确实存在一些问题，现在让网页设计师最头疼的事莫过于DIV+CSS对浏览器的兼容性了，可能你用惯了IE6，做出来的东西没感觉到有多大异常，但是把同样的东西放到IE7里去看的话，就会发现很多问题，如果放到火狐浏览器里去看，结果更不尽人意。
一个页面从制作的开始就决定了他要使用的浏览器解析css模式，浏览器模式的不同，就造成了各个浏览器对页面显示的差异。浏览器解析css有两种模式,quirks mode和strict mode,目前正在使用的浏览器这两种模式都支持，在doctype声明中, 没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用quirks mode呈现，其他的则使用strict mode解析。
这两种模式最大的不同就是提现在对盒模式的解释上。什么是盒模式？这是针对块级元素说的，这里简单说一下，说白了就是把块级元素想像成一个装东西的盒子，而margin,padding,border,width这些css属性构成了盒模式。而区别就是产生在width属性上。
在strict mode中：
width是内容宽度 ，也就是说,元素真正的宽度 = margin-left + border-left-width + ......
最新文章 : css