按标签归档 css

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

 
一、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电子书下载

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的继承问题

关于使用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单行文本的垂直居中问题

在前端开发中经常用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)下载

中文名: 精通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个音乐网站

Mx3

just hear !t

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

曾经写过【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日更新)

大家知道页面要使用外部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 ）

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语义标记、良好的层次结构。

css自定义导航、按钮样式

在网上看到一个用css自定义“按钮”样式，说是按钮其实是链接，用链接模拟的按钮，这样我们的按钮就可以很丰富了。我们可以用这个来做网站导航，连接，按钮等等。
不过方式有一个很不好的地方就是<a>标签里套了一个空的<span>,从html语义化的角度来说，这个是不应该的。
先看看效果吧：

一.要使用的图片,如图：如果你想修改颜色，可以下载PSD：sliding-door-psd

二.实现原理，如图：