CSS3系列教程

软件 vocal 2009-03-02 10:42

1CSS3系列教程(1)回顶部

　　尽管把玩CSS3是很有趣的事情--就像接下来我要演示的几篇教程中表现的那样，但是需要了解的是，CSS3并没有被当前浏览器完全的支持。也就是说，如果你要在你的网站中使用CSS3，请确认有针对不支持CSS3的浏览器的兼容方法。

　　CSS3的浏览器支持状况：
　　√ Firefox (3.05+…部分支持)
　　√ Google Chrome (1.0.154+…部分支持)
　　√ Google Chrome (2.0.156+…较好支持)
　　× Internet Explorer (IE7, IE8 不支持)
　　√ Opera (9.6+…很少支持)
　　√ Safari (3.2.1+ windows…较好支持)

　　什么是CSS，什么是CSS3？

　　非常简单，CSS代表"Casading Style Sheets"，就是样式表，是一种替代并为网站添加样式的标记性语言。CSS3只是表示下一代CSS，3只是版本号。
　　如果CSS3还没有完全被支持，那么我为什么要写CSS3呢？
　　因为学习新东西时间很有趣的事情！
　　而且有人常常问我如何实现圆角。我解释了很多遍如何使用图片或CSS3实现，这里我通过写一些我学到的一些东西的方式来希望能够帮助其他的有需要的人。
　　当然你也不必只看我说的。Eric Meyer是一个了解CSS很多的传奇人物，这里有个很棒的对Eric的访谈，讨论CSS3，很值得一读。
　　测试，我特别制作了一个关于本系列教程的测试页面。所有本系列教程所讨论的内容，在该测试页面都有演示，你也可以访问该页面，来测试一下自己的浏览器是否支持CSS3。
　　页面中圆角的实现是个很头疼的问题，虽然现在有很多种实现方法，但是都是比较麻烦的。在本文中，让我们看看如何使用CSS3 border-radius来实现圆角DIV。

　　跨浏览器兼容性

　　前缀：
　　-moz(例如 -moz-border-radius)用于Firefox
　　-webkit(例如：-webkit-border-radius)用于Safari和Chrome。

　　CSS3圆角（所有的）
　　不使用图片来实现圆角曾经是很流行的能力，创建那些完美的小圆角图片，用做适当的CSS背景，是非常费时的工作。现在，使用CSS3，我们可以用几行代码来创建圆角。

图1

　　这是一个5px普通边框和15px边框半径的设置：

　　#roundCorderC{
　　font-family: Arial;
　　border: 5px solid #dedede;
　　-moz-border-radius: 15px;
　　-webkit-border-radius: 15px;
　　padding: 15px 25px;
　　height: inherit;
　　width: 590px;
　　}

　　浏览器支持:
　　√ Firefox(3.05+…)
　　√ Google Chrome(1.0.154+…)
　　√ Google Chrome(2.0.156+…)
　　× Internet Explorer(IE7, IE8)
　　× Opera 9.6
　　√ Safari(3.2.1+ windows)

　　CSS3圆角(个别的)

　　当然，一个DIV的四个角不需要全部都是圆角，你可以个别的实现圆角。

　　#roundCornerI{
　　font-family: Arial;
　　border: 5px solid #dedede;
　　-moz-border-radius-topleft: 15px;
　　-moz-border-radius-topright: 0px;
　　-moz-border-radius-bottomright: 15px;
　　-moz-border-radius-bottomleft: 0px;
　　-webkit-border-top-left-radius: 15px;
　　-webkit-border-top-right-radius: 0px;
　　-webkit-border-bottom-left-radius: 0px;
　　-webkit-border-bottom-right-radius: 15px;
　　padding: 15x 25px;
　　height: inherit;
　　width: 590px;
　　}

　　现在我们来看一看如何为边框的border-color添加更多的色彩。
　　使用CSS3的border-radius属性，如果你设置了border的宽度是X px，那么你就可以在这个border上使用X种颜色，每种颜色显示1px的宽度。如果说你的border的宽度是10个像素，但是只声明了5或6中颜色，那么最后一个颜色将被添加到剩下的宽度。

　　浏览器兼容性

　　目前只有Firefox支持CSS3 border-colour属性，所以我们这里只需使用-moz前缀。
　　所有本系列关于CSS3的文章都会及时更新，以跟踪浏览器的兼容性。

　　CSS3中的边框颜色：

图2

　　这里是一个10px宽的标准边框和边框颜色：

　　#borderColor {
　　border: 10px solid #dedede;
　　-moz-border-bottom-colors: #300 #600 #700 #800 #900 #A00;
　　-moz-border-top-colors: #300 #600 #700 #800 #900 #A00;
　　-moz-border-left-colors: #300 #600 #700 #800 #900 #A00;
　　-moz-border-right-colors: #300 #600 #700 #800 #900 #A00;
　　padding: 15px 25px;
　　height: inherit;
　　width: 590px;
　　}

　　浏览器支持：
　　√ FireFox (3.0.5)
　　× Google Chrome (1.0.154+)
　　× Google Chrome (2.0.156+)
　　× Internet Explorer (IE7/IE8 RC1)
　　× Opera (9.6)
　　× Safari (3.2.1, Windows)

2CSS3系列教程(2)回顶部

　　有圆角的边框颜色：

图3

　　#borderColorCorner {
　　border: 10px solid #dedede;
　　-moz-border-radius: 15px;
　　-moz-border-bottom-colors: #303 #404 #606 #808 #909 #A0A;
　　-moz-border-top-colors: #303 #404 #606 #808 #909 #A0A;
　　-moz-border-left-colors: #303 #404 #606 #808 #909 #A0A;
　　-moz-border-right-colors: #303 #404 #606 #808 #909 #A0A;
　　padding: 15px 25px;
　　height: inherit;
　　width: 590px;
　　}

　　阴影大约从CSS2就开始有了，但是只有Safari一个浏览器支持它，到现在依然是这样。阴影在CSS3中可以应用在边框和文字上，就像图片的阴影效果一样。
　　一般可以分为box-shadow和textshadow两类。
　　CSS3的box-shadow和textshadow可以写做：box-shadow:Apx Bpx Cpx #xxx;
　　Apx = x轴
　　Bpx = y轴
　　Cpx = 投影长度
　　#XXX = 像通常一样的颜色
　　了解了这些，我们就可以以下面的方法开始体验了…

　　浏览器兼容性：

　　在前面的介绍中，我们已经声明，并不是所有的浏览器都支持CSS3.最好的支持CSS3阴影效果的浏览器是Safari，也就是说，我们现在只需要用刀-webkit前缀。

图4

　　#boxShadow{
　　border: 5px solid #111;
　　-webkit-box-shadow: 5px 5px 7px #999;
　　-webkit-border-bottom-right-radius: 15px;
　　padding: 15px 25px;
　　height: inherit;
　　width: 590px;
　　}
　　这种效果同样可以用于图片…

　　浏览器支持：
　　× FireFox (3.0.5) - [FireFox (3.1 PreAlpha) 兼容]
　　× Google Chrome (1.0.154.)
　　√ Google Chrome (2.0.156.)(支持不是太好)
　　× Internet Explorer (IE7/ IE8 RC1)
　　× Opera (9.6)
　　√ Safari (3.2.1, Windows)

　　简单文字阴影：

图5

　　.textShadowSingle {
　　font-size: 3.2em;
　　color: #F5F5F5;
　　text-shadow: 3px 3px 7px #111;
　　text-align: center;
　　}

　　浏览器支持：
　　× FireFox (3.0.5) - [FireFox (3.1 PreAlpha) 兼容]
　　× Google Chrome (1.0.154.)
　　√ Google Chrome (2.0.156.)(支持不是太好)
　　× Internet Explorer (IE7/ IE8 RC1)
　　√ Opera (9.6)
　　√ Safari (3.2.1, Windows)

　　多重文字阴影：

图6

　　.textShadowMultiple {
　　font-size: 3.2em;
　　color: #FFF;
　　text-shadow: 0px -11px 10px #C60, 0px -3px 9px #FF0;
　　text-align: center;
　　padding: 10px 0px 5px 0px;
　　background: #151515;
　　}

　　浏览器支持
　　× FireFox (3.0.5) - [FireFox (3.1 PreAlpha) 兼容]
　　× Google Chrome (1.0.154.)
　　√ Google Chrome (2.0.156.)(支持不是太好)
　　× Internet Explorer (IE7/ IE8 RC1)
　　√ Opera (9.6)
　　√ Safari (3.2.1, Windows)

　　背景图片/纹理有很多种使用方式，常常用于添加网站的最佳的最终美化。现在它在CSS3中被重视，我们可以应用多背景图和背景图片尺寸来实现更完美的效果。
　　CSS3的背景图片大小可以写成 background-size:Apx Bpx;
　　-Apx = x轴(图片宽度)
　　-Bpx = y轴(图片高度)
　　了解了这些，我们开始体验这个特性吧：
　　最好支持CSS3背景大小的浏览器是Safari和Opera，所以我们只需要使用-o和-webkit前缀。

　　背景大小
　　
　　#backgroundSize{
　　border: 5px solid #bd9ec4;
　　background:url(image_1.extention) bottom right no-repeat;
　　-o-background-size: 150px 250px;
　　-webkit-background-size: 150px 250px;
　　padding: 15px 25px;
　　height: inherit;
　　width: 590px;
　　}

　　浏览器支持：
　　× Firefox(3.05+…)
　　√ Google Chrome(1.0.154+…)
　　√ Google Chrome(2.0.156+…)
　　× Internet Explorer(IE7, IE8 RC1 )
　　√ Opera(9.6+…)
　　√ Safari(3.2.1+ windows…)

　　为了在CSS3中应用多背景图片，我们使用都好隔开，例如：

　　background: url(image_1.extention) top right no-repeat, url(image_2.extention) bottom right no-repeat;
　　我们可以在一行代码中尝试放置多个不同的图片…

3CSS3系列教程(3)回顶部

　　多背景图

图7

　　#backgroundMultiple{
　　border: 5px solid #9e9aab;
　　background:url(image_1.extention) top left no-repeat,
　　url(image_2.extention) bottom left no-repeat,
　　url(image_3.extention) bottom right no-repeat;
　　padding: 15px 25px;
　　height: inherit;
　　width: 590px;
　　}

　　浏览器支持：
　　× Firefox(3.05+…)
　　√ Google Chrome(1.0.154+…)
　　√ Google Chrome(2.0.156+…)
　　× Internet Explorer(IE7, IE8 RC1 )
　　× Opera(9.6+…)
　　√ Safari(3.2.1+ windows…)

　　使用CSS3可以为你的网站创建多列，而不用为每列制定特定的层或段落。
　　与多背景图片一样，CSS3多列也是我最喜爱的一个技术。我想这条CSS3属性有在报纸和杂志布局中以外的很多潜在的用途。如果你在某个想法或个人网站中使用了这种方法，请在下面的评论中提交你的链接，我很高兴能确认这种方法能用于很多中布局中。

　　跨浏览器兼容性：
　　比较好的支持CSS3多列的浏览器有Firefox、Safari、Google Chrome，这样我们就需要使用-moz和-webkit前缀了。

　　CSS3多列(宽度)

图8

　　上面的截图是使用了下面的CSS3样式的效果：

　　#multiColumnWidth {
　　text-align: justify;
　　-moz-column-width: 20em;
　　-moz-column-gap: 2em;
　　-webkit-column-width: 20em;
　　-webkit-column-gap: 2em;
　　}

　　浏览器支持：
　　√ Firefox(3.05+…)
　　√ Google Chrome(1.0.154+…)
　　√ Google Chrome(2.0.156+…)
　　× Internet Explorer(IE7, IE8 RC1 )
　　× Opera(9.6+…)
　　√ Safari(3.2.1+ windows…)

　　CSS3多列(列数)

图9

　　上面的截图是使用了下面的CSS3样式的效果：
　　#multiColumnCount {
　　text-align: justify;
　　-moz-column-count: 3;
　　-moz-column-gap: 1.5em;
　　-moz-column-rule: 1px solid #dedede;
　　-webkit-column-count: 3;
　　-webkit-column-gap: 1.5em;
　　-webkit-column-rule: 1px solid #dedede;
　　}

　　想要制作一些很酷的头部效果而且摆脱网站安全字体并且不使用图片文件？那么就使用CSS3嵌入字体吧！
　　要使用一款字体，我们首先需要使用'@font-face'属性。这必须先准备好我们要用的字体文件。
　　尽管这样，让我们简单的学习一下字体方面的历史。@font-face属性从CSS2就已经考虑了，但却始终在CSS2.1中还没有出现。CSS3尝试经它带到标准中来。
　　如果你手上没有字体文件，你可以在dafont.com下载一些。
　　跨浏览器兼容性
　　目前只有Safari支持@font-face特性(Google Chrome开发版 2.0.156+也支持这个特性)。
　　注意，你的浏览器需要一些时间加载字体文件，所以，就目前来说，使用图片文件而不是CSS样式的用户体验会更好些。

　　CSS3嵌入字体

图10

　　上面的效果可由下面的样式实现：

　　@font-face {
　　font-family: qianduanNet;
　　src: url("SketchRockwell.ttf");
　　}
　　.fontFace{
　　font-family: qianduanNet;
　　font-size: 3.2em;
　　letter-spacing: 1px;
　　text-align: center;
　　}

　　我们也可以对使用font-face的地方使用阴影效果。

图11

　　.fontFaceShadow{
　　font-family: qianduanNet;
　　font-size: 3.2em;
　　letter-spacing: 1px;
　　text-align: center;
　　text-shadow: 3px 3px 7px #111;
　　}

　　浏览器支持：
　　× Firefox(3.05+…)
　　× Google Chrome(1.0.154+…)
　　√ Google Chrome(2.0.156+…)
　　× Internet Explorer(IE7, IE8 RC1 )(IE7+支持eot格式的字体文件)
　　× Opera(9.6+…)(支持文字阴影)
　　√ Safari(3.2.1+ windows…)

　　CSS3透明…不透明…渐变…随便你怎么叫它吧！这里是一些使用CSS3透明度的指南以及一些例子。
　　其实这个firefox很久以前就支持了，而IE一直不支持！
　　"opacity"声明用来设置一个元素的透明度：层、文字、图片等…一个opacity的值为1的元素是完全不透明的，反之，值为0是完全透明的，看不见的。1到0之间的任何值都表示该元素的透明程度。

　　浏览器兼容性
　　opacity是浏览器支持最好的一个CSS3元素…当然，除了IE！

4CSS3系列教程(4)回顶部

　　CSS3透明(例1：层)

图12

　　上面的透明例子使用了下面的样式：
　　div.opacityL1 { background:#036; opacity:0.2; width:575px; height:20px; }
　　div.opacityL2 { background:#036; opacity:0.4; width:575px; height:20px; }
　　div.opacityL3 { background:#036; opacity:0.6; width:575px; height:20px; }
　　div.opacityL4 { background:#036; opacity:0.8; width:575px; height:20px; }
　　div.opacityL5 { background:#036; opacity:1.0; width:575px; height:20px; }

　　浏览器支持：
　　√ Firefox(3.05+…)
　　√ Google Chrome(1.0.154+…)
　　√ Google Chrome(2.0.156+…)
　　× Internet Explorer(IE7, IE8 RC1 )
　　√ Opera(9.6+…)
　　√ Safari(3.2.1+ windows…)

　　CSS 3 透明(例2：图片)

图13

　　我们也可以在图片上使用不同透明度的透明效果，就像上面的示例一样。一个很酷的应用是将opacity应用到:hover上，实现一种链接的鼠标经过效果。
　　img.opacity1 { opacity:0.25; width:150px; height:100px; }
　　img.opacity2 { opacity:0.50; width:150px; height:100px; }
　　img.opacity3 { opacity:0.75; width:150px; height:100px; }

　　使用新的CSS3的"RGBA"声明，不仅仅让我们像通常一样设置RGB颜色，而且还可以设置其透明度。
　　RGBA像RGB一样设置颜色，而这个"A"--RGBA中的最后一个值--允许我们设置该元素的透明度。就像opacity声明一样，一个opacity值为1的元素是完全不透明的，而一个opacity为0的元素是完全透明的。

　　浏览器兼容性
　　RGBA现在在Firefox、Google Chrome和Safari中都有比较好的支持，同样不需要前缀。

　　CSS3 RGBA 色彩

图14

　　上面的效果有以下样式实现：
　　div.rgbaL1 { background:rgba(153, 134, 117, 0.2); height:20px; }
　　div.rgbaL2 { background:rgba(153, 134, 117, 0.4); height:20px; }
　　div.rgbaL3 { background:rgba(153, 134, 117, 0.6); height:20px; }
　　div.rgbaL4 { background:rgba(153, 134, 117, 0.8); height:20px; }
　　div.rgbaL5 { background:rgba(153, 134, 117, 1.0); height:20px; }

　　浏览器支持
　　√ Firefox(3.05+…)
　　√ Google Chrome(1.0.154+…)
　　√ Google Chrome(2.0.156+…)
　　× Internet Explorer(IE7, IE8 RC1 )
　　× Opera(9.6+…)
　　√ Safari(3.2.1+ windows…)

　　使用CSS3 HSL声明同样是用来设置颜色的。下一个呢？ HSLA？是的，这个和RGBA的效果是一样的。
　　HSL声明使用色调Hue(H)、饱和度Saturation(s)和亮度Lightness(L)来设置颜色。
　　" Hue衍生于色盘：0和360是红色，接近120的是绿色，240是蓝色。
　　" Saturation值是一个百分比：0%是灰度，100%饱和度最高
　　" Lightness值也是一个百分比：0%是最暗，50%均值，100%最亮。
　　随想：为什么是"ligntness"呢？或许我更习惯Photoshop中的"Brightness"呢……

　　浏览器兼容性：
　　目前HSL和HSLA被Firefox、Google Chrome、和Safari浏览器较好的支持，而且不需要任何前缀

　　CSS3 HSL

图15

　　上面的演示由以下样式实现

　　div.hslL1 { background:hsl(320, 100%, 50%); height:20px; }
　　div.hslL2 { background:hsl(320, 50%, 50%); height:20px; }
　　div.hslL3 { background:hsl(320, 100%, 75%); height:20px; }
　　div.hslL4 { background:hsl(202, 100%, 50%); height:20px; }
　　div.hslL5 { background:hsl(202, 50%, 50%); height:20px; }
　　div.hslL6 { background:hsl(202, 100%, 75%); height:20px; }

　　CSS3 HSLA

图16

　　上面的效果由以下样式实现：

　　div.hslaL1 { background:hsla(165, 35%, 50%, 0.2); height:20px; }
　　div.hslaL2 { background:hsla(165, 35%, 50%, 0.4); height:20px; }
　　div.hslaL3 { background:hsla(165, 35%, 50%, 0.6); height:20px; }
　　div.hslaL4 { background:hsla(165, 35%, 50%, 0.8); height:20px; }
　　div.hslaL5 { background:hsla(165, 35%, 50%, 1.0); height:20px; }

　 【延伸阅读】

　   CSS教程：十步学会用css建站
　   CSS设计网页时的一些常用规范
　   CSS+DIV制作一幅扑克牌系列教程

分享收藏