文章标签 ‘CSS+HTML’ 的存档

• 背景定位之CSS Sprites的一些技巧

  日期：2009.10.25 | 分类：CSS+HTML | 评论数：0

  众所周知，减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个有效的方法就是通过CSS Sprites——将多个图片整合到一个图片中，然后再用CSS来定位。

  下面是一张样图：

  

  本文的目的并不是讲CSS Sprite如何让一个网站更快，而是说一些使用CSS Sprite的时候的一些最佳实践。

  不要等到你完成切片之后才开始sprite.

  如果你边切图边写CSS，然后等你完成了整个网站之后再来拼接这些图片到一个Sprite中，你就不得不完全重写你的CSS，你也必须要花费很多的时间来用PS拼接大量的图片——这是件令人倍感纠结的事情。但是如果边切图边整合，就会比较容易些。

  把图片放到它要显示的地方的相对的地方

  这个小技巧貌似比较难理解。我直到创建一个比较大的sprite的时候才理解到这一点。比如，如果我们希望一个图片出现在一个元素的左侧：

  

  将那个图片放到sprite图片的右边(本文开始的那个sprite图片)。这样的话，当你通过CSS移动背景图片的位置的时候，基本上不可能有其它的小图片意外的出现在它的附近。使用Sprite的时候常常遇到的一个问题是图片会出现在它不该出现的位置。

  定位时避免使用bottom或right等

  当使用CSS sprite的时候，只用background-position: bottom -300px或background-position: right -200px;非常容易。这刚开始的时候是可行的，但是问题是，当你在宽度上或高度上扩展相关sprite图片的时候，原先设置的位置可能是错的，因为那个图片已经不再Sprite图片的底部或右部了。使用确切的位置来避免这个问题。

  给每个图片足够的空间

  就像你在本文顶部的实例图片看到的那样，那些小图片都被预留了足够的空间。为什么不把他们塞到一块来让sprite图片更小呢？ 因为使用这些图片的元素通常都会有大量的内容而且可能会需要扩展的间距，以至于其它图片不会意外出现。

  例子：
  

  例子中的每个条目都有个带数字的图片作为背景图片。如果你仔细看了上面的那张图片，你可以看到这三个数字图片是如何错开排列的，这样如果内容增多，其它图片就不会意外出现。

  不用担心Sprite图片的像素大小

  如果你的网站经过良好的设计，那么你将会有一大堆的图片来整合进到sprite里面，这样你就需要你个非常大的sprite来恰当的放置这些图片。这是很不错的。sprite里的空白不会占用太多的文件大小。

• css背景定位过程图解

  日期：2009.10.25 | 分类：CSS+HTML | 评论数：0

  过程：

  

  

  

  

• 续CSS背景定位实战应用

  日期：2009.10.24 | 分类：CSS+HTML | 评论数：0

  实战前先让大家了解下，浏览器对不同形式引用的图片请求时怎么样的。

  1. 隐藏图片

  《img src=“1.jpg” style=“display： none” /》

  结论：只有Opera不产生请求。

  注意：用visibility： hidden隐藏图片时，在Opera下也会产生请求。

  2. 重复图片

  《img src=“1.jpg” /》

  《img src=“1.jpg” /》

  结论：所有浏览器都只产生一次请求。

  3. 重复背景

  《style type=“text/css”》

  .test1 { background： url（1.jpg） }

  .test2 { background： url（1.jpg） }

  《/style》

  《div class=“test1”》test1《/div》

  《div class=“test2”》test2《/div》

  结论：所有浏览器都只产生一次请求。

  4. 不存在的元素的背景

  《style type=“text/css”》

  .test1 { background： url（1.jpg） }

  .test2 { background： url（2.jpg） } /* 页面中没有class为test2的元素 */

  《/style》

  《div class=“test1”》test1《/div》

  结论：背景仅在应用的元素在页面中存在时，才会产生请求。这对CSS框架来说，很有意义。

  5. 隐藏元素的背景

  《style type=“text/css”》

  .test1 { background： url（1.jpg）; display： none; }

  .test2 { background： url（2.jpg）; visibility： hidden; }

  《/style》

  《div class=“test1”》test1《/div》

  结论：Opera和Firefox对于用display： none隐藏的元素背景，不会产生HTTP请求。仅当这些元素非display： none时，才会请求背景图片。

  6. 多重背景

  《style type=“text/css”》

  .test1 { background： url（1.jpg）; }

  .test1 { background： url（2.jpg）; }

  《/style》

  《div class=“test1”》test1《/div》

  结论：除了基于webkit渲染引擎的Safari和Chrome，其它浏览器只会请求一张背景图。

  注意：webkit引擎浏览器对背景图都请求，是因为支持CSS3中的多背景图。

  7. hover的背景加载

  《style type=“text/css”》

  a.test1 { background： url（1.jpg）; }

  a.test1:hover { background： url（2.jpg）; }

  《/style》

  《a href=“#” class=“test1”》test1《/a》

  结论：触发hover时，才会请求hover状态下的背景。这会造成闪烁，因此经常放在同一张背景图里通过翻转来实现。

  注意：在图片no-cache的情况下，IE每次hover状态改变时，都会产生一次新请求。很糟糕。

  8. JS里innerHTML中的图片

  《script type=“text/javascript”》

  var el = document.createElement（‘div’）;

  el.innerHTML = ‘《img src=“1.jpg” /》’;

  //document.body.appendChild（el）;

  《/script》

  结论：只有Opera不会马上请求图片。

  注意：当添加到DOM树上时，Opera才会发送请求。

  9. 图片预加载

  最常用的是JS方案：

  《script type=“text/javascript”》

  new Image（）.src = ‘1.jpg’;

  new Image（）.src = ‘2.jpg’;

  《/script》

  在无JS支持的环境下，可以采用隐藏元素来预加载：

  《img src=“1.jpg” style=“visibility： hidden; height： 0; width： 0” /》

  总结

  对于隐藏图片和隐藏元素的背景，Opera不会产生请求。

  对于隐藏元素的背景，Firefox也不会产生请求。

  对于尚未插入DOM树的img元素，Opera不会产生请求。

  基于webkit引擎的Safari和Chrome，支持多背景图。

  其它情景，所有主流浏览器保持一致。

  对图片请求的处理上，个人觉得Opera走在前列。

  —————————————————————————————————————————

  以上总结了那么多，主要的一点，是让大家明白，浏览器请求一张图片的速度，比请求多张要快，大大提高页面下载速度。所以，我们可以把页面用到的所有图片放在一张大的透明图上面，通过css里面的background位移来定位图片。

  先看下实例：

  QQ腾讯官网：

  

  网易163：

  

  新浪博客：

  

  以上官网都是利用了背景图片定位技术。

  看看他们怎么实现的。
  /*
  #def div,#s1 div,#s2 div,#s3 div,#s4 div,#s5 div,#s6 div,#s7 div,#s8 div,#s9 div,#sar div
  {background-image:url(http://mat1.gtimg.com/www/iskin09/skinbt.png);background-repeat:no-repeat;}
  #def div{background-position:0 0;}
  #s1 div{background-position:0 -11px;}
  #s2 div{background-position:0 -22px;}
  #s3 div{background-position:0 -33px;}
  #s4 div{background-position:0 -44px;}
  #s5 div{background-position:0 -55px;}
  #s6 div{background-position:0 -66px;}
  #s7 div{background-position:0 -77px;}
  #s8 div{background-position:0 -88px;}
  #s9 div{background-position:0 -99px;}
  */

  参考“CSS背景属性Background详解”

  写个demo给大家看看。。

  演示效果：

  demo

  只看代码：

  

  欢迎转载：注明出处,”UED,紫枫-80後” ，珍惜他人的劳动成果！^-^

• CSS背景属性Background详解

  日期：2009.10.24 | 分类：CSS+HTML | 评论数：0

  css2 中的背景(background)

  CSS2 中有5个主要的背景(background)属性，它们是：

  background-color: 指定填充背景的颜色。
  background-image: 引用图片作为背景。
  background-position: 指定元素背景图片的位置。
  background-repeat: 决定是否重复背景图片。
  background-attachment: 决定背景图是否随页面滚动。

  这些属性可以全部合并为一个缩写属性: background。需要注意的一个要点是背景占据元素的所有内容区域，包括 padding 和 border，但是不包括元素的 margin。它在 Firefox, Safari ,Opera 以及 IE8 中工作正常，但是 IE6 和 IE7 中，background 没把 border 计算在内。

  

  基本属性

  背景色(background-color)

  background-color 属性用纯色来填充背景。有许多方式指定这个颜色，以下方式都得到相同的结果。

  background-color: blue;
  background-color: rgb(0, 0, 255);
  background-color: #0000ff;

  background-color 也可被设置为透明（transparent），这会使得其下的元素可见。

  背景图(background-image)

  background-image 属性允许指定一个图片展示在背景中。可以和 background-color 连用，因此如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。代码很简单，只需要记住，路径是相对于样式表的，因此以下的代码中，图片和样式表是在同一个目录中的。

  background-image: url(image.jpg);

  但是如果图片在一个名为 images 的子目录中，就应该是：

  background-image: url(images/image.jpg);

  背景平铺(background-repeat)

  设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。这也许是你需要的，但是有时会希望图片只出现一次，或者只在一个方向平铺。以下为可能的设置值和结果：

  background-repeat: repeat; /* 默认值，在水平和垂直方向平铺 */
  background-repeat: no-repeat; /* 不平铺。图片只展示一次。 */
  background-repeat: repeat-x; /* 水平方向平铺(沿 x 轴) */
  background-repeat: repeat-y; /* 垂直方向平铺(沿 y 轴) */
  background-repeat: inherit; /* 继承父元素的 background-repeat 属性*/
  背景定位(background-position)

  background-position 属性用来控制背景图片在元素中的位置。技巧是，实际上指定的是图片左上角相对于元素左上角的位置。
  下面的例子中，设置了一个背景图片并且用 background-position 属性来控制它的位置，同时也设置了 background-repeat 为 no-repeat。计量单位是像素。第一个数字表示 x 轴(水平)位置，第二个是 y 轴(垂直) 位置。

  /* 例 1: 默认值 */
  background-position: 0 0; /* 元素的左上角 */

  /* 例 2: 把图片向右移动 */
  background-position: 75px 0;

  /* 例 3: 把图片向左移动 */
  background-position: -75px 0;

  /* 例 4: 把图片向下移动 */
  background-position: 0 100px;

  

  background-position 属性可以用其它数值，关键词和百分比来指定，这比较有用，尤其是在元素尺寸不是用像素设置时。

  关键词是不用解释的。x 轴上：

  * * left
  * * center
  * * right

  y 轴上:

  * * top
  * * center
  * * bottom

  顺序方面和使用像素值时的顺序几乎一样，首先是 x 轴，其次是 y 轴，像这样：

  background-position: top right;

  使用百分数时也类似。需要主要的是，使用百分数时，浏览器是以元素的百分比数值来设置图片的位置的。看例子就好理解了。假设设定如下：

  background-position: 100% 50%;

  使用百分数定位时，其实是将背景图片的百分比指定的位置和元素的百分比位置对齐。也就是说，百分数定位是改变了背景图和元素的对齐基点。不再像使用像素和关键词定位时，使用背景图和元素的左上角为对齐基点。例如上例的 background-position: 100% 50%; 就是将背景图片的 100%(right) 50%(center) 这个点，和元素的 100%(right) 50%(center) 这个点对齐。

  

  背景附着

  background-attachment 属性决定用户滚动页面时图片的状态。三个可用属性为 scroll(滚动)，fixed(固定) 和 inherit(继承)。inherit 单纯地指定元素继承他的父元素的 background-attachment 属性。

  为了正确地理解 background-attachment，首先需要明白页面(page)和视口(view port)是如何协作地。视口(view port)是浏览器显示网页的部分(就是去掉工具栏的浏览器)。视口(view port)的位置固定，不变动。

  当向下滚动网页时，视口(view port)是不动的，而页面的内容向上滚动。看起来貌似视口(view port)向页面下方滚动了。如果设置 background-attachment: scroll，就设置了当元素滚动时，元素背景也必需随着滚动。简而言之，背景是紧贴元素的。这是 background-attachment 默认值。

  用一个例子来更清楚地描述下：

  background-image: url(test-image.jpg);

  background-position: 0 0;
  background-repeat: no-repeat;
  background-attachment: scroll;

  

  当向下滚动页面时，背景向上滚动直至消失。

  但是当设置 background-attachment 为 fixed 时，当页面向下滚动时，背景要待在它原来的位置(相对于浏览器来说)。也就是不随元素滚动。

  用另一个例子描述下：

  background-image: url(test-image.jpg);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;

  

  页面已经向下滚动了，但是图像仍然保持可见。

  需要重视的一点是背景图只能出现在它父元素能达到的区域。即使图片是相对于视口(view port)定位地，如果它的父元素不可见，图片就会消失。参见下面的例子。此例中，图片位于视口(view port)的左下方，但是只有元素内的图片部分是可见的。

  background-image: url(test-image.jpg);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;

  

  因为图片开始在元素之外，一部分图片被切除了。
  背景的简写属性

  可以把背景的各个属性合为一行，而不用每次都单独把他们写出来。格式如下：

  background:
  

  例如，下面的声明

  background-color: transparent;
  background-image: url(image.jpg);
  background-position: 50% 0 ;
  background-attachment: scroll;
  background-repeat: repeat-y;

  可以合为单独一行：

  background: transparent url(image.jpg) 50% 0 scroll repeat-y;

  而且不需要指定每一个值。如果省略值地话，就使用属性地默认值。例如，上面那行和下面这个效果一样：

  background: url(image.jpg) 50% 0 repeat-y;

  背景的一般用法

  除了可以用来使元素更加优雅这类显然的用法之外，背景也可以用于其它的目的。
  仿栏

  当使用 css 的 float 属性来定位布局元素时，要确保两栏或多栏有相同的长度是比较困难的。如果长度不同，其中一栏的背景会比另外的短，这会破坏整个设计。

  仿栏是个非常简单的背景技巧，这个技巧最早发表在A List Apart 。思路很简单：不再给每列单独设置背景，而是给各列的父元素设置一个背景图。所有栏的设计都包含在这张图片之中。
  文本替换

  在网页上，对于字体的选择是相当有限的。可以使用 sIFR 之类的工具来定制字体，但是这需要用户启用 JavaScript 。一个适用于任意浏览器的简单方法是，用想用的字体来做一张文本图片，并用这张图片作为背景。这样，文本依然出现在文档标记中以供搜索引擎检索和屏幕浏览 器识别，但是在浏览器中就会显示首选的字体。

  例如，HTML 标记可能是这样的：

  Blogroll

  假如有一个 200 乘 75 的图片，上面有更好看的字体，就可以用如下方式来替换文本：

  h3.blogroll {
  width: 200px;
  height: 75px; /* So that the element will show the whole image. */
  background:url(blogroll-text.jpg) 0 0 no-repeat; /* Sets the background image */
  text-indent: -9999px; /* Hides the regular text by moving it 9999 pixels to the left */
  }

  简单的圆点

  无需列表中的圆点看起来很难看。不用再处理所有不同的 list-style 属性，只需要简单地把他们隐藏并用背景图代替就可以了。因为图片可以随意选择，这些圆点就可以看起来更漂亮。

  下面，我们把一个无需列表改造成有圆滑圆点的：

  ul {
  list-style: none; /* Removes default bullets. */
  }

  ul li {
  padding-left: 40px; /* Indents list items, leaving room for background image on the left. */
  background: url(bulletpoint.jpg) 0 0 no-repeat;
  }

  CSS3 中的背景

  CSS3 中的背景有较多改进。最显著的是多背景图片的选项，同时也增加了4个新属性。
  多背景

  CSS3 中，可以对一个元素应用一个或多个图片作为背景。代码和 css2 中的一样，只需要用逗号来区别各个图片。第一个声明的图片定位在元素顶部，其它的图片按序在其下排列，例如：

  background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);

  新属性：背景修剪(background-clip)

  这又把我们带回了文章开始讨论的那个关于边框内图片显示的话题。它被描述为“背景描绘区”。

  background-clip 属性用来增强背景显示位置的控制能力。可能的值为：

  * background-clip: border-box;
  背景显示在边框内。
  * background-clip: padding-box;
  背景显示在内补白(padding)内，而不是边框内。
  * background-clip: content-box;
  只在内容内显示背景，而不是内补白(padding)和边框内。
  * background-clip: no-clip;
  默认值，和 border-box 一样。

  新属性：背景原点(background-origin)

  这个属性和 background-position 结合起来使用。可以从边框，内补白或者内容盒子开始计算 background-position (类似于 background-clip)。

  * background-origin: border-box;
  以边框为原点开始计算 background-position.
  * background-origin: padding-box;
  以内补白为原点开始计算 background-position
  * background-origin: content-box;
  以内容盒子为原点开始计算 background-position
  对于 background-clip 和 background-origin 不同的一个解释参看 CSS3.info

  新属性： 背景尺寸(background-size)

  background-size 用来调整背景图的大小。有好几个可能值：

  * background-size: contain;
  缩小图片来适应元素的尺寸(保持像素的长宽比)
  * background-size: cover;
  扩展图片来填满元素(保持像素的长宽比)
  * background-size: 100px 100px;
  调整图片到指定大小
  * background-size: 50% 100%;
  调整图片到指定大小。百分比是相对于包含元素的尺寸的。

  可以看一下 CSS3规则 网站上的几个例子。

  新属性：(background-break)

  CSS3 中，元素可以被分成几个独立的盒子(例如 使内联元素 span 跨越多行)。background-break 属性用来控制背景怎样在这些不同的盒子中显示。

  可能值为：

  * Background-break: continuous;
  默认值。忽略盒之间的距离(也就是像元素没有分成多个盒子，依然是一个整体一样)
  * Background-break: bounding-box;
  把盒之间的距离计算在内
  * Background-break: each-box;
  为每个盒子单独重绘背景

  背景色(background-color)的改进

  background-color 在 css3 中有了稍许改进。除了设置背景颜色之外，如果元素底层的背景图不可用，还可以设置一个“回退色”。

  通过在回退色之前增加一个斜杠(/)来实现，例如：

  background-color: green / blue;

  此例中，背景色应该是绿色(green)。然而，如果底层背景图不能使用的话，背景色就是蓝色而不是绿色。如果在斜杠前不指定颜色，默认为透明(transparent)。
  背景平铺(background-repeat)的改进

  CSS2中当图片平铺时，会被元素在末端截断。CSS3 引入了两个属性来修正这个问题:

  * space: 应用同等数量的空白到图片之间，直到填满整个元素
  * round: 缩小图片直到正好平铺满元素

  关于 background-repeat: space; 的一个例子，可以在 CSS3 规则网站看到。
  背景附着(background-attachment)的改进

  background-attachment 属性增加了一个新值：local。这是用来配合可以滚动的元素的(设置为 overflow: scroll; 的元素)。当 background-attachment 设置为滚动(scroll)时，背景图不会随元素内容的滚动而滚动。

  设置为 background-attachment :local; 时，背景图会随内容的滚动而滚动。

• 25条CSS制作网页编写的提醒及小技巧整理

  日期：2009.10.16 | 分类：CSS+HTML | 评论数：0

  1、ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。

  2、同一个的class选择符可以在一个文档中重复出现，而id选择符却只能出现一次；对一个标签同时使用class和id进行CSS定义，如果定义有重复，id选择符做的定义有效，是因为ID的权值要比CLASS大。

  ID是一个标签，用于区分不同的结构和内容，就象名字，如果一个屋子有2个人同名，就会出现混淆；
  CLASS是一个样式，可以套在任何结构和内容上，就象一件衣服；

  3、一个兼容性调整(IE和Mozilla)的笨办法：
  初学可能会碰到这样一个情况：同样一个标签的属性在IE设置成A显示是正常的，而在Mozilla里必须要设成B才能正常显示，或者两个倒过来。
  临时解决方法：选择符{属性名:B !important;属性名:A}

  就现在的兼容来说，css hack是没办法的办法。我现在也在为这个头疼。

  4、如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的margin属性吧，而不要去定义位于外面的标签的padding

  这个问题体现在宽度设置上，就比如你div的width属性设置了200，然后你又想让里面的文字距离边框10px，于是设置了padding，但是在FF里你就会发现，宽度变成了220.

  5、li标签前面的图标推荐使用background-image，而不是list-style-image。

  6、IE分不清继承关系和父子关系的差别，全部都是继承关系。

  7、在给你的标签疯狂加选择符的时候，别忘了在CSS里给选择符加上注释。 等你以后修改你的CSS的时候就知道为什么要这么做了。

  不要随便用一个怪异的名字来定义你的class。就从我接受的项目来说，莫名其妙的写法让我头疼得厉害。翻找下我前面写过的东西，可以看到一个CSS命名规则。详细请见u/kele/archives/2007/609.html

  8、如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。

  9、定义链接的四种状态要注意先后顺序: Link Visited Hover Active

  与此类似的还有margin和padding，用TRouBLe来记忆。就是Top Right Bottom Left。

  10、与内容无关的图片请使用background

  这个就是为了在无CSS调用的时候不影响整体页面风格。少用图片来表现风格。试想别人禁止图片后，你的网站还有什么可以看的东西。

  11、定义颜色可以缩写#8899FF=#89F

  简写标准～可惜我还没有这个好习惯～比如#FFFFFF我还是习惯这么写，而不是#FFF

  12、table在某些方面比其它标签表现的要好的多。请在需要列对齐的地方用它。

  div+css设计不是说你就完全放弃table，怎么表现的好才是重点

  13、<script>没有language这个属性，应该写成这样:
  <script type=”text/Javascript”>

  但是在我接触到的很多网站页面里，是这么写的<script type=”text/Javascript” language=“javascript”>。莫名其妙～打开微软的网站你就可以看到<script type=”text/Javascript”>的表达方式

  14、标题是标题，标题的文字是标题的文字。有时候标题不一定需要显示文字，所以:<h1>标题内容</h1> 改成 <h1><span>标题内容</span></h1>

  我还是没有养成使用H1，H2标签的习惯～需要努力～

  15、完美的单象素外框线表格（在IE5、IE6、IE7及FF1.0.4以上中均可通过测试）
  table{border-collapse:collapse;}
  td{border:#000 solid 1px;}

  1象素黑色表格～

  16、margin取负值可以在标签使用绝对定位的时候起到相对定位的作用，在页面居中显示时，使用绝对定位的层不适合使用left:XXpx这个属性。把这个层放到一个要相对定位的标签旁，然后使用margin的负值是个好方法。

  负值时在布局中经常用到的方法～值得去学习下如何使用。

  17、绝对定位时使用margin值定位可以达到相对于本身所在位置的定，这与top，left等属性相对与窗口边缘的定位不同。绝对定位的优势在于可以让其它元素忽略它的存在。

  设计的时候你可以使用相对浮动层的绝对定位～有意想不到的效果。

  18、如果文字过长,则将过长的部分变成省略号显示：IE5,FF无效，但可以隐藏，IE6有效
  <DIV STYLE=”width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis”>
  <NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR>

  恩，这个东西我在用～

  19、在IE中可能由于注释带来的文字重复问题时可以把注释改为：
  <!–[if !IE]>Put your commentary in here…<![endif]–>

  20、如何用CSS调用外部字体
  语法：
  @font-face{font-family:name;src:url(url);sRules}取值：
  name：字体名称。任何可能的 font-family 属性的值
  url(url)：使用绝对或相对 url 地址指定OpenType字体文件
  sRules：样式表定义

  为了防止用户没有字体而影响了网站效果～不过我觉得最好还是少用。

  21、如何让一个表单中的文本框中的文字垂直居中？
  如果用行高与高度的组在FF中是没有效果的，办法就是定义上下补白就可以实现想想的效果了。

  22、定义A标签要注意的小问题：
  当我们定义a{color:red;}时，它代表了A的四种状态的样式，如果此时要定义一个鼠标放上的状态只要定义a:hover就可以了，其它三种状态就是A中所定义的样式。
  只定义了一个a:link时，一定要记得把其它三种状态定义出来！

  hover属性是一个很强大的东西～有时间的人可以仔细研究下～

  23、并不是所有样式都要简写：
  当样式表前定义了如p{padding:1px 2px 3px 4px}时，在后续工程中又增加了一个样式上补白5px，下补白6px。我们并不一定要写成p.style1{padding:5px 6px 3px 4px}。可以写成p.style1{padding-top:5px;padding-right:6px;},你可能会感觉这样写还不如原来那样好，但你想没想过，你的那种写法重复定义了样式，另外你可以不必去找原来的下补白与左补白的值是多少！如果以后前一个样式P变了话，你定义的p.style1的样式也要变。

  24、网站越大，CSS样式越多，开始做前，请做好充分的准备和策划，包括命名规则。页面区块划分，内部样式分类等。

  非常非常非常非常重要～记得在压缩CSS的时候兼顾好你的可读性～非常非常非常非常重要～深受其害中。

  25、几个常用到的CSS样式：
  1）中文字两端对齐：text-align:justify;text-justify:inter-ideograph;

  2）固定宽度汉字截断：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不过只能处理文字在一行上的截断，不能处理多行。)（IE5以上）FF不能，它只隐藏。

  3）固定宽度汉字（词）折行：table-layout:fixed; word-break:break-all;（IE5以上）FF不能。

  4）<acronym title=”输入要提示的文字” style=”cursor:help;”>文字</acronym>用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到，而国内的少又少。

  5）图片设为半透明：.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}在IE6及IE5测试通过，FF未通过，这是因为这个样式是IE私有的东西；

  6）Flash透明：选中swf,打开原代码窗口，在</object>前输入<param name=”wmode” value=”transparent”> 以上是针对IE的代码。
  针对FIREFOX 给<embed> 标签也增加类似参数wmode=”transparent”

  7）在做网页时常用到把鼠标放在图片上会出现图片变亮的效果，可以用图片替换的技巧，也可以用如下的滤镜：
  .pictures img {
  filter: alpha(opacity=45); }
  .pictures a:hover img {
  filter: alpha(opacity=90); }