按标签归档 css

各浏览器的默认CSS

由 愚人码头 撰写  |  2010/07/28 23:18 发表在 (x)html+css  |  评论 (6)

在丸子主编的帮助下终于找到了各浏览器的默认CSS。只要是由于今天解决了一个特殊的问题，依靠的就是看各浏览器的默认CSS，然后重置它，所以很多时候浏览器的默认css还是很有用的。 各浏览器的默认CSS可以在这里http://www.iecss.com/找到，贪心一下，把这些样式都保存了一份： IE6(下载) IE7(下载) IE8(下载)

页面制作中一些技术、技巧和工具的总结(一)

由 愚人码头 撰写  |  2009/08/07 12:51 发表在 (x)html+css  |  评论 (0)

  一、css中一些技术、技巧 1.Reset CSS 知道Reset CSS是什么吗？通常情况下，它也被写成CSS Reset，即重设浏览器的样式。在各种浏览器中，都会对CSS的选择器默认一些数值，譬如当h1没有被设置数值时，显示一定大小。但并不是所有的浏览器都使用一样的数值，所以，有了CSS Reset，以让网页的样式在各浏览器中表现一致。前端开发工作中有一款好的、统一的Css Reset将提高开发效率，提高样式代码的重用，减少重复代码，减少维护成本。网上有很多Reset CSS。(转载请注明出处：WEB前端开发 http://www.css88.com/) 大家可以看看这里：http://www.css88.com/archives/541 和 http://www.css88.com/archives/614 2.CSS Sprites 利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；个人认为能CSS Sprites能减少图片的字节，我曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和，原因在于每张图片都有额外的图片信息隐藏在图片中，这样多张图片合并，就能节省些字节； 大家可以看看这里：http://www.css88.com/archives/756 3.CSS 选择器 选择器，或者选择符，selector，是构建整个CSS的基础。CSS 选择器能使我们很好的将样式归类。减少样式的耦合，进行区块话管理，如果能实现前端页面的模块化开发，那么CSS 选择器也就更有用武之地了。(转载请注明出处：WEB前端开发 http://www.css88.com/) 例如： .news{…} .news h3{…} .news ui li{….} 这样就很容易维护这个news区块； 大家可以看看这里：http://www.css88.com/archives/1635 4.CSS 渲染效率 CSS渲染规则是：在一条css中，css选择器是从最右边开始之后依次向左移动的，直到它不匹配CSS规则或匹配错误；所以我们的工作重点应该放在最右侧的CSS选择器来匹配大量的页面的元素。(转载请注明出处：WEB前端开发 http://www.css88.com/) 大家可以看看这里：http://www.css88.com/archives/1472 5.haslayout IE6下bug很多源于haslayout；haslayout 是一个非常有必要彻底弄清除的概念； 大家可以看看：http://www.css88.com/archives/tag/haslayout

精通CSS-高级Web标准解决方案PDF电子书下载

由 愚人码头 撰写  |  2009/07/13 08:43 发表在 (x)html+css  |  评论 (6)

CSS作为Web标准的一部分，已经成为现代网页设计中必不可少的关键要素。CSS是一种简单的语言，但是由于种种原因，真正精通CSS却绝非易事。在使 用CSS开发网站时，会遇到形形色色的浏览器bug和不一致问题，而解决方案又五花八门，往往让使用者感觉千头万绪、不知从何着手。 本书将最 有用的CSS技术汇总在一起，还总结了CSS设计中的最佳实践，讨论了解决各种实际问题的技术，弥补了一直以来CSS图书的空白。正因如此，英文版出版 后，一时洛阳纸贵，多次重印，并迅速登上Amazon图书排行榜前列，最高时甚至与哈里·波特并驾齐驱，创造了计算机图书的销售奇迹。 本书最后的两个实例研究将书中讨论的许多技术组合起来，使读者不仅理解工作原理，而且能够学到如何将它们应用在实际项目中，迅速精通CSS，成为CSS专家。 本书将最有用的CSS技术汇总在一起，在介绍基本的CSS概念和最佳实践之后，讨论了核心的CSS技术，例如图像、链接、列表操纵、表单设计、数据表格 设计以及纯CSS布局。每一章内容由浅入深，直到建立比较复杂的示例。之后本书用两章讨论招数、过滤器、bug和bug修复，最后由Simon Collison和Cameron Moll两位杰出的CSS设计人员，将书中讨论的许多技术组合起来，给出了两个实例研究。本书还集中介绍了现实的浏览器问题，是弥补CSS知识欠缺不可或 缺的参考书。 本书适合具有(X)HTML和CSS基本知识的任何网页设计人员阅读。 下载地址：http://dl.iplaysoft.com/files/192.html

line-height的继承问题

由 愚人码头 撰写  |  2009/05/24 20:00 发表在 (x)html+css  |  评论 (9)

关于使用line-height的基本语法和单行文本的垂直居中问题可以查看这里，原文地址： http://www.css88.com/archives/1304 line-height的属性值: normal 默认。设置合理的行间距。 number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 例如：line-height:1.5; length 设置固定的行间距。  例如：line-height:18px; %      基于当前字体尺寸的百分比行间距。 例如：line-height:150%; line-height是可以继承的，由于这个特性，子元素就可以不用重复定义line-height了,假设一段文字的line-height:200%;font-size:12px;那么行高应该是24px；而当装在这段文字的容器有子元素的时候，子元素会继承line-height:200%的属性。但是假设这个子元素的字体改变的时候，比如字体一下子到font-size:54px;的时候，比肯能回想到行高应该是108px（54*200%），其实错了。(转载请注明出处：WEB前端开发 http://www.css88.com/) 例如代码： <div style=" line-height:200%;font-size:12px;"><code>line-height:200%;font-size:12px;</code> <pre style="font-size:54px;"> line-height的继承问题 line-height的继承问题 line-height的继承问题</pre></div> 我们看看截图：

关于使用line-height单行文本的垂直居中问题

由 愚人码头 撰写  |  2009/05/24 17:06 发表在 (x)html+css  |  评论 (4)

在前端开发中经常用line-height定义行高和单行文本的垂直居中，当然偶尔也配合的做其他的垂直居中。 先来看看基本的语法和属性值： 语法： line-height : normal | number | length | % 参数： normal 默认。设置合理的行间距。 number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 length 设置固定的行间距。 % 基于当前字体尺寸的百分比行间距。 说明： 检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。 如行内包含多个对象，则应用最大行高。此时行高不可为负值。 对应的脚本特性为lineHeight。 ————————————————————– 下面说说再说说line-height单行文本的垂直居中问题 先写个height、line-height都为25px，背景为红色的元素，设置文字为12px。然后量下，文字上面是6像素，文字下面是8像素。。同时增加或者减少height、line-height 1px发现如果当前值是奇数那1px会加到文字和底部空间里而减少时减掉的是文字和顶部空间的1px（加下减上）；为偶数时刚好相反：加上减下。当我们给文字加下划线的时候发现文字的垂直位置并没变，这能说明什么呢？还不太肯定，继续同时减小heighe、line-height直到一个合适的值：14px，这时候我们可以看到文字和下划线都是完整的，继续减小1px。这时IE已经不按我们刚才发现的规矩办事了，文字上面被截去1px，这样看来14px应该是IE认为的一个临界点，此时整体高低减去文字高度刚好为3px。会不会？。。。因为这时文字是顶这上边界的，我们把文字增加到2行，发现了吧，第二行的文字不是顶这第一行的下划线的，而是有1px的距离。3px果然是下划线的高度。 其实这里还有一点特殊的地方就是如果我们一开始把height、line-height都设为30px那这时2px会变为3px。这个可以用我们上面得出的“偶数情况加上减下的结论”解释：heighe、line-height同为30px的时候上下空白区域高度差是3px，然后height、line-height同时加1px(就是31px)，这1px应该是加到上部空间里，所以3pxbug会变成2pxbug。 IE6-IE8都有这个问题，firefox，Opera，Safari也都存在这个问题， 比如： <div style="height:25px;line-height:25px;background:red;color:#FFFFFF;font-size:12px;">文字字</div> 如图：

《精通CSS:高级Web标准解决方案》(CSS Mastery:Advanced Web Standards Solutions)下载

由 愚人码头 撰写  |  2009/04/22 12:49 发表在 开发资源  |  评论 (3)

中文名: 精通CSS:高级Web标准解决方案 英文名: CSS Mastery:Advanced Web Standards Solutions 发行时间: 2006年 地区: 大陆 对白语言: 普通话 文字语言: 简体中文 简介: ■Amazon第一CSS畅销书 　　■最有用的CSS技术汇总 　　■解密业界大师绝技 　　 CSS作为Web标准的一部分，已经成为现代网页设计中必不可少的关键要素。CSS是一种简单的语言，但是由于种种原因，真正精通CSS却绝非易事。在使用CSS开发网站时，会遇到形形色色的浏览器bug和不一致问题，而解决方案又五花八门，往往让使用者感觉千头万绪、不知从何着手。 　　本书将最有用的CSS技术汇总在一起，还总结了CSS设计中的最佳实践，讨论了解决各种实际问题的技术，弥补了一直以来CSS图书的空白。正因如此，英文版出版后，一时洛阳纸贵，多次重印，并迅速登上Amazon图书排行榜前列，最高时甚至与哈里·波特并驾齐驱，创造了计算机图书的销售奇迹。(转载请注明出处：WEB前端开发 http://www.css88.com/) 　　本书最后的两个实例研究将书中讨论的许多技术组合起来，使读者不仅理解工作原理，而且能够学到如何将它们应用在实际项目中，迅速精通CSS，成为CSS专家。 　　本书将最有用的CSS技术汇总在一起，在介绍基本的CSS概念和最佳实践之后，讨论了核心的CSS技术，例如图像、链接、列表操纵、表单设计、数据表格设计以及纯CSS布局。每一章内容由浅入深，直到建立比较复杂的示例。之后本书用两章讨论招数、过滤器、bug和bug修复，最后由Simon Collison和Cameron Moll两位杰出的CSS设计人员，将书中讨论的许多技术组合起来，给出了两个实例研究。本书还集中介绍了现实的浏览器问题，是弥补CSS知识欠缺不可或缺的参考书。(转载请注明出处：WEB前端开发 http://www.css88.com/) 　　本书适合具有(X)HTML和CSS基本知识的任何网页设计人员阅读。

css酷站欣赏-30个音乐网站

由 愚人码头 撰写  |  2009/04/17 18:54 发表在 (x)html+css, 设计素材  |  评论 (1)

Mx3 just hear !t

【IE6的疯狂之九】li在IE中底部空行的BUG

由 愚人码头 撰写  |  2009/04/13 21:30 发表在 (x)html+css  |  评论 (13)

曾经写过【IE6的疯狂之六】li在IE中底部3像素的BUG（增加浮动解决问题），原文地址： http://www.css88.com/archives/421； IE6 BUG大全： http://www.css88.com/archives/579 但是这次li在IE中底部出现的不是3像素而是一整条空白行，如图： HTML代码： <ul>   <li><a href="#">第1条连接</a></li>   <li><a href="#">第2条连接</a></li>   <li><a href="#">第3条连接</a></li> </ul>

CSS引用(link)和导入(@import)的区别(2009年4月13日更新)

由 愚人码头 撰写  |  2009/04/11 01:41 发表在 (x)html+css  |  评论 (10)

大家知道页面要使用外部css文件的方式有两种，一种是引用(link)，例如：<link rel=’stylesheet’ href=’a.css’>；另一种是导入(@import)，例如：<style>@import url(‘a.css’);</style>；两者引用的方式在页面上的展现效果却是一样的，但是两者又有着很重大的区别：就是页面的性能问题！ 当然如果站点的流量没达到一定的流量（比如说10万ip或者更大），我觉得用link 或者 @import或者都是无所谓的，只要你维护方便。 假设我们一张页面使用了两个样式文件:a.css和b.css; 第一种方式，两个都导入： <style> <!– @import url('a.css'); @import url('b.css'); –> </style> 我们可以用使用工具分析一下网页的加载情况，如图： 即两个css同时加载；

2009年CSS裸奔节（CSS Naked Day ）

由 愚人码头 撰写  |  2009/04/08 20:27 发表在 (x)html+css  |  评论 (5)

CSS Naked Day，也称CSS裸奔节或CSS裸奔日，2009年4月9日是第四界css裸奔节。本站也参加了这次裸奔节！ CSS裸奔节就是将这整站的css样式都去掉，这样所有的布局，颜色，背景什么的就都没有了(除非你使用table布局)，只剩下html实体显示出来，起源好像是比较无聊的想法，就是剥去css的外衣，让大家看看你的(x)html代码是否工整，但是时至html语义被极力推崇的今日，CSS裸奔节就给外的有意义！ CSS裸奔节的意义 不管CSS裸奔节的原始意义是什么，或许只是一个网络恶作剧，但是从第一届CSS裸奔节（2006年4月5日）开始，CSS裸奔节的意义在于：推动Web标准、提倡简洁为美、使用正确的 (x)html语义标记、良好的层次结构。