Q网志

我们最常用的有四种选择方法，

Id规则选取，比如

button#button{}
#urlBar[type=”text”] { }
div > p > span#demo{}

class规则选取，比如

button.toolbarButton { }
.fancyText { }
menuitem > .menu-left[checked=”true”] { }

Read the rest of this entry »

· 1.中文字两端对齐：text-align:justify; text-justify:inter-ideograph;

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

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

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

· 5.图片设为半透明：.halfalpha { background-color: #000000; filter: Alpha(Opacity=50)} 在 IE6 及 IE5 测试通过，FF未通过。
Read the rest of this entry »

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

· 同一个的 class 选择符可以在一个文档中重复出现，而 id 选择符却只能出现一次；对一个标签同时使用 class和 id 进行 CSS 定义，如果定义有重复，id 选择符做的定义有效。

· 初学可能会碰到这样一个情况，同样一个标签的属性在 IE 设置成 A 显示是正常的，而在 Mozilla 里必须要设成 B 才能正常显示，或者两个倒过来。
临时解决方法：选择符 {属性名:B !important ; 属性名:A;} //IE7 下无效

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

· li 标签前面的图标推荐使用 background-image 而不是 list-style-image

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

· 在给你的标签疯狂加选择符的时候，别忘了在 CSS 里给选择符加上注释。 等你以后修改你的 CSS 的时候就知道为什么要这么做了。
Read the rest of this entry »

来源：幸福收藏夹

CSS技巧很多，有的是创造性的，而有些只为培养一个高效率的习惯。而无论怎么说，这都是有益的东西。不妨学习一下：

1. 图像替换文本

#header h1 a {
    display:block;
    text-indent:-9999em;
    background:(images/logo.png) no-repeat 0 0;
    height:87px;
    width:250px;
}

Read the rest of this entry »

来源：幸福收藏夹

知道CSS Reset是什么吗？通常情况下，它也被写成Reset CSS，即重设浏览器的样式。在各种浏览器中，都会对CSS的选择器默认一些数值，譬如当h1没有被设置数值时，显示一定大小。但并不是所有的浏览器都使用一样的数值，所以，有了CSS Reset，以让网页的样式在各浏览器中表现一致。

正在使用CSS的你，用过CSS Reset吗？当然，或许你用了，却不知道正在用，比如你可能用到：

* { padding: 0; margin: 0; border: 0; }

这也是一款CSS Reset的方法，让所有的选择器的padding、margin和border都设置成0。这是一种强大的方法，也是最简单，最安全的方法，不过，也是最占用资源的方法。对于小型的网站来说，用这个并不会带来大的资源浪费，但如果是像Yahoo这种架构非常大的网站，刚需要有选择地进行CSS重设，以减少资源浪费。下面是Yahoo的CSS重设代码，也是受最多人喜爱的CSS Reset方法，YUI选择的方法是：
Read the rest of this entry »

在进行浮动布局时，大多数人都深知，在必要的地方进行浮动清理：

<div style=”clear:both;”></div>

<div style="background:#666;">
<!-- float container -->
  <div style="float:left; width:30%; height:40px;background:#EEE; ">Some Content</div>
</div>

此时预览此代码，我们会发现最外层的父元素float container,并没有显示。这是因为子元素因进行了浮动，而脱离了文档流，导致父元素的height为零。
Read the rest of this entry »

原文链接：http://www.sitepoint.com/blogs/2007/07/05/css-using-percentages-in-background-image/

1. 关键字, 例如: background-position: top right;

优点: 直观, 可用性高, 各浏览器中表现一致.
缺点: 缺少间隔尺寸. 三个垂直的 (top, center, bottom) 和三个水平的 (left, center, right) 只能为你组合出最多 9 个位置. 不存在其他混式的组合. 并且很难像其他两种数值定位方法一样使用算数进行控制.
Read the rest of this entry »

在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊！所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。

CSS网页布局DIV水平居中的各种方法

一、单行垂直居中

如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。如：

div {
  height:25px;
  line-height:25px;
  overflow:hidden;
}

Read the rest of this entry »