Sun, 29 Jul 2007 00:56:31 +0800 Css - czBin's Blog http://www.czBin.cn/Css.xml czBin.cn -> Css的技术文章 Sun, 29 Jul 2007 00:56:31 +0800 纯在CSS里定义input样式，不添加任何多余的HTML代码 http://www.czBin.cn/CSS.Input.001.php <input type="text"/>
<input type="submit" value="提交"/>
一半来说，我们都会赋予text和input不同的id或者class来分别定义输入框和按钮的样式，例如：
<input type="text" id="text"/>
<input type="submit" value="提交" id="submit"/>
但是，如果我们只想把网页中所有的text以及submit都分别定义为相同的样式，那么，我们可以用下面的方法来实现：
<style type="text/css">
input { width:expression((type=="text")?350:80); }
input[type="text"] { width:350px; }
input[type="submit"] { width:80px; }
</style>
<input type="text"/>
<input type="submit" value="提交"/>


]]> Css http://www.czBin.cn/CSS.Input.001.php Sun, 22 Jul 2007 14:42:23 +0800 Css中为对象应用样式的三种方法：id,class,style http://www.czBin.cn/Css.Id.Class.Style.php
1：使用#定义样式，并使用id为对象应用样式。
......
2：使用.定义样式，并使用class为对象应用样式。
......
3：不定义样式，直接使用style为对象应用样式。
......
使用这三种方法所产生的效果是相同的，但我们需要注意的是，这三种方法间的优先级问题。
如果我们对一个对象同时使用上述三种方法定义样式，会怎么样呢？
比如我们先定义一个#STYLE { font-size:12px; }再定义一个.STYLE { font-size:14px; }最后在对象上使用style="font-size:16px;"代码如下：
......
这种情况下，浏览器会根据三种方式的优先级，即style>id>class来为对象应用样式。上述例子中，div中的文字会显示为16px大小。


]]> Css http://www.czBin.cn/Css.Id.Class.Style.php Tue, 03 Jul 2007 17:13:02 +0800 兼容Ie6,Ie7,Firefox的办法，也许是笨办法，但起码不用Hack了 http://www.czBin.cn/Css.Ie67.Firefox.php 所以，我们还是用比较古老的办法来解决Ie6,Ie7,FireFox的兼容问题吧。


]]> Css http://www.czBin.cn/Css.Ie67.Firefox.php Sat, 23 Jun 2007 17:33:02 +0800 用CSS在一个网页里定义几种不同链接 http://www.czBin.cn/CSS.Link.different.php a.linkOne { color:black; }
a.linkTwo { color:red; }

使用CSS:
为链接加上class="linkOne"后，链接为黑色
加上class="linkTwo"后，链接为红色


]]> Css http://www.czBin.cn/CSS.Link.different.php Sun, 10 Jun 2007 17:53:11 +0800 让鼠标经过div,ul,li,tr,td等容器时，背景颜色改变 http://www.czBin.cn/onMouseOver.001.php
#d1:hover {background:#FF0000}
......
<div id="d1">www.czbin.cn</div>
但"伟大的"Ie并不支持这样写...
只好通过定义onMouseOver事件和onMouseOut了,例如:

<div onMouseOver="this.style.backgroundColor='#FF0000'" onMouseOut="this.style.backgroundColor='#FFFFFF'">

......


]]> Css http://www.czBin.cn/onMouseOver.001.php Sun, 10 Jun 2007 16:53:22 +0800 在IE浏览器下,Ul的Margin竟然传给了LI... http://www.czBin.cn/Margin.ulli.001.php
开始代码是这样的

......

<div>
<ul id="m">
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<div style="clear:both"></div>
</ul>
</div>

......

IE下浏览，每个LI竟然都有80的Top Margin....

......


]]> Css http://www.czBin.cn/Margin.ulli.001.php Sat, 09 Jun 2007 23:36:35 +0800 在 CSS 中关于字体处理效果的思考 http://www.czBin.cn/Css.Font.001.php
中文和英文的最大区别就是中文是方块字，英文是拼音文字，这对字体的处理的影响是巨大的。看看下面的图示就会发现，英文字体里的那些变化在中文字体里都弱化了。

作为中文的读者，习惯性的接受方块形状做为阅读的单元，其实对于眼睛来说，这是一种容易疲劳的方式，阅读的时候你的视线实际上是跟随整行文字的外形。看看这个例子。

NOW I VE TRIED TO TALK TO YOU AND MAKE YOU UNDERSTAND

Now I ve tried to talk to you and make you understand

哪一行更容易读呢？

......

最好使用左对齐，尤其要避免使用左右对齐，除非你有一个特殊的设计目的，左对齐时右侧的不对齐正是为了阅读的方便，右侧的变化对你的视力是一个帮助，它借助变化告诉你的眼睛可以换行了。
行间距？

......

很特殊的用途，对中文来说这两者应该是相同的。这个设定的本身就是为了解决某些字体设计上缺陷，来增加文字的可读性。


]]> Css http://www.czBin.cn/Css.Font.001.php