正文

CSS 概览（CSS2.1）更新时间2014-0406

IP云
IP云V管理员/5 阅读
10/03
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

CSS和HTML结合

<link rel="stylesheet" type="text/css" href="sheet1.css" media="all" />

其中得到广泛支持的三个媒体类型：all、screen和print，可以通过逗号同时设置多个媒体类型，例如"screen,print"。

rel是relation的意思，还可以设置为"alternate stylesheet"作为候选样式表，只有在用户选择这个样式表的时候才会显示。

link还有一个title属性：如果为一个rel为stylesheet的link指定了title属性，则该样式表作为首选样式表；

指定多组首选样式表，那么只会其中的一个作为真正的首选样式表，另外的会被忽略，至于是哪一个作为真正的首选样式表，无法确定。

<style type="text/css">
@import url(sheet2.css) all;
@import url(http://www.test.com/c/a.css) print;
body{color:red;}
</style>

CSS要求@import指令出现在样式表的其他规则之前，如果出现在其他规则之后则会被忽略（但windows平台的IE不会忽略任何@import指令）。

另外还有些浏览器本身的限制：IE有个CSS 32样式限制BUG，排在第32个以及之后的<style><link>或者@import将会被忽略。

尽量避免使用@import，IE下LINK可能会导致@import加载的阻断；还可能导致资源文件下载顺序被打乱，例如后声明的<script>却提前于@import中的CSS被加载了；

在IE中，如果因为加载 <script>导致的LINK中的@import阻塞加载，那这时会因为CSS未加载完全，IE不会在页面渲染任何内容，导致用户体验极差。

选择器

元素选择器 html{padding:0px;margin:0px;}

选择器分组 h1,p{color:#444;}

通配选择器 *{color:green;}

类选择器 .warning{font-style:italic;}p.warning{font-style:italic;}

多类选择器 .warning.uragent{color:red;}p.warning.uragent{color:red}/* 同时包含这两个类名的元素，类名的顺序不限，IE6只识别多类中的最后一个类 */

ID选择器 #first-w{color:red;}/* 类选择器和ID选择器可能是区分大小写的，取决于文档语言，例如HTML和XHTML的类和ID区分大小写 */

后代选择器 ul ol em{color:red;}/* ul和ol元素之间的层次间隔可以是无限的 */

CSS2引入了属性选择器，IE6不支持属性选择器，IE7支持所有CSS2.1属性选择器，还支持一些CSS3属性选择器。

简单属性选择器 h1[class][title]{color:red;}/* 存在class属性且存在title属性的h1元素的文本都为银色 */

根据具体属性值 a[href="#"]{color:red;}

以某属性值开头 p[class^="fix"]{color:red;}

以某属性值结束 p[class$="fix"]{color:red;}

属性值包含子串 p[class*="fix"]{color:red;}

根据部分属性值选择 p[class~="waring"]{color:red;}/* 属性值中用空格分隔，存在waring的p元素 */

特性属性选择器 p[class|="fix"]{color:red;}/* class为fix或者fix-开头的p元素 */

子元素选择器 h1>strong{color:red}/* strong元素的父元素为h1时才显示为红色 */

选择相邻兄弟元素 h1+p{color:red;}/* h1和p有共同的父元素，p紧接着出现在h1之后 */

伪类（CSS1） :link  :visited ，:link应该标记的是未访问的链接，但有的会标记访问的和未访问的所有链接。

动态伪类（CSS2） :focus  :hover  :active ，动态伪类可以应用到任何元素。

支持程度：IE6只允许动态伪类选择超链接，IE7支持所有元素应用:hover但不支持对表单元素应用:focus样式。

伪类的组合在IE6中也无法被支持，例如  a:link:hover{}  在IE6中相当于 a:hover

静态伪类（CSS2）  em:first-child{color:red;} /* 会匹配在父元素中作为第一个元素的em */

伪元素选择器（CSS2）会在指定位置添加伪元素进行修饰：

p:first-letter{color:red;} 向文本的第一个字母添加特殊样式。

p:first-line{color:red;} 向文本的首行添加特殊样式。

 h2:before{content:"}}";color:red;} 在元素之前插入生成的内容，并设置样式。

 h2:after{content:url(logo.gif);color:red;}  在元素之后插入生成的内容，并设置样式。

  • 如果:before或:after选择器的主体是行内素，则display属性只接受值none和inline，所有其他值都处理为inline。
  • 通过content还可以指定插入属性值：  a[href]:after{content:" [" attr(href) "] ";}

权重优先级

选择器中给定的各个元素和伪元素：0,0,0,1

选择器中给定的各个类属性值、属性选择或伪类：0,0,1,0

选择器中给定的各个ID属性值：0,1,0,0

结合符和通配符选择器对权重没有贡献。

div#sidebar *[href] {color:red}

如上例子的特殊性为：0,1,1,1。

每个内联样式的特殊性都是1,0,0,0（为内联样式保留一位是CSS2.1才新增的，在CSS2中内联样式的特殊性是1,0,0，所以ID选择器很容易覆盖内联样式）。

CSS2.1中还可以声明一个样式为!important作为重要规则： p.desc{color:#09f !important;background:#eee !important;}

  • !important在IE6中有一个BUG：在同一对大括号中重复声明的样式，则IE6会忽略!important。

样式通常可以继承，例如颜色，继承的样式是没有特殊性的，因此例如用户代理的超链接样式就优先于继承过来的样式。

按照权重，样式声明排序：读者的重要声明>创作人员的重要声明 >创作人员的正常声明>读者的正常声明>用户代理声明。

伪类  :link{}:visited{}:hover{}:active{} 的顺序特别要注意，因为所有链接要么是未访问要么是已经访问。

对于继承，CSS2.1中有一个关键词是所有属性公有的，就是inherit。例如期望一个段落中的a标签的文字颜色和段落文字颜色相同，则可以：

p{color:#09f;}
p a{color:inherit;}

  • 注意IE67不支持CSS的inheirt，IE8、Opera支持有缺陷。

值和单位

颜色rgb(75%,1000%,-1000%)会被自动处理为rgb(75%,100%,0%)。

相对长度单位em：假设一个h1的字体大小为24px，那么如果设置该元素的左边距为1em，则实际值为24px。

相对长度单位ex的历史：很多用户代理的做法是取em的值的一半作为ex的值，随着时间的推移，更多的用户代理会使用ex的实际值（小写x的高度）。

字体

字体系列：CSS定义了5种通用字体系列：Serif、Sans-serif、Monospace字体、Cursive字体、Fantasy字体，理论上任何安装的字体都会落入这里的通用字体中。

font-size实际上相当于为给定字体的em框提供一个大小，而不能保证实际显示的字符就是这种大小。

font-size除了可以使用larger和smaller来指定相对父元素的大小外，还可以通过百分数大小（和em的作用差不多）。

font-size是可以继承的，继承的是计算值而不是百分比。

font-variant只有两个非继承值：normal和small-caps，small-caps要求使用小型大写字母文本（有的浏览器直接显示为大写）。

font属性例如 h1{font:bold normal italic 24px Verdana,Arial;} 的前三个值可以采用任何顺序，后两个值必须存在且font-size必须在font-family之前。

line-height属性可以单独设置，也可以 h1{font:bold italic 200%/1.2 Verdana;} 通过斜线的方式描述。

重新定义font样式时，所有被忽略的值都会重置为默认值。

可以使用系统字体： .ca{font:caption;} ，此外还有caption、icon、menu等。

@font-face感兴趣可以去了解下，例如可以下载远程字体。

文本

text-indent属性可以为块级元素中的第一行进行缩进；该属性会继承；在CSS2.1之前，text-indent总是继承计算值，而不是声明值。

  • text-indent属性在IE67下可以作用于inline元素。
  • text-indent属性在IE67下会作用于替换元素（例如img元素）。

text-align属性可以为块级元素中的文本行进行水平对齐。

line-heigth属性在应用到块级元素时定义了元素中文本基线之间的最小距离，而不是一个绝对数值；

line-height属性并不影响替换元素的布局，不过确实可以应用到替换元素。

文本行中的每个元素都会生成一个内容区，这由字体的大小确定，这个内容区会生成一个行内框，line-height会增加或减少行内框的高度。

line-height的继承，line-height值从父元素继承时，要从父元素计算，而不是在子元素上计算；更好的办法是指定一个数作为缩放因子：

body{font-size:10px;}
div{line-height:1em;}/*10px*/
p{font-size:18px;}

如上的CSS会导致行间距太小，可以这么修改：

body{font-size:10px;}
div{line-height:;}/*这样值会根据每个元素的font-size计算得到*/
p{font-size:18px;}

  • vertical-align应用于行内元素和表单元格，一些WEB浏览器总把替换元素的底边放在基线上，基线下面的空间可能导致图像下面出现一段空白。

vertical-align使用百分比会根据元素的line-height值来计算。

vertical-align会影响行高，垂直对齐的文本并不会覆盖其他行中的文本，行框会足够大到包含行内最高行内框的顶端和最低行内框的底端。

如果为letter-spacing指定一个长度值，字符间隔则不会受text-align影响。

无法为word-spacing或letter-spacing定义一个可继承的缩放因子来取代计算值（像line-height那样），因此可以：

p{letter-spacing:0.25em;}
small{font-size:50%;letter-spacing:0.25em;}

text-decoration可以一次指定多个修饰：a:link{text-decoration:underline overline;} ，该属性不继承。

white-space处理空白符，其中的值pre-wrap和pre-line是CSS2.1中新增加的。

white-space的nowrap不允许自动换行。

基本视觉格式化

宽度，边框，内边距，外边距中，只有外边距可以为负数。

如果垂直格式化的高度小于显示内容所需的高度，浏览器可能会向元素增加一个滚动条。

百分比高度的问题：一个正常流元素的height设置为一个百分数，这个值会根据包含块设置的高度进行调整，如果包含块没有显示声明高度，则百分比高度重置为auto。

垂直相邻外边距在元素没有内边距和边框的情况下会合并。

如果向行内的替换元素应用外边距，会影响行高。

CSS2.1规定元素的背景是内容、内边距和边框区的背景；边框宽度不能指定为百分数。

  • CSS2中规定了透明边框transparent，在IE6中不支持，IE6会根据元素的color值来设置边框颜色。

background-attachment可以设置值为scroll或fixed，如果为fixed则可以固定显示。

浮动和定位

浮动元素的外边距不会合并。

浮动元素会生成块级框，即使元素本身是行内元素。

  • CSS2.1澄清了浮动元素的行为的一个方面：浮动元素会延伸，从而包含其所有后代浮动元素（而CSS先前版本没有明确指出会发生什么情况）。
  • CSS2.1说明了一个规则：行内框与一个浮动元素重叠时，其边框和背景和内容都在该浮动元素之上显示。
  • CSS2.1说明了一个规则：块框与一个浮动元素重叠时，其边框和背景在该浮动元素下面显示，而内容在浮动元素上面显示。
  • 使用了clear进行清除的元素的上外边距可能会被调整，因此就算设置了margin-top也可能紧贴着上面浮动元素（可以通过对浮动元素设置margin-bottom设置距离）。
  • 在position:relative中，CSS2.1使用外边距来完成偏移计算。
  • 绝对定位的存在宽度值的元素，如果左右外边距都设置为auto，则元素会水平居中，这与正常流中的auto外边距居中行为基本上一样。
  • 绝对定位元素的上下外边距设置为auto的时候，可以实现垂直居中，但IE67不支持。
  • 绝对定位元素会恰当收放，根据内容调整大小（如果未设置宽度的话）。
  • 关于IE6下绝对定位的一个纯CSS实现思考：http://css-discuss.incutio.com/wiki/Emulating_Fixed_Positioning

* html{overflow: hidden;position: relative;left: 0px;top: 0px;width: 100%;height: 100%;}* html body{width: 100%;height: 100%;overflow: auto;padding: 0px;margin:0px;}* html .fixed{position: absolute;}

布局

固定的左右分栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{margin: 0px; padding: 0px;}
#c{width: 760px; margin: 0px auto;}
#header{height: 100px; background: #eee;}
#main{
float: left;
padding: 10px 0px;
background: #09f url(img.gif) repeat-y right top;
}
#content{float: left; width: 560px; background: blue;}
#sidebar{
float: right; width: 200px;
background: orange url(img.gif) repeat-y right top;
}
#footer{height: 80px; clear: both; background: #444;}
</style>
</head>
<body>
<div id="c">
<div id="header">页头</div>
<div id="main">
<div id="content">主内容</div>
<div id="sidebar">侧边栏</div>
</div>
<div id="footer">页尾</div>
</div>
</body>
</html>

自适应的左右分栏，注意IE6计算百分比的时候是进行四舍五入的，因此可能出现两栏总宽度大于100%的情况，可以使用clear来FIX：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{margin: 0px; padding: 0px;}
#c{margin: 10%;}
#header{height: 100px; background: #eee;}
#main{
padding: 0px 0px 10px;
float: left; width: 100%;
background: #09f url(http://1.su.bdimg.com/skin/38.jpg) repeat-y 70% 0; /* 假设图片宽度为1600px */
overflow: hidden; /* 防止IE6在宽度大于容器宽度的时候撑开 */
}
#content{float: left; width: 70%; background: blue;}
#sidebar{
float: right; width: 30%;
background: orange url(http://1.su.bdimg.com/skin/38.jpg) repeat-y -1120px 0; /* 这里使用绝对值进行背景伪造 */
*clear:right; /* IE6在计算百分比的时候，如果左右栏正好都四舍五入计算成五入，就会出现宽度大于100%的情况 */
}
#footer{height: 80px; clear: both; background: #444;}
</style>
</head>
<body>
<div id="c">
<div id="header">页头</div>
<div id="main">
<div id="content">主内容</div>
<div id="sidebar" style="height:100px;">侧边栏</div>
</div>
<div id="footer">页尾</div>
</div>
</body>
</html>

一栏固定一栏浮动，固定宽度的内容如果先在HTML中输出，则可以这么实现（浮动固定宽度栏，然后设置自动宽度栏的margin，注意IE6的3px BUG）：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{margin: 0px; padding: 0px;}
#c{margin: 10%;}
#header{height: 100px; background: #eee;}
#main{
padding: 0px 0px 10px;
float: left; width: 100%;
background: #09f;
}
#content{
background: blue;
margin-left: 200px;
}
#sidebar{
float: left; width: 200px;
background: orange;
}
/* FIX IE6下的3px BUG */
*html #sidebar{margin-right: -3px;}
*html #content{margin-left: 0px;} #footer{height: 80px; clear: both; background: #444;}
</style>
</head>
<body>
<div id="c">
<div id="header">页头</div>
<div id="main">
<div id="sidebar" style="height:100px;">侧边栏</div>
<div id="content" style="height:200px;">主内容</div>
</div>
<div id="footer">页尾</div>
</div>
</body>
</html>

一栏固定一栏浮动，还可以通过设置主面板100%宽度并设置一个负的等同于侧边栏宽度的margin，然后再在内部添加一个修正的margin来完成：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{margin: 0px; padding: 0px;}
#c{margin: 10%;}
#header{height: 100px; background: #eee;}
#main{
padding: 0px 0px 10px;
float: left; width: 100%;
background: #09f;
overflow: hidden;
}
#content{
float: left; width: 100%;
margin-left: -200px;
}
#contentin{
margin-left: 200px;
background: blue;
}
#sidebar{
float: right; width: 200px;
background: orange;
} #footer{height: 80px; clear: both; background: #444;}
</style>
</head>
<body>
<div id="c">
<div id="header">页头</div>
<div id="main">
<div id="sidebar" style="height:100px;">侧边栏</div>
<div id="content"><div id="contentin" style="height:200px;">主内容</div></div>
</div>
<div id="footer">页尾</div>
</div>
</body>
</html>

布局中的min-width、max-width、min-height、max-height在IE6中是不支持的，

可以通过IE的expression来模拟，例如： #content{_width:expression( document.body.clientWidth < 400 ? "400px" : "100%" );}

中间一栏自动宽度，左右两栏固定宽度的三列布局，可以通过中栏预留margin，左右两栏进行相对定位并设置负的margin来解决（注意IE6对于100%margin的理解）：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{margin: 0px; padding: 0px;}
#c{margin:0 10%;}
#header{height: 100px; background: #eee;}
#main{
padding: 0px 100px 0px 200px;
background: #09f;
position: relative;
overflow: hidden;
zoom:1;
}
#content{
float: left; width: 100%;
background: yellow;
}
#sidebar,#sidebar2{float: left;position: relative;}
#sidebar{background: orange;}
#sidebar2{background: blue;}
#sidebar{
width: 200px;
margin-left: -100%; /* IE6认为这里的-100%包含父元素的padding */
left:-200px;
_left:100px; /* 因为父容器的水平padding共300px，因此left需要-200+300=100 */
}
#sidebar2{
width: 100px;
margin-left: -100px;
left: 100px;
} #footer{height: 80px; clear: both; background: #444;}
</style>
</head>
<body>
<div id="c">
<div id="header">页头</div>
<div id="main">
<div id="content"><div id="contentin" style="height:200px;">主内容</div></div>
<div id="sidebar">侧边栏</div>
<div id="sidebar2">侧边栏2</div>
</div>
<div id="footer">页尾</div>
</div>
</body>
</html>

垂直居中多行文本，在固定高度容器中（现代浏览器下通过display:table-cell实现，IE67通过添加一个高度100%的inine元素居中来定位实现）：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{margin: 0px;padding: 0px;}
#c{margin:0 100px;}
#header{height: 100px; background: blue;}
#footer{height: 80px; clear: both; background: orange;}
.valign{
height: 200px;
display: table-cell;
vertical-align: middle;
}
.valign .fixie67valigni{
display: inline; /* IE67下display为inline的元素依然可以使用高宽 */
width: 0;
height: 100%;
vertical-align: middle;
zoom:1;
}
.valign .fixie67valignc{
*display: inline;
*vertical-align: middle;
*zoom:1;
}
</style>
</head>
<body>
<div id="c">
<div id="header">页头</div>
<div class="valign">
<div class="fixie67valigni"></div>
<div class="fixie67valignc">
这里演示了多行文字在容器中的垂直居中的问题，未定义容器高度的情况下垂直居中很容易实现，
而定义了高度的容器的垂直居中需要这样实现。
</div>
</div>
<div id="footer">页尾</div>
</div>
</body>
</html>

兼容

IE中的条件注释： <!--[if gt IE 6]><style>body{background:#09f;}</style><![endif]-->

IE6识别CSS *html body{background:red;}  body{_background:red;}

IE7识别CSS *+html body{background:red;}

IE67识别CSS body{*background:red;}

IE有个HasLayout的概念，IE中元素有个HasLayout专有属性，例如触发了HasLayout的容器中的文字就不会围绕左侧的浮动框，还例如触发HasLayout还能闭合浮动元素。

IE常见的私有属性

zoom定义比例缩放，触发Layout
word-break文字换行
word-wrap文字换行
text-overflow文字裁切添加省略号
cursor鼠标样式，实际上CSS3也有这个属性
filter滤镜，能实现各种效果

列表布局以及内容生成

list-style-type可以修改用于列表项的标志类型。

list-style-image可以为列表项设置图片，该样式会继承。

list-style-position可以设置列表项图标是inside还是outside。