如果你从事前端开发或者web开发的话,一定听说过Zen coding – 一种快速编写HTML/CSS代码的方法。它使用仿CSS选择器的语法来快速开发HTML和CSS – 由Sergey Chikuyonok开发。

现在它改名为了Emmet,并且搭建了一个新的华丽的网站:http://docs.emmet.io

我们可以从下图体会一下他的强大。

和一般的编辑器中使用的“代码片段”概念不太一样,Emmet使用动态的语法来生成代码,这意味着你不需要自己去编辑并创建固定的代码片段。 大大的提高了代码编写效果,这一点似的Zen coding非常的流行。

例如,输入如下内容:

ul#nav>li.item$*4>a{Item $}

Emmet会帮助你生成如下的代码片段:

<ul id="nav">
    	<li><a href="">Item 1</a></li>
    	<li><a href="">Item 2</a></li>
    	<li><a href="">Item 3</a></li>
    	<li><a href="">Item 4</a></li>
</ul>

Emmet 作为插件可以支持如下的编辑器:

  • Eclipse/Aptana
  • Sublime Text 2
  • TextMate 1.x
  • Coda 1.6 and 2.x
  • Espresso
  • Komodo Edit/IDE
  • Notepad++
  • PSPad
  • <textarea>
  • CodeMirror2
  • PHPStrom

如果做PHP开发的话,强烈建议使用PHPStrom这一PHP开发利器,再配合Emmet就是如虎添翼!

这里有一篇详细介绍Emmet的文章:http://www.iteye.com/news/27580

 

 

下面是在网上搜到一段解决该问题的代码。


<HTML>
<HEAD>
<!--  -->
<STYLE>
.PagerPrint{page-break-after: always}
</STYLE>
</HEAD>
<BODY>
<!-- 注意:以下的两个Table是并列的 -->

<table id = "tbContent1">
<tr>
<td> 内容一 <td>
</tr>
</table>

<!-- 以下这个div相当于一个分页控制符 -->
<div class = "PagerPrint"></div>

<table id = "tbContent2">
<tr>
<td> 内容二 <td>
</tr>
</table>

</BODY>
</HTML>


但实际测试中发现,很多IE系浏览器会出现不能分页的问题。

这是因为PagerPrint所有的div没有高度的原因,或者是BUG吧!

所以只需要修改一下CSS样式就可以了

.PagerPrint{page-break-after: always;height:1px;}

拜读教主博客,总是有收获的,哈哈。http://neatstudio.com/show-1312-1.shtml 

这个资料很多,但教主已经整理好了,直接收过来。

一些http code列表,开发人员必备,其实是可以查rfc文档的。不过。这里是拎出来的数据:



[Informational 1xx]
100="Continue"
101="Switching Protocols"

[Successful 2xx]
200="OK"
201="Created"
202="Accepted"
203="Non-Authoritative Information"
204="No Content"
205="Reset Content"
206="Partial Content"

[Redirection 3xx]
300="Multiple Choices"
301="Moved Permanently"
302="Found"
303="See Other"
304="Not Modified"
305="Use Proxy"
306="(Unused)"
307="Temporary Redirect"

[Client Error 4xx]
400="Bad Request"
401="Unauthorized"
402="Payment Required"
403="Forbidden"
404="Not Found"
405="Method Not Allowed"
406="Not Acceptable"
407="Proxy Authentication Required"
408="Request Timeout"
409="Conflict"
410="Gone"
411="Length Required"
412="Precondition Failed"
413="Request Entity Too Large"
414="Request-URI Too Long"
415="Unsupported Media Type"
416="Requested Range Not Satisfiable"
417="Expectation Failed"

[Server Error 5xx]
500="Internal Server Error"
501="Not Implemented"
502="Bad Gateway"
503="Service Unavailable"
504="Gateway Timeout"
505="HTTP Version Not Supported"


文档参考:http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

可以写到ini文件里,然后用parse_ini_file来读取。

From: http://www.5icool.org/a/201002/273.html
Date: 2010-05-07

firebug logo
1.什么是Firebug

从事了数年的Web开发工作,越来越觉得现在对WEB开发有了更高的要求。要写出漂亮的HTML代码;要编写精致的CSS样式表展示每个页面模块; 要调试javascript给页面增加一些更活泼的要素;要使用Ajax给用户带来更好的体验。一个优秀的WEB开发人员需要顾及更多层面,才能交出一份 同样优秀的作业。为帮助广大正处于Web2.0洪流中的开发人员,在这里为大家介绍一款轻巧灵活的辅助开发工具。

Firebug是Firefox下的一款开发类插件,现属于Firefox的五星级强力推荐插件之一。它集HTML查看和编辑、 Javascript控制台、网络状况监视器于一体,是开发JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的 瑞士军刀,从各个不同的角度剖析Web页面内部的细节层面,给Web开发者带来很大的便利。这是一款让人爱不释手的插件,如果你以前没有接触过它,也许在 阅读本文之后,会有一试的欲望。笔者在撰写此文的时候,正逢Firebug发布1.0正式版,这不能不说是种巧合。

继续阅读

转载自:http://www.cnblogs.com/shoupifeng/archive/2010/01/26/1656438.html

独立

  • 屏蔽IE浏览器(也就是IE下不显示)

  • 仅Firefox可见

    *:lang(zh) select {font:12px !important;}

  • 仅Safari可见

    select:empty {font:12px !important;}

  • 仅Opera可见

    @media all and (min-width: 0px){ select{……} }

  • IE系列

  • 仅IE可见

    select {*font:12px;}
    select {+font:12px;}
    这两句作用一样,只有IE能解释 * or +

  • 仅IE7与IE5.0可以识别

    *+html select {}当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK.

  • 仅IE7可以识别

    *+html select {font:12px;!important;}当面临需要只针对IE7做样式的时候就可以采用这个HACK.

    IE7跟IE6及以下的一个很明显的区别就是对!important的支持.
    IE7对样式的解释跟DTD是有关,在没有DTD的时候,IE7是能读取IE6的hack的.
    同时必须说明的就是*+html这个Hack必须在松散型DTD下生效,即刻:
    <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd”>

  • IE6及IE6以下识别

    * html select {}这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK.其它浏览器不识别.

    html/**/ >body select {}这句与上一句的作用相同。

  • 仅IE6不识别,屏蔽IE6

    select { display /*屏蔽IE6*/:none;}这里主要是通过CSS注释分开一个属性与值,注释在冒号前。

  • 仅IE6与IE5不识别,屏蔽IE6与IE5

    select/**/ { display /*IE6,IE5不识别*/:none;}这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽IE5.5

  • 仅IE5不识别,屏蔽IE5

    select/*IE5不识别*/ {}这一句是在上一句中去掉了属性区的注释。只有IE5不识别,IE5.5可以识别。

混合

  • 同一选择器针对不同浏览器

    select {
    background-color: black;/* firefox, opera, ie8 */
    [;background-color: green;]/* safari, chrome */
    *background-color: blue;/* ie7 */
    _background-color: red;/* ie6 */
    }
    html*~/**/body select {
    border: 5px solid red;/* ie8 */
    }
    以上只是一个例子说明混合写法.以下是对例子的补充
    1.IE都能识别*;标准浏览器(如FF)不能识别*;
    2.IE7,FF能识别!important,IE6不能.
    3.只有IE6能识别_
    4.不管是什么方法,书写的顺序都应该是firefox的写在前面,IE7的写在中间,IE6的写在最后面。
    5.对于ie8 chrome hack的请 GOOGLE or BAIDU …

    相关阅读

过滤

  • IE5.x的过滤器,只有IE5.x可见

    @media tty {
    i{content:"";/*" "*/}} @import 'ie5win.css'; /*";}
    }/* */

  • IE5/MAC的过滤器,一般用不着

    /**//*/
    @import "ie5mac.css";
    /**/

  • IE的if条件Hack(写在HTML中的通过条件来链接)

    <!--[if IE]> Only IE <![endif]-->所有的IE可识别

    <!--[if IE 5.0]> Only IE 5.0 <![endif]-->只有IE5.0可以识别

    <!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->IE5.0包换IE5.5都可以识别

    <!--[if lt IE 6]> Only IE 6- <![endif]-->仅IE6可识别

    <!--[if gte IE 6]> Only IE 6/+ <![endif]-->IE6以及IE6以下的IE5.x都可识别

    <!--[if lte IE 7]> Only IE 7/- <![endif]-->仅IE7可识别

应用

  • 盒模型解决方法

    selct {width:IE5.x宽度; voice-family :""}""; voice-family:inherit; width:正确宽度;}盒模型的清除方法不是通过!important来处理的。这点要明确。

  • 截字省略号

    select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾,很好的一个技术。只是目前Firefox并不支持。

  • 清除浮动

    select:after {content:"020"; display:block; height:0; clear:both;}
    select {zoom:1;}
    在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的HACK来对父级做一次定义,那么就可以解决这个问题。

    相关阅读

  • display:inline-block

    select {
    display:inline-block;/*Firefox3 beta、IE8 beta、Opera、Safari 支持,IE 下触发 inline 元素的 hasLayout*/
    display:-moz-inline-stack;/* Firefox 的私有属性,也可以用 -moz-inline-box */

    zoom:1;/*IE 下触发 hasLayout*/
    *display:inline;/*一旦IE 下触发了 hasLayout,设置 block 元素为 inline 会使 display:inline 效果与 display:inline-block 相似*/

    text-indent:-9999px;
    *text-indent:0;
    font-size:0;
    line-height:0;/* 如需隐藏文字,可用这四个属性 */
    /*另外上面隐藏文字,还可以用更简化的方法:line-height:超级大值;font-size:0; */

    overflow:hidden;/* 针对ie,防止内容溢出,造成的高度及宽度改变 */
    vertical-align:middle;/* 行内垂直居中,针对 Opera 比较大的偏离 */

    width:px;/*?为任意非auto值*/
    height:px;/*?为任意非auto值*/
    }

    在实际应用中 -moz-inline-box 会存在元素间的对齐等问题,虽然 Firefox 还有一个私有属性 -moz-box-align 来帮助解决对齐问题,但依旧难以预料问题多多,而相对来说 -moz-inline-stack 的表现更像 inline-block ,这点可以在 Firefox3 中测试出来。但 -moz-inline-stack 使用时也会有一个 bug ,如果一个 display:-moz-inline-stack; 的元素外层元素是 display:inline; 即会使 Firefox 中其包含的链接不可点,这个需要用 position:relative; 来解决。详细例子见<<display:inline-block的应用两例>>

在译言上看到这篇文章,才知道原来这项技术叫做CSS Sprites。这篇文章介绍的很全了,转载之,供大家学习吧.

转自http://www.yeeyan.com/articles/view/oc/39032

CSS Sprites并没有一个确定的中文翻译,通常被意译为“CSS图像拼合”或“CSS贴图定位”。CSS Sprites并不是一门新技术,目前它已经在网页开发中发展得较为成熟。CSS Sprites并不是什么金科玉律,但在很多情况下,它有着一定的优势,最重要的是它可以减轻服务器的负载,提高网页加载速度。

本文系统的介绍了CSS Sprites的概念、用途和用法,相信本文会解决你在使用CSS Sprites中遇到的大部分问题。

什么是CSS Sprites?

“Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏、视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅。“Sprite”就是这样一种技术,它将许多图片组合到一个网格上,然后通过程序将每个网格的内容定位到画面上。

Sprite被定位到一副静态图片上,并且通过简单的程序或硬件即可正确定位到画面上,一幅幅图片就像是被“变”出来的,他们并没有单独占用内存,所以被取名为“Sprite精灵”。

Screenshot

上图是口袋妖怪的组合图片,可以点这里欣赏更多

时间进行到2000年,Web设计向着精致、巧妙的方向发展。设计师们开始考虑使用非Javascript的方 式制作鼠标滑过、悬停菜单的效果,这时CSS Sprite应运而生,它基于同上文提到的游戏Sprite同样的原理,并且使用CSS更容易控制,很快的流行开来。

2004年,Dave Shea 提出了一种使用CSS控制组合图片的方案 ,将许过小的图片组合在一起,使用css定义背景属性,来控制图片的显示位置和方式。

当页面加载时,不是加载每个但以图片,而是一次加载整个组合图片。这是一个了不起的改进,它大大减少了HTTP请求的次数,减轻服务器压力,同时缩短了悬停加载图片所需要的时间延迟,使效果更流畅,不会停顿。

CSS Sprites用在哪里?

CSS Sprites可以用在很多场合,大字那个网站可以将许多单独的图片,以有机的方式组合起来,从而使其便于维护和更新。图片之间通常会留出较大的空白,使 得图片不会影响网页的内容。但同时CSS Sprite大多使用于较固定的像素定位中,它的弹性较差,收到定位等因素的制约。所以,你需要在可维护性vs降低负载之间权衡利弊,选择最适合你的项目 的方式。

下面是一些CSS Sprites的使用范例:

Xing

这个网站将一些按钮、图标以及LOGO做成了CSS Sprites:

Screenshot

Amazon
亚马逊使用的大幅、整齐巧妙的CSS Sprites:

Screenshot

Apple
苹果网站使用CSS Sprites来制作导航菜单的鼠标悬停效果:

Screenshot

YouTube
YouTube使用了一个2008像素高的CSS Sprites:

Screenshot

CNN
CNN使用了非常简单谨慎的方案:

Screenshot

Digg
Digg的方案比较复杂:

Screenshot

Yahoo
Yahoo将他们漂亮的图标等距离排布起来:

Screenshot

Google
Google使用了极其简化的方案:

Screenshot

Dragon Interactive
一个丰富多彩的CSS Sprites方案:

Screenshot

TV1.rtp.pt
一个很大很酷的CSS Sprites方案

Screenshot

CSS Sprites常用来合并频繁使用的图形元素,如导航、LOGO、分割线、RSS图标、按钮等。通常它们不会作为网页内容出现,因为涉及内容的图片并不是每个页面都一样。

关于CSS Sprites的文章

CSS Sprites: Image Slicing’s Kiss of Death

中文版 http://www.liquidroc.name/post/my_view_on_css_sprites.html

最权威的CSS Sprites介绍文章之一

Screenshot

CSS Sprites: What They Are, Why They’re Cool And How To Use Them
一片图文并茂的介绍文章

Screenshot

How Yahoo.com and AOL.com Improve Web Performance With CSS Sprites
介绍Yahoo、AOL等网站使用CSS Sprites降低服务器压力的案例。

What Are CSS Sprites?
又一片介绍文章

Screenshot

Sprite Optimization
Dave Shea的思考:是不是真的有必要简历复杂的大型CSS Sprites?答案是不!不要搞得太复杂,找到一个折中的方案才是正道。

CSS Sprites

Creating Easy and Useful CSS Sprites

一篇教程,其源文件可下载学习

Screenshot

Fast Rollovers Without Preload

一个快速翻转效果的例子

Screenshot

CSS Sprites + Rounded corners

另一个例子:使用CSS Sprites实现背景圆角

Screenshot

CSS Image Sprites

一篇教程

Optimize Your Website Using CSS Image Sprites

非常详细的教程,介绍了CSS Sprites的原理和应用方法。

Screenshot

Animated GIF For CSS Sprites

一个比较特别的应用

Screenshot

Image Sprite Navigation With CSS

怎样制作简单的悬停菜单效果

Screenshot

Advanced CSS Menu

还是悬停效果

Screenshot

Creating and Using CSS Sprites

一个非常基本的教程

CSS Sprites Screenshot

CSS Sprites视频教程

How to Use CSS Sprites
David Perel解释了CSS Sprites的基本概念,并演示了如何在网页中使用它,长度:10分钟

Creating Rounded Buttons With CSS Sprites
继续上面的教程,展示了如何制作滑动按钮

Exactly How to Use CSS Sprites
Andres Fernandez  展示了 CSS sprites如何加快加载时间和减少请求次数

How To Use CSS Sprites
Chris Coyier 展示了一个 CSS sprites的范例,他将8幅图片组合在了一起,并且使用jQuery制作了一个小程序。

Faster Page Loads With Image Concatenation
对于复杂的网站,减少图片请求数量可以减轻服务器负担,这是许多站长所希望看到的。

CSS Image Sprites In 10 Minutes
另一个关于导航菜单的教程

CSS: Using Percentages in Background-Image
介绍背景图片定位的方法

利用CSS Sprites制作图像映射(image maps)

使用CSS Sprites,你可以对一个对象的一小部分加载翻转效果,使用负值的背景图片位置( background-position ),你可以创建基于CSS的图像映射,下面的文章讲述了这一技术:

CSS Image Maps Using Sprites
一个基于CSS的图像映射的简单例子。你可以同传统的方式对比一下优劣。

Screenshot

City Guide Map Using Sprites
另一个横向定位的例子

Screenshot

Advanced Map Using Sprites
一个更高级的技术。

Screenshot

CSS Sprites技术

CSS Sprites 2
Dave Shea 使用jQuery扩展了经典的CSS Sprites, 他的技术可以让不同的链接之间使用组合图片,即使用户禁用了Javascript。

CSS Sprites2 Refactored: Building an Unobtrusive jQuery Plug-In
Joel Sutherland 制作的jQuery插件,整理了Dave Shea的功能,并简化了初始化设置。

CSS Sprites Screenshot

Background Repeat and CSS Sprites
什么情况下使用CSS Sprites

CSS Sprite: Photoshop Script Combines Two Images for CSS Hover
这是一个可以导入Photoshop的动作设置,可以让你快速制作翻转按钮的背景图片。

CSS Sprites Screenshot

Extending CSS Spriting
Jennifer Semtner 扩展了经典CSS Sprites技术,并讲述应该在什么时候使用它。

Sliding Doors Meets CSS Sprites
滑动门技术 “Sliding Doors of CSS.”

How to Preload Images When You Can’t Use CSS Sprites
如何处理CSS Sprites对网页内容的影响

JavaScript Sprite Animation Using jQuery
Alex Walker 结合CSS Sprites和jQuery,实现了“打开页面”的效果

CSS Sprites Screenshot

IE6, CSS Sprites and Alpha Transparency
Julien Lecomte 讲述IE6下的透明hack问题

CSS Sprite 制作工具

Data URI Sprites
DURIS (Data URI [CSS] Sprites) 是一个管理网页图片的新工具,它可以最大限度的帮助你减少背景图片的数量,减少请求数。

Screenshot

Spritr
一个生成CSS Sprites的简单工具

Sprite Creator 1.0
同上

CSS Sprite Generator
制作CSS sprites 的Drupal插件

CSS Sprites Generator
这个工具允许你上传多张图片生成CSS Sprites和CSS代码

Projekt Fondue CSS Sprite Generator
它具有忽略重复图像,调整图像精度,确定横向和纵向偏移,指定背景色和透明度,指定CSS前缀等众多功能。

Screenshot

SmartSprites
基于java的桌面程序

你可以继续以你自己的方式编写CSS和使用图像,有一个工具可以自动为你设置CSS Sprites,这里是PHP 版本 ,它是开源的,具体可以看: Chris Brainard’s Sprite Creator 1.0.

附:CSS属性background-position(图像背景位置)该如何设置

background-position(图像背景位置)这个属性是CSS中非常重要的属性。

根据CSS规范,background-position属性包含了两个(可选的)变量:水平位置(horizontal)和垂直位置(vertical),例如:

  1. .introduction { 
  2. background-image: url(bg.gif); 
  3. background-position: [horizontal position] [vertical position]; 
  4.     } 
	.introduction { 		background-image: url(bg.gif); 		background-position: [horizontal position] [vertical position]; 		}[/source]

使用这个属性,你可以定义块级元素的背景图像位置,可以使用%百分比或px像素为单位来定义图像开始的位置,也可以使用关键字:top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right.

在“ background-position: x% y%; ”这样一个语句中,x%指水平偏移,y%指垂直偏移,左上角是:0%,0%,右下角是:100%,100%,默认的是50%。

例如,你可以这样定义:

  1. ul li { 
  2. background-image: url(bg.gif); 
  3. background-position: 19px 85px; 
  4.     }, 
	ul li { 		background-image: url(bg.gif); 		background-position: 19px 85px; 		},[/source]

这样背景图片就被定位到了距离左侧19像素,距离上边85像素。

关于这个属性,可以在这里找到更详细的资料:background-position (CSS property)

英文原文:Smashing Magazine

中文翻译:Oncoding编码营

方法一:

  跨浏览器的网页设计一直是让人很头疼的问题,这不只是因为浏览器的版本众多,还有一个重要的原因是相同浏览器的不同时期的版本也会有差异,甚至是在不同操作同台上还会有不同。因此使CSS hack技术进行浏览器区分是实现跨浏览器访问一个好方法。CSS Hack技术有很多,具体可以查看:
  本文据说的主要是通过“.”,“>”,“*”,“_”来区分。以下是本人对这四种符号的测试结果:
———————IE6——    IE7——IE8——FF2——FF3—    Opera9.5
>property——    Y——    Y——    Y——    N——    N——    N
.property——    Y——    Y——    Y——    N——    N——    N
*property——    Y——    Y——    Y——    N——    N——    N
_property——    Y——    N——    N——    N——    N——    N
我们可以看到>property、.property、*property在各浏览器中的表现是一致的,只有_property在IE6和IE7、IE8中有所区别。另外还要注意的,IE6是不支持!important的,而其他几款浏览器都识别。
举例:
要对想同的文字在不同浏览器中显示不同的颜色可以使用:

color:brown !important;  /*用于Opera、Firefox2、Firefox3等现代浏览器*/

  1. >color:green !important;    /*IE7、IE8可以识别该规则,因此它覆盖掉了上一条规则*/
  2. color:red;  /*所有浏览器都可以识别,但是以上两条规则有!important,所以这条规则被忽视;只有IE6认识并覆盖掉上两条规则*/
color:brown !important;  /*用于Opera、Firefox2、Firefox3等现代浏览器*/
>color:green !important;    /*IE7、IE8可以识别该规则,因此它覆盖掉了上一条规则*/
color:red;  /*所有浏览器都可以识别,但是以上两条规则有!important,所以这条规则被忽视;只有IE6认识并覆盖掉上两条规则*/[/source]

因此这就实现了跨浏览器的表现问题。_property和*property也是一样的。对于_property来说,只有IE6才能识别,因此可以用于单独对IE6的设置中。

不过这里要注意书写的顺序:现在浏览器的写法要写在最前面,IE6的写法要写在最后面用于覆盖,其他浏览器写在中间。

方法二:

其实主要是浏览器:IE6/IE7/firefox下,各个对CSS代码的解释有区别,下边转载一篇HACK的文章,相当实用。

区别IE6与FF:           background:orange;*background:blue;

区别IE6与IE7:          background:green !important;background:blue;

区别IE7与FF:           background:orange; *background:green;

区别FF/IE7/IE6:       background:orange;*background:green !important;*background:blue;

注:IE都能识别*标准浏览器(如FF)不能识别*

IE6能识别*,但不能识别 !important

IE7能识别*,也能识别!important

FF不能识别*,但能识别!important

另外再补充一个,下划线"_",

IE6支持下划线,IE7和firefox均不支持下划线。(推荐.我这只有这个有效!)

于是大家还可以这样来区分IE6、IE7、firefox

: background:orange;*background:green;_background:blue;

* html  p {color:#f00;}            支持 IE6        不支持FF IE7 IE8b

*+html p {color:#f00;}            支持 IE7 IE8b        不支持FF IE6

p {*color:#f00;}            支持 IE7 IE6        不支持FF IE8

注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在后面。

  在译言上看到的一篇介绍CSS比较全面的文章,不同于手册,这篇文章写得更实用。

原文:CSS Standards & Best Practices
译者:FlyChina

CSS是用来定义网站用户界面或将显示和内容区分开来的。

由于CSS被广泛地使用在几乎所有网站上,所以让我们花些时间来创建样式表并确保它符合良好的标准。下面的技巧会极大地在开发过程中帮助CSS初学者。

 

索引

本处的定义将帮助你和其他开发者了解网站和CSS文件,还将帮助你们了解CSS文件中的内容。索引部分知识一个格式化了的CSS注释段落

  • 给出CSS文件的作者信息
  • 定义网站设计(列数,静态/动态)[columns, static/liquid]
  • 持续跟踪文件版本(当文件有多个作者或未来需要有升级更新的时候非常有用)

 

锚点

锚点就好像在同一个CSS文件中的书签一样,锚点使你清晰地浏览整个CSS文件按并且使它很有组织。

锚点需要在CSS的索引(上面提到的)处定义,因为CSS没有自己的锚点系统,所以我在文档中使用了一个简单的技巧定义锚点。

方法是用一个比较罕见的字符来定义注释,当你想找某个锚点时,你就可以从索引处复制并查找锚点的定义符,并找到该锚点。

 

重定义

重定义是用来覆盖HTML默认的标签样式,把它们进行重定义的方法。你是否见过这样的CSS代码,它只是想把那个特定的元素加上样式!

CSS中一个非常美丽的用法是上下文选择器,让我们使用它:

 

命名规则

一个很关键的因素将元素给出精确无误并且干净有效的名字,这将避免混乱并让你更容易快捷地读懂你的CSS。

 

速写

CSS中的速写功能是你可以将许多同类型的属性合并成一个的属性。

CSS速写使开发过程更简单并且让你的CSS文件干净、简短、可读,下面是几个例子:

进一步阅读:

 

Sprites

(译者注:翻译成精灵好像并不能对文章加深感性认识,反倒在真正看到英文的时候不理解了,所以干脆不译。)

将所有的背景图片合并到一张并且使用背景定位来显示不同的部分,这就是我们所说的CSS Sprites。

CSS Sprites能够减少HTTP请求的数量,节省带宽,使得读取更快。同时也可以避免图像不稳定现象(比如当鼠标经过一张图片时可以显示另一张图片的效果,后一张图片将在慢速的因特网连接中等待半天才会出现)。

CSS Sprites最佳并且最受欢迎的例子是苹果公司网站上的菜单系统:

图片来源:apple.com

进一步阅读:

 

明确化

选择器明确化是当好几个规则都可以被相同的元素使用时,优先使用哪一个的过程。

简单说来,每个CSS选择器都有权重。选择器的所有权重的总和决定了它在文档中的属性。当CSS文档很大,以至于你不知道元素哪个权重较大时,明确化就能起到很大的帮助。

恩,明确化是CSS中一个较大的领域,以至于很难用几句话解释清楚,还是看例子吧:

进一步阅读:

 

属性重置

全局属性重置确保一个网站在所有浏览器中显示几乎一样。在每一个案例中,不同的浏览器给所有网站使用它们自己的默认样式设置集,这将使我们的网站在不同的浏览器中显示不一样。全局属性重置将改正这种情况并让你从绝对一致的基础开始建立网站。

我并不总是推荐使用CSS框架,但是CSS重置你还是需要用到的。现在有许多不同的重置方法,从简单的到复杂的。

进一步阅读:

 

Hacks

即便是一个完美的CSS,它也不能在所有浏览器中产生完全一致的显示,每个浏览器有对CSS不同的解释方法。总而言之,如果你需要你的网站在所有浏览器中保持一致,你不得不使用CSS Hacks。

使用CSS Hacks将减少CSS验证时产生的错误,这一点我同意。要实现这点,一个可选的方法是每个浏览器使用单一不同的CSS文件并通过在HTML中包含判定浏览器的标签来告诉浏览器应该使用哪个特定的CSS。我经常在我所有的项目中创建一个“fuck-ie.css” 🙂 (译者注:此处作者用脏话表达了他对IE的愤怒。如果翻译成“和IE交配.css”,世界会不会和谐一些?)

使用这种方法后,你的“主CSS文件”将通过验证,与此同时,”fuck-ie.css” 文件也会通过验证,但是只在IE浏览器中覆盖“主CSS文件”。

进一步阅读:

 

验证

在创建CSS的时候就验证它总是很必要的,浙江确保你的CSS没有错误并且可以被所有浏览器正确地解释。

W3C验证器是一个非常流行的在线CSS验证工具。

如果你有什么更多的技巧想加到本文中,请在文章评论中分享他们,我们希望这能帮到你。