CSS 技巧 (取自 OReilly.CSS.The.Missing.Manual)

1.html的基本原则,让标签做标签应该做的事.
比如,不应该使用table标签来做定位,因为table标签是为了构造table而使用的。

2.有些html可以使用css而实现,不要使用它们
比如如下的标签:
<br />,<font> <b> <i> 这些标签的作用都可以用css做到

3.只使用一个<h1>
页面上的h1标签的内容,会被搜索引擎纪录为优先级较高的索引内容,定义大量的h1标签反而会收到搜索引擎的惩罚

4.检查html是否符合w3c标准.
使用一些网站或者是firefox的插件可以帮助检查标准

5.使用<p>表示文章段落


6.使用ul,即使是横向排版

7.使用一些特殊的tag
比如cite表示应用一本书名,address表示地址,<blockquote>表示应用其它内容.还有<dl><dt><dd>

8.在文件头部定义html版本号
在html文件头部表明使用的html版本,这样有助于浏览器的解析.否则浏览器将使用自己定义的方式来解析一些内容(这也就使浏览器在显示时候有差别的部分原因,原书称其为 quirks mode.)

10.css文件也需要经过验证

11.注意style多次定义后的最终显示结果
如果一个tag的style被多处定义,最终显示的规则如下:
 Inherited Styles Accumulate
 Nearest Ancestor Wins
 The Directly Applied Style Wins
其实有个积分表,具体可以网上查一下

12.推荐使用的属性:float
这个属性可以帮助排版,如果没有使用过的人,快去试试。

13.应该是链接的地方使用<a>而不要使用button
其实a也可以做成button的效果,如下
a.button {
        border: solid 1px #000;
        background-color: #333;
    }

14.设置table的odd属性可以做得隔行背景色不同
如下:
tr.odd { background-color: red; }

15.使用css的几个好的习惯:
1.加上注释.可以使用/* */
2.使用表达清晰的命名.
    命名遵循目的而不是表现.
    不要使用位置作为命名的方法
    避免意义不明确的命名
3 使用多个css文件,可以使用import指令
4.使用firefox plugin: Web Developer's Toolbar

16.书中介绍的几个资源网站:
www.morguefile.com
http://creativecommons.org/image
http://openphoto.net/gallery/browse.html
这几个网站提供大量的照片.

这些网站提供一些小的icon,tile pattern等
www.stylegala.com/features/bulletmadness/
www.somerandomdude.net/srdprojects/sanscons
www.k10k.net/frames.aspx?section=patterns
www.kollermedia.at/index.php/pattern4u/
http://squidfingers.com/patterns/

17.关于字体的使用
所有字体最终属于两类:serif 和 sans-serif
serif 适合 大段的文本。
如 Times, Times New Roman,Geogria等等
sans-serif 适合标题
如 Arial,Helvetic Verdana Formata

为了防止浏览器不支持字体,可以通过写back up 字体实现,如:
font-family: Arial, Helvetica, sans-serif;

18.字体颜色:
字体颜色一般有一下几种定义方式:
color: #3E8988;
color: rgb(100%,100%,100%);
color: rgb(255,255,255);

19.字体大小
一般喜欢使用pixle定义,如下:
font-size: 36px;

但是使用pixle有一个缺陷,在IE6中,浏览者不能自己调整字体的大小。这导致一些视力不佳的人难以清楚的浏览内容,这在IE7和其他浏览器中,已经解决。

另外,值使用percent时,需要注意字体大小设置嵌套的问题

20.form技巧:
如果需要设置form中的input,type为text的tag的style,可以这样
input[type="text"] { background-color:
    blue; }
这个可以类推到其他情况
















发布了28 篇原创文章 · 获赞 4 · 访问量 9万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章