一件好东西越好越好——我们在工作中所依赖的两件好东西就是提示而且技巧．清晰而简洁的信息块帮助我们构建解决方案并学习最佳实践。在之前的一篇文章中，我们分享了一个拥挤的列表250个快速网页设计技巧．
通过展示100个新鲜且有希望有用的css技巧和技巧来延续这一趋势似乎是正确的。
一般
这份清单上的所有东西都不容易归类。所有相关的、值得提及的、但不能完全归为一类的提示都列在这一部分。
有条件注释对于解决Internet Explorer的不一致是天赐之物。1在使用CSS时，了解可供您使用的各种属性以及如何正确使用它们是至关重要的。2使用好的编辑器可以提高工作效率。语法高亮显示和自动完成功能(加上验证和代码引用)使工作变得简单。
看看notepad++，Coda，在您尝试Dreamweaver CS的代码视图之前，请不要小看它。3.在很多方面，实验是创新之母。给自己时间去玩;试错可以帮助你快速学习和记忆技巧。
看看这些CSS3实验，寻找灵感:如何用CSS3创建嵌套排版，语义CSS3灯箱,10个有趣的CSS3实验和演示．4启用Gzip压缩服务器端尽可能;它在不删除任何内容的情况下缩小了CSS和JavaScript等文件的大小。5缓存将为访问者节省带宽，并考虑到更快的速度。
只要有机会就好好利用它。了解优化浏览器缓存。6空白对于CSS的可读性很重要。使用空白来格式化样式表会增加文件大小的字节，但增加了可读性。
7避免使用内联代码(在元素中使用风格属性或HTML文档中的<时尚>标签)，并将它们放在外部样式表中。它更容易维护，还可以利用浏览器缓存。8无论您使用什么方法来布局代码，都要保持一致。
您将避免潜在的问题，如误解。9有条件的评论可以帮助你选择适合自己风格的ie版本。过滤特定于供应商的代码并不理想，注释比丑陋的黑客更安全。
10这个技巧有点争议，但我建议使用单个样式表而不是多个样式表。它减少了HTTP请求的数量，提高了可维护性，为站点带来了性能提升。这是一个技巧谷歌页面速度指南支持．
11当存在冲突的样式规则时，样式表后面的样式规则将取代前面的样式规则。因此，将任务关键型声明放在末尾，这样它们就不会有被其他样式覆盖的危险。12如果您遇到一个错误，不能确定其原因，禁用CSS(使用类似于Firebug或者是Web Developer插件)或简单地注释掉所有的样式，然后一个接一个地返回选择器，直到错误被复制(从而识别)。
13确保您的代码可以在各种浏览器中运行。与最新版本的前五名包括ie、Firefox、Chrome、Safari和Opera。14此外，确保当CSS在用户的浏览器中被禁用时，您的代码会优雅地降级。
要测试这一点，要么在所有浏览器中关闭样式，要么使用Lynx等文本浏览器。15确保代码优雅地降级显然很重要，但许多人忘记了一些访问者的浏览器会有问题，或者样式被关闭了，所以请检查您的备用方案是否有效。16每个浏览器都有一个内置的调试器。
在IE和Firefox中，你可以通过按F12进入检查器;对于Chrome, Safari和Opera，按Ctrl + Shift + I。17浏览器模拟器不能取代真实的东西，所以使用真实的或虚拟的浏览器或设备版本。18您知道PHP代码可以创建动态CSS文件吗?
这是一个这方面的教程．给文件一个. php扩展名，并确保文件用文本/ css内容类型。19命名CSS文件可能很棘手。
完成该任务的最佳方法之一是保持文件名简短且具有描述性，比如screen . css，styles.css或print.css．20.您创建的任何代码或过程都是有价值的，并且回收您为其他项目生成的代码并不是一件坏事:预先存在的代码非常节省时间，这也是JavaScript和CSS框架诞生的原因。21虽然CSS文件中的注释可以帮助其他人阅读或维护它们，但除非需要，否则不要写注释。
注释消耗带宽。通过直观地组织CSS并使用良好的命名约定，以自解释的方式编写CSS。22如果你很难记住CSS(甚至CSS3)中有什么可用的，可以做一些小抄。
它们很简单，可以帮助您习惯语法。以下是一些优秀的CSS小抄:CSS小抄(添加字节)，CSS速记小抄(Michael Leigeber)，css2.1和css3帮助备忘单(PDF)(Smashing Magazine)。23糟糕的代码比任何东西都更容易破坏网站。
使用免费的、基于web的W3C CSS验证服务减少潜在的故障。24特定于供应商的CSS不能在当前的W3C规范(CSS2.1)下进行验证，但可以为您的设计提供一些有用的增强。另外，如果你想使用一些CSS3进行渐进式增强，在某些情况下使用它们是没有办法的。
例如，-webkit-transform而且-moz-transform财产被用来逐步加强这些css3动画卡片针对使用Safari、Chrome和Mozilla Firefox的用户。25将多个CSS文件保存在一个目录中，并使用一个直观的名称，例如css /．如果你的网站有数百个页面，可维护性和信息架构是至关重要的。
-规则、选择器、伪类和伪元素
针对代码进行样式化是CSS的主要功能之一。你是否在尝试编写你的代码为移动设备设计的无论是打印机友好型还是屏幕友好型，你都需要遵循一定的惯例。确保样式不冲突、正确使用CSS继承和触发响应事件的操作(如悬停)都是CSS包的一部分。
本节专门介绍与约定相关的有用提示。
有了CSS3媒体查询，针对非标准体验的设计变得更加容易。26使用时要小心媒体属性在外部CSS文件的HTML声明中。您可能无法使用媒体查询来更好地提供预缓存的替代视觉效果。
27如果您发现使用相同属性和值的元素，请使用逗号将它们组合在一起(，)分隔每个选择器。这样可以避免重复。例如，如果您有以下内容:
H1{颜色:#000;} h2{颜色:#000;｝
将它们合并如下:
H1, h2{颜色:#000;｝
28如果您想节省访问者的墨水和纸张，打印机友好的样式表是非常重要的。
使用@media打印规则，并删除打印页面上不必要的内容。29可读性还与书面语的发音方式有关。的听觉(现在在CSS中已弃用)和演讲媒体查询可以提高屏幕阅读器的可用性。
30.不幸的是,手持CSS中的媒体查询不被广泛支持。如果你想让你的网站在移动设备上运行，不要依赖它为移动设备提供正确的视觉效果。31花点时间消除CSS中的重复引用和冲突。
这将需要一些时间，但你将得到一个更精简的渲染和更少的字节在你的文件。32处理鼠标悬停事件时，处理(1):链接伪类，则(2):参观，则(3):徘徊最后(4):主动-按这个顺序。这是必要的，因为级联。
33让一个网站在苹果iOS设备上运行良好很简单:要扩展你的设计，只需使用CSS3媒体查询和适当的min-width而且max-width值。这是一个这方面的教程．34在将所需的样式应用于子元素之前，将所需的样式应用于父元素，从而充分利用CSS继承。
你可以一举多得。35您可以通过空格分隔将多个类应用到一个元素上，如果您想与多个元素共享属性而不覆盖其他样式，这是非常好的。36如果你不想处理IE6的条件注释的怪癖——它们需要一个单独的CSS文件——那么你可以使用星型hack (* html)选择器，它是干净的并进行验证。
37HTML工具提示适用于纯文本，但是:徘徊CSS工具提示的伪类为显示样式内容提供了更多的选项。查看如何创建的教程CSS-only工具提示．38使用属性选择器，您可以根据在锚中链接的文件类型添加图标或独特的样式。
下面是一个可以为PDF链接添加样式的例子:美元(href = ' . pdf)．39您还可以使用属性选择器来针对特定的伪协议，例如mailto或skype：[href ^ =“skype”):．40呈现CSS需要时间，列出选择器会增加字节。
通过只使用你需要的选择器来减少渲染器的工作负载id比许多儿童参考资料要好)。41不是所有人都同意这一点，但我建议将每个“自定义”选择器写成类(然后再把它做成id)，以帮助删除重复的条目。42当用选择器组织CSS文件时，惯例是列出元素，然后是类(用于通用组件)，最后是任何id(用于特定的、惟一的样式)。
43命名约定因为选择器很重要。永远不要使用描述物理属性的名称(例如redLink)，因为稍后更改该值可能会使名称不合适。44区分大小写与命名约定有关。
有些人使用破折号(例如。content-wrapper)或下划线(即content_wrapper)，但我强烈建议使用驼峰式大小写(如。
contentWrapper)以简化。45通用选择器(＊广泛应用于CSS重置将特定属性应用于所有内容的机制。如果可以的话，尽量避免;它增加了渲染负载。
46使用CSS3媒体查询，您可以轻松地使用纵向或横向模式瞄准视口的方向。这样，手持设备就能充分利用其显示区域。47苹果的设备是独一无二的，因为它们支持" href="https://developer.mozilla.org/en/Mobile/Viewport_meta_tag">< meta name = " viewport " >标记，该标记带有附加的样式值。
你可以使用这个来强制屏幕以100%的固定速率缩放。48两个CSS3伪元素，:目标而且:检查有很大的潜力。它们只对某些事件应用指定的样式，可以作为悬停事件的替代方案。
49在CSS中嵌入内容是在打印机友好的样式表中为锚链接提供一些描述的独特方法。尝试他们与::之前或后::伪元素。50id在CSS中有双重用途。
它们可用于将样式应用于单个元素并充当锚定片段标识符到页面上的某一点。
布局和盒子模型
当我们不为样式化选择元素时，我们会花大量时间弄清楚内容在页面上应该如何显示。CSS重置和框架帮助我们保持一致性，但我们应该知道如何正确应用样式，如定位和间距。
这一组有用的技巧涉及到CSS的一些方面，这些方面从根本上影响了网站组件的外观和位置。
定位对信息的可读性起着至关重要的作用，不容忽视。51许多设计都关注于视口的网格和矩形区域。相反，创造出打破盒子的假象，以获得额外的效果。
52如果保证金:汽车;在左右两边都不能得到你想要的中心点，试着用左:50%;位置:绝对的;和负边距一半的宽度。53记住，项目的宽度包括指定的宽度、边框宽度以及任何填充和空白。这基本上是一个计数游戏!
54另一个有争议的建议是:不使用CSS重置。如果您花时间进行良好的编码，通常不需要它们。55像Blueprint或YUI Grids CSS这样的CSS框架可以帮助您加快开发时间。
它需要用户下载一些额外的代码，但它可以节省您的时间。56记住,Internet Explorer 6不支持固定定位。如果你想让菜单(或其他东西)具有粘性，就需要一些技巧hasLayout欺骗。
57网页设计中的空白是神奇的;别忘了。使用边距和填充给你的布局和内容一些喘息的空间。你将创造更好的用户体验。
58如果有一件事使按您想要的方式伸缩设计的任务过于复杂，那就是使用不一致的度量。规范你的风格。59不同的浏览器有不同的实现;例如，视障用户可能想要放大。
在浏览器中对你的布局进行快速缩放测试，以确保风格不会破坏!60大多数浏览器都可以使用不必不需要额外的HTML。IE可以做同样的事情过滤器:progid: DXImageTransform.Microsoft。阴影(颜色='#CCCCCC'，方向=135，强度=5);61圆角不像以前那么难做了。
CSS3允许您使用这个特性属性来声明每个角的曲率，而没有多余的标记和图像的使用。62液体布局的一个缺点是在大屏幕上观看会使内容溢出视口。保留您想要的布局及其限制min-width而且max-width．
63WebKit动画和过渡可能只适用于Safari和Chrome，但它们确实添加了一些额外的独特的、优雅的华丽的东西，值得包含在交互内容中。64如果希望将某些元素层叠在另一个元素上，请使用z - index财产;您指定的索引将把一个元素拉到前面，或将其推到具有较高值的项的后面。65视窗大小不这是一个决心的问题。
你的访问者可能有任意数量的工具栏，侧边栏或窗口大小(例如，他们没有最大化使用他们的浏览器)，这改变了可用空间的数量。66从界面中去除杂乱使用显示:没有这似乎是个好主意，但屏幕阅读器用户将根本无法阅读内容。
67小心使用溢出CSS属性适用于触屏移动设备。例如，iPhone需要两根手指(而不是一根)来滚动一个溢出区域，这可能很棘手。68你遇到过CSS表达式吗?
它们是微软将DOM脚本插入CSS的专有方法。现在不要为他们烦恼;它们完全被弃用了。69而CSS光标属性在某些情况下可能有用，但不要以使在屏幕上找到光标更加困难的方式操作它。
70水平滚动似乎是一种定位和样式内容的独特方式，但大多数人并不习惯它。仔细决定何时应该使用这些约定。71直到Internet Explorer 9最终，CSS3会有一些关键的兼容性问题。
不要过于依赖它来获得稳定的布局。使用渐进式增强概念。72CSS使按需提供信息成为可能。
如果你能给人们提供小块的信息，他们更有可能阅读它。73在CSS中显示菜单时，实现要一致。人们想知道物体之间的关系，避免不和谐是很重要的。
74CSS并不能解决所有的布局问题，它只是一个辅助你的视觉之旅的工具。无论您生产什么，都应该是为用户(而不是搜索引擎)设计的可用的和合乎逻辑的。75一旦你的布局用CSS做了标记，获得它的实际可用性的反馈;询问朋友、家人、同事、访客或陌生人的意见。
字体和颜色
如果有一件事值得一套技巧，那就是在CSS中添加字体、颜色和图像的复杂问题。我们想要可读的内容，我们希望它在一个一致的布局。在本节中，我们将学习如何利用字体和颜色，这是设计中的强大惯例。
我将谈论“网络安全”，并分享有关嵌入字体的最新热潮的提示。
随着时间的推移，“网络安全”的概念已经发生了变化，可能很快就会成为一个不重要的问题。76把内容挤得太紧会降低整体的可读性。使用行高属性对文本行进行适当的分隔。
77谨慎对待字母间距:空间太大，单词会变得难以辨认;空间太小，字母会重叠。78除非你有充分的理由，否则不要大写。首字母:大写;课文的大段。
嘿，朋友们，你们好吗?)人们讨厌读那些看起来像是大喊大叫的东西。79易访问的网站有很好的对比色。
有工具可以测量前景色与背景颜色的对比，并给你一个对比度。看看这个检查设计颜色的工具列表．确保你的文本是易读的。
80记住，不同浏览器的默认样式可能有很大差异。如果您希望样式丰富，请加强样式表中的行为。81在过去，屏幕能显示的颜色数量是相当有限的。
一些人仍然使用旧显示器，但对网络安全颜色的需求已经大大减少。82在让设计优雅地降级时，构建一个字体栈是必不可少的。确保备用字体存在，以防您所要求的字体不可用。
83随着Vista、Windows 7和MS Office 07-10(以及它们的免费查看器)的出现，许多很酷的新的网络安全字体已经可用，比如Candara、Calibri和Constantina。读到窗口的字体．84许多智能手机应用程序可以提高您构建样式表的能力，但是字体对于iPhone和其他iOS4设备来说，它尤其有用，因为它会显示安装的每种字体。
85网络安全字体并不能保证;人们很可能会卸载一种字体，即使是像Arial(或Comic Sans!)那么他们的浏览器将无法渲染它。86的内容避免下划线文字修饰属性，除非它是一个真实的链接。
人们把带下划线的文字与超链接，加上下划线的单词会给人一种链接被打断的印象。87避免在布局中使用象征性字体，如Wingdings或Webdings。它可能会节省KBs的图像，但它将为屏幕阅读器用户提供无意义的信件。
88记住,@font-face根据用户使用的浏览器不同，有不同的文件格式要求，例如EOT，WOFF、TTF和OTF(就像你在PC上看到的那样)。为每个浏览器提供适当的格式。89的大纲财产作为网页可访问性的辅助工具，没有得到充分利用。
与其将其设置为默认值，不如使用边框样式来增强活动事件的可见性。90智能手机没有相同级别的核心支持网络排版桌面浏览器可以，这意味着更少的网络安全字体和传统的@font-face嵌入。91可以应用优雅降级的跨浏览器不透明度- ms -，-moz -，khtml,供应商前缀和过滤器:α(不透明度= 75);属性。
92你可以做背景图像子弹，使用list-style-type:没有;，添加padding-left缩进和定位背景图像向左(与所需的像素偏移)。93帮助用户识别输入框很容易;只需添加名称的背景图像(如“搜索”或“密码”)，并设置它，以便在单击方框时图像消失:专注伪类，然后设置背景财产没有一个．94大而可见的点击区域增强了锚链接的有用性和可用性，进而引导人们在页面之间进行浏览。
当你设计这些款式时要注意。95记住，背景图像不能取代文本内容。例如，如果应用了负缩进，并且禁用了图像，那么标题将是不可见的。
96导航项需要适当的标记。如果你使用文字-动作按钮或者使用基于图像的工具栏，确保屏幕阅读器可以使用文本描述。97如果用一堆专有元素应用不透明的想法不吸引你，试试RGBA透明度(在CSS3中)background - color: rgba (0, 0, 0, 0.5);．
98如果您的访问者使用IE6，请避免使用px作为文本的测量单位。IE6用户没有缩放功能;它们依赖于文本调整大小，而这不适用于px。使用相对单位代替，例如新兴市场．
99为受支持的浏览器(如Firefox和Opera)提供可选样式表可以增强可读性，就像高对比度的可选样式表一样。One hundred.如果你觉得选择颜色很困难，可以使用网络工具Adobe Kuler，桌面工具，如ColorSchemer工作室不管还有移动应用程序调色板职业可能会有帮助。
风格可以是时髦的!
近年来，CSS已经走了很长的路。
随着浏览器制造商在CSS3规范最终确定之前就开始实施它，添加了独特的专有风格(如WebKit转换)，并越来越多地支持web标准，这是成为web设计师的最佳时机。在过去，我们只能希望我们的风格能够得到正确的应用，但桌面和移动平台似乎正在以前所未有的速度改善。
自90年代以来，网页设计已经取得了长足的进步，这是一件好事。由于浏览器的问题，实现CSS可能会令人沮丧，但它仍然是你可以使用的最有趣的网络语言之一。
您可以指定内容应该如何显示，而不是布局对象的结构或摆弄复杂的机制。这就像给了一张白纸和一包蜡笔。设计师们正在尝试现有的风格，为观众创造美丽的体验。
考虑您声明的每个属性和样式的含义。CSS可以把最简单或最简约的布局变成一个复杂的交互性结构，除了最专注的人之外，所有人都会害怕。随着CSS功能和选项的增长，以及设备的更新来支持它们，新的一波独特的布局将会出现。
希望其中一些会是你的。
相关内容
