CSS技巧集锦

CSS tips and tricks

原文出处：www.456bereastreet.com
原文发表时间：2005年3月15日
原文作者：Roger Johansson
作者简介：住在瑞典哥德堡，1994年开始接触和参与web设计，456 Berea Street是他的住址，因此采用这个名字作为他的个人主页域名

最近,经常有朋友问我一些工作中遇到的CSS问题。他们总是不能很好的控制CSS，影响CSS的效率发挥。我来分析总结一下错误所在，帮助大家更加容易使用CSS。

本文总结了我开始使用CSS布局方法以来所有的技巧和兼容方案，我愿意把这些与你分享，我会重点解释一些新手容易犯的错误(包括我自己也犯过的)，如果你已经是CSS高手，这些经验技巧可能已经都知道，如果你有更多的，希望可以帮我补充。

一.使用css缩写使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。

二. 明确定义单位，除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=\"100\"，但是在CSS中，你必须给一个准确的单位，比如： width:100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。

三.区分大小写当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。

class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。

四.取消class和id前的元素限定当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，而clas s可以在页面中多次使用。你限定某个元素毫无意义。例如：

div#content { /* declarations */ } fieldset.details { /* declarations */ } 可以写成

#content { /* declarations */ } .details { /* declarations */ } 这样可以节省一些字节。

五.默认值通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样：

* { margin:0; padding:0; } 六.不需要重复定义可继承的值 CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。

七.最近优先原则如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码

Update: Lorem ipsum dolor set

在CSS文件中，你已经定义了元素p，又定义了一个class\"update\"

p { margin:1em 0; font-size:1em; color:#333; } .update { font-weight:bold; color:#600; }

这两个定义中，class=\"update\"将被使用，因为class比p更近。你可以查阅W3C的《 Calculating a selector’s specificity》 了解更多。

八.多重class定义一个标签可以同时定义多个class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10 px的边框。

.one{width:200px;background:#666;} .two{border:10px solid #F00;} 在页面代码中，我们可以这样调用

这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。

九.使用子选择器(descendant selectors) CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码：

Item 1

Item 1
Item 1
这段代码的CSS定义是：

div#subnav ul { /* Some styling */ } div#subnav ul li.subnavitem { /* Some styling */ } div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ } div#subnav ul li.subnavitemselected { /* Some styling */ } div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ } 你可以用下面的方法替代上面的代码

Item 1
Item 1
Item 1
样式定义是：

#subnav { /* Some styling */ } #subnav li { /* Some styling */ } #subnav a { /* Some styling */ } #subnav .sel { /* Some styling */ } #subnav .sel a { /* Some styling */ } 用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。

十.不需要给背景图片路径加引号为了节省字节，我建议不要给背景图片路径加引号，因为引号不是必须的。例如：

background:url(\"images/***.gif\") #333; 可以写为

background:url(images/***.gif) #333; 如果你加了引号，反而会引起一些浏览器的错误。

十一.组选择器(Group selectors) 当一些元素类型、class或者id都有共同的一些属性，你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。

例如：定义所有标题的字体、颜色和margin，你可以这样写：

h1,h2,h3,h4,h5,h6 { font-family:\"Lucida Grande\",Lucida,Arial,Helvetica,sans-serif; color:#333; margin:1em 0; } 如果在使用时，有个别元素需要定义独立样式，你可以再加上新的定义，可以覆盖老的定义，例如：

h1 { font-size:2em; } h2 { font-size:1.6em; } 十二.用正确的顺序指定链接的样式当你用CSS来定义链接的多个状态样式时，要注意它们书写的顺序，正确的顺序是：:link :visited :hover :active。抽取第一个字母是\"LVHA\"，你可以记忆成\"LoVe HAte\"(喜欢讨厌)。为什么这么定义，可以参考Eric Meyer的《Link Specificity》。

如果你的用户需要用键盘来控制，需要知道当前链接的焦点，你还可以定义:focus属性。:focus属性的效果也取决与你书写的位置，如果你希望聚焦元素显示:hover效果，你就把:focus写在:hover前面；如果你希望聚焦效果替代:hover效果，你就把:focus放在:hover后面。

十三.清除浮动一个非常常见的CSS问题，定位使用浮动的时候，下面的层被浮动的层所覆盖，或者层里嵌套的子层超出了外层的范围。

通常的解决办法是在浮动层后面添加一个额外元素，例如一个div或者一个br，并且定义它的样式为clear: both。这个办法有一点牵强，幸运的是还有一个好办法可以解决，参看这篇文章《How To Clear Floats Without Structural Markup》(注：本站将尽快翻译此文)。

上面2种方法可以很好解决浮动超出的问题，但是如果当你真的需要对层或者层里的对象进行clear的时候怎么办？一种简单的方法就是用overflow属性，这个方法最初的发表在《Simple Clearing of Floats》，又在《Clearance》和《Super simple clearing floats》中被广泛讨论。

上面那一种clear方法更适合你，要看具体的情况，这里不再展开论述。另外关于float的应用，一些优秀的文章已经说得很清楚，推荐你阅读：《Floatutorial》、《Containing Floats》和《Float Layouts》

十四.横向居中(centering) 这是一个简单的技巧，但是值得再说一遍，因为我看见太多的新手问题都是问这个：CSS如何横向居中？你需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样：

你可以这样定义使它横向居中：

#wrap { width:760px; /* 修改为你的层的宽度 */ margin:0 auto; } 但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：用text-align属性。就象这样：

body { text-align:center; } #wrap { width:760px; /* 修改为你的层的宽度 */ margin:0 auto; text-align:left; } 第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。

十五.导入(Import)和隐藏CSS 因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如：

@import url(\"main.css\"); 然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法：

@import \"main.css\"; 这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。想了解@import语法的详细说明，可以看这里《centricle’s css filter chart》

十六.针对IE的优化有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。

1. 注释的方法 (a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector): html>body p { /* 定义内容 */ } (b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏) * html p { /* declarations */ } (c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用\"反斜线\"技巧： /* \\*/ * html p { declarations } /* */ 2.条件注释(conditional comments)的方法另外一种方法，我认为比CSS　Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。就象这样：

十七.调试技巧：层有多大？
当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用 border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。

另外一个经常出问题的属性是outline。outline看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。

十八.CSS代码书写样式
在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯。在经过不断实践后，我决定采用下面这样的书写样式：

selector1,
selector2 {
property:value;
}
当使用联合定义时，我通常将每个选择器单独写一行，这样方便在CSS文件中找到它们。在最后一个选择器和大括号{之间加一个空格，每个定义也单独写一行，分号直接在属性值后，不要加空格。

我习惯在每个属性值后面都加分号，虽然规则上允许最后一个属性值后面可以不写分号，但是如果你要加新样式时容易忘记补上分号而产生错误，所以还是都加比较好。

最后，关闭的大括号}单独写一行。

空格和换行有助与阅读。
bo-blog模版CSS中文注释

作者：g100870516

第一段body
body {
 font-size: 12px;
 font-family: Tahoma, Arial;
 background: #CFD7DB url(\'images/bg.jpg\') repeat-x;
 margin: 2px;
 padding: 0px;
 margin-bottom: 10px;
 text-align: center;
}
/*** body是整个网页的属性，font-size,background,margin 等这些代码都可以才css手册里查到用处，只不过有的解释的太专业，看了也是不明白。background这段中 #CFD7DB 是代表颜色，颜色代码可以用颜色吸取工具查到，url(\'images/bg.jpg\')是带表背静图片。看了我要改的那个风格的页面，背静图片自己改截下来，背静色是#5DC4F2，改代码覆盖图片 ***/
table {
 font-family: Tahoma, Arial;
 color: #000000;
 font-size: 12px;
}
/*** 这里改的是列表页面的字大小，改这个的时候，日历上面的年和月也变，-。- ，这里我不改***/
td{
 word-break: break-all;
}
/*** 这里是改英文单词换行那方面的，不需要改 ***/
a {
 text-decoration: none;
 color: #CC3333;
}
/*** 这里是 含有连接的文字的颜色，因为侧边框内的文字改了那里的颜色，有连接的颜色还是在这里改的，为了美观，建议改到那的时候回来改一下 ***/
a:hover {
 text-decoration: none;
 color:#CC3333;
}
/*** 连接文字 鼠标移动上去的时候变的颜色 ***/

hr {
 height: 1px;
 border: 0;
 border-top: 1px solid #CCCCCC;
}
/*** 这段第一次出现1px solid #CCCCCC这个代码，这个代码的意思就是描边，但我改了颜色没发现哪里变了，后面在说，只要是再后面 ***/
input.button {
 height: 20px;
 border: 1px solid #FFDCE9;
 border-top: 1px solid #FFDCE9;
 border-left: 4px solid #FFDCE9;
 color: #000000;
 background-color: #FFFFFF;
}
/*** 这里是搜索框内按扭的属性，height是按扭的高，border是按扭右边和下面的描边，top是上边，left是左边，color是字颜色， background-color是按扭的背静色，这些代码在下面就很常见了，而且大多数改的就是他们，这里我把边框颜色改为#FFDCE9，文字黑，背静白 ***/

select {
 font-family: Tahoma, Arial;
 font-size: 12px;  
 color: #564148;
 background-color: #FFFFFF;
 border: 1px solid #7F9DB9;
}
/**** 这里是下拉菜单的属性 这我改了文字颜色和描边颜色 **/

#wrapper {
 margin:0 auto;
 margin-top: 5px;
 width: 900px;
 /*position: relative;*/
 text-align: left;
}
/*** 这是整体页面的框架，margin-top 是整体和上面的距离，因为我插入的是5象素高的背景图片，所以这里不改。宽我改成900px，1024觉得有点宽.text-align是页面文字的位置，就是居中，左右对齐 ***/

#innerWrapper {
  background-image: url(\"images/warpperBg.jpg\");
 width: 100%;
}
/*** 这里我把背静颜色改为了图片，用的是background-image 代码 ***/

#header {
 background: #FFFFFF url(\'images/headerBg.jpg\') top no-repeat;
}
/*** 这里是 页面 最上面 头部的背静图片， 因为这个头部图片的 问题 我把页面的宽 又设成1001了，因为找不到 和背静融合的好的图片***/

#innerHeader {
 padding-top: 75px;
 height: 121px;
 vertical-align: bottom;
}
/*** 这里是 菜单以下部分和页面上边的距离，先改为75，121，一会改下面的时候，看图片再改，这些只要自己一点点试着改，达到最好效果就可以了***/

#footer {
  background: #FFFFFF url(\'images/footerBg.jpg\') top no-repeat;
 clear: both;
 padding-top: 19px;
 height: 79px;
 color: #92A05A;
}
/*** 这是最底部的属性，版权部分的背静颜色图片，高，字颜色，我改了height，padding-top，这两个也是看着图片大小的效果定的 ***/

#footer a{
color: #0000FF;
font-weight: bold;
}
/*** 这里下面版权里作者的名字字体的颜色和加粗，加粗代码是 font-weight: bold  ***/

#innerFooter {
 padding: 20px;
 font-size: 12px;
 text-align: center;
 color: #000;
}
/*** 这是版权文字的高，字体大小，位置（左中右），颜色 ***/

.blog-header {
 padding: 0px;
 padding-left: 20px;
 padding-right: 20px;
}
/**** 这里是 BLOG名称和介绍 的位置（上下左右的距离） ***/

h1 {
 padding: 0px;
 margin: 0px;
 color: #2467AF;
 font-size: 34px;
 font-weight: bold;
}
/*** font-size是标题字体大小 ***/

.blog-desc {
  padding-top: 0px;
  padding-left: 120px;
 color: #841111;
}
/*** BLOG介绍的 位置，颜色***/

#menu {
  width: 100%;
 margin-top: 21px;
 height: 45px;
 background: url(\'images/menuBg.jpg\') repeat-x;
}
/*** 这里是 整个标题框的属性 位置和背静，因为我的背静此次选用的都是图片，所以位置很重要， 层次错一点就会出现空位，这里我上下改了好几次才吻合好 ***/

#menu li{
 list-style: none;
 width:80px;
 float: left;
 text-align: center;
 padding: 0px;
 margin: 0px;
}
/*** 这里是菜单按扭的属性，width这是每个的宽度，太宽了如果在后台天加新菜单的时候会变超出来，太窄了开关侧边栏那5个字也是问题。float是菜单左对齐，右对齐,同理，txt-align是每个按扭left,center,right。在这里要说一下float如果添center的话，菜单不会居中，而是竖直排列，我见过一个风格是用到竖直排列的，是菜单整体在头部的右侧***/

#menu a{
 padding-top: 25px;
 display: block;
 color: #564148;
 height: 20px;
 padding-left: 15px;
 padding-right: 4px;
}
/*** 这些是 首页，RSS文字的位置 颜色***/

到这里，我这次的整个页面部分的背静已经搞定了，是 body #innerWrapper #header #footer #menu 这几个的背静，组成的整体风格背静，下面再改的就是上面一层的东西，其实上面那些也是存在层和层的关系的，只不过直观的看来他们是拼在一起的。

#mainWrapper {
  background: #FAFAFA;
  margin-top: 15px;
 margin-left: 25px;
 margin-right: 30px;
}
/*** 这里改的是主体，也就是侧边板和右侧主内容框架的背静颜色，与上左右端距离，***/

.sidebar {
 padding-top: 0px;
 padding-left: 5px;
 float: left;
 width: 195px;
}
/*** 这是整个侧边框架的位置和宽度 ***/

.content {
 float: right;
 width: 100%;
 margin-left: -200px;
}
.content-wide {
 width: auto;
 margin-left: -200px;
}
.content-only {
 width: 100%;
 margin-left: -180px;
}
/*** 上面三个是主体内容框架，现在已经很美观，所以没有修改***/

.panel{
  border: 1px solid #86B9D6;
 padding:0px;
 margin-bottom: 10px;
}
/*** border是侧边栏中，每个框的描边，1px是代表1象素 后面是颜色***/

.panel h5 {
 text-align: left;
 color: #FFFFFF;
 font-size: 12px;
 font-weight: bold;
 padding-top: 4px;
 padding-left: 25px;
 margin:0px;
 height: 20px;
 background: url(\'images/modHeaderBg.jpg\') no-repeat left top;
 cursor: pointer;
 cursor: hand;
}
/*** 这些是侧边框的标题栏属性，字的颜色，标题框背静等，其他是位置结构 ***/

.panel-content{
  background: #FFFFD9;
 width: 181px;
 margin:0px;
 padding-left:5px;
 padding-top:5px;
 padding-bottom:5px;
 line-height: 120%;
 color:#92A05A;
 border-top: 1px solid #D8E7EE;
}
/*** 这里是框内的背静色 宽度 位置，框内字颜色等 ***/

#calendar {
width: 95%;
margin-top:1px;
}
/*** 日历占的宽度百分比，对上距离 ***/

.calendar-year,
.calendar-month {
font-weight: bold;
}
/*** 这段意思是 年和月 字体加粗***/

.calendar-weekdays {
color: #FB4C71;
font-size:12px;
text-align: center;
width: 14%;
padding:2px;
}
/*** 星期一到星期五日期的字体颜色，大小，位置 ***/

.calendar-weekday-cell {
color: #FFFFFF;
font-size:12px;
text-align: center;
width: 14%;
padding:2px;
font-weight: bold;
}
/*** 年月星期的颜色 ***/

.calendar-saturday,
.calendar-sunday {
color: #FB4C71;
}
/*** 星期六日的颜色***/

.calendar-today {
color: #fff;
background: #9FCEE2;
font-weight:bold;
}
/*** 日历显示今天的时候，回在日期上有个小框，background就是小框的颜色 ***/

.calendar-day a, .calendar-saturday a, .calendar-sunday a {
color: #FB4C71;
font-weight:bold;
text-decoration: underline;
}
/*** 写过日记的那天在日历上会加粗 ***/

.search-field {
width: 125px;
margin-bottom: 5px;
border: 1px solid #BBE9FF;
}
/*** 这个是搜索框，输入文字那地方的属性，我改了下描边颜色 ***/

.announce-content{
 word-wrap: break-all;
 padding: 10px; color: #FB4C71;
}
/*** 公告框的描边，背静，字颜色等 ***/

.pages {
 color: #FB4C71;
}
/*** 分页条文字颜色 ***/
.pagelink-current {
 font-weight: bold;
}
/*** 当前页文字加粗 ***/

.listbox-header {
 font-weight: bold;
 text-align: center;
 background-color: #FFFFFF;
 background: url(\'images/menu_bg2.gif\') repeat-x;
 color: #FFFFFF;
 height: 25px;
}
/*** 列表 标题栏字颜色 背静等 ***/

.listbox-entry {
 word-wrap: break-all;
 color: #076AA6;
 border-bottom: 1px solid #FB4C71;
}
/*** 默认分类有个 [ ] 的颜色，和列表下面那条线的颜色***/

.textbox{
  background: #FFFFFF;
 padding-bottom: 25px;
 margin-bottom: 10px;
}
/*** 文本框的背静色 ***/

.textbox-title{
  background: #FFDCE9;
 border: 1px solid #FB4C71;
 word-wrap: break-all;
 font-size: 14px;
 padding-top: 3px;
 height: 42px;
}
/*** 文本框内，文章标题框 ***/

.textbox-title h4{
 margin-left: 7px;
 color: #000000;
 padding-left: 5px;
 font-size: 14px;
 display: inline;
}
.textbox-title h4 a {
 color: #fc4c73;
}
/*** 文章题目的颜色 ***/

.textbox-label{
 padding-top: 3px;
 padding-left: 5px;
 color: #fb4c71;
 font-size: 12px;
}
/*** 文章题目下面日期的颜色 ***/

.textbox-fontsize{
 color: #fb4c71;
 float: right;
 text-align: right;
 padding: 3px;
 font-size: 12px;
}
.textbox-fontsize a{
 color: #fb4c71;
}
/*** 文章工具栏 字号选择那里的 字颜色 ***/

.textbox-content{
  line-height: 120%;
  color: #000000;
 word-wrap: break-word;
 padding: 10px;
}
/*** 文章正文部分的样式 ***/

.textbox-bottom{
 border-top: 1px solid #FEDDE8;
 padding: 5px;
 padding-top: 3px;
 padding-bottom: 4px;
 font-size: 12px;
 color: #FB4C71;
 text-align:right;
}
/*** 文章底部分 下划线 字体样式 ***/

.textbox-bottom a {
 color: #FB4C71;
 text-decoration: none;
}
/*** 文章底部，默认分类，评论那些字的颜色 ***/

.textbox-adminbar {
 padding: 0px;
 padding-bottom: 4px;
 font-size: 12px;
 color: #FB4C71;
 text-align:right;
}
/*** 文章底部，管理栏的字样式 ***/

.textbox-tburl {
 padding-top: 3px;
 font-size: 11px;
 color: #3F67A5;
 text-align:left;
 padding-left: 15px;
 background: url(\'./images/tb_bg.gif\') no-repeat 0px;
}
/*** 这个不知道是哪，实在找不到这个颜色的字 ***/

.tags {
 padding-top: 1px;
 padding-bottom: 3px;
 font-size: 11px;
 color: #5EC4F4;
 text-align:left;
 padding-left: 15px;
}
/*** 文章的下面 tags的颜色 ***/

至此，一个风格的样子就出来了，我们也快大功告成了，剩下的就是其他页面也要按着这个风格改

.comment-pages{
 padding:5px;
 margin: 5px;
 color: #FB4C71;
}
/*** 评论分页字体颜色 ***/

.commentbox{
 word-wrap: break-word;
 padding: 0px;
 margin: 5px;
 margin-top: 10px;
 border-top: 1px solid #FEDDE8;
}
/*** 评论间那条线的颜色 ***/

.commentbox-label{
 display: inline;
 color: #FB4C71;
 font-size: 12px;
}
/*** 评论日期颜色 ***/

.messagebox{
width: 500px;
margin-top: 200px;
border-top: 0px;
text-align: center;
background-color: #ffffff;
}
/*** 提示框整体 ***/

.messagebox-title{
background: #FB4C71;
color: #FFFFFF;
font-weight: bold;
padding: 5px;
}
/*** 提示框标题背静，字颜色，加粗 ***/

.messagebox-content{
color: #FB4C71;
background:#FFFFFF;
padding: 10px;
padding-bottom: 20px;
text-align: left;
}
/*** 提示内容的样式***/

.messagebox-bottom{
color: #FB4C71;
background-color: #E6EEF7;
padding: 5px;
}
/*** 提示框底部 ***/

.formbox-comment-title{
  text-align: center;
 color: #FB4C71;
 font-weight: bold;
 padding: 5px;
}
/*** 评论页面 发表评论那几个字在这改 ***/

.panel-smilies-title {
 color: #FB4C71;
 text-align: left;
 border-bottom: 1px solid #FEDDE8;
}
/*** 表情栏 表情两个字 和下面那条线 ***/

.code {
 word-wrap: break-all;
 border-left: 3px solid #3F67A5;
 background-color: #5EC4F4;
 color: #000000;
 margin: 5px;
 padding: 10px;
}
/*** 文章 代码的样式，文章插入代码的时候的样式***/

.quote-content {
 word-wrap: break-all;
 color: #000000;
 padding: 10px;
 border: 1px solid #E6EEF7;
 border-top: 0px;
}
/*** 上面是文章中，引用的样式，引用的外描边，字颜色等 ***/

CSS应用技巧实例

1。如何给部分文字加背景图像？
　　与加背景色操作类似，只是在背景在选择加载图象就是了，一个定义好的加背景图象的CSS例子的代码是这样的：

　　在要用时选取那段文字，再在CSS面板上点一下“imgbgstyle”就行了。

2.如何给文字加上划线、下划线、删除线和闪烁？
　　在DW3中CSS的属性定义对话框(style Definition for .style1)的“Type”上的“decoration”属性定义的就是这些内容，要注意的是闪烁属性有些版本的浏览器不支持，少用为好。下面是一个定义好上述效果的CSS例子：

其中： “underline”是定义下划线；“overline ”是定义上划线；“ line-through”定义的是删除线；“blink”定义的是文字闪烁。

3.如何使网页具有“首行缩进”功能？
由于DW输入空格不方便，利用“首行缩进”将弥补这个不足。在DW3中CSS的属性定义对话框（style Definition
for .style1)的“Block”上的“text-indent”属性定义的就是“首行缩进”，所谓“首行”是指每段内容的第一行，也
就是直接按回车键就形成了一个新的段落。缩进最好以“em”（字符）为单位，比如：汉字编排要求每段开始缩进两个汉字，设置好的CSS如下所示：

在DW要注意：在DW3中CSS的属性定义对话框（style Definition for .style1)的“Block”上的“text-indent”右面的缩进单位选择框中“ems”指的就是“em”。

再论浏览器和CSS的关系

1、IE与Firefox下对CSS解析的区别

这是我在使用中的一些经验，拿出来和大家分享，希望大家继续

对高度的解析

IE：将根据内容的高度变化，包括未定义高度的图片内容，即使定义了高度，当内容超过高度时，将使用实际高度

Firefox：没有定义高度时，如果内容中包括了图片内容，MF的高度解析是根据印刷标准，这样就会造成和实际内容高度不符合的情况；当定义了高度，但是内容超过高度时，内容会超出定义的高度，但是区域使用的样式不会变化，造成样式错位。

结论：大家在可以确定内容高度的情况下最好定义高度，如果真的没有办法定义高度，最好不用使用边框样式，否则样式肯定会出现混乱！

img对象alt和title的解析

alt：当照片不存在或者load错误时的提示；

title：照片的tip说明。

在IE中如果没有定义title，alt也可以作为img的tip使用，但是在MF中，两者完全按照标准中的定义使用

结论：大家在定义img对象时，最后将alt和title对象都写全，保证在各种浏览器中都能正常使用

其他的细节差别

当你在写css的时候，特别是用float: left（或right）排列一窜图片时，会发现在firefox里面正常而IE里面有问题。无论你用margin:0,还是border: 0来约束，都无济于事。

其实这里还有另外一个问题，就是IE对于空格的处理，firefox是忽略的而IE对于块与块之间的空格是处理的。也就是说一个div结束后要紧接着一个div写，中间不要有回车或者空格。不然也许会有问题，比如3px的偏差，而且这个原因很难发现。

非常不走运的是我又碰到了这样的问题，多个img标签连着，然后定义的float: left，希望这些图片可以连起来。但是结果在firefox里面正常而IE里面显示的每个img都相隔了3px。我把标签之间的空格都删除都没有作用。

后来的解决方法是在img外面套li，并且对li定义margin: 0，这样就解决了IE和firefox的显示偏差。IE对于一些模型的解释会产生很多错误问题，只有多多尝试才能发现原因。

From: http://www2.uuzone.com/blog/lilan/18832.htm 2005-5-25

2、嵌套DIV:父DIV的高度不能根据子DIV自动变化的解决方案

转载：Allan.Blog()

 

当Content内容多时，即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展。 解决方案

 

在层的最下方产生一个高度为1的空格，可解除这个问题

3、CSS DIV 学习笔记

tag | 10 五月, 2005 23:16

一、基本上每个区块的div 都要有自己的id，杜绝不同功能的区块用同一个id/class

二、每个稍大的区块div 后面都跟一个标记开始、结束

三、隐藏文字的又一种方法 TEXT-INDENT: -9999px; LINE-HEIGHT: 0

四、巧妙地处理并列的两列:
1)
右列为P, width=44.5%, float=left
左列为P.first, border-right: #a7a7a7 1px solid, width=45%
2)
右列#right, margin-left:50%
左列#left, float=left,width=50% border-right:#a7a7a7 1px solid

以上两种方法关键点在于选择其中一个为float=left

五、随机的切换图片：
#random {
BACKGROUND: url(/rotate.php);
}
这个方法很巧妙。

4、关于div的高度自适应

ulean | 09 三月, 2005 09:59

今天小尿让我帮他的页子解决一个问题，就是div的高度自适应，也就是在一个父级div中嵌套一左一右两个子div，右边的子div内容可无限扩展，而可以使得父级div的高度能被无限拉长，用一般的布局方法，在IE中可以正确浏览，在Mozilla中父级div的高度就固定在10px左右，无法自适应高度，height:auto也不行，怎么办呢。网上参考到一篇资料，要实现自适应高度，div层必须具有float属性，于是我开始动手试验， float:left的话，div就跑到页面最左边去了，这好办，我在它的外面再套一层div，把位置定好，那么里面的就算float:left也不会被移动位置了。

xhtml:
==========================================================

test
test
test

• 预安装检查
• 阅读 PFC 授权协议
• 初始化数据库
• 完成安装

CSS
=================================================
#container_father {
margin-left: auto;
margin-right: auto;
padding: 0px;
width: 750px;
}

#container {
width: 750px;
border: 1px solid #cccccc;
padding: 8px;
margin: 0px;
background-color: #F1F3F5;
float: left;
}

FRom: http://ulean.zg163.net/

5、 深入标准 ~ The IE Doubled Float-Margin Bug(IE双倍浮动边界Bug)

译文：PorkFat

什么发生故障？

一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box)，并在浮动元素上使用了左边界(margin-left)来令它和容器的左边产生一段距离。看起来相当的简单，对吗？但直至它被在IE/Win中浏览为止，在浏览器中居左浮动元素的边界长度被神秘地翻了一倍！

情况应该如何？

下面的图释展示了一个简单的div(茶色的盒子)包含着一个居左浮动的div(绿色的盒子)。浮动元素有一个100px的左边界，使容器盒与它的左边缘之间产生了一个100px的间隙。到现在为止，一直都还不错。

.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
/*This last value applies the 100px left margin */
}

陈旧的IE“双倍占据”

原样的相同代码被在IE/Win中浏览时以些微不同的方式显示，下面的图释展示了IE/Win在布局上所做的。

这为什么会发生？别问这种傻问题！这就是IE，记得吗？符合标准只是理想的状况，不指望实现，这个简单的事实正验证了。

重点

这个Bug仅当浮动边界和浮动元素的方向相同时出现在浮动元素和容器盒的内边缘之间，在这之后的任意有着相似边界的浮动元素不会呈现双倍边界。只有特定的浮动行的第一个浮动元素会遭遇这个Bug。像居左的情况一样，双倍边界同样神秘地显示在居右的相同方式。

最后，修复办法！

直到现在(04年1月)这个Bug一直被认为是无法修复的，通常用来替代错误的边界的控制方法如：一个不可视浮动元素的左边距，连同一个内嵌的盒子一起，可视的盒子装在不可视浮动元素里；或者使用技巧仅对IE/Win设定边界的1/2值。这办法生效了，但是是混乱的而且搞糟了干净的源代码。不过现在全部结束了。

Steve Clason发现了一个修复办法，描述在他的Guest Demo里，修复了双倍边界和围绕文字缩进Bug。这是一个经典的IE的Bug修复办法，使用一个属性来修复影响不相关属性的Bug。

现在如何来做？

研究它，简单地将{display: inline;}设置给浮动元素就是全部所需做的！是的，听起来太简单了，不是吗？不过这是真的，仅仅一个display的\"inline\"声明已经能够胜任了。

熟悉规则的人知道浮动元素自动设置为\"block\"元素，而不管他们之前是什么。就如Steve从W3C里指出：

9.5.1 Positioning the float: the \'float\' property

\"This property specifies whether a box should float to the left, right, or not at all. It may be set for elements that generate boxes that are not absolutely positioned. The values of this property have the following meanings:

left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the \'clear\' property). The \'display\' is ignored, unless it has the value \'none\'.

right
Same as \'left\', but content flows on the left side of the box, starting at the top.

none
The box is not floated. \"

这说明浮动元素上的{display: inline;}会被忽略，事实上所有的浏览器没有呈现任何改变，包括IE。但是，它不知何故让IE停止将浮动元素的边界翻倍。因而，这个修复办法可以被直接应用，而没有任何繁琐的隐藏方法。如果将来的一款浏览器决定对这个修复办法抱恙，只要把这个修复装入IE独用的Tan Hack里，细节如同IE Three Pixel Text-Jog Demo。

下面是两个使用了前面相同代码的生动演示，第一个照常显示了IE的Bug，下一个对浮动元素使用了\"inline\"修复。

.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
}

CSS兼容要点 [转]

      FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中

FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width

FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式

div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格XHTML+CSS兼容性解决方案小集

使用XHTML＋CSS构架好处不少，但也确实存在一些问题，不论是因为使用不熟练还是思路不清晰，我就先把一些我遇到的问题写在下面，省的大家四处找^^

1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：div{ margin:30px!important;margin:28px; }

注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：div{ maring:30px;margin:28px }

重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

2.IE5 和IE6的BOX解释不一致IE5下div{ width:300px;margin:0 10px 0 10px; }div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改div{ width:300px!important;width /**/:340px;margin:0 10px 0 10px }，关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：）

3.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义ul{ margin:0;padding:0; }就能解决大部分问题

4.关于脚本，在xhtml1.1中不支持language属性，只需要把代码改为 script type=\"text/javascript\"

转载于:https://www.cnblogs.com/oiea/archive/2008/03/18/1112208.html