Dreamweaver 经常会将 CSS的属性值分开写，这样会增加 CSS 文件的大小，不利于网页加载速度，所以这里收集了一些常用 CSS 简写代码，不仅能加快 CSS 代码编写速度，而且能减少网页加载时间。

您可能也喜欢：
实现图层在竖直和水平方向绝对居中的CSS代码	利用CSS3制作淡入淡出动画效果	CSS代码优化	使用PHP来压缩CSS文件	利用CSS设置透明效果-兼容所有浏览器
来自无觅网络的相关文章：
20个新CSS3设计效果欣赏 (@shejidaren)	前端设计的好东西，CSS工具大集合 (@shejidaren)	21个值得一看的CSS3教程 (@shejidaren)	css布局九决，学css不再难 (@wozhutou)	10个详细的CSS3表单制作教程 (@shejidaren)
无觅

今天在给 家乡美 jiaxiangmei.org 安装 WordPress 时，看了一下其自带的主题 Twenty Eleven，感觉此主题相当炫啊，采用HTML5和CSS3制作，有很多代码值得我们自己研究一下，今天先看一下其 搜索框 代码，此搜索框在活得输入焦点时，能够自动伸长，效果很好。

利用CSS3的transition属性制作可伸缩的输入框 预览

查看其HTML 和 CSS代码后发现，主要是利用 CSS3 的 transition 属性，其CSS代码摘录如下：

<style type="text/css">
body{
	width:800px;
	margin:100px auto;}
.assistive-text {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
}
input#s {
	background: url(search.png) no-repeat 5px 6px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	font-size: 14px;
	height: 22px;
	line-height: 1.2em;
	padding: 4px 10px 4px 28px;
}
input#searchsubmit {
	display: none;
}
#s {
	-webkit-transition-duration: 400ms;
	-webkit-transition-property: width, background;
	-webkit-transition-timing-function: ease;
	-moz-transition-duration: 400ms;
	-moz-transition-property: width, background;
	-moz-transition-timing-function: ease;
	-o-transition-duration: 400ms;
	-o-transition-property: width, background;
	-o-transition-timing-function: ease;
	width: 72px;
}
#s:focus {
	background-color: #f9f9f9;
	width: 196px;
}
</style>

对 transition 有兴趣的朋友不妨也看看 利用 CSS3 的 transition 属性制作过渡效果的导航栏

您可能也喜欢：
超强 CSS3 代码生成器	CSS3 背景颜色渐变属性 gradient 使用详解及代码生成工具	CSS3 到底有多强大？	8款 CSS3 代码生成器工具	使用HTML5和CSS3制作的网站模板下载
来自无觅网络的相关文章：
20个新CSS3设计效果欣赏 (@shejidaren)	21个值得一看的CSS3教程 (@shejidaren)	实用CSS3属性之 :target伪类实现Tab切换效果 (@shejidaren)	10个详细的CSS3表单制作教程 (@shejidaren)	HTML5和CSS3进阶教程 (@shejidaren)
无觅

缺省情况下，使用CSS3 的 Box Shadow 属性生成的阴影效果是外阴影，如果想要生成内阴影效果，只需在代码中添加  inset 属性即可。

CSS3 内阴影（inset）代码:

.shadow {
   -moz-box-shadow:inset 0 0 10px #000000;
   -webkit-box-shadow:inset 0 0 10px #000000;
   box-shadow:inset 0 0 10px #000000;
}

CSS3 box-shadow 代码说明

inset 0 0 10px #000000含义如下
1. inset： 内投影
2. 水平方向偏移量
3. 垂直方向偏移量
4. 模糊半径值

CSS3 内阴影（inset）实例:

CSS3 阴影效果实例

百度新开了英文博客-Baidu Beat，本来互联网公司开个博客是件很平常的事情，但到了百度这里就不一样了。由于Baidu Beat使用了WordPress主题，由于职业病的关系，特意查看了一下其主题HTML和CSS代码，我不禁欣慰起来，幸亏百度“不是个有技术”的流氓公司。

下面是我对Baidu Beat主题的一些疑问：

1. style.css是否应该添加许可说明？

License:GNU General Public License v2.0 (see license.txt in renniaofei theme directory)
License URI:license.txt 

2.为什么将 robots 属性值设置为 noindex,nofollow？

noindex 指令告诉搜索机器人不抓取该页面， 而nofollow 指令表示搜索机器人不能沿着该页面上的链接继续抓取下去。只能说百度实在是牛，都不爱搭理搜索引擎。

3. 没加 keyword和description meta 属性

虽然搜索引擎对keyword和description 已不像以前那么敏感，但作为约定俗成，一般的网页设计师都会将其加上。

4. 右边栏的Follow us 部分，Facebook Twitter Email 没加超链接

RSS一般不做为Follow us的一部分，其他3项没加超链接，实在说不过去，这有违设计的基本准则。

5. 中文式页码导航链接

英文博客很少有使用 PREVIOUS — NEXT 这种形式的页面链接，感觉不正宗。

6. 页脚部分是否应该加注Powered by WordPress？

虽然Wordpress并没有要求注明 Powered by WordPress，但作为中文搜索引擎老大，不加有点说不过去，感觉百度不地道。

7. style.css 代码编写不完整

style.css文件中缺少的代码是在是太多了，这里就不一一指出了。

上面是我分析HTML和CSS代码后，发现的一些疑问，只当是抛砖引玉，期待您的真知灼见。

推荐：Wordpress主题检测插件——theme-check

平时一般不用WordPress默认主题Twenty Ten，平时一般也使用IE9浏览器，可是总有例外的时候啊，今天偶然发现Twenty Ten主题在IE9中的一个小BUG—— 页眉图像位置错位。

在IE9浏览器中打开Twenty Ten 主题博客时，页眉图像错位，示例如下

正常的页面应该如下所示才对：

页眉图像位置修正的2种方法

方法1. 修改 style.css 样式表。增加如下代码：

#branding, #branding img{ float:left}

方法2. 修改header.php文件。在header.php中找到下面的代码：

<div id="site-description"><?php bloginfo( 'description' ); ?></div>

在其后面增加下面代码：

<div style="clear:both"></div>

推荐使用方法1，毕竟是关于页面样式的，修改CSS文件，更直观一点。

使用缩写可以帮助减少你CSS文件的大小，速度按页面的加载时间，而且代码清晰，更加容易阅读。原文链接

减少CSS文件的大小能有效减少页面的加载时间，改善用户体验。本文将介绍一种利用php来压缩CSS文件的方法。

新建css-compress.php文件

header('Content-type: text/css');
ob_start("compress");
function compress($buffer) {
  /* remove comments */
  $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
  /* 清楚 tabs, 空格, 新行, 等. */
  $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
  return $buffer;
}

/* 所有的CSS文件 */
include('master.css');
include('typography.css');
include('grid.css');
include('print.css');
include('handheld.css');

ob_end_flush();

使用方法

1. 在浏览器中打开上面的 css-compress.php 文件，即可输出压缩后的CSS源代码，保存即可。【推荐】
2. 直接调用css-compress文件，代码如下：【不推荐】

<link rel="stylesheet" href="css-compress.php" type="text/css" media="all">

为了使网站的一些动态效果更加流畅，通常都需要预先加载一些图片。这里介绍一种利用CSS的 :after或:before 伪元素来预先加载图像的方法，其代码简洁且兼容性好。

利用CSS的 :after或:before 伪元素来预先加载图像的CSS代码如下

body:after{
content: url(renniaofei_com_1.jpg) url(renniaofei_com_2.jpg) url(renniaofei_com_3.jpg);
display: none; }

代码说明：

这里我们使用:after伪元素，因为:after 伪元素会在body元素之后添加内容，符合常规的设计要求，当然特殊情况下也可以使用:before伪元素。

:after 伪元素允许编程人员在元素内容的最后面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。

上述CSS代码的含义：在body元素之后添加3个图片（renniaofei_com_1.jpg renniaofei_com_2.jpg renniaofei_com_3.jpg
），但将display设置为none，即页面中不显示这3个图片。

兼容性

由于CSS2支持 :after和:before 伪元素，因此所有的主流浏览器都支持:after和:before。

注：IE6和IE7不支持:after和:before伪元素。

8月19日正式开始制作任鸟飞首款 WordPress主题，直到今天8月29日才将 HTML 和 CSS 文件制作完成，自己都感觉进度有些缓慢，在此对关心任鸟飞的朋友们表示歉意。

WordPress主题-renniaofei 的  HTML和 CSS 文件已经制作完成，下面提供了源文件的下载链接，希望朋友们不吝赐教。另外 低一度 博主希望将此制作成Z-BLOG主题，在此表示非常期待。

此主题代码开源，可随意修改图片及代码，为了满足一下自己小小的虚荣心，希望引用此主题的朋友们能加一个链接到任鸟飞网页设计博客的链接 [可选]。

原始比例预览图
HTML 和 CSS 源文件下载

制作此主题的过程记录：

• 任鸟飞首款免费WordPress主题 — 使用说明
• 任鸟飞首款免费WordPress主题 — 正式发布
• 任鸟飞首款免费WordPress主题 — 预览调试
• 任鸟飞首款免费WordPress主题 — HTML和CSS源文件
• 任鸟飞首款免费WordPress主题 — 网页美工
• 任鸟飞首款免费WordPress主题 — 草绘
• 任鸟飞首款免费WordPress主题 — 开发概述

影响网站打开时间有两个因素，一个是网页加载速度，另一个是网站页面的大小。网站加载速度与用户所处的网络环境及主机性能有关，而网站页面的大小则由网站开发者决定。本文的重点就是如何压缩网站页面，以减少页面加载时间。

1. 图片压缩

相对与文本来说，图片是相当占用空间的。压缩图片是重中之重。

图片压缩工具推荐：

• Shrink-O-Matic
• Smush It
• 光影魔术手

2. Javascipt 压缩

为了增加页面的交互性及动画效果，很多页面大量使用 Javascript ，特别是 Jquery。

推荐工具：

• Javascript Compressor
• JS Compressor

3. CSS 压缩

由于 CSS 代码有很多缩写，所以使用压缩工具压缩一下，能大大的降低CSS文件的大小。

推荐工具：

• CSS Optimiser
• CSS Compressor
• Clean CSS

4. HTML 压缩

推荐使用 Dreamweaver 的清理工具。

附：Google Chrome 插件 —— 网页加载速度分析工具  Speed Tracer (by Google)