你应该知道的基本CSS3技术

13年来，层叠样式表(CSS)一直是网页设计的重要组成部分，现在它已经发展成为一个强大的工具，可以让你开发更高效、更美观的网站。最新的CSS版本(CSS3)中的许多新功能非常丰富，并将我们的设计质量提升到一个新的水平。我们将学习一些关于CSS3你需要知道的基本知识。对于所有这些新功能，重要的是要把重点放在最重要的功能上，以使您跟上速度。尽管目前只有最现代的网络浏览器(Safari, Mozilla, Opera)(部分或全部)支持CSS3规范，但对于那些喜欢尝试的人来说，这是一个令人兴奋的时刻!这是之前一篇文章的后续你应该知道的CSS3技巧你也应该去看看。< / p >

多个背景

CSS3允许您使用多个属性为一个元素应用多个背景。包含在这个属性列表中的是背景图像，平铺方式，背景位置而且background-size．为了在单个元素中包含这些多个背景，必须指定用逗号分隔的正确属性。< / p >

正文{背景:url(../images/bottom-left.png)右上固定不重复，url(../images/bottom-right.png)左上固定不重复，url(../images/top-left.png)左下固定不重复，url(../images/top-right.png)右下固定不重复;background - color: # ffffff;｝

选择器

CSS3选择器允许您选择元素以更具体地应用样式属性，使您有机会选择复杂的元素组。新的选择器不仅节省了您的时间，而且还帮助您将HTML标记减至最少。您将不可避免地减少所需的类和id的数量，从而使您的样式表更加有条理。< / p >

一般的兄弟组合子

有一种新的选择符CSS3中引入的通用兄弟选择器。该选择器针对特定元素的所有兄弟元素。例如，如果你想要在同一层次结构中的段落作为你的第一级标题，你可以这样做:< / p >

H1 ~p{颜色:红色;｝

上面的选择器将匹配第一个p元素(给它一个红色)，但不是第二个p元素，因为它不在同一层上(例如。< / p >

不是兄弟姐妹)作为h1元素。< / p >

<标题>标题< / h1 >< p >这一段是匹配的< / p >< div >< p >这一段不匹配< / p >< / div >

新的伪类在没有脚本的情况下具有更大的专一性

CSS3规范中引入的新伪类允许您选择一组元素，而在此之前，这些元素需要使用脚本语言(如JavaScript)或其他类/ID进行DOM选择。下面是一些新的伪类:< / p >

• :胎只选择最后一个子元素。
• : nth-child (n)选择n^thChild，用于zebra-striping表．
• :没有(e)选择一切，除了e．

SitePoint有一个完整的CSS3伪类列表．< / p >

调整元素

在CSS3中，你现在可以使用调整财产。漂亮对吧?问题是:它目前只能在Safari中使用。< / p >

下面的代码块可以让一个小三角形出现在元素的右下角，然后可以拖动该元素来调整大小。< / p >

Div{调整大小:两者;｝

更好的字体

网络上最常用的字体是Arial, Helvetica, Verdana和Georgia，因为大多数电脑都预装了这些字体。使用CSS3，您可以摆脱这些字体，使用各种类型的字体，只要可以从支持互联网的位置调用它。当你调用你的字体时，它将显示在网站的任何地方。< / p >

由于版权问题，您必须确保在使用之前可以使用该字体@font-face特性。在下面的示例中，使用@font-faceFeature声明字体家族的名称(您可以将其命名为任何您想要的名称)和字体文件的位置(在本例中为aTrueType丰t文件)。声明后，就可以使用字体类型属性设置元素的字体。< / p >

@font-face {字体类型: SketchRockwell;src: url (http://example.com/fonts/SketchRockwell.ttf);} h1 {字体类型:SketchRockwell;字体大小:3.2 em;字母间距:1 px;text-align:中心;｝

文本阴影

的文本阴影属性允许您在HTML文本元素下添加投影。你应该始终确保你的文本是可读的，以防用户的浏览器不支持高级CSS3属性。在下面的例子中，我们应用一个深蓝色(#003471)的文本阴影，它的右边是2px，底部是5px，模糊半径为2pxh1元素。< / p >

H1 {text-shadow: #003471 2px 5px 2px;｝

预览文本阴影CSS3属性在Firefox 3.5.5。

圆角

制作圆角是一项艰巨的任务。然而，在CSS3中，当使用名为这个特性．这个属性为盒子的每个角落设置曲率。< / p >

例如，下面的代码将为div生成10px的圆角:< / p >

Div{边框:2px实体#434343;填充:10 px;背景:# e3e3e3;-moz-border-radius: 10 px;-webkit-border-radius: 10 px;宽度:500 px;｝

在上述代码中，-moz用于Firefox和webkit适用于Safari和Chrome浏览器。Firefox 3.5.5中的圆角。

总结

CSS3让我们更好地控制HTML元素，为创建复杂而灵活的设计提供了可能性，减少了对静态图形和脚本的依赖。我们讨论了在大多数现代网络浏览器(除了IE8)中可以运行的一些基本功能。要了解更多关于CSS3的信息，请查看W3C CSS3当前工作点击查看CSS3。信息以获取关于CSS最新版本的最新消息。< / p >

相关内容

• 学习CSS3的20个有用资源
• 30 CSS导航技术