园子博客

有时候我们需要给用户一点惊喜，一些与众不同。当你访问一个网站的时候发现网站的整个界面都是水平翻转过来的，会不会觉得是浏览器出了问题呢？其实这种网页翻转效果通过强大的 css 就可以实现滴。

Cascading Style Sheets（层叠样式表），简写为css，由W3C定义和维护的标准，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言。您想过吗？您仅仅改变一个文件就可以改变数百个网页的外观，用传统的方法实现这个功能的繁琐程度可想而知，但只要你学会了CSS，这些个性化的表现方式实现起来就如喝杯茶那么简单！这个专题园子将总结在学习CSS的过程中遇到的一些问题和解决方法，这是一个从入门到精通循序渐进的过程，园子希望这些文章可以帮助到您，让我们一起开始学习吧！ CSS入门知识 CSS入门 调用样式表的方法 详解CSS盒模型 css语法结构 id与class的使用原则 常用的CSS单位 CSS布局命名规则 CSS技巧汇总 如何优化CSS文件 CSS中巧用 nowrap 属性禁止文字自动换行 PS：本来这是一个页面，现在改为文章列表，由此引起的不便请各位朋友多多包涵。

设计页面的时候，我们往往需要把内容在一行里面显示，也就是禁止让文字自动换行，首先来看下下面的图片：

什么是 css Hack ？ 由于不同的浏览器，比如 IE6.0，IE7.0，IE8.0,Firefox 等，对 CSS 的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的 CSS 代码的的过程，就叫 CSS Hack 。 由于要照顾到不同的浏览器下保持完美的显示效果，经常用到 CSS Hack，园子把常用的一些做了一下汇总，希望能够帮助到朋友们。

在前面的文章里园子主要与大家分享了CSS的入门知识以及CSS技巧汇总。在用css来控制网页布局时我们可能都会遇到一个问题：当定义一个属性时，是使用id，还是使用class？今天园子就把自己平时做站时的经验给大家简要讲述一下，希望能够对您有所帮助。

我们首先要了解下面几点关于css方面的必备常识： CSS是Cascading Style Sheets(层叠样式表)的简称。 CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。 在标准网页设计中CSS负责网页内容(xhtml)的表现。 CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀。 可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课。 CSS是由W3C的CSS工作组产生和维护的。

尽管现在的网络质量日新月异的发展着，但做为网页设计者还是非常在意网站的交互速度。我们都知道，Web网站可用性的关键指标是速度，更确切地说，是页面能以多快的速度出现在访问者的浏览器窗口里。我们力求努力做到让自己的网站速度更快一些，常常要做的是去优化站点里每一个图像文件，但是你知道吗，css文件也是需要优化的。园子在做一个企业站点时把优化过的CSS和之前用Dreamweaver自动生成的CSS做了下对比，结果竟然发现文件大小缩减了35%！ 其实优化CSS文件非常简单，只要我们在网站完成之后把CSS文件做下规整，注意下一些比较常用的缩写方法，你也可以让你的CSS文件做到真正的优化。

你是否发现有些网站制作的按钮非常漂亮，而且还不是使用PS做的图片，这是怎么做到的呢？今天园子就和大家一起见证一下css的强大威力，下图中的几个按钮都是通过CSS的定义制作出来的按钮效果，代码今天也共享出来，有需要的朋友直接复制代码到CSS样式表里面即可。

近半年来园子一直试着遵循WEB标准设计和制作网页，今天花些时间整理一下在布局过程中会频繁用到的一些命名规则，当然，这些命名并不是绝对的，只是园子认为有个良好的命名习惯无论是对网站后期维护还是团队协作方面都会有很大的帮助。

国内大多数站点都采用px作为字体的单位，当然也包括园子的网站。而国外的一些主流英文站点，几乎都在使用em作为字体单位，你了解不同的单位分别代表什么意义吗？除了px像素单位以外，css还提供了许多其他类型的数学单位，下面将我目前所了解到的总结一下。

css的语法结构由三部分组成：选择符（Selector）、属性（property）、和值（value）。 Selector { property: value } 参数说明： Selector — 选择符 property : value — 样式表定义。属性和属性值之间用冒号(:)隔开，定义之间用分号(;)隔开，详细说明如下：

css是Cascading Style Sheets（层叠样式表单）的缩写，是一种对web文档添加样式的简单机制，属于表现层的布局语言。符合标准化的网站，仅仅通过更换一个不同的CSS文件，就可以瞬间实现整站所有页面改变更新的显示效果。可以这么说：CSS统一了网页的表现层，你眼睛可以看到的图像、色彩、布局方式都可以用CSS强大的功能来定义。

在2003年开始接触网页设计，一直到今年十一才开始深入学习DIV布局模式。在这个需要转变思维的过程中，使用DIV布局时还带有不少操作表格时的思想和习惯，以至于出了不少的错误，在此把容易出错的一些细节整理出来，希望对初学的朋友能有所帮助。 1.最常见的DIV嵌套错误 因为xhtml 语法比较严格，诸如Firefox 之类的浏览器如果检查发现Xhtml里面有语法错误，那页面是不能正常显示的。刚刚开始学习DIV布局的时候经常会弄错DIV的嵌套关系。我们可以用Dreamweaver的验证功能检查一下有无这方面的错误。

一直在学习着关于网页标准化的一些知识和概念，实践的虽然不是很多，在日常的工作中也总结出了不少需要注意的技巧和细节。今天抽空把 css 经常用到的一些技巧汇总一下与大家一起分享，希望可以起到抛砖引玉的作用。本篇文章会随时保持更新，如果大家有什么好的CSS技巧欢迎留言给我。