/************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引用的区别 :
<link href="styles.css" mce_href="styles.css" type="text/css" />
<mce:style type="text/css"><!--
@import url("styles.css");
--></mce:style><style type="text/css" mce_bogus="1">@import url("styles.css");</style>
需要注意的是@import rules must always be first in a document
差别1 :link属于XHTML标签,而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。
差别2: 加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显。这种错误称作 flash of unstyled content(fouc)。解决这个问题的方法就是在<head>至少包含一个<link>或者<script>。
差别3: 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。这样的话,在旧的浏览器中经过import的css就可以不被用户看到
差别4: 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
The <LINK> tag also takes an optional MEDIA attribute, which specifies the medium or media to which the style sheet should be applied. Possible values are
* screen, for presentation on non-paged computer screens;
* print, for output to a printer; 打印机
* projection, for projected presentations; 投影
* aural, for speech synthesizers;
* braille, for presentation on braille tactile feedback devices;
* tty, for character cell displays (using a fixed-pitch font);
* tv, for televisions; 电视
* all, for all output devices
一般我看到的就是screen或all
Netscape 4.x and IE 3.x do not support the @import rule.
Internet Explorer 6 and below do not support the media designation.
IE 4.x has some support for the @import rule, but it's spotty, and it's best not to rely on it.
hides the style sheet from Netscape 4, IE 3 and 4 (not 4.72)
@import url(../style.css);
hides the style sheet from Netscape 4, IE 3 and 4 (not 4.72), Konqueror 2, and Amaya 5.1
@import url("../style.css");
hides the style sheet from Netscape 4, IE 6 and below
@import url(../style.css) screen;
hides the style sheet from Netscape 4, IE 4 and below, Konqueror 2
@import "../styles.css";
层:
margin
border
padding
content
例子:
<html>
<head>
<mce:style type="text/css"><!--
body{
background-color:lightpink;
}
#test{
position:relative;
background-color:red;
margin: 25px;
border:10px ;
border-color: blue;
border-style:solid;
padding:30px;
}
--></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> <!-- header -->
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" />