chisdy.A.Pro » css

CSS3开发工具收集

chisdy — Mon, 03 May 2010 04:20:40 +0000

整理自：List of Really Useful Tools For CSS3 Developers
中文：CSS3开发工具收集

通常来说，CSS非常简单。但是当浏览器厂商开始实现CSS3特性，问题开始变得有些复杂了。不难，只是有些复杂。这可能包括两个方面：首先有些心得CSS3属性(比如，transition、渐变、transform等)不是那么简单，其次我们不得不使用浏览器厂商指定扩展。直到你最喜欢用的IDE原生支持CSS3，你最好的伙伴将是CSS3生成器、手册、参考指南以及基于JS的方案。这正是本文要推荐的，这里将收集能够助你学习和使用CSS3的真正有用的工具。

生成器

CSS3 Please!跨浏览器的CSS规则生成器，支持：border-radius、box-shadow、渐变(线性)、rgba色彩、transform (旋转)、transition和@font-face。
CSS3 生成器支持border radius、box shadow、text shadow、RGBA、@font-face、多列、box resize、box sizing 和outline.
CSS3 Sandbox有一些列的CSS3生成器：线性渐变、放射渐变、文字阴影、盒阴影、Transforms和文字描边。
@font-face生成器来自于Font Squirrel的很好用的CSS3 @font-face 生成器。
CSS3渐变生成器为Firefox和Webkit浏览器生成线性渐变。
CSS 圆角生成用于Firefox、Webkit和标准CSS3语法的“border-radius”属性。
Webkit CSS3 生成器简单的助你理解Webkit引入的CSS3特性。
CSS3 学习工具动态为你的浏览器获取私有前缀并检测该属性是否被它支持。

JavaScript方案

Modernizr一个确实很有用的JavaScript库，可以检测HTML5/CSS3的原生支持，并为你提供一种维护良好控制级别的方法，不管浏览器的能力。如果你更喜欢使用MooTools，你可以使用MooModernizr (MooTools 版本的Modernizr)
Sizzle – JavaScript 选择器库一个纯Javascript选择器引擎，被设计用来方便的插入到一个主库中。Sizzle 实际上支持所有的CSS3 选择器——它甚至包括一些很不常用的选择器，比如忽略选择器(escaped selectors )(”.foo\\+bar”)、Unicode 选择器、以及在document序列中返回的结果。这也是jQuery使用的选择器引擎。
YUI 选择器组件YUI CSS3 选择器组件，提供一个收集、过滤和测试HTML元素的稳定的简写方法。
ie7-js一个让IE拥有兼容标准的浏览器一样的行为的JavaScript库。
CSS3伪类选择器模拟ie-css3.js 可使Internet Explorer识别CSS3 伪类选择器并渲染任何使用它们定义的样式规则。简单滴在你的页面中引入这个脚本，然后在你的样式表中使用这些伪类选择器，然后IE就可以使用了。

参考指南

CSS 3.0参考手册
腾讯ISD WebTeam制作的一个CHM格式的参考手册，很全面，介绍+实例，推荐下载收藏；
我什么时候能用CSS3CSS3、HTML5、SVG以及其它即将可用的页面技术的浏览器兼容性列表；
浏览器支持清单使用Modernizr库检测你的浏览器支持的“高级”特性，包括CSS3特性和选择器的支持。
CSS3选择器测试自动运行大量的判断你的浏览器是否支持一些CSS选择器的小测试；
SelectORacle一个提供CSS2和CSS3选择器介绍的在线工具。简单的给它一些选择器，他就会返回选择器匹配的相关说明。
CSS3手册与快速指南提供当前CSS3规范的列表，列出属性可用的值、常用的选择器模式参考，以type/单位组织，选择器类型参考和单位参考和信息(另有PDF 版本)；
CSS3伪类SitePoint的CSS参考的相关部分内容；
CSS3 速查手册CSS3属性、选择器类型以及可用的值的列表，PDF格式；

CSS3色彩名称

提供所有147种色彩的名字以及按照字母排序的值。

如有更多有用的工具，欢迎通过评论分享。

原来学东西真的需要复习之css的position

chisdy — Mon, 07 Sep 2009 08:01:39 +0000

最近在弄网站的时候出现个问题，也是之前一直没去解决的，一个非常简单的问题，花了我几个小时的时间一步步去查找，如果平时的知识点能好好的积累的话，根本没必要花这样的冤枉时间，NND。

我习惯于用css的position属性去制作网页的头部跟其他我觉得没必要去float的东西，说实话挺讨厌float的，老是需要清除浮动以至于得到满意的效果。用position的话，不仅可以考虑在去掉css的情况下html文档的重点输出顺序，还可以减少不必要的嵌套代码，更重要的就是自由，爱放哪放哪。

这次的问题出现在position:relative同辈元素的z-index设置上，一般同辈元素都是靠z-index去定位层级，z-index数值越大者越居上。在例子中#header跟#ibanner为同辈元素，在不设置z-index值的情况下，因为#ibanner的html输出在#header的后面，所以#ibanner层对比#header层来说是居上叠加的，看Demo1

Demo1在IE(IE6、IE7、IE8，Jquery紧支持IE6+)浏览器下，很好的证明的这点。但在非IE浏览器下.nav的z-index属性值战胜了#ibanner，跑到上面去了。.nav的父辈元素是#menubar祖辈元素是#header，没理由啊，想不通，后来看了14px发布的《层叠加的五条叠加法则》后才明白过来，原来白为IE鼓掌了，最后变成又是IE的问题了。

接下来最终目的是要把.nav的层级提高，那么只需要搞定IE就行了，这个就简单了，设置#header跟#ibanner的z-index值就OK了。看Demo2（中间迷失了一个多小时，以为#ibanner设置z-index值就OK了，一直在测试就是不行，还用上了判断为IE浏览器的时候，#ibanner的z-index值为-1，太扯了，太瞎了。还有个可能是jquery的问题。）

我是明白过来了，估计看这篇文章的人一下子反应不过来，去看下14px发布的《层叠加的五条叠加法则》就清楚了，自己测试摸索吧，这样才记得牢。

重温css表单设计

chisdy — Wed, 10 Jun 2009 18:33:06 +0000

对于网店来说，表单的设计是很重要的，无论是注册，登录，还是订购，都是吸引访客进行下一步操作的重要因素。那么，从table布局过度到div+css及合理语义化布局后，表单的设计不再就几个tr，td死死的框着，可以考虑表单的便捷及亲和力可用性，以下便介绍几个例子，重新温习下：

1、Fancy Form Design Using CSS

这篇文章相信很多人都看过了，文章很长，主要介绍了构建表单的标签应用，布局及如何用CSS去控制，非常值得学习。

2、StylePhreak Simple CSS Form
3、Who says CSS forms can’t be pretty?
4、Man in Blue: Form Examples
5、CSS Play – A form with style
6、The Form Garden
7、Prettier Accessible Forms
8、HTML form effects with CSS
9、A 2 column CSS form layout
10、25 Stylish Examples of Web Forms

有介绍25个不错的表单形式

http://wufoo.com/ http://www.phpform.org/ 两个表单设计网站，非常方便。

分享3个站点

chisdy — Sat, 02 May 2009 19:45:40 +0000

好长时间没整过DIV+CSS站点了，最近弄了下，感觉有点吃力了。发觉很多基础方面的东西都不牢固，每次遇到问题只会复制代码，没去真正研究下为什么。因为有遇到关于自适应布局方面的问题，所以分享几个也许大家都很熟悉的站点。

http://layouts.ironmyers.com/这个站点里有很多布局上的实例，可以说是CSS模板吧，研究下直接套用就行了，不过个人觉得有点繁琐，还是搞清楚来龙去脉，自己写比较好。

http://css.maxdesign.com.au/ 这个站点里也挺多好玩的东西，不过要研究完还是要花点时间，每次我都是挑选着去看，去做实例，也许是这样CSS布局方面才一直停滞不前吧。

http://www.intensivstation.ch/en/templates/ 这里也有几个布局，大体上差不多，有兴趣的再自己去了解。

写到这里才发现，其实没什么好介绍的。

IE浏览器各版本的CSS条件判断

chisdy — Thu, 05 Mar 2009 16:00:38 +0000

IE8出到现在还没敢装，前些天下载了个Xenocode Browser Sandbox安装了下，发现之前一直用的一个纯CSS横向导航的水平居中出了问题，在IE8下完全居左了。找了很久没发现问题所在，索性每份CSS分开屏蔽，最终确定是针对IE的CSS问题，得避掉IE8只对IE7及以下版本设置。

之前只是针对所有的IE浏览器：

要避掉IE8的话就得：

lt在此作小于用，也就是小于IE8的版本都能识别。

或者：

lte在此作小于及等于用，也就是小于及等于IE7的版本能识别。

或者：

在此单独避掉IE8版本。

在网上找了以下代码，测试了下有几个不符合：

1.  除IE外都可识别 
2.  
3. 
4. 
5. 
6. 
7. 
8.  
9. 
10. 
11.

经过测试后：

5.

这个只有IE6以上的版本才可识别，也就是不包括IE5.0

7.

这个只有IE5以下的版本才能识别，也就是不包括IE6

10.

这个只有IE6以下的版本才能识别，也就是不包括IE7

后来才在经典那找到：

gt = Great Then 大于 > = > 大于号
lt = Less Then  小于 < = < 小于号
gte = Great Then or Equal 大于或等于
lte = Less Then  or Equal 小于或等于

一下就明白过来了，还费了那么大劲。

5种方法立刻写出更好的CSS代码

chisdy — Wed, 25 Feb 2009 18:14:16 +0000

文章转自：http://www.yeeyan.com/articles/view/toydime/30047

原文：http://net.tutsplus.com/tutorials/html-css-techniques/5-tips-to-writing-better-css/

简介：当然，每个人都可以编写CSS代码，甚至你现在已经让它为你的项目工作了。但是CSS还可以更好吗？开始用这5个Tips改进你的CSS吧！

1.重置

首先，很认真的告诉你，总是要重置某些分类。无论你是使用 Eric Meyer Reset、YUI Reset，或者你自己编写的重置代码，只要使用就对了。它能很简单的移除所有元素的填充（padding）和边距（margin）：

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

Eric Meyer Reset和YUI Reset都是非常强大的，但是对于我而言，它们走的太远了。我觉得你最终需要重置一切，然后重新定义所有元素的属性。这就是为什么Eric Meyer推荐更有效的使用（重置样式表），而你不要只是使用他的重置样式表，将它拖放到你的项目中。调整它（的重置样式表），建立属于自己的重置样式表。

噢，请停止使用：

* { margin: 0; padding: 0; }

花更多的时间去制作它，当你移除了填充（padding）你认为单选按钮会发生什么变化？表单元素有时能够做些时髦的事情，所以最有效的方式就是将他们独立。

2.排序
一个小的测试：这个例子就是要让你思考如何更快的找到右边距属性？

Example#1

div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}

Example#2

div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;}

你不能告诉我Example#2不能更快的找到右边距属性。根据字母排序你的元素属性。一致的创建你的CSS，将帮助你节省花费在寻找一个特殊属性的时间。

我知道一些人用这样的方法去组织代码，其他人又用另一种方法去组织，但是在我的公司，我们协商一致做出决定，所有的代码都将按照字母排序来组织。通过这样组织代码与其他人协同工作一定是有帮助的。当我碰到属性没有按照字母排序的层叠样式表我每一次都会退缩。

3.组织
你应该组织你的样式表以致相关的内容靠在一起，更简单的找到想要的。使用更有效的注解。举个例子，这是我如何构造我的层叠样式表：

/*****Reset*****/移除元素的填充（padding）和边距（margin）。
/*****Basic Elements*****/定义基本元素的样式: body, h1-h6, ul, ol, a, p, 等.
/*****Generic Classes*****/定义简单的风格，好像浮动的某一侧, 移除元素的下边距, 等当然，它们大部分都与我们希望的语义不相关,但是它们是高效处理代码所必须的。
/*****Basic Layout*****/定义基本的模板: header, footer等. 帮助定义网页布局的基本元素
/*****Header*****/定义所有Hearder元素
/*****Content*****/定义所有内容框内的元素
/*****Footer*****/定义所有Footer的元素
/*****Etc*****/定义其他的选择器。通过注解和归类相似元素的分组，将更快的找到你想要的。

4.一致性
无论你决定使用什么方式去编写代码，保持一致。我已经对全部放在1行VS多行的CSS编写编写方式的争论感到乏味和疲倦。这是不需要争辩的。每个人都有自己的观点，所以选择一种你喜欢的工作方式，并在所有的样式表中保持一致。

就我个人而言，我将使用两者结合的方式。如果一个选择器超过了3个属性，我将截断它采用多行的方式编写。

div#header { float: left; width: 100%; }
div#header div.column {
border-right: 1px solid #ccc;
float: rightright;
margin-right: 50px;
padding: 10px;
width: 300px;
}
div#header h1 { float: left; position: relative; width: 250px; }

所以找到你喜欢的工作方式然后保持一致。

5.从正确的地方开始
在完成标记语言之前不要去尝试靠近你的样式表。

当我准备分割一张网页的时候，创建CSS文件之前，我需要预览并且标记body开标签到body的闭合标签之间的所有文档。我不会增加额外的DIV ,ID,或者类选择器。我将会添加一些一般的DIV，就好像hearder、content、footer.因为我知道这些东西是现实存在的。

通过先标记文档，你将不会碰到本已注定的divities1和classitis2麻烦!/*You only need to add in that stuff once you have begun to write the CSS and realize that you are going to need another hook to accomplish what you are trying to achieve.*/(原文未译）。

利用CSS子选择器指定子元素；不要只是机械的给元素添加类或者ID选择器。记住：没有一个良好的格式化文档（或者标记结构）CSS是无价值的。

总结
这些Tips能够帮助我更好的完成CSS代码的编写。但是这并不意味着这张列表的结束，接下来我将会去带来一些其他的与大家分享。

你有什么更好的Tips帮助我们完善CSS代码？

基于jquery的一个横向导航菜单

chisdy — Sun, 22 Feb 2009 14:14:12 +0000

今天逛老外网站又发现了个基于jquery的横向导航菜单，感觉不错，以后估计用得上，就索性的抓了下来。

里面用到了Superfish这个插件，挺方便的。

预览地址：http://chisdy.com/demo/menu/jmenu/index.html

CSS兼容方案的一些简便技巧

chisdy — Sat, 16 Feb 2008 08:30:56 +0000

让你的样式完美兼容各大浏览器，这个方案主要是用来解决Safari的，Opear是在测试的时候顺带试了一下，结果发现竟然也行，所以顺便也解决了。

.e {/*FF OP*/ background-color: #FF0000 } html* .e{/*Sa IE7 OP*/ background-color:#FF00FF } *+html .e{ background-color:#000000;/*OP*/ *background-color:#0000FF;/*IE7*/ } * html .e{/*IE6*/ background-color:#00FFFF }

经FF2、OP9.21、OP9.10、Sa3.0.3(pc)、IE7、IE6测试通过，如果你在其他的浏览器版本上测试过，到http://www.52css.com留言。

需要注意的是：IE7对样式的解释跟DTD是有关，在没有DTD的时候，IE7是能读取IE6的hack的。

转自: http://www.52css.com

ASP.NET2.0使用主题

chisdy — Sun, 03 Feb 2008 16:16:25 +0000

1．概述
上次做的例子基本实现了功能，但界面看上去比较丑陋。你可以每个控件都设置其表现属性，以使界面美观一些。但这样做毕竟太麻烦。

ASP.NET提供了一种使界面样式统一的方法，就是皮肤主题。

图2.1 添加主题

2．增加主题
在解决方案资源管理器中，在站点上单击右键，选择“添加ASP.NET文件夹/主题”，创建一个皮肤主题，并取名为Default。

可以看到网站中自动创建了两级目录“App_Themes/Default”。一个项目中可以创建多个主题，但都必须放到App_Themes目录下。我们创建的Default就是一个主题，主题下面包含一个skin文件和多个css文件，用于设定界面样式。

在Default上点击右键，选择“添加新项”，然后选择“外观文件”，点击“添加”按钮，就在Default主题下创建了一个皮肤文件SkinFile.skin。

如果添加新项时选择添加“样式表”，就可以添加一个css文件。我们添加两个css文件GridStyle.css和StyleSheet.css。前者用于设置GridView的样式，后者用于设置其它控件样式。

样式表的内容比较丰富，大家可以找相关资料学习。这里我们只是用简单的示例来说明其用法。

2.1 StyleSheet.css文件
样式表中，可以设置多个样式单元，每个单元有一个名字，称为类名。我们在文件中键入以下代码。

body {


FONT-SIZE: 12px;
MARGIN: 0px;
CURSOR: default;
FONT-FAMILY: Tahoma, Verdana;
background-color: #F2F2F2;
}
.commonText
{
font-size: 12px;
}
.MsgText
{
font-size:12px;
color:Red;
}
.PromptText
{
font-size:16px;
color:#3795D2;
}
.BtnStyle
{
font-size:12px;
text-decoration:none;
background-color: #FFFFFF;
border-style: groove

}

Body样式主要是用来设置页面信息的，我们设置了字体大小为12px（Font-Size:12px）、字体（Font-Family）、背景色（backgroud-color:#F2F2F2）及其它一些属性。

对于文本，我们设定了三种样式：commonText仅设置了文本的大小，MsgText设置为红色字体，PromptText则是蓝色16px的字体。至于程序如何把它们区分开来，我们从SkinFile.Skin中可以看到。

BtnStyle为按钮的样式。

2.2 SkinFile.Skin文件
首先，css文件中的文本有三种样式，我们在skin中如何区分呢？答案是SkinID，如下代码所示：

我们设置了三种Label的样式，可以看到这三种样式通过CssClass属性区分开，它后面引号中的值就是css文件中的样式类名。其中有两个Label有SkinID属性，而另外一个没有设置，没有SkinID的是默认样式，有SkinID的在指定了控件的SkinID并且名称与其一致时才被使用。至于它们的使用，后面我们再介绍。

下面在skin文件中再输入以下代码，分别创建DropDownList、TextBox的皮肤样式以及两个Button的样式。两个Button的区别是：没有SkinID具有固定宽度65px，有SkinID的没有设置宽度。

图3.1 设置页面皮肤

3．皮肤的使用
3.1 单个页面中使用主题
（1）打开default.aspx文件进入设计模式。

（2）属性最上面一个列表框选择DOCUMENT。

（3）找到Theme属性，点击后面的列表框箭头，会看到我们刚增加的主题“Default”，选中它。

（4）运行程序，会看到整个页面使用了没有SkinID属性的那些样式。

（5）任意选中一个Label，找到SkinID属性，这个属性是空的。点击后面的列表框箭头，会发现有两个可选项，就是skin文件中指定的Label那两个主题，选择一个，运行并看一下效果。

通过以上实验我们可以看到，如果控件不指定SkinID，则使用skin文件中那些没有SkinID属性的样式；如果指定了，则使用skin文件中SkinID与之同名的那些样式。

3.2 在整个网站中使用主题
上面讲了主题的使用方法，但如果一个界面一个界面的设置主题，显得有些麻烦，能不能在整个网站中都使用同一种主题，而不必每个页面都设置呢。

我们把Default.aspx文件的Theme属性删除，然后打开web.config，找到，紧跟这个标签下面输入：

然后运行代码，发现运行效果跟刚才是一样的。

这一句的意思就是对所有网页使用同一主题Default。那么我们前面说了，可以在网站中创建多个主题，如何使用其它主题呢？如果我们配置了web.config的默认主题，那么页面使用这个默认主题，除非页面设置了Theme属性指定使用其它主题。

4．关于GridView的主题
选中页面中GridView，看它的属性中样式那一组，会看到有很多样式需要设置。

像GridView控件，它可以设置表头样式(HeaderStyle)、显示项的样式（RowStyle）、交替行样式（AlternatingRowStyle，就是偶数行用这个样式，奇数行用RowStyle的样式）、分页时页码样式等等。

那么我们就需要设置这些样式。

4.1 GridStyle.css
该文件设置了几个样式，有些是在skin文件中重复使用的：
.GridItem {


font-size: 12;
background-color:#D6EBFF;
text-align:left;
}
.GridEdit
{
font-size: 12;
background-color:#D6EBFF;
text-align:left;
}
.GridHeader
{
font-size:12;
background-color:#00AFE8;
text-align:left;
}
.GridAlter
{
font-size:12;
background-color:#D6DBEF;
text-align:left;

}

4.2 SkinFile.skin文件
在主题文件中，增加以下代码：

我们可以看到，显示项样式RowStyle和分页页码PagerStyle使用了相同的样式GridItem。表头和选中项使用了相同的样式GridHeader。当然你也可以给它们设置不同的样式，我设置成相同是为了说明也可以这样用。

再次运行程序，浏览效果。

5．设置主题的简单方法
实际上，主题的设置不一定非要用css文件，只要一个skin文件就可以了。具体方法是先从网页上设置控件的字体、颜色等属性，达到你要的效果后，进入源模式，把这个控件的代码直接复制到skin文件中，然后删除掉ID=”xx”这个属性就可以了，大家不妨试一下。

既然这种方法这么简单，为什么还要使用css呢？这是因为，skin中的样式，只能应用于服务器端控件，就是由runat=”server”的那些控件。对于Html控件，skin文件是不起作用的，这时就需要用到css。单独做成css，应用到Html控件时就不用再写一次了。

IE多版本共存–Multiple IE

chisdy — Sun, 25 Nov 2007 18:49:51 +0000

要考虑网页在不同浏览器下的显示，得一个个去测试，感觉挺麻烦的。但把问题解决了，似乎挺爽的，特别是使用性高却令人头痛的IE浏览器。IE7出来后，一直在使用，但对比IE6来说，改进挺多的，变成在IE6和之前的IE版本的浏览器的测试上更麻烦，老是要换机子测试。在家里弄好，还得等第二天上班时在公司电脑上测试IE6下的显示。今天偶尔发现了个好东西——Multiple IE。

Multiple IE可以在现有的系统上同时运行 IE 3 – IE7，安装了测试了下，只有IE5.5和IE6比较正常，IE3-IE5都不行，但已经够用了，呵呵！

有兴趣的可以去看下！
官方网站地址：http://tredosoft.com/Multiple_IE

chisdy.A.Pro » css

CSS3开发工具收集

生成器

JavaScript方案

参考指南

Related Posts

原来学东西真的需要复习之css的position

Related Posts

重温css表单设计

Related Posts

分享3个站点

Related Posts

IE浏览器各版本的CSS条件判断

Related Posts

5种方法立刻写出更好的CSS代码

Related Posts

基于jquery的一个横向导航菜单

Related Posts

CSS兼容方案的一些简便技巧

Related Posts

ASP.NET2.0使用主题

Related Posts

IE多版本共存–Multiple IE

Related Posts