张经纬的博客 » CSS

CSS3 的显示与隐藏

张经纬 — Tue, 15 Jun 2010 04:38:24 +0000

演示地址：http://www.zhangjingwei.com/demo/css-menu.html

< !DOCTYPE html>

   menu mockup
   


   Here's a list
      
         [hide]
         [show]
         
            item 1
            item 2
            item 3
         
      
   How about that?

加入书签:

Rel与CSS的联合使用

张经纬 — Mon, 08 Feb 2010 09:13:47 +0000

Rel-License 是微格式的开发标准之一，简单的说就是通过给引用标签（通常是链接）加上REL属性，来标明所引用链接/数据与文章的关系。

WordPress很早就引入了rel标准，在我们添加新链接的时候就可以看到“关系”属性。

早期某些社交类搜索引擎可根据这个标签来判断人与人之间的关系，但它对网页开发来说并无意义，值得庆幸的是随着浏览器的逐渐升级，我们可以利用CSS属性选择器以及REL来做一些有意思的功能。

这是一段带有REL属性的HTML结构。

<ul>
<li><a href="#" rel="civil">小李</a></li>
<li><a href="#" rel="party">局长</a></li>
</ul>

页面中他呈现这个样子

因为局长和小李是两个不同的阶级，所以我们应该有区分他们，我打算在小李和局长后面增加两张图片让他表现出这个样式。

过去，我们需要在两个链接标签上增加不同的class来实现这种样式，并且我们需要针对不同的样式书写不同的CSS

 .c,.b {background:url(01.png) right center no-repeat;}
 .b {background-image:url(02.png);}

<ul>
<li><a href="#" rel="civil" class="c">小李</a></li>
<li><a href="#" rel="party" class="b">局长</a></li>
</ul>

现在，我们可以利用REL属性以及属性选择器来完成这个工作。

a[rel~="civil"]{background:url(01.png) right center no-repeat;}
a[rel~="party"]{background:url(02.png) right center no-repeat;}

同时，我们的HTML结构也可以剔除那些多余的样式了。

<ul>
<li><a href="#" rel="civil">小李</a></li>
<li><a href="#" rel="party">局长</a></li>
</ul>

另外:ie6不支持属性选择器，但我们可以用JS来修复这个问题。

加入书签:

Firefox的新属性 pointer-events

张经纬 — Tue, 01 Dec 2009 17:16:02 +0000

Firefox 3.6 增加了对pointer-events的支持。Opera和safari都可以对svg的pointer-events属性做出支持，这次Firefox把他扩展到了常见的HTML元素上。

其中auto和none可针对所有的元素使用，其它的值只针对SVG。
（as of Firefox 3.6, only the values auto and none apply to all elements. The other values only apply to SVG and behave like auto in other XML and HTML content.）

当使用none的时候，当前节点下的所有子节点不接受event事件。反之则接受。

例如当pointer-events为none时：

#test {
    pointer-events:none;
  }
 
#test:hover {
    background: red;
}

鼠标移动到p节点上时将没有不会触发任何事件。

值为auto时：pointer-events/auto.htm

值为none时：pointer-events/none.htm

不过针对HTML元素是Firefox自己创造的新玩意。：）

参考：
http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty
http://hacks.mozilla.org/2009/12/pointer-events-for-html-in-firefox-3-6/
https://developer.mozilla.org/en/CSS/pointer-events

加入书签:

Overflow Auto && Position Relative

张经纬 — Wed, 02 Sep 2009 03:30:29 +0000

常见的双倍边距类问题都遇到过，但很少遇到这种有意思的，所以记录一下。

这个BUG是发生在Standards模式下（就是包含XHTML或者HTML4.0的DOCTYPE时）

看这段代码

< !DOCTYPE>

ul {margin:0; padding:0;}
li {list-style:none;}
#test{overflow:auto;height:200px; widows:200px; border:1px solid #000;}
#test li {position:relative;}

<div id="test">
    <ul>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
    </ul>
</div>

原本我认为溢出的文字会触发滚动条，但并没有呈现。
http://www.zhangjingwei.com/demo/overflow&position/demo_01.html
在IE6或者IE7内，溢出的文字呈现绝对定位（position:absolute）的形式。

解决方法：
在父级元素元素上设置属性position:relative
http://www.zhangjingwei.com/demo/overflow&position/demo_02.html

来源：http://rowanw.com/bugs/overflow_relative.htm

加入书签:

CSS 的模块化思想

张经纬 — Mon, 02 Feb 2009 15:41:48 +0000

在Twinsen Liang的博客上看到一篇名为语义化单单的限定在html么？的文章，文中主要是提及了CSS的命名规则，仔细阅读后，我认为这个其实就是模块化思想。（作者也提了这一点）。

我没有看过CSS模块化的相关书籍，所以我下面说的不一定正确，但是在工作中，我会用我理解的模块化方式提高工作效率，我理解的模块化，主要分为两类。

1、将常见的样式剥离出来，形成单独的样式，我叫他基础样式表或模块样式表，这个样式表主要一些常见的基本结构和形式，如CSS Reset、Blank、Font 等等。

例如下面这个样式表，我认为就是一个简单的基础样式表。（只是简单，不推荐用）

* {margin:0;padding:0;border:none;outline:none;}
.cb {clear:both;}
.blank10 {height:10px; font-size:1px; overflow:hidden; clear:both;}

2、在页面中按照结构模块化书写样式表，避免样式之间的干扰，并且方便浏览。
例如下面的这个结构


<div>
  <h2>...</h2>
  <h2>...</h2>
</div>

<div>
  <h2>...</h2>
  <h2>...</h2>
</div>

有一部分同学可能会这样写

.wrap_content_box {float:left;}
.wrap_content_box h2 {...}


<div class="wrap_content_box">
  <h2>...</h2>
  <h2>...</h2>
</div>

<div class="wrap_content_box">
  <h2>...</h2>
  <h2>...</h2>
</div>

刚刚看上去的时候效果很不错，一切都很完美，代码少，效果也实现了，但如果有一天，我们需要将所有h2的样式变的各不相同时，情况仿佛不乐观了。

.wrap_content_box {float:left;}
h2.XX {...}
h2.YY {...}
h2.ZZ {...}
h2.XYZ {...}


<div class="wrap_content_box">
  <h2 class="XX">...</h2>
  <h2 class="YY">...</h2>
</div>

<div class="wrap_content_box">
  <h2 class="ZZ">...</h2>
  <h2 calss="XYZ">...</h2>
</div>

迫不得已的，我们增加了很多带有不同标记的样式。可是1年后呢有人问起你这些样式所控制的对象是什么？
我可以肯定你会说，“我很费解”。
或者当你自己又写了一个“h2.XX”（命名重复的情况经常出现），无意覆盖了这个1年前的样式，而你又不知道，又恰巧被你的老板发现了…….上帝只能说，阿门，哥们，点被不能怨上帝。

可如果在一开始我们用这种方法写呢？

.wrap_content_box {float:left;}
#wrap_con_00 h2, #wrap_con_01 h2 {...}


<div id="wrap_con_00" class="wrap_content_box">
  <h2>...</h2>
  <h2>...</h2>
</div>

<div id="wrap_con_01" class="wrap_content_box">
  <h2>...</h2>
  <h2>...</h2>
</div>

粗看是多了一些，但是当我们再次遇见给h2增加不同样式的时候，我们可以…

.wrap_content_box {float:left;}
#wrap_con_00 h2,{...}
#wrap_con_00 h2.first {...}
#wrap_con_01 h2,{...}
#wrap_con_01 h2.first {...}


<div id="wrap_con_00" class="wrap_content_box">
  <h2 class="first">...</h2>
  <h2>...</h2>
</div>

<div id="wrap_con_01" class="wrap_content_box">
  <h2 class="first">...</h2>
  <h2>...</h2>
</div>

看，这样是不是好多了，这种格式在1年后，有人问起的时候，我肯以肯定你会说“我不费解”。
上帝也不会找你麻烦了。

加入书签:

取消透明度继承的方法

张经纬 — Mon, 19 Jan 2009 16:00:28 +0000

文中的内容使用叠盖的方法组合而成，已经没有继承了，文章标题，有歧义，回复中有朋友提出来了这一点，这里补充说明。

最近做活动页面的时候，遇到一个透明层的问题。当父级元素设置透明度后，子元素继承(inherit)了父元素的透明度值。在网上找了一下，虽然Google到一个取消透明度继承的,但是那个方法用到太多的CSS HACK，指不定什么时候浏览器升级了，这些HACK就成了地雷。于是自己琢磨了一个办法，取消了透明度的继承，并且没有使用到HACK。

思路：
利用相对定位和绝对定位。相对定位撑开高度，绝对定位充当透明层。相对定位的元素盖在绝对定位的层上。

问题：
绝对定位中没有内容，要事先声明有一个绝对高的高度，但是不能超过32768像素。

Demo：
http://www.zhangjingwei.com/demo/fix_opacity/

样式表如下

body {
	background:url(http://www.google.com/intl/en_ALL/images/logo.gif) repeat;
}
#wrap_1 {
	width:300px;
	padding:20px;
	color:#F00;
	background:#000;
	position:relative;
	filter:alpha(opacity=50);
	-ms-filter:"alpha(opacity=50)";
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity:0.5;
}
#wrap_2 {
	width:300px;
	padding:20px;
	color:#F00;
	position:relative; /*父元素为相对定位*/
	overflow:hidden;
}
#wrap_2_content {
	position:relative; /*内容相对定位，盖在透明层上*/
}
#wrap_2 .fixopacity {
	width:340px;
	background:#000;
	height:32768px; /*一个足够高的高度*/
	position:absolute; /*使用绝对定位*/
	top:0;
	left:0;
	z-index:-1; /*置于最低层*/
	filter:alpha(opacity=50);
	-ms-filter:"alpha(opacity=50)";
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity:0.5;
}
.bk10 {height:10px; font-size:1px; clear:both; overflow:hidden;}

HTML代码如下

<div id="wrap_1">
  <h1>没有取消透明度的继承的样子</h1>
  <p>当我们设置了父级元素透明度的时候，子元素往往都会继承这个透明度。本例旨在演示取消这个透明度。<br />
    <br />
    <img src="http://at.the9.com/images/library/common/library_logo.png" width="105" height="113" /></p>
</div>
<div class="bk10"></div>

<div id="wrap_2">
  <div id="wrap_2_content">
    <h1>取消透明度的继承的样子</h1>
    <p>当我们设置了父级元素透明度的时候，子元素往往都会继承这个透明度。本例旨在演示取消这个透明度。<br />
      <br />
      <img src="http://at.the9.com/images/library/common/library_logo.png" width="105" height="113" /></p>
  </div>
  <div class="fixopacity"></div>
</div>

加入书签: