学CSS的一些技巧
Posted: 五月 22, 2011 at 6:56 上午 | Tags: css, 技巧 0之前学CSS一直花费了不少功夫，绕了不少的弯。 其实CSS的学习旅程很简单，所以今天整理了一些学CSS的技巧，供大家参考。
1. 掌握最基本的：
相信把以上看完了，你会进步很多 ！
2.多看书
除了以上的文档看完后，推荐看一些国外牛人的写的书（如：CSS禅意花园） ，并对它进行系统的学习。
Category: CSS+(X)HTML
[译] 深入 CSS 行高
Posted: 二月 14, 2011 at 7:52 上午 | Tags: css, CSS 行高, line-height 0一个简单的, step-by-step 关于 CSS 行高的演示文档, 涵盖行间距, 如何应用各种类型的行高值, 当然还有 inline box 模型介绍（但实战应用在中文字体或中英文字体混合，以及IE678，XP win7里，行高规则又有所不同，泪流满面）
Line Height (中文版)
View more presentations from bigCat Mao.
面向对象的CSS PPT分享
Posted: 一月 26, 2011 at 12:50 下午 | Tags: css, 面向对象的CSS 0分享一个CSS PPT，我觉得挺不错的放上来，和大家一起分享。
CSS3属性操作符详解
Posted: 十月 29, 2010 at 4:27 下午 | Tags: css, css3, CSS3属性详解 0CSS3语言开发是朝着模块化发展的。 以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：盒子模型 列表模块 超连结方式 语言模块 背景和边框 文字特效 多栏布局等。
首先，我们希望，这是个正确的方式，CSS3将完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。对我们来说，CSS3主要的影响是将可以使用新的可用的选择器和属性，这些会允许你实现新的设计效果（譬如动态和渐变），而且可以很简单的设计出现在的设计效果（比如说使用分栏）。
注：文中所有说的浏览器支持均未包括IE7、IE8和Firefox3这三个版本的浏览器。在IE8和Firefox3中，文中的大部分选择符已经被支持如果我们再向前看一点，在CSS3中还有功能更加强大的选择符等待我们去发掘和使用。CSS3中的很多选择符已经在现代浏览器中得到很好的应用（IE8.0中也已经部分地支持了CSS3），但是这些基本功能上的支持还远远不能满足开发者使用的要求。但是在某些情况下使用他们可以带来很好的超前体验，因此我认为了解一下Css 3新增选择符是如何使用还是有益处的。
本文中对选择符描述主要是参考了《2005年12月15日W3C制定的选择符草稿》。草稿中讲到的新的选择符可能会在Css的第3个版本中出现，但是也可能会出现在其他语言中。如果你是几个月前甚至是几年前读过这篇草稿，那么现在你应该再去看一下是不是已经出现了最新版本了。
这里我不打算去解释Css选择符工作的基本原理。如果你想重要复习一下的话，最好从《细说Css2.1中的选择符》开始。
首先，快速浏览一下CSS3中新增的选择符：
如果对上面的描述还不是很清楚的，请不要担心。本文下面的部分将会对他们进行更加详细的讲解，并且提供例子来演示他们是怎么使用的。
利用CSS实现幻灯片效果
Posted: 八月 26, 2010 at 9:28 上午 | Tags: css, javascript, 幻灯片 01图片切换技术是目前各大中小型网站中最受青睐。但目前很多图片切换技术都是利用Flash或Javascript来实现的，我们利用CSS制作这一效果，我们想告诉你的是，CSS是如此的强大，如此的好玩，并不是告诉你采用CSS 取代Javascript 的用途。
图4-1
常用CSS缩写语法总结
Posted: 八月 25, 2010 at 7:42 上午 | Tags: css, 缩写 01使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下：
颜色
16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：
#000000可以缩写为#000;#336699可以缩写为#369;
盒尺寸
通常有下面四种书写方法:
property:value1; 表示所有边都是一个值value1；
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3
property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left
方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：
margin:1em 0 2em 0.5em;
利用CSS伪类实现产品展示效果
Posted: 八月 21, 2010 at 2:51 下午 | Tags: :hover, css, 伪类 01
产品展示效果的实现，道理其实很简单，主要利用了伪类:hover属性，当用户鼠标未悬停在img属性时，此时span标签样式为display:none;状态 当用户鼠标悬停在img标签，触发span标签的CSS样式，也就是display:block;
About CarzyFish
New Comments