CSS 小总结

renzhelife

浏览: 668282 次

最近访客更多访客>>

feelsyt

a2225657

wu1238

看海的星

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (895)

社区版块

存档分类

2011-11 ( 24)
2011-10 ( 43)
2011-09 ( 47)
更多存档...

/************by garcon1986 **********/

1. CSS单位

% percentage
in inch
cm centimeter
mm millimeter
em 1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses
ex one ex is the x-height of a font (x-height is usually about half the font-size)
pt point (1 pt is the same as 1/72 inch)
pc pica (1 pc is the same as 12 points)
px pixels (a dot on the computer screen)

2. Anchor Pseudo-Class锚伪类

In CSS1, anchor pseudo-classes have no effect on elements other than 'A'.
在CSS1中，锚伪类只对A有效。
因此，
A:link { color: red }
:link { color: red }
效果是一样的。
A:link { color: red }
<A CLASS=link NAME=target5> ... </A>
伪类可以和正常的类合并：
A.external:visited { color: blue }
<A CLASS=external HREF="http://out.side/" mce_HREF="http://out.side/">external link</A>

Pseudo- element伪元素：first-line, first-letter
<STYLE TYPE="text/css">
P:first-line { font-variant: small-caps }
</STYLE>
<P>
<P:first-line>
The first line of an
</P:first-line>
article in Newsweek.
</P>

3. @import 引用和link引用的区别 ：

层：
margin
border
padding
content

例子：
<html>
<head>
<mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body{
background-color:lightpink;
}
#test{
position:relative;
background-color:red;
margin: 25px;
border:10px ;
border-color: blue;
border-style:solid;
padding:30px;
}</style>
</head>
<body>
<table id="test">
<tr>
<td>
hellworld
</td>
<td>
hellworld
</td>
</tr>
<tr>
<td>
hellworld
</td>
<td>
hellworld
</td>
</tr>
</table>
</body>
</html>

4. Div layout VS table layout
Table适用于 tabular data（表格数据）
表格结构的特点：
结构比较直观，th（tablular header），tr（tabular row），td（tabular data）
修改维护起来困难，尤其是嵌套表格
更难做到内容和设计没有分离，大部分使用table的站点都用到了 border，width，cellpadding，cellspacing等标签
代码行越多文件就越大，在网速较慢的设备中如手机，就会降低页面加载速度
Div的特点：
容易维护修改
div中的id和class是有语义的，有益于搜索引擎；说到语义，注意一下虽然 strong和b（bold）都有加重字体的效果，但是strong更适合语义。
id和class有益于DOM操作，如 getElementsById，getElementsByClassName, getElementsByClass
需要注意的是：
如果使用太多div，那将和使用table没有区别，起不到简化代码，易于维护的作用
尽量避免嵌套div，
尽量不要用 style，如：<div style="">, <span style="">
如果页面有很多div的话，应该尽量减少float的使用，float是“流”，是流动的，在打印的时候经常会出现bug。
如何优化代码：
减少不必要的div，如：<div class="xxx" ><form></form></div> 可以精简成<form class="xxx"></form>
尽量使用语义化的标签，如h1(header1) ... h6, ul(unordered list), dl(definition list), p(paragraph)
优化div，减少div的使用数（合并）
闭合div时添加注释如： </div> 
Dreamweaver 中 code -> Apply source formatting 可以格式化代码
Form中使用fieldset和list有帮助

多使用list，list是最完美的容器（ul li）(ol li) (dl dt dd) unordered list, list items, ordered list, definition list

不能把background-color, border等属性防盗block-level的元素中

5. block-level VS inline element（text level）：

block-level能包含block－level和inline element的元素
inline element只能包含inline element的元素
block-level包括: div， table，tr，td，th，h1...h6, ul, ol, li, blockquote等
inline element包括: i, b, a href, a name, em, strong, q 等

使用了太多div的例子：
<div id="menu">
<div class="selected">
<div class="graphicLeft">
<div class="graphicRight">
<a href="#" mce_href="#">Home</a>
</div>
</div>
</div>
<div>
<div class="graphicLeft">
<div class="graphicRight">
<a href="#" mce_href="#">About</a>
</div>
</div>
</div>
...
</div>

6. CSS 继承 ：

大多数的边框类属性是不被继承的，如：border， margin， padding等
一般的font， color， background，位置等是被继承的。

7. Background-image 和 img 的区别：
使用background-image时，必须div中有内容，不然不会显示背景图片。
img是前景图片，自然会显示。
label 中的for是针对于id的。
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />

分享到：