WEBJX收集CSS格式化和造型网页高级教程

【 tulaoshi.com - Web开发 】

CSS 是现代网页设计的重要基石。Web 标准要求使用 CSS 来格式化和造型网页。其轻量级的特性，大大超越以往诸如表格之类的布局方法。

CSS 并没有想象中的难以捉摸。以下是一些利用 CSS 创建造型设计元素的技巧和技术，也包括一些结合 JavaScript 或 XHTML 以扩展网站功能的案例，适合作为学习 CSS 的基本指南。当然对于经验丰富的设计师，同样值得阅读。

1. 布局和用户界面技术

当前 CSS 主要应用于创建页面布局。利用 CSS 创造页面布局和用户界面，有几乎无限的可能性。下面是一些更有趣的技术。

本文介绍用 CSS 方法使 DIV 纵向或横向居中。虽然有很多通过父 DIV 和子 DIV 实现居中的代码，但这个特殊方法仅使用一个 DIV 元素，并且简单得多。

一个棘手的完全跨浏览器兼容的页脚技术，兼容 Google Chrome 浏览器，并且不需要空 DIV 辅助。

此教程结合 jQuery 和 CSS 创建网页剥离效果。大多数网站都使用 Flash 来实现这种效果。因此如果不热衷于 Flash 技术，这会是一个不错的选择。

一个使用 CSS 创建等高栏式布局的基本实例，彻底抛弃表格布局的代码冗杂与混乱。

让用户手动改变网站的表现，似乎可以大大提高网站的易用性和用户粘度。本教程将介绍如何为网站实施和部署浏览器适应技术。

一个创建自适应 CSS 容器的教程。容器会自动向各个方向扩大，以适应所包含的内容，而不只是垂直增长。适用于用户可控字号导致使 CSS 容器撑开的情况。

一个使用 CSS 创建等高列的教程，共涉及四个不同的技术。兼容所有主流浏览器（甚至 IE6 浏览器）。

这篇文章包括各种使 CSS 元素垂直居中于网页的最佳技术。同时也介绍了如何利用这些技术，创建一个简单小巧的垂直居中的站点。

使用浮动 (float) 和清除 (clear) 创建垂直居中的 CSS 容器，甚至兼容 IE5 版本。

本教程涵盖在多重内容情况下，创建一个内联块 (inline-block) 布局的方法，而不打破布局的完整性。

谈论大多数设计师，在其职业生涯的某个时候发出 "Ah-Ha!" 感叹的时刻。以及一些重要的关于 CSS 容器布局的灵感突现。

本文给出了关于 CSS 层，相对和绝对定位。以及 Z-Index 属性的全面概述。

详解了 CSS 溢出属性的工作流程。包括可见 (visible)，隐藏 (hidden)，滚动 (scroll)，自动 (auto)，以实例说明逐一说明。

分析容易混淆的绝对 (absolute)，相对 (relative)，固定位置 (fixed) 之间的差异性，详细说明各个属性的区别。

介绍在不同的样式中创建内联块 (inline-block) 的方法，并兼容不同的浏览器环境。

2. 导航和菜单技术

良好的导航是网站中非常重要的一部分。良好的导航既方便用户使用，也补充和完整了网站的其他设计元素。以下是一些关于创建导航的技巧和提示，使其两者兼备。

一份创建 CSS 下拉菜单的完整教程，该方法快速而且易于实施。

在网站上使用面包屑导航，可以方便访问者浏览。本教程介绍了一种创建基于 CSS 的，可伸缩面包屑导航的方法。

一份关于使用 CSS 技术创建横向导航子菜单的完整教程。如果希望正常工作于 IE6 浏览器，可能需要执行一些 jQuery 代码。

建立一个阶梯式菜单（也称为向导菜单）可能会非常棘手，特别是当它需要根据实际应用做出一些改变的时候。本文给出了创建该类菜单的实例。

一份关于创建面包屑导航，并格式化为标签式的全面教程。

该教程说明如何创建一个类似的导航栏，仅仅使用 CSS 和 HTML 代码（不附加任何图片）。

一款跨浏览器兼容（即使是 IE5 版本），并且基于嵌套列表的网站地图 (Sitemap) 风格。

使用 CSS 创建一个供稿 (Feed) 阅读器图标菜单。可以方便地适用于其他类型的菜单。

使用纯 CSS 以及 CSS/JS 创建多级联动菜单的技术集锦。也涵盖了更先进和富有创造性的实例。

3. 图像风格和画廊

在网页设计中，图片造型是一个经常被忽视的因素。以下这些精选的的技术和技巧，将帮助你纠正和改善这种情况。

一些关于图片居中的基本资料，使用 CSS 控制而不是过时的纯 HTML 布局。

一份关于如何在博客上，建立各种图片边框样式的完整纲要。使用 JavaScript 和 CSS 技术相结合。

为图像画廊增加更多风格样式的教程，文章使用专辑封面的制作过程作为一个实例。

这是一个强大的技术，从简单的锚点标记，扩大过渡到为图像增加引脚气球、气泡提示或地图标示。

一份关于如何使用 CSS 和 jQuery 技术建立图片旋转/画廊的教程。本文将创建一个干净的界面，用于显示一般的或组合的图像廊。

收集了使用 CSS 创建气泡提示的 5 个不同的技术（有些纯粹用 CSS 实现）。

创建一种类似 网站的图像画廊效果，以字幕或覆盖图片或缩略图的顶部。功能的实现技术值得借鉴。

基于 CSS 样式表打造针对打印用途和屏幕显示优化的图像。

关于利用 CSS 创建容器阴影效果的教程，德文网站。

4. 版式设计技术

CSS 擅长于版式设计。无论是字体类型，重量还是颜色，都需要使用 CSS 来定义。以下是一些指南，帮助你创建更好的网页版式。

一篇关于使用 Truetype 字体的文章，分析了为何有时字体显示效果不像所期望那样的原因。

使用 CSS 创建一个极具吸引力的有序列表。

关于 @font-face 属性的基本使用教程，以及如何在网页设计中插入 Truetype 字体。

关于 CSS 中的 :first-letter 属性的使用，俄文网站。

基于确切字体格式的 8 个通用 CSS 字体集，以帮助设计人员决定网站版式设计，选用适当的字体集，并调整到需要的合适效果。

一个创建文字角度效果的有趣实例（即使文字块的底部看起来更接近顶端）。

一份适用于网页设计师的版式设计指南，包括字体类型的选择及其合适的用法。

使用 CSS 的文字阴影属性结合 JavaScript 技术，来创建一个发光效果实例。

一份关于在 CSS 中使用引号 (quotes) 标记的指南，包括如何创建适合不同语种的标准引号。

使用 CSS 为 XHTML 中的 blockquote 标记定义样式的多种方法。

教你如何自定义有序列表起始数字的简明教程。

这篇文章介绍使用任何颜色为文字设置高亮颜色的方法。

为文章内容设定首字下沉的 CSS 方法，尤其适用于杂志型或书籍型网站。

5. 图标，按钮和链接

图标，按钮和链接在许多网页上经常是被忽视的因素。但是实际上它们也会对整体设计产生巨大的影响。以下是一些使网页造型更佳的资源。

此教程说明如何为链接添加图标描述，按照不同文件类型指定不同图标（如 PDF 或 ZIP 文档）。

关于使用 CSS3 和 alpha 混合技术创建按钮的教程。

使用 PNG 图像创建横向或纵向的可伸缩菜单。该技术能实现优雅降级，即便使用 IE6 浏览器仍可看到按钮（只是没有了 PNG 图像）。

为链接添加文件类型图标的教程。

一份涉及 20 多个技术的全面资源清单。关于如何使用 CSS 创建不同形状，不同尺寸的图标。

创建当鼠标停留时的缩进菜单效果的教程。

一些可以使用 CSS 重设图标颜色的图标集。

英文原稿：
翻译整理：