|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
层叠样式表(CascadingStyleSheets)的缩写,用于定义HTML元素的显示形式,是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。
在利用CSS建站时,您一定碰到过五花八门的结构成绩,最初大概被弄得焦头烂额。本文的目标是让您的计划历程更加简单,当您碰到坚苦时为您供应疾速参考。
1、有疑问,先考证
在调试时,先对您的代码举行考证常常能省往很多贫苦事。格局不准确的XHTML/CSS会招致很多结构上的毛病。在其他扫瞄器中举行测试之前,请先在开始进的扫瞄器中撰写和测试CSS代码,而不是相反。
假如您在陈旧的扫瞄器中编写和测试,你的代码就不能不依附谁人陈旧扫瞄器的糟的显现,然后在切合尺度的扫瞄器中举行测试,看到显现了局“不一般”时,你会很懊丧的。相反,您应当先将您的代码完美,然后再想法为较初级的扫瞄器盘算。如许从一入手下手您的代码就是切合尺度的,你不用再为撑持其他扫瞄器而劳心劳神。固然了,今朝服从尺度的扫瞄器无疑就是Mozilla,Safari或Opera。
2、确保您想要的效果然的存在
很多特定的扫瞄器专有的CSS扩大在正式尺度中其实不存在。假如您对filter(滤镜)或转动条指定款式,您用的就是公有代码,除IE以外,在其余扫瞄器中毫无感化。假如考证器告知您代码没有界说,极有大概您用了公有款式,别期望在分歧的扫瞄器中失掉分歧的效果。
3、假如结构中必定要用浮动工具,别忘了合时利用扫除(clear)属性
浮动元素似易实难,并且难以把握。假如您发明浮动工具伸出了容器的界限,大概不像您所希冀的那样显现,请反省您的希冀是不是准确。关于这个成绩请看EricMeyer的教程
4、边距的兼并:可用padding或border来制止
您大概被过剩的(大概想要却不呈现的)空缺弄得焦头烂额。假如您用了margins,边距的兼并大概就是成绩的本源。AndyBudd对此的注释大概能为你解惑。
5、制止将padding/border和流动宽度同时使用到统一元素
IE5毛病的区块模子是祸首罪魁,是它把事变弄得七零八落。固然有弥补计划,不外最好是绕过这个成绩,当子元素的宽度流动时,为其父元素指定padding。
6、制止IE下未指定款式内容的闪灼
假如您用@import来输出内部款式表,日夕会发明IE有“闪灼”的偏差。在使用CSS款式之前,未格局化的HTML文本会长久地呈现。这是能够制止的.
7、别期望min-width在IE中有效
IE不撑持它,可是它将width看成min-width,以是经由过程一些IE的过滤技能(filtering),能够完成一样的最后的效果。
8、断港绝潢时,试一试削减宽度
因为舍进偏差,偶然50%加上50%即是100.1%,损坏某些扫瞄器中的结构。无妨尝尝将50%减到49%,乃至49.9%。
9、IE中显现不一般
多是Peekaboo臭虫在作祟,特别是当鼠标经由超链接时能显现一般。修补办法见PositionisEverything。
10、假如利用了锚点,在使用超链接款式时要出格当心
假如您在代码中利用了传统的锚点(),您会注重到:hover和:active伪类也会感化于它。要制止这类情况,你可使用id,大概利用不为人知的语法::link:hover,:link:active
11、记着“LoVe/HAte”(爱/恨)链接划定规矩
要以上面的按次指定超链接伪类:Link,Visited,Hover,Acitve。任何其他按次都不当当。假设用了:focus,序次应为LVHFA(“LordVadersHandleFormerlyAnakin”,MattHaughey如许倡议)。
12、请记着“TRouBLED”(贫苦的)边框
边框(border)、边距(margin)和补白(padding)的简写序次为:顺时针偏向从上入手下手,即Top,Right,Bottom,Left。好比margin:01px3px5px;暗示上边距为零,右侧距为1px,依此类推。
13、非零值要指明单元
在用CSS指定字体、边距或巨细时,必需指明所用的单元(独一的破例是line-height,很奇异,它不必要单元)。某些扫瞄器对未指明单元的处置办法不足为据。零就是零,不论是px仍是em。其他的非零值都要明白指订单位。比方:padding:02px01em;
14、测试分歧的字体巨细
像Mozilla和Opera如许的初级扫瞄器都同意你改动字体巨细,不论你用甚么字体单元。某些用户的默许字体巨细一定和你的分歧,尽最年夜勉力往满意他们。
15、测试时用嵌进式款式,公布时再改成内部输出
将款式表嵌进在你的HTML源代码中,在测试时能够打消很多缓存引发的毛病,特别是某些Mac下的扫瞄器。但在公布前,必定要记着将款式表移到内部文件,用@import或引进。
16、加上分明的边框有助于结构调试
像div{border:solid1px#f00;}之类的全局划定规矩能够临时为你查出结构成绩。为特定的元素加上边框可帮您找到难以觉察的堆叠或空缺成绩。
17、图片路径不要用单引号
当设置背景图片时,要保持用双引号。只管看起来仿佛画蛇添足,可是假如不这么做,IE5/Mac会噎住。
18、不要为未来的款式表(好比手持式设备或打印用款式表)“占位子”
MacIE5对空的款式表对照伤风,会增添页面的装进工夫。倡议款式表中最少应当有一条划定规矩(哪怕是正文也好),以免MacIE噎住。
另有一些倡议固然不针对某些功效,可是在开辟过程当中值得注重:
19、好好构造您的CSS文件
得当地成块正文CSS,将类似的CSS选择符编为一组,养成分歧的定名习气和空缺格局(为跨平台思索,倡议用空缺字符而不是tab。)和得当的序次。
20、以功效(而不是表面)为类和ID定名
假设您创立了一个.smallblue类,厥后盘算将笔墨改年夜,色彩变成白色,这个类名就不再有任何意义了。相反,您能够用更有形貌性的名字如.copyright和.pullquote。
21、组合选择符
坚持CSS短小对削减下载工夫十分主要。请只管为选择符分组、使用承继(inheritance)和利用简写(shorthand)来削减冗余。
22、利用图片交换手艺时要思索亲和力
已发明传统的FIR在屏幕浏览器,和封闭图片显现[的扫瞄器]中会出成绩。对此有其他办理举措,要依据详细情形,稳重利用。
</p>
业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站。 |
|