html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, i, dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}body { line-height: 1;}ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;} /* remember to define focus styles! */:focus { outline: 0;} /* remember to highlight inserts somehow! */ins { text-decoration: none;}del { text-decoration: line-through;} /* tables still need 'cellspacing="0"' in the markup */table { border-collapse: collapse; border-spacing: 0;} /* Resetting HTML5! */section, article, aside, header, footer, nav, dialog, figure { display:block; }
View Details3.1框架中的工具 这个CSS中工具有点像C#中的static class,把一些常用的方法放到类里面达到可复用的效果.在CSS中.有很多CSS class是在我们在项目设计中一遍又一遍的要用到的.因此这些tool是CSS框架中必不可少的一部分。 3.2工具类的组成和组织方法 一般现有框架会把这个.class的定义放到各个不同的文件中比如，from.css(用于格式化表单)，typography.css（用于格式化布局）,但是这个工具类却是我们自己写框架的精髓所在，因为这是我们框架中可以扩展的部分,所以我更喜欢把css class单独命名为tool.css来存放这些工具类.（因为这样在网站改版时就要愉快很多） 也许废话太多了.下面简单给出几行代码,让大家对所谓的Tool.css有初步了解。 Code 1/* 用于格式化Form的CSS Tool 2 3————————————————————-- */ 4 5 6 7.error, 8 9.notice, 1011.success { padding: .8em; margin-bottom: 1em; border: 2px solid #ddd;}12131415.error { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4;}1617.notice { background: #FFF6BF; color: #514721; border-color: #FFD324;}1819.success { background: #E6EFC2; color: #264409; border-color: #C6D880;}202122 这是用于表单的一些CSS类.有了这些.我可以让项目中每一个使用表单的地方风格实现统一. 而使用JS的地方可以更加简洁.下面一小部分代码是使用了JQUERY从服务器获得AJAX响应后的代码片段 Success:function(data){ $(“<span>”+data+”</span>”).addClass(“success”).appendTo(“#result”); } 恩.是不是简单多了？ PS:看客：你不是号称CSS框架吗.这样写不就是把css放一起吗？吹的那么玄乎. 别急嘛.下面讲到CSS之间的组织方式 在我被CSS蹂躏的经历里，其实有很多CSS布局,以及CSS选择符方面问题，大部分是因为CSS选择符之间优先级的关系，这些问题因为简单，所以折磨的各位Developer痛不欲生.但是这些问题就像枪一样，好好利用可以保护你，如果利用不当会让你遭殃。 下面说说我总结的CSS的OCP原则（开放封闭原则），这个规则是设计模式里的，但我发现在CSS中同样适用. 当你针对项目的CSS基本框架写好后，可以添加你所需要的元素，但如非必要，不要去修改它，而是在需要修改的地方重载。 重载: 以上面的例子为例.如果我们在一个特定页面里，想让error颜色变得更加刺眼比如让error的color变成red，只需在你需要修改的特定页面头部的<style>标签中设置 1.error{23Color:red;45}6 因为内页 style比外联style有更高的权值（如果你对CSS的优先级问题不太了解，参考这个文章http://www.xker.com/page/e2009/0622/72573.html），所以error显示的字就会变成红的，但同时又会保留了background和border-color的属性.因此我可以更优雅的覆盖原有CSS，达到重载的目的. 扩展: 当我们需要一组新的css类时,只需要在tool.css相应部分增加即可，比如我们需要表单增加一个介于notice和error之间警告程度的alert用于显示那些有点警告意味的信息.我们只需要加入 1.alert23{45/*——代码写在这—-*/67}8 这样做的优势: 1.代码更加优雅,维护更加方便 2.容易变换网站风格，举个例子，如果你原来的颜色风格偏深，那么你想换一套浅颜色的风格，只需要改变你所需要改变的部分，把你需要改变的部分重新写一个CSS来覆盖原来的CSS，示例代码如下: <link href="css/tool.css" rel="stylesheet" type="text/css"/><link href="css/toolBlue.css" rel="stylesheet" type="text/css"/> 这样看起来tool.css是不是很“面向对象”,很像基类，而toolBlue像子类，继承那些padding和magin之类的布局属性，而重载color等风格属性,oh yes,life seems like more easier than ever bofore：–） 3.3写在最后 下面我拿出一个简单的tool.css展示出来，让大家有个更直观的了解。 Code/*用于格式化Form的CSS Tool ————————————————————-- */ .error, .notice, .success { padding: .8em; margin-bottom: 1em; border: 2px solid #ddd;} .error { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4;} .notice { background: #FFF6BF; color: #514721; border-color: #FFD324;} .success { background: #E6EFC2; color: #264409; border-color: #C6D880;} .error a { color: #8a1f11;} .notice a { color: #514721;} .success a { color: #264409;} /*用于布局方面的css tool ————————————————————-- */ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .clearfix { display: inline-block; } //用于显示方框，实际应用中我喜欢加边框 .box { padding: 1.5em; margin-bottom: 1.5em; background: #E5ECF9; } /*根据项目自定义的css tool ————————————————————-- */ //以下几个是用于和js交互时使用 .hide { display: none;} .highlight { background:#ff0;} .added { background:#060; color: #fff;} .removed { background:#900; color: #fff;} //下面是关于字体的 .small { font-size: .8em;; } .large { font-size: 1.2em; } //还有其他你自定义的class….etc… 恩.基本经常要用到的就是这些，但tool.css的重点在于随着你项目的进展，这个tool.css也会越来越胖. J […]
View Details2.1浏览器的差异在何处 我想写CSS的人大多遇见过在IE里写的页面美轮美奂，而用FF打开却是分崩离析，反之亦然.这种痛苦是因为IE和FF对一些默认样式的解析并不相同所导致. 网上有很多为何不一样的例子，下面链接是一个比较全的不同之处，大家可以进去看看。 http://hi.baidu.com/css%D6%AE%C3%C0/blog/item/f44628e6a506c229b83820ef.html 2.2如何实现跨浏览器 2.2.1实现原理 既然问题出在FF和IE对各种不同HTML元素的解析上所有偏差.更不用说一些其他小市场份额的浏览器上.我们只需要针对性的把页面里大多数HTML元素重置即可.这样在各种浏览器里面显示的效果会是相同的. 2.2.2实现方式 重置我们选择的名称和大多数框架一样,reset.css,用我们Develper的思想理解——--框架中所有元素的基类,就像.net里的Object对象一样。 下面我们来说说reset.css的构成. 1.首先定义最基本的body,因为所有其他元素都由此继承.我喜欢的框架遵循“尽量保持小”的原则，所以我只简单清除padding和margin,以及设置字体(设置成具体数值，因为在后面用’em’做单位的时候都要以这里做比较,页面风格需要整体变化时,重载这里.) 2.将大量浏览器预定义的块状元素清除magin和padding(块装元素即在未定义样式的情况下浏览器render出来的方式为display:block;的元素) 3.让列表前面的符号消失,图片边框消失,p的上下边距为一行字. 我喜欢reset.css尽量保持简洁.只要实现了基本的重置即可. PS:不过也不能过于简洁.记得曾经的框架喜欢对”*”这个CSS选择符重置.可是这个杀伤力太大，往往是杀敌1000自伤800，遇到input之类的表单元素时还得重置回来.最后据传说这样还有性能问题-.-!!不过难以考证… 下面是满足上面条件最基本的reset.css Code1.body { 2. padding: 0; 3. margin: 0; 4. font: 13px Arial, sans-serif; 5. } 6. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset ,p,blockquote { 7. padding: 0; 8. margin: 0; 9. font-weight: normal; 10. font-style: normal; 11. line-height: 1em; 12. font-size: 100%; 13. } 14. table { 15. font-size: inherit; 16. font: 100%; 17. } 18. ul { 19. list-style: none; 20. } 21. img { 22. border: 0; 23. } 24. p { 25. margin: 1em 0;} 这个reset.css是目前我个人最喜欢，因为reset.css就像.net中的Framework中的Object类一样，应该尽量保持精简,这个精简了很多.只留下了必要的重置. 在这里值得一说的是：在body里将font的大小和字体设置了具体的值,在其他元素里通过继承的方式来重写这样的方式是我最喜欢的，这样可以很容易的保持页面整体风格的统一 2.3一些注意事项 Reset.css一经写好，除了BUG之外.永远不要去修改它.而是在其它页面中重载它（不知道用OO的方式理解CSS是否正确，即利用CSS的优先级特性覆盖.这个在下一章说到.） http://www.cnblogs.com/CareySon/archive/2009/07/07/1518543.html
View Details1.1为什么需要CSS框架 其实这个问题如果要罗列出来网上有一大堆.但是对我们这些”I’m a web developer more than web designer”的人来说,有时候看似简单的CSS却成了网站设计最让人心力憔悴的部分.所以我还是要罗列一下使用CSS框架的好处. PS:一位看客：我们有前台，还有美工，为什么我还要整个什么CSS框架？答曰：我等在小公司没有如此优厚的条件，一个人从前台JS,XHTML,CSS到后台C#，再到Database全是我们2-3个人..所以，请有条件不用兼web designer的看客不要拍砖-.-!! 1.1.1解放生产力 我们对在VS里建立一个新项目太熟悉了.但却往往不知道该怎么处理CSS问题，随着项目的进行，页面设计总是有所变化.这些变化往往会让没有使用CSS框架的你擦掉几乎所有的CSS然后重写.好吧.你赌气想，我开始不写CSS了，等项目后期再写..可是后来你发现外观丑已经让你心情低落了.而和JS交互的那部分CSS你还不得不写.这足以让你抓狂了.而CSS框架可以把你从这种痛苦里解救出来. 1.1.2代码结构清晰,避免混乱和冲突 通过对CSS的清晰有条理的定义.会让我们节省更多的时间专注在设计页面上， 而不是费劲的去查找自己所需要更改的样式. 1.1.3更好的团队合作 我深受混乱的CSS带来的痛苦.我和一位同事曾经一起通过VSS编写样式， 有一个定位的CSS无论我怎样修改，那个元素纹丝不动.找了半天原来.才发现我同事在更高级别的CSS上面进行了定义. 我当然无论怎样定义都不行了，使用CSS框架可以避免此类尴尬.. 1.1.4跨浏览器 这个当然是使用CSS框架的一个亮点，因为IE和FF以及其他市场小份额的浏览器对不同样式预定义的解析方式有所差异.导致用IE测试做出的页面在FF里完全崩溃.进而导致你也崩溃-.-!!反之在FF里测的页面在IE里又崩溃了.导致你也跟着再次崩溃-.-!! 1.1.5依托CSS框架有一个更好的工作流程 我想这个不难理解.大多Developer对CSS头痛的原因就是因为感觉无从下手，而CSS框架让你有路可寻. 1.1.6节省下载流量 CSS框架会让你大幅减少重复定义的次数，进而减少需要下载CSS文件的 流量. 1.1.7网站变换风格更加容易 在项目对整体颜色或者效果改版时.之需要略微改动下项目的CSS框架文件， 或是写个新的CSS文件对框架进行部分覆盖.即可达到效果. 1.2 为什么网上已有那么多CSS框架，我还要自己写 其实我也是从使用网上成型的CSS框架开始，不可否认，他们的CSS框架写的非常优秀，有很多地方可以借鉴.我曾经以为使用熟练一个框架已经足够，可是工作中使用别人的框架产生了一系列问题.下面我一一分解. 1.2.1 必须深入了解框架的每一行代码 因为如果你不仔细学习你所使用的框架的代码，你会发现工作中总会有一些“灵异现象”，你明明这么定义，页面却是那样. 还有就是仔细阅读框架的代码的学习成本足以让你自己写一个自己专用的框架。 1.2.2 别人的框架不一定适合你 因为别人的框架并不会完全适合你的项目，而网上的CSS框架往往过于臃肿，自己写框架当然会对项目更有针对性。 1.2.3 自己写CSS框架会让自己的CSS水平有质的提升并更加针对自己的项目 这也算是题外话了J不过自己写CSS框架以及学习CSS框架的写法是一种CSS学习.会让自己的CSS水平站在一个新的高度，这也是本系列文章所希望的. http://www.cnblogs.com/CareySon/archive/2009/07/06/1517912.html
View Details1. Stylish jQuery Accordion 一个完全可定制的卷帘插件，可用于在有限的区域显示很多的文本和图片数据 下载插件 (Free) 2. HorizontalNav 水平导航菜单自动扩展宽度到父一层元素的宽度，这是实现响应式优雅菜单的好方法。 下载插件 (Free) 3. jQuery Sidebar 在你的网页上显示可扩展的边栏 下载插件 (Free) 4. PageScroller 为你的网页添加平滑的滚动导航 下载插件 (Lite version free or $35) 5. Explr 轻量级和可定制的树状菜单 下载插件 ($6) 6. Sticky Mojo 可固定在网页某个位置的边栏，不跟随页面的滚动更改变位置 下载插件 (Free) 7. ddSlick 下拉菜单，带图片和描述 下载插件 (Free) 8. CSS Dock menu Mac 风格的菜单 下载插件 (Free) 9. Metro flexible navigation Metro 风格的菜单 下载插件 ($6) 10. Filtrify 外观超棒的标签过滤插件 下载插件 (Free) via designer-daily 转自：http://www.oschina.net/news/39290/10-jquery-plugins-for-better-website-navigation
View Details1.<meta http-equiv="X-UA-Compatible" content="IE=5" />像是使用了 Windows Internet Explorer 7 的 Quirks 模式，这与 Windows Internet Explorer 5 显示内容的方式很相似。 2.<meta http-equiv="X-UA-Compatible" content="IE=7" />无论页面是否包含 <!DOCTYPE> 指令，都像是使用了 Windows Internet Explorer 7 的标准模式。 3.<meta http-equiv="X-UA-Compatible" content="IE=8" /> 4.<meta http-equiv="X-UA-Compatible" content="edge" />Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容，这实际上破坏了“锁定”模式。 5.<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />EmulateIE7 模式通知 Windows Internet Explorer 使用 <!DOCTYPE> 指令确定如何呈现内容。标准模式指令以Windows Internet Explorer 7 标准模式显示，而 Quirks 模式指令以 IE5 模式显示。与 IE7 模式不同，EmulateIE7 模式遵循 <!DOCTYPE> 指令。对于多数网站来说，它是首选的兼容性模式。
View DetailsGroundworkCSS 是一个基于 Sass 预处理器的开源项目 ，主要用于快速构建响应式 Web 应用程序。拥有一个灵活的、可嵌套的网格系统，可以创建适应多种浏览设备的布局。 Groundwork 还提供多种 UI 组件，如导航、按钮、图标、表单、Tabs、对话框、工具提示等等。 转自：http://www.oschina.net/p/groundworkcss
View Details响应式Web设计是在开发和设计网站过程中产生的一种方式，它的目的是让内容布局能随用户使用显示器的不同而变化。再明确点说，这种设计概念，就是让原本1292像素宽，4栏的内容，能够很好地显示在1025像素宽的用户屏幕上，同时还能自动简化成2栏。当然，让它很好的适应智能手机和其他种类电脑的屏幕也就成了水到渠成的事了。这种特殊的设计形式就被成为“响应式Web设计”。 响应式Web设计与传统的设计方式截然不同，开发人员（特别是新手）必须要理解它的优势和弊端。这篇文章正是为大家揭示一些实例的。（这里介绍一个叫“Media Queries”的网站，里面介绍了更多实例和演示） 数据表格是响应式Web设计的经典使用情景，实现它的想法与传统的设计理念有很大不同。数据表格默认很宽，当你要查看它全貌时，你得缩小表格，但这时字会变 的很小，很难去阅读。然而当你想看清楚上面的字时，就不得不再把表格放大，这时要查看完整表格就得横滚加纵滚。这么阅读表格也太KB了。或许重新格式化表格或以饼图形式展现是种解决方案。再不然，你可以弄一个迷你图，即使在窄屏幕里它也能适应。 响应式Web设计中的图像以流式图像为主，可以被上下文感知的图像所替代，这是一种更好的设计方式。这种技术的真正意义在于，能够让图像适应不同的屏幕分辨率，更大的或更小的。所以它与传统设计的理念和技术都有很大不同，合理使用会让你的网页化腐朽为神奇。 Mountain Dew 访问网站 AXT 访问网站 Rbma Radio 访问网站 Lotta Nieminen 访问网站 Berger & Fohr 访问网站 Cropp 访问网站 Stink Digital 访问网站 Hair Project 访问网站 Atlanta Ballet 访问网站 Google Cultural Institute 访问网站 Build Windows 访问网站 Enochs 访问网站 From The Front 访问网站 Sweet Hat Club 访问网站 Oliver Russel 访问网站 United Pixelworkers 访问网站 dConstruct 2012 访问网站 Food Sense 访问网站 Andersson-Wise Architecture 访问网站 TeeGallery 访问网站 Lynn and Tonic 访问网站 8Faces 访问网站 Sleepstreet 访问网站 ConvergeSE 2012 访问网站 Iwantedrock 访问网站 Abberdein 访问网站 Inspire Conference 访问网站 Design Week Portland 访问网站 […]
View DetailsTrueType （.ttf） Windows和Mac系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。EOT – Embedded Open Type （.eot） 嵌入字体格式（EOT）是微软开发的一种技术，允许 OpenType 字体嵌入到网页并可以下载至浏览器渲染，浏览器根据 CSS 中 @font-face 的定义，下载，渲染这种 .EOT 后缀的字体文件。这些文件只在当前页活动的状态下，临时安装在用户的系统中。OpenType （.otf） OpenType是一种可缩放字型（scalable font）电脑字体类型，采用PostScript格式，是美国微软公司与Adobe公司联合开发，用来替代TrueType字型的新字型。这类字体的文件扩展名为.otf，类型代码是OTTO，现行标准为OpenType 1.4。OpenType最初发表于1996年，并在2000年之后出现大量字体。它源于微软公司的TrueType Open字型，TrueType Open字型又源于TrueType字型。OpenType font包括了Adobe CID-Keyed font技术。Adobe公司已经在2002年末将其字体库全部改用OpenType格式。WOFF – Web Open Font Format （.woff） 相对于 TrueType 和 OpenType ，WOFF（Web开发字体格式）是一种专门为了 Web 而设计的字体格式标准，它并不复杂，实际上只是对于 TrueType / OpenType 等字体格式的封装，并针对网络使用加以优化：每个字体文件中含有字体以及针对字体的元数据（Metadata），字体文件被压缩，以便于网络传输，并且不包含任何加密或者 DRM 措施。包括 Adobe、 Lino Type、Monotype 在内的几乎所有主要的字体供应商都加入到支持 WOFF 的行列中来SVG （Scalable Vector Graphics） Fonts （.svg） 顾名思义，就是使用SVG技术来呈现字体，还有一种gzip压缩格式的SVG字体.svgz。SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。SVG可以使你设计的网页可以更加精彩细致，使用简单的文本命令，SVG可实现色彩线性变化、路径、自定义字体、透明效果、滤镜效果等各式常见的图形图像效果。 字体格式转换工具 EOTFast 用于把TTF文件转为EOT格式。Microsoft WEFT 微软提供的字体格式转换工具。ttf2eot可以转换TTF文件为EOT格式。FontForge 把OTF文件转为TTF格 在线的转换工具 http://ttf2eot.sebastiankippe.com http://www.cuvou.com/wizards/ttf2eot.cgi http://onlinefontconverter.com/ 浏览器兼容性一览 使用CSS3的@font-face属性可以实现在网页中嵌入任意字体（其实IE4就支持这个属性了，后来这个属性加入到了CSS3中），但是IE只支持微软自有的EOT格式字体，而其他浏览器都不支持这一字体格式，其它浏览器可以设置TTF（TrueType）和OTF（OpenType）两种字体作为自定义字体
View Details不换行 white-space:nowrap; 自动换行 word-wrap: break-word; word-break: normal; 强制英文单词断行 word-break:break-all;
View Details