知更鸟 » CSS

CSS强制英文、中文换行与不换行

知更鸟 — Fri, 10 Jun 2011 11:19:33 +0000

结构：

1.Transshipment Booking System is launched只对英文起作用，以字母作为换行依据

2.Transshipment Booking System is launched只对英文起作用，以单词作为换行依据

3.Transshipment Booking System is launched只对中文起作用，强制换行

4.Transshipment Booking System is launched强制不换行，都起作用

5.不换行，超出部分隐藏且以省略号形式出现

5.不换行，超出部分隐藏且以省略号形式出现Transshipment Booking System is launched

代码：
.p1{ word-break:break-all; width:150px;}/*只对英文起作用，以字母作为换行依据*/
.p2{ word-wrap:break-word; width:150px;}/*--只对英文起作用，以单词作为换行依据*/
.p3{white-space:pre-wrap; width:150px;}/*只对中文起作用，强制换行*/
.p4{white-space:nowrap; width:10px;}/*强制不换行，都起作用*/
.p5{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100px;}／/*不换行，超出部分隐藏且以省略号形式出现*/

1. word-break:break-all;只对英文起作用，以字母作为换行依据

2. word-wrap:break-word; 只对英文起作用，以单词作为换行依据

3.{white-space:pre-wrap; 只对中文起作用，强制换行

4.{white-space:nowrap; 强制不换行，都起作用

5.{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现

注意，一定要指定容器的宽度，不然的话是没有用的。

注意word-break 是IE5+专有属性

语法：

word-break : normal | break-all | keep-all

参数：

normal : 　依照亚洲语言和非亚洲语言的文本规则，允许在字内换行

break-all : 　该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

keep-all : 　与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本

说明：

设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。

对于中文，应该使用break-all 。

为主题添加文字阴影

知更鸟 — Sat, 19 Feb 2011 17:31:16 +0000

这个文字阴影效果，是从CSS2.0中延续过来，当初只有Safari支持这一属性，随着其它浏览器的支持，这个漂亮的效果，才真正应用到网页设置中，是除了CSS3圆角属性之外，效果最棒的，可增强文字的清晰度。热点新闻主题之前部分位置已采用，如导航菜单上的文字，为了模仿Apple网站导航上用图片作的文字浮雕效果，就添加了这个属性，可惜IE不支持，包括刚发布的IE9 RC，悲哀.....为了在不同核心浏览器下外观保持一致，采用蹩脚的IE专用属性勉强弄了个支持IE的文字浮雕效果，不是很理想，特别是对英文，看上去很别扭，IE8、IE9需切换到兼容模式，才能勉强接受。

下面就将这个效果加到所有文字上，很简单。

打开style.css找到：

body {
background: #f2f2f2;
font: 12px 微软雅黑, Verdana, Tahoma, Lucida Grande, Arial, sans-serif;
color: #000;
}

添加一句：

text-shadow: 0px 1px 0px #d1d1d1;

其中，#d1d1d1为阴影颜色，可根据喜好自行更改。最终代码：

body {
background: #f2f2f2;
font: 12px 微软雅黑, Verdana, Tahoma, Lucida Grande, Arial, sans-serif;
color: #000;
text-shadow: 0px 1px 0px #d1d1d1;
}

另外在：

.comment-reply-link {
font-size:12px;
color: #fff;
text-align:center;
padding: 2px 15px 2px 15px;
}

和

#featured .item .boxCaption {
width:211px;
padding:10px;
margin: 115px 0 0 3px;
position:absolute;
top:160px;
z-index:4;
background:url(images/bg-box.png) repeat top left;
color:#fff;
}

及css.css样式文件中：

#gg a{
color: #fff;
font-size: 13px;
letter-spacing:2px;
}

加入：

text-shadow: 0px 1px 0px #000;

其它主题也大同小异，在样式文件中找到全局属性body {}加入上面那句阴影效果代码就可以了。

无图片CSS圆角

知更鸟 — Sat, 27 Nov 2010 15:36:18 +0000

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml">
"Content-Type" content="text/html; charset=utf-8" />
无图片CSS圆角
"text/css">
body {
color: #000;
background: #999;
font-size: 12px;
line-height: 1.5;
margin: 0;
}
.box {
width: 500px;
margin: 30px auto;
}
.box .r1 {
height: 1px;
overflow: hidden;
margin: 0 5px;
background: #f60;
}
.box .r2 {
height: 1px;
border-left: 2px solid #f60;
border-right: 2px solid #f60;
margin: 0 3px;
background: #ff0;
overflow: hidden;
}
.box .r3 {
height: 1px;
border-left: 1px solid #f60;
border-right: 1px solid #f60;
margin: 0 2px;
background: #ff0;
overflow: hidden;
}
.box .r4 {
height: 2px;
border-left: 1px solid #f60;
border-right: 1px solid #f60;
margin: 0 1px;
background: #ff0;
overflow: hidden;
}
.box .content {
background: #fff;
border-left: 1px solid #f60;
border-right: 1px solid #f60;
padding: 7px 10px;
zoom: 1;
} /*---修改边框颜色---*/
.box .r2, .box .r3, .box .r4, .box .content {
border-color: #2d437b;
}
.box .r1 {
background: #2d437b;
} /*---修改背景颜色---*/
.box .r2, .box .r3, .box .r4, .box .content {
background: #f3fdff;
} /*---修改圆角大小---*/
.box2 {
width: 500px;
margin: 30px auto;
}
.box2 .r1 {
height: 1px;
overflow: hidden;
margin: 0 2px;
background: #f60;
}
.box2 .r2 {
height: 1px;
overflow: hidden;
margin: 0 1px;
border-left: 1px solid #f60;
border-right: 1px solid #f60;
background: #ff0;
}
.box2 .content {
background: #ff0;
border-left: 1px solid #f60;
border-right: 1px solid #f60;
padding: 7px 10px;
zoom: 1;
}
"box2">
"top">
"r1">

"r2">

"r3">

"r4">

"content">

这样形成的圆角，是具备多种优势的： 1. 无论是在横向还是纵向上都保持着无限的扩展性。(试着修改box的width、content的height。) 2. 没有hack，且不易出现浏览器兼容性问题。 3. 圆角颜色易自定义。 4. 圆角大小可自定义。(试着将class="box"的修改为class="box2"。) 5. 圆角模式易自定义。 6. 可以存在于任意背景中。(试着修改body的background。) 7. html结构清晰。

"bottom">

"r4">

"r3">

"r2">

"r1">

30个优秀的CSS技术和实例

知更鸟 — Wed, 10 Nov 2010 01:21:21 +0000

30个使用纯CSS完成的强大实践的优秀CSS技术和实例，您将在这里发现很多与众不同的技术，比如:图片集、阴影效果、可扩展按钮、菜单等…这些实例都是使用纯CSS和HTML实现的。

单击每个实例的标题可以被转向到该技术实例的相关教程或说明页面(英文)，单击每个实例的图片截图可以直接跳转到相应实例的Demo页面。

1.Hoverbox 图片集

一个纯净的基于CSS的图片集，鼠标悬停缩略图就会显示放大效果。

2.高级CSS菜单

一款很有创意且复杂的CSS导航方案。

3.滑动影集

手风琴效果的影集，悬停便可拉伸图片。

4.Lightbox幻灯片

题为”Supercharge your image borders“的文章中的一部分展示了如何使用CSS样式让图片变得更有意思。

5.图片的阴影效果

在A List Apart上的一个关于图片效果Demo的讨论文章“CSS Drop shadows“.

6.跨浏览器多页式影集

悬停标签改变分类，悬停缩略图显示放大图。

7.CSS照片放大

使用简单的图片和background-position属性来进行调解。

8.CSS gallery layout—smells like a table

模仿表格布局，但使用的是列表。图集是流式宽度。

9.Sticky Footer

仅使用了很少XHTML的静态页脚。

10.whatever: hover

模仿Windows开始菜单的CSS导航菜单。

11.纯CSS手风琴效果

使用div和:hover伪类的手风琴效果，这个效果可以垂直显示也可以水平显示。

12.使用PNG和背景色的可扩展按钮

13.Pushbutton Links

链接在不使用图片的情况下看起来像个按钮。

14.含固定Header的可卷动表格

表格的标题被固定的优秀长表格。

15.CSS内容遮盖

当你悬停在图片上时，div容器会显示更多文字。

16.CSS样式表格版本2

一个使用背景图片且非常漂亮，被语义化标记的表格。

17.PNG遮盖

另一种为图片添加圆角的方法。（圆角、边框、阴影）

18.利用CSS为超链接添加提示

关于为不同类型的链接添加图标的简单教程。

19.简单的CSS圆角边框

仅适用了一张图片和很少的几行代码及标记。

20.Sitemap Celebration

使用嵌套列表的树形导航，很适合网站地图页面。

21.简单的跨浏览器幻灯片

不使用javascript实现透明度技巧（但是以不符合XHTML验证为代价）

22.圆角2

流式跨度和高度的圆角div。

23.使用背景图片百分比来创建图表

条线图使用列表

。

24.CSS柱状图:实例

3款柱状图实例:使用div和列表标签的”基本CSS柱状图”、”复杂CSS柱状图”、”垂直CSS柱状图”。

25.动态翻转简单头

箭头会平滑的跟随鼠标移动，没有使用一丁点javascript和gif动画。

26.基于CSS的表单模板

27.CSS图片文本结合技巧

使用了空白div来让文本能围绕背景图中的图像显示。

28.使用CSS实现淡入效果的图片

这个实例使用透明度设置和简单的图片逐渐在文字上方淡入图片。

29.纯CSS弹出效果

一个在IE5(Mac)上也能正常工作的弹出技巧。

30.使用CSS实现文本渐变效果

使用背景图片遮盖，和一个空的span标签，还有position: absolute声明来实现文本的渐变效果。

10个非常棒的HTML5、CSS和Javascript特效展

知更鸟 — Wed, 30 Jun 2010 03:57:26 +0000

虽然我并没有真正的去学习和了解HTML5的功能,但是它已经很火了,现在我甚至无法避免。为此需要一段时间来熟习和了解它。这其中我认为苹果公司所起的作用非常大。苹果的iPad刺激接受了HTML5 兴起。虽然我还没有iPad，因为我认为我不需要它。回到HTML5， HTML5改变了游戏,网络的发展,这太令人兴奋了。收集了10个的html5、css和javascript效果展示,一起来看看html5的魅力吧!

Blob

Cute little round shape character. It uses HTML5 canvas plus javascript to create such cool animation and interactivity.

Bubble

Generate colorful bubbles using HTML5 and of course with a magic touch of javascript.

jParallax

Awesome jParallax. I have been wanted to use this in my projects, but still haven't got the chance yet. It's a plugin and it's free.

Firework

Never thought we can make firework with Javascript and html5.

Canvas Photo

Create polaroid photo effect with HTML5 canvas. It also come with the export tool.

Video showcase from Apple

Apple has a sweet demonstration of video masking, scaling and changing perspective of the video.

Photo Gallery

Another awesome demonstration. You can change the layout of the photo gallery and it has a nice blur effect.

Particle Animation

Using 300 sprites to spell out the word. It's the demonstration of canvas particle animation.

Spread

Block based destruction of HTML5 Canvas Video

CSS阴影详解

知更鸟 — Tue, 01 Jun 2010 04:50:33 +0000

设计师常常使用一些独特的字体效果和页面效果，阴影是其中一个，它可以让页面中的文字和元素具有立体的效果，从而被突出出来。比如对于文字阴影，传统的方法可能需要将文字切出来，直接使用图片，如果考虑SEO和网站性能，还可能会使用CSS Sprites等技术将图片整合：

h2{ background:url(sprites.png) no-repeat 0 0; font-size:0; text-indent:-9999em;...} h2#title1{background-position:0 -30px;} h2#title2{background-position:0 -60px;} ....

这是很棘手的事情，拼合图片会花掉你的大量时间，而且为了实现更好视觉效果，你可能还要使用高质量的32位png图片，这又要让你面对该死的IE 6的png透明问题！

事实上，对于文字的阴影效果，我们完全可以用CSS来实现！

可以查看查看demo 先。

Text-shadow

text-shadow可以让我们实现完美的文字阴影效果。基本写法：

text-shadow:[颜色 x轴 y轴模糊半径],[颜色 x轴 y轴模糊半径]...

或者

text-shadow:[x轴 y轴模糊半径颜色],[x轴 y轴模糊半径颜色]...

这里的颜色就是阴影的颜色，你可以将颜色写在前面，也可以写在最后。x轴和y轴分别是其阴影的偏移位置，模糊半径可以理解为阴影长度。而且现在大部分浏览器都支持多层阴影，你可以用逗号分开多组设置(当然也可以只是用单个设置)。

示例：

h1{color:#000; background:#333; font:bold 24px/2 "微软雅黑",Arial; text-indent:2em; text-shadow:black 2px 2px 2px; }

效果如下图：

该属性目前被除IE之外的大部分浏览器支持，对于IE，我们可以使用shadow滤镜来实现：

filter: Shadow(Color='black', Direction='135', Strength='2')

你可能已经注意到，使用shadow滤镜只能定义角度 direction，而不能定义xy轴，z轴也被换成了strength。注意，使用该滤镜的时候，不能够设置背景颜色，否则滤镜将无效！另外如果你的数学不是很好，不太懂三角函数的算法，你可以使用IE的另外一个滤镜：dropshadow：

filter: dropshadow(OffX=2, OffY=2, Color='black', Positive='true');

好吧，IE总是会拖我们的后腿，不过值得一提的是，IE的这两个滤镜是支持多层阴影的！比如，可以这样写：

filter: dropshadow(OffX=2, OffY=2, Color='red', Positive='true') dropshadow(OffX=2, OffY=2, Color='yelow', Positive='true') dropshadow(OffX=2, OffY=2, Color='blue', Positive='true');

欲了解更多关于IE的这两个滤镜，请查看：Shadow 和 Dropshadow

让我们看一个多层阴影的例子(这里无视了IE)：

h1{font:bold 32px/2 Verdana, Geneva, sans-serif; color:#f39; text-shadow:1px 1px 2px rgba(0,0,0,.8), 0 0 1em rgba(255, 0, 255, 0.5), 0 0 0.2em rgba(0, 0, 255, 0.9);}

效果如图：

这里我们使用到了rgba色彩，它是一种在CSS中同时声明颜色及其透明度的一种方法，且被大多数A级浏览器支持的色彩属性（除了 IE），了解更多请查看：《RGBa色彩的浏览器支持》——同时我们推荐对于纯色半透明的情况使用这种简单的写法。

text-shadow的浏览器兼容性

目前text-shadow被Firefox 3.5+，Safari 1.1+/chrome 2.0+和opera 9.5支持，IE不支持。需要注意的是，Safari只有4.0才支持多层阴影。

IE各个版本都不支持text-shadow；
Opera 9.5+支持最多6-9层阴影，并使用CSS2渲染顺序(最先定义的阴影在最下面)。而且出于性能的原因，模糊半径被限制到100px；
Gecko (Firefox)理论上支持无限层text-shadows (不过不建议尝试) 并遵循新的CSS3渲染顺序(最先定义的阴影在最上面)；
Safari 1.1-3.2只支持单层text-shadow (只显示第一个逗号之前的声明而无视后面的)。Safari 4.0+才支持多层阴影以及新的CSS3渲染顺序；

box-shadow

先来说IE，IE不支持box-shadow属性，但是上面提到的两个滤镜都可以用来实现阴影效果。这也就是说，IE并没有把文字阴影和盒子阴影区分！这就会出现一些问题：元素中的文字会继承元素的阴影设置。但是如果你不定义该元素的background和 border，就只会出现文字阴影，如果只定义background属性而不定义border，就只会出现盒子阴影，文字不会出现阴影；而如果只定义了 border属性而不定义background，就即会出现盒子阴影，内容文字及图片也会出现阴影。有兴趣的同学可以折腾一下。

好了，现在让我们忘了IE，来看一看box-shadow。事实上，了解了text-shadow之后，box-shadow就很好理解了，目前只有firefox和safari/chrome通过私有属性支持box-shadow属性。而Opera浏览器虽然目前还不支持该属性，但是在其文档中提到下一个版本的引擎Presto 2.3（目前最新版的Opera 10.10的引擎是Presto 2.2.15）中将会支持 box-shadow，那就让我们慢慢等待吧。

box-shadow的语法和text-shadow是一样的。

#boxShadow{ ... -webkit-box-shadow:2px 2px 2px black; -moz-box-shadow:2px 2px 2px black; ... }

事实上，box-shadow和border-radius是很好的搭档：

#boxShadow1{-moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; border:1px solid ddd; -webkit-box-shadow:0 0 10px black; -moz-box-shadow:0 0 10px black; padding:10px;}
效果如图：

firefox在3.5版本中才开始支持box-shadow，目前对阴影的渲染还不是很完美。

总结

CSS阴影是CSS3中很有用的特性，我们已经可以在Firefox/webkit/Opera中使用text-shadow，很快也可以在这些浏览器中实现box-shadow。唯独IE特立独行，还在坚持它那蹩脚的滤镜，这真是个杯具。

查看demo

30个CSS导航技术

知更鸟 — Sat, 01 May 2010 08:08:21 +0000

We’ve seen innovative ways in which designers and developers have used CSS to innovate upon its shortcomings. Here, you’ll find some of the best ways to use CSS for your website navigation. You’ll find a variety of techniques that truly showcase the capabilities of CSS.

In this article, you will find a collection of excellent navigation techniques that use the CSS to provide users with an impressive interface.

1. The Menu menu

This another great CSS menu Stu Nicholls that’s unique – hovering over a menu item reveals a submenu. If you want get started with this menu just simple view the source code. Demo in page.

2. Pure CSS hover menu

View Demo

In this CSS technique, you’ll learn to create a vertically-oriented CSS hover menu that reveals a submenu when a menu item is hovered on.

3. Matte CSS Menu

View Demo

Matte is a simple CSS menu with rounded corners using two small images only from 13styles. It is maintained by David Appleyard who has lots of simple and advanced CSS-based menus.

4. CSS Blur Menu

View Demo

This CSS technique shows you a method from creating a menu that blurs sibling menu items when you hover over an item.

5. CSS Navigation with Glowing Icons

View Demo

This beautiful CSS menu technique can be created by following along this extensive step-by-step tutorial.

6. CSS Sliding Door using only 1 image

View Demo

This slick CSS menu is based on the Sliding Doors technique but only uses one image.

7. Navigation Matrix Reloaded

View Demo

This stylish navigation menu technique uses a CSS sprite.

8. CSS Horizontal Menu

View Demo

Ian Main provides a great set of free CSS menus that are stylish and easy to use.

9. Woody CSS Menu

Woody is a pre-made CSS menu that’s ready to use and has been tested in IE6, IE 7, Firefox, Opera, Safari, Chrome. Demo in the page.

10. Advanced CSS Menu

Advanced CSS Menu was created by Nick La and uses an advanced (extraordinary) list menu utilizing the CSS position property. Demo in the page.

11. Simple Yellow Tabbed

This menu is from CSS Menu Generator which has more free high quality menus. Demo in the page.

12. Vimeo-Like Top Navigation

View Demo

This CSS-based navigation menu is based on the Vimeo primary menu.

13. Apple Like Colorful CSS Menu

Learn a technique for mimicking Apple’s image rollover CSS menu by following along this menu tutorial. Demo in page.

14. CSS Hoverbox

Inspired by the Hoverbox Image Gallery technique developed by Nathan Smith, CSS Hoverbox leans on the background-position CSS property to superimpose rollover images on top of neighboring menu items. Demo in page.

15. Big CSS Box

This is an experimental CSS menu that allows you to create a scaling menu that adjusts depending on the browser’s width. Demo in page.

16. Simple CSS-based drop-down menu

View Demo

This is a very basic CSS-based drop-down menu that’s excellent for trying to grok the technique involved in creating drop-down menu that doesn’t require client-side scripting.

17. Two Level Horizontal Navigation in CSS

View Demo

Veerle Pieters provides a CSS menu and tutorial created using text-indent CSS property.

18. Uberlink CSS List Menus

View Demo

This CSS navigation bar looks and behaves like an image-swapping menu.

19. CSS-Only Accordion Effect

View Demo

In this technique, you’ll witness a method for creating a CSS-based accordion menu.

20. Tabbed Navigation Using CSS

Here is another excellent method for creating a module tab interface based purely on CSS. Use the tabs in the page to learn about the instructions on how to implement this technique.

21. CSS Mini Tabs (the UN-tab, tab)

View Demo

This CSS menu on the popular web design agency SimpleBits shows a way for creating mini tabs. View the source code on the demo page to learn how it works (the code is inline and formatted well for readability for your convenience).

22. Drop-Down Menus, Horizontal Style

View Demo

This A List Apart CSS menu technique is for a fly-out submenu that appears on the right of the top-level menu, leveraging the position: absolute CSS property to move the submenu to the appropriate level.

23. List Into a Navigation Bar

View Demo

Roger Johansson of 456 Berea Street shows us the basic principles of turning an unordered list into a navigation bar – it’s a great starting point for beginners to learn about building a semantic HTML structure and then styling it with CSS.

24. CSS Tabs with Submenus

This CSS menu technique will allow you to create CSS tabs that have submenus for a two-level hierarchy. Demo in page.

25. CSS Block Navigation Menu

This CSS menu technique allows you to create a navigation menu that has item with descriptions. Demo in page.

26. XHTML & CSS Sprite Navigation

View Demo

This stylish CSS sprite menu technique has three states: idle, hover, and clicked.

27. XHTML CSS Tabbed Menu

View Demo

Learn how to create module tabs without the use of client-side scripting.

28. Cool, Simple, Horizontal CSS Menu

View Demo

Learn to create a straightforward technique for creating a CSS based menu.

29. CSS Menu with Descriptions

View Demo

This technique showcases a method for creating a menu that expands when hovered upon.

30. CSS Hover Button

View Demo

Create CSS button-style navigation menu by checking out this excellent tutorial.

10款顶级CSS编辑器

知更鸟 — Sat, 01 May 2010 07:56:44 +0000

CSS编辑器是只专注CSS生成的编辑器. 虽然你可以通过全功能的IDE或源代码编辑器也能攒出css.但CSS编辑器提供的专业功能和特性能帮助你把CSS写的更好,更快.

在这篇文章里,你将看到一些在市场最流行的CSS编辑器.

Stylizer

Stylizer 是一个可视化的CSS代码编辑器。他提供网页实时预览功能,也提供根据鼠标点击定位目标元素.这些都使得编辑更容易。 Stylizer仅适用于Windows和Mac OS。

Style Master

Style Master是一个跨平台的CSS开发程序，提供了一套强大的功能.例如自动完成，支持动态代码编辑和动态生成的网页（如PHP，NET和Ruby on Rails），和CSS元素分层显示。它还有一个支持监视器功能，能对某些浏览器中CSS错误提出警告。

RapidCSS

RapidCSS非常轻量.提供了多种功能，如代码自动完成，语法高亮，内置的CSS参考和各种CSS标签的快捷键

Free CSS Toolbox

Free CSS toolbox是一个简单的CSS文本编辑器。这是非常轻量,易于使用。它有一个语法高亮显示，代码自动完成，CSS检查，CSS验证器和压缩等功能

CoffeeCup StyleSheet Maker

CoffeeCup StyleSheet Maker:通常的CSS编辑器提供了编辑CSS的许多功能，但不是很灵活，难以以提高生产率。相对于这些编辑器,CoffeeCup StyleSheet Maker 就是个例外.它提供了对html标签，class和margins快捷键的支持，以输入的次数。它还附带果酱与常见的CSS样式代码段预制包装。它也提供了对常见的CSS样式代码段预先封装.

EnginSite CSS Editor

EnginSite CSS Editor 是一个支持实时预览的很好的css编辑器.它的理念是让设计初学者把重点放在简单的任务和设计上.

CSSEdit

CSSEdit 是一个中等网页开发工具,功能不是最先进,也满足了基本的需要.干净利落,又非常顺手.非常适合第一次或临时使用的编辑器.

JellyFish-CSS

JellyFish CSS 是一个智能,简单CSS编辑器。编辑CSS代码方便，快捷。它的代码敏感功能将帮助您避开明显的 CSS语法错误。

SnapCSS

SnapCSS 是一个只能在windows系统下运行的css编辑器.非常轻量级,界面超级简单.它有一个美化代码的功能.能自动格式化,标准化你的CSS.

SimpleCSS

SimpleCSS 是Mac OS系统运行的工具.它有一个导入功能允许您把几个样式汇集到一个文件中。 SimpleCSS还有拖拽,排序CSS的功能，允许按您的方式组织他们。

4种网页添加CSS样式表的方法

知更鸟 — Thu, 22 Apr 2010 07:36:48 +0000

一、使用STYLE属性：将STYLE属性直接加在个别的元件标签里。

<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}

例如：

这种用法的优点是可灵巧应用样式於各标签中，但是缺点则是没有整篇文件的『统一性』。

二、使用STYLE标签：将样式规则写在标签之中。

例如：

通常是将整个的结构写在网页的部份之中。这种用法的优点就是在於整篇文件的统一性，只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。

三、使用 LINK标签：将样式规则写在.css的样式档案中，再以标签引入。

假设我们把样式规则存成一个example.css的档案，我们只要在网页中加入

即可套用该样式档案中所制定好的样式了。通常是将LINK标签写在网页的部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。

四、使用@import引入：跟LINK用法很像，但必　放在中。

例如：

要注意的是，行末的分号是绝对不可少的！这种方式也可以把

@import url(http://yourweb/ example.css);

加到其它样式内调用。

利用CSS Sprites技术实现网页圆角

知更鸟 — Thu, 22 Apr 2010 07:31:32 +0000

步介绍

当然，我知道现在有成千上万个关于用CSS处理圆角的教程，但不管怎么说，我仍然想把这篇文章展示给您。也希望您会发现这篇文章会非常有用。需要重点指出的是，这篇教程彻底地应用高级CSS技术，但是，我会尽力使初学者看起来简单。CSS3 在这里还没有得到完全的应用，所以，知道现在，我会保持W3C验证的有效。

看一下演示

下载 css sprites + 圆角

您还可以参考一下文章：

43个PSD转XHTML, CSS创建布局及导航辅导教程,解析事件背后的每一个步骤

我们将怎样来处理?

我处理圆角的版本是由内置的绝对定位的四个div组成，每个div都有唯一的圆角图片作CSS Sprite操作

是什么方式导致这项技术表现得这么了不起呢(What makes this technique cool)?

通过可变的宽度和高度处理毗邻的元素的能力。没有极限。(The ability to make rounded-bordered elements with fluid width and height. No limits whatsoever.) 这项技术，正如我之前提到的，是与 CSS Sprites 结合操作完成的。如果您不知道这是项怎样的技术或者说不知道怎么使用它，那么请先阅读我之前的文章。CSS sprites 都学会了吗? 那我们就开始吧!

第一步: 创建我们的 Sprite

1、为矩形圆角图片处理选择一款编辑器 (在这个案例中我选择的是Firework).

2、切割并且导出圆角到本地临时位置 (我们将会在之后用到).

3、新创建一个文件，将圆角导入到这个新文件中，复制三次，然后旋转这三个新切片得到另外的三个圆角。

4、合成四个圆角为一张图片, 并用 1px 的红线来区分它们.

5、导出合成图片，sprite 也就大功告成了。

第二步: HTML 代码

首先，我们会给容器 div 一个 .roundedBox

类 :

以下为引用的内容：

class="roundedBox">

现在，我们必须再增加四个 div ，这会在将来创建圆角的时候用到。之后必须给每个加载一个类 .corner，同时也标识一个类来指定它们格子的位置。

以下为引用的内容：

My content in roundedBox Type 1

class="corner topLeft">

class="corner topRight">

class="corner bottomLeft">

class="corner bottomRight">

一切搞定? 嗯，让我们把注意力再转移到 CSS 代码上来。

第三步: CSS 代码

如你所知, (或者您会在这里快速学习到) 绝对定位元素通常都依照相对定位的父元素进行定位。. If this element is not defined, they will take as their parent relatively-positioned element, the body tag.如果这个父元素无法界定，那么它会去最近作相对定位的那个父元素，直至 body 标签。哈?! - 好了，如果到此为止您仍没有掌握，不用担心，我们将在第二部分了解它。(翻译得有点拗，附上原文：Ok, if you didn’t get this, don’t worry, you’ll catch it in an second.)

让我们先来定义下所有的圆角：

所有的圆角都必须定义绝对定位，并且注明高度跟宽度。我的圆角定义的宽度跟高度都是 17px.

以下为引用的内容：.corner {

position:absolute;

width:17px;

height:17px;

}

如果您是第一次切割矩形圆角，那么宽度跟高度很可能会不一样 (咄!)。

现在开始定义 div 容器样式:

以下为引用的内容：.roundedBox {position:relative;}

任何定义有类 .roundedBox 的元素内，绝对定位元素都会相对于这个元素进行定位，而不是标签 body。我们也必须设置一些padding值，如果没有设置，圆角将会覆盖我们的文本，这肯定不是我们想要的效果。重要提示: top 和 bottom padding 值必须等价于圆角的 height。left 和 right padding 值必须等价于圆角的宽度。正如您已经知道的，我的圆角宽度跟高度是相等的，因此，四个边角的padding 值也是相等的:

.roundedBox {position:relative; padding:17px; margin:10px 0;}

我也通过 margin 给我们的 div 流出了一定的空隙

最后，让我们对没有圆角作单独定义

我们会对每个圆角作绝对定位设置，并且定位背景图的位置 (根据我们的 sprite):

以下为引用的内容：.roundedBox {position:relative; padding:17px; margin:10px 0;}

.corner {position:absolute; width:17px; height:17px;}

.topLeft {top:0; left:0; background-position:-1px -1px;}

.topRight {top:0; right:0; background-position:-19px -1px;}

.bottomLeft {bottom:0; left:0; background-position:-1px -19px;}

.bottomRight {bottom:0; right:0; background-position:-19px -19px;}

您可能已经注意到，我们的样式仍然还没有下载 sprite。我们一般不会去定义它们的原因是，我们会使用另外的方法。

圆形盒模型 1 (蓝色)

HTML 代码：

以下为引用的内容：

id="type1">
My content in roundedBox Type 1

我们必须给容器 div 定义一个ID为 #type1，用来实施特殊背景。

CSS 代码：

首先，我们得给 #type1 匹配一个背景色，使之融合于 sprite 中的圆角:

#type1 {background-color:#CCDEDE;}

之后，通过定义 .corner 类来协助圆形盒模型载入 Sprite 样式:

#type1 {background-color:#CCDEDE;}

#type1 .corner {background-image:url(../images/corners-type1.gif);}

好了，我们的第一个圆角矩形大功告成了!预览圆角矩形模型1 (蓝色)

圆形盒模型 2 (绿色) / 圆形盒模型 3 (紫色)

模型1，模型2跟模型3的唯一差别就是它们的颜色，所以我们也仅仅只修改这些。

模型 2 (绿色)

HTML 代码：

以下为引用的内容：

id="type2">
My content in roundedBox Type 2

CSS 代码 (仅仅修改 sprites 的颜色及背景色)

#type2 {background-color:#CDDFCA;}

#type2 .corner {background-image:url(../images/corners-type2.gif);}

预览圆角矩形模型2 (绿色)

模型 3 (紫色)

HTML 代码：

以下为引用的内容：

id="type3">
My content in roundedBox Type 3

CSS 代码 (仅仅修改 sprites 的颜色及背景色)

以下为引用的内容：#type3 {background-color:#D3CADF;}
#type3 .corner {background-image:url(../images/corners-type3.gif);}

预览圆角矩形模型 3 (紫色). 都学会了吗?好，现在我们再进一步学习。

模型 4 (红色边框)

模型4 跟模型1、2、3又有什么区别呢?边框和颜色，让我们来解决这些因素吧。

HTML 代码：

以下为引用的内容：

id="type4">
My content in roundedBox Type 4

CSS 代码 (在 sprite 中给您的边角的边框都添上边框，并使 .roundedBox 类的背景及边框融合 sprite。)

以下为引用的内容：#type4 {background-color:#CCACAE; border:1px solid #AD9396;}
#type4 .corner {background-image:url(../images/corners-type4.gif);}

好了，这个就是截图效果。我们的边角还不能正确地覆盖 #type4 边框。所以我们必须矫正它们的定位来覆盖早期的定位样式。让我们做到这一点:

以下为引用的内容：#type4 {background-color:#CCACAE; border:1px solid #AD9396;}
#type4 .corner {background-image:url(../images/corners-type4.gif);}
#type4 .topLeft {top:-1px;left:-1px;}
#type4 .topRight {top:-1px; right:-1px;}
#type4 .bottomLeft {bottom:-1px; left:-1px;}
#type4 .bottomRight {bottom:-1px; right:-1px;}

好了，这就是我们完成的模型 4。预览圆角矩形模型4 (红色边框). We are almost there, don’t quit now :p模型

5 (垂直渐变)

好了，模型5会需要更多的工作量，我们应该这样:

修改上下边角的高度 (由渐变度决定(depending on your gradient))。

修改上下边角的背景图定位 (由渐变度决定)。

通过重复平铺 1px 的背景图片来创建容器 div 的渐变效果。

值得注意的是，我们必须给内容设置一个大小，或者给容器设置一个最小高度(由渐变度决定)。

让我们开始吧。

HTML 代码 (跟之前的一样)：

以下为引用的内容：

id="type5">
My content in roundedBox Type 5

CSS 代码：

我的渐变是从上到下垂直的。所以我们必须增加上边角的高度，以及更改下边角的背景图位置。当您看到我的新的 sprite 就会明白为什么会这么处理。就是下面这张:

我的div中的背景图片是这样的:

1px 的宽度，它的确是存在的。我的下边角有一条实心颜色，刚好可以匹配div的背景色。少说话多行动。我们来继续定义容器 div :

以下为引用的内容：#type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;}

给容器设置的背景颜色是我从底部边角中吸取的。然后将背景图片按 x 方向进行重复。最后我给它设置一个最小高度，正如我之前所说的，渐变才不会泄露。最后来加上所有的边角 (我将文件的类型修改为 .png 格式的图片，为的是能得到更好的渐变质量):

以下为引用的内容：#type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;}
#type5 .corner {background-image:url(../images/corners-type5.png);}

现在，我增加上边角的高度 (这是由渐变最后抵达的颜色位置决定的):

最后，我纠正下下边角的背景图定位:

以下为引用的内容：#type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;}
#type5 .corner {background-image:url(../images/corners-type5.png);}
#type5 .topLeft,
#type5 .topRight {height:140px;}
#type5 .bottomLeft {background-position:-1px -142px;}
#type5 .bottomRight {background-position:-19px -142px;}

全部完成! - 预览圆角矩形模型 5 (垂直渐变)

IE6 版本

这项技术在这一令人讨厌的浏览器中是有问题的。我们必须给容器 (.roundedBox, or #type1, #type2, 等等) 确定宽度跟高度。如果您没有定义它，那么它会泄露到盒模型之外。使用 IE6 条件式注释法来定义它。

最后的想法

我希望这项技术对您会有帮组，并且不会显得太难。垂直渐变、透明的角落，只要多加练习，您的脑袋会变得更加好用，也会更加容易定义样式。

CSS浮雕效果

知更鸟 — Sat, 25 Apr 2009 15:03:34 +0000

一直在作仿Apple风格的主题，但是Apple有一个文字效果一直不能模仿出来，那就是浮雕效果如图，采用CSS样式制作浮雕效果文字网上搜索了很久，一直没有一个完美的答案，今天从国外网站看到一个利用CSS样式作出浮雕效果的文章，效果非常好，兼容各主流浏览器，不过要应用到WordPress主题上还得具体实践下。

◆点击这里查看具体效果

原文（英文）：http://www.howtocreate.co.uk/textshadow.html

25个CSS高级进阶教程

知更鸟 — Sat, 25 Apr 2009 13:22:04 +0000

如果你对 CSS 的掌握已经到了一定的贯通程度,那么你手中的 CSS 将会为你做很多高级的功能,甚至有时候 CSS 可以帮助解决之前靠 JS 才能解决的问题, 要知道,在 Web 开发过程中, 减少一段 JS 可是对 Web 的运行有足够大的减压作用的。25个 CSS 高级教程，让你更了解 CSS。

1. 纯 CSS 字体渐变和背景渐变

CSS Gradients using pure CSS

Background gradients and CSS

CSS Gradient Text Effect

Pure CSS Text Gradient

   1. text-shadow: 0px 1px 0px #e5e5ee;

7. Iconize Text links/Hyperlink with CSS

Add icon to the hyperlink.

Iconize Textlinks with CSS

8. CSS Curly Quotes

Curly Quotes with Pure CSS

Swooshy Curly Quotes Without Images

9. Using CSS Opacity for Various Cool Effects

A CSS only fly-out menu with transparency

CSS Menu using CSS opacity property

Opacity Background Blending Effects

Transparency Menu Watermark on an image

10. Blurry Background Effect

h ow to create a blurry background using CSS

11. CSS Parallax Effect

Examples of and How to Create the CSS Parallax Effect

A parallax illusion with CSS: The Horse in Motion

12.Create a Lightbox effect only with CSS

technique

13.CSS-Only Accordion Effect

create Accordion using CSS

14. Add grunge Effect to Text Using Simple CSS

tutorial

15.Create a Block Hover /Element Hover Effect

Learn how to create a block hover effect for a list of links

CSS element hover effect.

16. Simple Dither Effect using CSS

dither effect using

17. Create a liDock Menu

Horizontal Menus That Grow on You

18. CSS Hover Swap Effect

CSS swap hover effect

19. Polaroid effect using CSS

Polaroid-izing photos with CSS and one Image.

20. CSS 杂志

Create a Magazine Type layout Using CSS

21. CSS Hoverbox Menu

cool CSS Menu

22.CSS 标签切换

Create a Tabbed content.

23.CSS Magic with Fixed Background-attachment

shows a trick that reveals a magic

24. CSS 信息提示

Show a message when hovering over the links.

25. 纯 CSS 预加载效果

Add a “loading” icon to your larger images

转载：http://www.booto.net/?p=2367

常用CSS样式属性

知更鸟 — Sat, 25 Apr 2009 13:06:47 +0000

★CSS文字属性：
color : #999999; /*文字颜色*/
font-family : 宋体,sans-serif; /*文字字体*/
font-size : 9pt; /*文字大小*/
font-style:itelic; /*文字斜体*/
font-variant:small-caps; /*小字体*/
letter-spacing : 1pt; /*字间距离*/
line-height : 200%; /*设置行高*/
font-weight:bold; /*文字粗体*/
vertical-align:sub; /*下标字*/
vertical-align:super; /*上标字*/
text-decoration:line-through; /*加删除线*/
text-decoration:overline; /*加顶线*/
text-decoration:underline; /*加下划线*/
text-decoration:none; /*删除链接下划线*/
text-transform : capitalize; /*首字大写*/
text-transform : uppercase; /*英文大写*/
text-transform : lowercase; /*英文小写*/
text-align:right; /*文字右对齐*/
text-align:left; /*文字左对齐*/
text-align:center; /*文字居中对齐*/
text-align:justify; /*文字分散对齐*/
vertical-align属性
vertical-align:top; /*垂直向上对齐*/
vertical-align:bottom; /*垂直向下对齐*/
vertical-align:middle; /*垂直居中对齐*/
vertical-align:text-top; /*文字垂直向上对齐*/
vertical-align:text-bottom; /*文字垂直向下对齐*/

★CSS符号属性：
list-style-type:none; /*不编号*/
list-style-type:decimal; /*阿拉伯数字*/
list-style-type:lower-roman; /*小写罗马数字*/
list-style-type:upper-roman; /*大写罗马数字*/
list-style-type:lower-alpha; /*小写英文字母*/
list-style-type:upper-alpha; /*大写英文字母*/
list-style-type:disc; /*实心圆形符号*/
list-style-type:circle; /*空心圆形符号*/
list-style-type:square; /*实心方形符号*/
list-style-image:url(/dot.gif); /*图片式符号*/
list-style-position:outside; /*凸排*/
list-style-position:inside; /*缩进*/

★CSS背景样式：
background-color:#F5E2EC; /*背景颜色*/
background:transparent; /*透视背景*/
background-image : url(/image/bg.gif); /*背景图片*/
background-attachment : fixed; /*浮水印固定背景*/
background-repeat : repeat; /*重复排列-网页默认*/
background-repeat : no-repeat; /*不重复排列*/
background-repeat : repeat-x; /*在x轴重复排列*/
background-repeat : repeat-y; /*在y轴重复排列*/
★指定背景位置
background-position : 90% 90%; /*背景图片x与y轴的位置*/
background-position : top; /*向上对齐*/
background-position : buttom; /*向下对齐*/
background-position : left; /*向左对齐*/
background-position : right; /*向右对齐*/
background-position : center; /*居中对齐*/

★CSS连接属性：
a /*所有超链接*/
a:link /*超链接文字格式*/
a:visited /*浏览过的链接文字格式*/
a:active /*按下链接的格式*/
a:hover /*鼠标转到链接*/
★鼠标光标样式：
链接手指 CURSOR: hand
十字体 cursor:crosshair
箭头朝下 cursor:s-resize
十字箭头 cursor:move
箭头朝右 cursor:move
加一问号 cursor:help
箭头朝左 cursor:w-resize
箭头朝上 cursor:n-resize
箭头朝右上 cursor:ne-resize
箭头朝左上 cursor:nw-resize
文字I型 cursor:text
箭头斜右下 cursor:se-resize
箭头斜左下 cursor:sw-resize
漏斗 cursor:wait
光标图案(IE6) p {cursor:url("光标文件名.cur"),text;}

★CSS框线：
border-top : 1px solid #6699cc; /*上框线*/
border-bottom : 1px solid #6699cc; /*下框线*/
border-left : 1px solid #6699cc; /*左框线*/
border-right : 1px solid #6699cc; /*右框线*/
以上是建议书写方式,但也可以使用常规的方式如下:

border-top-color : #369 /*设置上框线top颜色*/
border-top-width :1px /*设置上框线top宽度*/
border-top-style : solid/*设置上框线top样式*/
其他框线样式
solid /*实线框*/
dotted /*虚线框*/
double /*双线框*/
groove /*立体内凸框*/
ridge /*立体浮雕框*/
inset /*凹框*/
outset /*凸框*/

★CSS表单运用：
文字方块
按钮
复选框
选择钮
多行文字方块
下拉式菜单选项1选项2

★CSS边界样式：
margin-top:10px; /*上边界*/
margin-right:10px; /*右边界值*/
margin-bottom:10px; /*下边界值*/
margin-left:10px; /*左边界值*/

★CSS边框空白
padding-top:10px; /*上边框留空白*/
padding-right:10px; /*右边框留空白*/
padding-bottom:10px; /*下边框留空白*/
padding-left:10px; /*左边框留空白

知更鸟 » CSS

CSS强制英文、中文换行与不换行

为主题添加文字阴影

无图片CSS圆角

30个优秀的CSS技术和实例

1.Hoverbox 图片集

2.高级CSS菜单

3.滑动影集

4.Lightbox幻灯片

5.图片的阴影效果

6.跨浏览器多页式影集

7.CSS照片放大

8.CSS gallery layout—smells like a table

9.Sticky Footer

10.whatever: hover

11.纯CSS手风琴效果

12.使用PNG和背景色的可扩展按钮

13.Pushbutton Links

14.含固定Header的可卷动表格

15.CSS内容遮盖

16.CSS样式表格版本2

17.PNG遮盖

18.利用CSS为超链接添加提示

19.简单的CSS圆角边框

20.Sitemap Celebration

21.简单的跨浏览器幻灯片

22.圆角2

23.使用背景图片百分比来创建图表

24.CSS柱状图:实例

25.动态翻转简单头

26.基于CSS的表单模板

27.CSS图片文本结合技巧

28.使用CSS实现淡入效果的图片

29.纯CSS弹出效果

30.使用CSS实现文本渐变效果

10个非常棒的HTML5、CSS和Javascript特效展

CSS阴影详解

30个CSS导航技术

1. The Menu menu

2. Pure CSS hover menu

3. Matte CSS Menu

4. CSS Blur Menu

5. CSS Navigation with Glowing Icons

6. CSS Sliding Door using only 1 image

7. Navigation Matrix Reloaded

8. CSS Horizontal Menu

9. Woody CSS Menu

10. Advanced CSS Menu

11. Simple Yellow Tabbed

12. Vimeo-Like Top Navigation

13. Apple Like Colorful CSS Menu

14. CSS Hoverbox

15. Big CSS Box

16. Simple CSS-based drop-down menu

17. Two Level Horizontal Navigation in CSS

18. Uberlink CSS List Menus

19. CSS-Only Accordion Effect

20. Tabbed Navigation Using CSS

21. CSS Mini Tabs (the UN-tab, tab)

22. Drop-Down Menus, Horizontal Style

23. List Into a Navigation Bar

24. CSS Tabs with Submenus

25. CSS Block Navigation Menu

26. XHTML & CSS Sprite Navigation

27. XHTML CSS Tabbed Menu

28. Cool, Simple, Horizontal CSS Menu

29. CSS Menu with Descriptions

30. CSS Hover Button

10款顶级CSS编辑器

4种网页添加CSS样式表的方法

利用CSS Sprites技术 实现网页圆角

CSS浮雕效果

25个CSS高级进阶教程

1. 纯 CSS 字体渐变和背景渐变

2. Z-Index 图像重叠

3. CSS 边框创意

4. 超酷 CSS 效果 - 控制面板

5. 纯 CSS 创建 2D/3D 按钮

6. Text Embossing/Shadow Technique With CSS

7. Iconize Text links/Hyperlink with CSS

利用CSS Sprites技术实现网页圆角