这里只把一些我自己还需要改进的地方发上来。
————————————————————————
1.网页不是静态的、绝对的媒体。这意味着内能伸缩变形,用户应该被允许调整自己喜欢的方式,包括字体大小和屏幕大小。
因为这样,建议使 用"em"和"%"在font-size上(宽度和高度),相比下px不能够在大部分浏览器改变大小,所以要少用,可以用在边框的大小上。
2.css可以处理16,777,216颜色,可以使用名字、rgb值或十六进制代码。
有17个预先确定的颜色,它们是:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
olive, orange, purple, red, silver, teal, white, and yellow.
transparent 也是一个正确的值。
3.font-family
文字使用的字体,比如宋体,Times New Roman,Arial 等等
这个属性必须详细制定,不能使用偏僻的字体,要使用安全字体(比如arial,verdana和times new roman和宋 体),可以同时指定许多字体,只要使用逗号分开即可。这样的用意是,如果用户电脑里没有第一个字体浏览器可以使用后面指定的字体。这非常有用,因为不同的 电脑拥有不同的字体。例子font-size: arial,helvetica,pc用户可以使用arial而苹果mac用户可以使用 helvetica。
注意:如果字体的名称有许多单词组成,使用双引号组合,比如,font- family: "Times New Romes"。
4.左右Margin加倍的问题
当box为float时,IE6中box左右的margin会加倍。
5.外层box自动计算高度的问题
根据W3C定义,没有float属性的外层box不会自动计算高度,要计算 高度,必须在内层最后一个box加入clear:both。
Opera、netscape、mozilla等不会计算外层box高度,但是微 软ie6会自动计算外层高度。比如:
<html xmlns="http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.52css.com </title>
<style>
.outer {
width:600px;
background:#000;
}
.inner1 {
float:left;
width:200px;
height:100px;
margin:5px;
background:red;
}
.inner2 {
float:left;
width:200px;
height:100px;
margin:5px;
background:yellow;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
</body>
</html>
上面的代码在ie中有黑色的背景,但是没有正确的计算上下的margin,在inner2下面加上一个包含clear:both属性的div后,可以正 确计算margin。但是firefox中仍然没有黑色背景,通常的解决办法是定义一下clear:both这个div的高度,或者插入全角空格,这样就 必须增加额外的高度。网上一种比较好的解决办法是在外层div中加入overflow属性,同时使用clear:both,这样就不会增加额外的高度了。 如下:
<html xmlns="http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.52css.com </title>
<style>
.outer {
width:600px;
background:#000;
overflow:auto;
}
.inner1 {
display:inline;
float:left;
width:200px;
height:100px;
margin:5px;
background:red;
}
.inner2 {
display:inline;
float:left;
width:200px;
height:100px;
margin:5px;
background:yellow;
}
.clear {
clear:both;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
<div class="clear"></div>
</div>
</body>
</html>
因此,外层css要定义overflow属性,内层最后要加上clear属性。
6.居中问题
需要定义元素的宽,并且定义横向的margin,如果你的布局包含在一个层(容器)中,就象这 样:
你可以这样定义使它横向居中:
但是IE5/Win不能正确显示这个定义,我们采用一个非常有用的技巧来解决:在外层用text-align属性。就象这样:
text-align:center;
}
#wrap {
width:760px; /* 修 改为你的层的宽度 */
margin:0 auto;
text-align:left;
}
第一个#outer的text-align:center; 规则定义IE5/Win中#outer的所有元素居中(其他浏览器只是将文字居中) ,第 二个text-align:left;是将#warp中的文字居左。
因此,在有居中元素的css中,外层css要定义text- align:center属性,内层居中用margin:x auto x auto定义,并重新定义text-align。
7. 一些CSS伪类属性不被所有浏览器支持,但有四个伪类可以安全使用在链接上。
伪类像是指定选择器状态或关联选择器的门闩。它们的形式 如:selector:pseudo class { property: value; },在选择器和伪属性之间使用冒号。
visited以点击过的链接
active获得焦 点时的链接(比如在点击时)
hover 鼠标在链接上面
尽管CSS里可以省略它们,但维护不同颜色的链接对于新手是个很好的练习。由于伪类(相比hover)不是经常使用,作为公用属性是非常不幸的特性。由 于这样,它不像以前那么重要,但如果为最优用户响应考虑,应该使用它。
传统默认,文本链接是蓝色,访问后是紫色,理论上可以使用很多 不同颜色效果,但,再次,逐渐广泛使用CSS,使得链接变得不再普通,平均用户也不再认为链接必须是蓝色或紫色。
除了链接其他元素也 可以使用hover伪类。不幸的是,ie7以下的浏览器不支持,这样有许多漂亮的效果不能在IE上实现。
8.最佳使用背景图片的位置要么是上面没有内容要么是背景非常淡,这样同样有利于减少图片大小,因为使用更少的颜色。(建议使用索引色格式,比如GIF)
9.CSS的display属性
操作HTML元素的诀窍在于明白它们工作的方法在于没有特定的形式。一些由标签组成的大部分页面可以设定任何样式。浏览器默认的样式里的大部分html元 素由字体样式、margin,padding组成,本质上是显示类型。
display属性基本上分为inline,block,和 none。
inline就像它的本意——显示为inline的元素为行。strong,anchor锚和em强调元素默认是行。
block元素前后换行。标题和段落元素是块元素。
none,意思不显示元素,在可用性上可以实现漂亮的效果,交替样式或hover效果的高 级运用。
设定表现可以更好运用在网页制作上。
display: inline;
font-size: 2em;
}
#header p {
display: inline;
font-size: 0.9em;
padding-left: 2em;
}
设定标题h1为行元素,可以和后面的元素在同一行。
上面的代码可以使用在打印样式里,比如在导航使用,可以在打印时不显示导航这些无关紧要的东西。
display:none和 visibility:hidden;的不同在于display:none完全取消元素的显示,visibility:hidden保持元素位置但视觉上 的内容不可见。例如,如果3的第二段设置为display:none,第一段将仅跟在第三段,如果设置为visibility:hidden,段落间就会 空出。
表格
明白表格相关的表现属性值最好的方法想象html表格。table是 最初的表现,你可以使用table-row模拟table-cell模拟td。
display属性更进一步,可以通过使用 table-column, table-row-group, table-column-group, table-header- group, table-footer-group and table-caption。现在可以直接使用columns构建表格,比在html中使 用行构建快速。
最后,inline-table设定表格前后不换行。
使用CSS表格会严重损害可用性。HTML 应该用来传递语意,所以如果你有表格数据,那可以使用HTML表格。使用CSS表格仅仅会产生糟糕的数据如果没有CSS数据将不可读。
其 他表现形式
list-item列表项目,就像期待HTML里的li元素。它们需要嵌套在元素里面显示。
run-in元素的表现形式由它的父元素决定。IE和Mozilla都不支持。
compat根据上下阿文决定表现形式,同样IE和 Mozilla都不支持。
maker仅仅使用在:before和:after伪元素,设定content属性的表现。content属性默认 表现就是maker,所以它只有在覆盖原来属性时才有用。
content属性,它的默认就是maker,所以只有在覆盖原来属性时使用。
10.CSS网页布局Page Layout
你需要把网页的每个部分看成独立的块,你可以绝对或相对定位块。
Positioning 定位
positon属性可以指定元素为absolute,relative,static或是fixed。
static是元素默认属性,按 HTML出现的先后顺序。
relative比较像static,但元素可以使用top,right,bottom和left设定初始属性。
absolute把元素从HTML里面拉出,一切由它自己决定,在这里,绝对定位元素可以使用top,right,bottom,left定位在任何地 方。
fixed行为像absolute,但它绝对定位的元素参照浏览器窗口与网页没有关系。所以,理论上,fixed元素可以固定在屏幕上当 页面滚动时。为什么说是理论上的?因为IE7以下的浏览器不支持。
11.CSS的At-Rules@规则
At-rules分装不同的CSS规则,应用在特定场合。
Importing
import@规则引用另外的样式。例如,如果你想添加另外样式到现在的样式,可以这样:
@import url(addonstyles.css);
这很像使用link元素连接CSS到HTML,本质上说有一个内容样式像下面:
<style type="text/css" media="all">@import url(monkey.css);</style>
这是为了照顾老版本浏览器,比如Netscape4不支持@规则所以不能链接样式表,已经构建好标签的HTML页面会失去样式表提供的功能。
Media types
media@规则应用内容使用特定媒体,比如打印,例如:
body {
font-size: 10pt;
font-family: times new roman, times, serif;
}
#navigation {
display: none;
}
}
媒体形式:
all,所有媒体。
aural,言语合成器。
handheld,移动设备
print,打印
projection,投影
screen,电脑屏幕
你还可以使用 braille,embossed,tty或者tv。
注意:说了这么多,IE只支持all,screen和print。
Charachter sets 字 符设定
charset@规则简单设定外部样式里的编码。它出现在样式的最上面例如@charset "ISO- 8859-1";
Font faces 字体外观
font-face@规则用 来详细描述字体,可以在CSS里嵌入外部字体。
它需要font-family描述符引用字体,它的值可以是字体的名称或是新命名一个。嵌入一 个字体,使用src描述符。其他添加到font-face@规则里的描述符将影响正在使用的内含字体,例如如果你添加font-weight: bold 粗体到@规则,font-family的src只能运用到带有font-family属性的选择器里,而且选择器里font-weight属性同样设置成 bold。
看下面例子:
font-family: somerandomfontname;
src: url(somefont.eot);
font-weight: bold;
}
p {
font-family: somerandomfontname;
font-weight: bold;
}
如上面的例子,段落里的字体将是somefont的字体(如果p选择器没有font-weight: bold,那字体就不是somefont)
嵌入字体还凑合着用,因为Mozilla浏览器不支持也没有计划添加这个功能。只有IE有分寸的支持,但这也不是说可以直接使用,IE浏览器嵌入字体, 你还需要微软WEFT软件,它提供Truetype字体转换成压缩的OpenType字体(只有这个你才能使用URI指定)。由于这个限制(显得非常复 杂)兼容性,最好不要使用系统没有的字体。
Pages
page@规则服务页面媒 体,是个高级方式应用于打印媒体样式。它定义了页面块,在盒模型上扩展,所以你可以定义单一页面的大小和表现。
应用page@规则有许多规 定,比如没有padding和border,而且也不上我们说的电脑屏幕,所以pixels和ems单位不被允许使用。
有许多特定属性可以使 用,比如size,可以设定portrait纵向,landscape横向,auto自动或长度。marks属性可以用来定义裁剪标志
页 面媒体里的伪标签
有三种伪标签用来链接特定page@规则,如下形式:@page :pseudo- class {stuff}。
:first应用到页面媒体里的第一页
:left和:right应用到左边和左边页面。这可能用在 指定有非常大margin的左边页面和有非常大margin的右边页面。
还有一些页面@规则,比如page-breaks页面中断和 named pages页面命名,但这些@规则在浏览器里很难工作,你也许浪费了许多时间阅读这篇文章,不过这些都是不错的想法。
12.CSS的伪元素Pseudo Elements
伪元素吸附在选择上和pseudo classes伪类很像,像这样 selector:pseudoelement{property: value;}。有四种方式。
First letters and First lines 首 字母和首行
first-letter伪元素作用到元素的第一个字母,first-line作用到元素的顶行。你可 以,例如为段落创建一个drop caps和首行加粗。
Before and after 前 后
before和after用来联系content属性不使用HTML确定一个元素的内容位置。
content属性值可以是:open-quote,close-quote,no-open-quote,no-close-quote,在引号标记里 关闭任何字符串或使用url(imagename)图片。
content: open-quote;
}
blockquote:after {
content: close-quote;
}
li:before {
content: "POW: "
}
p:before {
content: url(images/jam.jpg)
}
听起来不错吧,可惜大部分用户不能体会到before或after的效果,因为IE不支持。
13.CSS的优先级特性Specificity
如果同个元素有两个或以上冲突的CSS规则,浏览器有一些基本的规则来决定哪一个非常特殊而胜出。
它可能不像其它那么重要,大部分案例你不 需要担心冲突,但大型而且复杂的CSS文件,或有很多CSS文件组成的,可能产生冲突。
选择器一样的情况下后面的会覆盖前面的属性。比如:
p元素的元素将是蓝色,因为遵循后面的规则。
然而,你不可能经常用相同的选择器冲突达到目的,当你使用嵌套选择器,合理的冲突来了。比如:
也许你看起来p元素在div元素里面的颜色是蓝色,就像后面p元素的规则,但是第一个选择器的特性却是红色。基本上,一个选择器越多特性,样式冲突的时 候将显示它的样式。
一组嵌套选择器的实际特性可以计算出来。基本的,使用ID选择器的值是100,使用class选择器的值是10,每个 html选择器的值是1。它们加起来就可以计算出特性的值。
div p的特性是2(两个html选择器)
.tree的特性是10(1个class选择器)
div p.tree的特性是1+1+10=12,(两个html选择器,一个 class选择器)
#baobab的特性是100(1个ID选择器)
body #content .alternative p的特性是112(两个html选择器,一个ID选择器,一个类选择器)
按照上面的规则,div p.tree的特性比div p高,body #content .alternative p又比它们两个都高。
----这应该算是伪原创吧。是我看了52CSS的文章后把自己不是很熟的一些东西摘抄了过来。-----