(靠谱)CSS3_教程

1CSS3教程CSS3CSS用于控制网页的样式和布局。CSS3是最新的CSS标准。现在就开始学习CSS3！CSS3实例div{transform:rotate(30deg);}亲自试一试点击“亲自试一试”按钮，看看它是如何运行的。CSS3参考手册在W3School中，我们提供完整的CSS3参考手册，包括所有属性和选择器的语法、实例、浏览器支持信息。注：本参考手册即将上线。CSS3属性参考手册CSS3浏览器支持参考手册CSS3选择器参考手册CSS颜色参考手册一、CSS3简介CSS3完全向后兼容，因此您不必改变现有的设计。浏览器通常支持CSS2。CSS3模块CSS3被划分为模块。2其中最重要的CSS3模块包括：选择器框模型背景和边框文本效果2D/3D转换动画多列布局用户界面CSS3标准W3C仍然在对CSS3规范进行开发。不过，现代浏览器已经实现了相当多的CSS3属性。二、CSS3边框CSS3边框通过CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框-并且不需使用设计软件，比如PhotoShop。在本章中，您将学到以下边框属性：border-radiusbox-shadowborder-image浏览器支持属性浏览器支持border-radiusbox-shadowborder-imageInternetExplorer9支持border-radius和box-shadow。Firefox支持所有新的边框属性。3Chrome和Safari支持border-radius和box-shadow，但是对border-image的支持需要前缀-webkit-。Opera支持border-radius和box-shadow，但是对border-image的支持需要前缀-o-。CSS3圆角边框在CSS2中添加圆角矩形需要技巧。我们必须为每个圆角使用不同的图片。在CSS3中，创建圆角是非常容易的。在CSS3中，border-radius属性用于创建圆角：这个矩形有圆角哦！实例向div元素添加圆角：div{border:2pxsolid;border-radius:25px;-moz-border-radius:25px;/*OldFirefox*/}亲自试一试CSS3边框阴影在CSS3中，box-shadow用于向方框添加阴影：实例向div元素添加方框阴影：div{box-shadow:10px10px5px#888888;4}亲自试一试CSS3边框图片通过CSS3的border-image属性，您可以使用图片来创建边框：border-image属性允许您规定用于边框的图片！用于创建上面的边框的原始图片：实例使用图片创建围绕div元素的边框：div{border-image:url(border.png)3030round;-moz-border-image:url(border.png)3030round;/*老的Firefox*/-webkit-border-image:url(border.png)3030round;/*Safari和Chrome*/-o-border-image:url(border.png)3030round;/*Opera*/}亲自试一试新的边框属性属性描述CSSborder-image设置所有border-image-*属性的简写属性。3border-radius设置所有四个border-*-radius属性的简写属性。3box-shadow向方框添加一个或多个阴影。35三、CSS3背景CSS3背景CSS3包含多个新的背景属性，它们提供了对背景更强大的控制。在本章，您将学到以下背景属性：background-sizebackground-origin您也将学到如何使用多重背景图片。浏览器支持属性浏览器支持background-sizebackground-originFirefox3.6以及更早的版本不支持background-origin属性，对background-size的支持需要前缀-moz-。Safari4对新背景属性的支持需要前缀-webkit-。InternetExplorer9、Firefox4、Chrome、Safari5以及Opera支持新的背景属性。CSS3background-size属性background-size属性规定背景图片的尺寸。在CSS3之前，背景图片的尺寸是由图片的实际尺寸决定的。在CSS3中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。例子1调整背景图片的大小：6div{background:url(bg_flower.gif);-moz-background-size:63px100px;/*老版本的Firefox*/background-size:63px100px;background-repeat:no-repeat;}亲自试一试例子2对背景图片进行拉伸，使其完成填充内容区域：div{background:url(bg_flower.gif);-moz-background-size:40%100%;/*老版本的Firefox*/background-size:40%100%;background-repeat:no-repeat;}亲自试一试CSS3background-origin属性background-origin属性规定背景图片的定位区域。背景图片可以放置于content-box、padding-box或border-box区域。7实例在content-box中定位背景图片：div{background:url(bg_flower.gif);background-repeat:no-repeat;background-size:100%100%;-webkit-background-origin:content-box;/*Safari*/background-origin:content-box;}亲自试一试CSS3多重背景图片CSS3允许您为元素使用多个背景图像。实例为body元素设置两幅背景图片：8body{background-image:url(bg_flower.gif),url(bg_flower_2.gif);}亲自试一试新的背景属性属性描述CSSbackground-clip规定背景的绘制区域。3background-origin规定背景图片的定位区域。3background-size规定背景图片的尺寸。3四、CSS3文本效果CSS3文本效果CSS3包含多个新的文本特性。在本章中，您将学到如下文本属性：text-shadowword-wrap浏览器支持属性浏览器支持text-shadowword-wrapInternetExplorer仍然不支持text-shadow属性。Firefox、Chrome、Safari以及Opera支持text-shadow属性。浏览器主流浏览器都支持word-wrap属性。CSS3文本阴影在CSS3中，text-shadow可向文本应用阴影。9您能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：实例向标题添加阴影：h1{text-shadow:5px5px5px#FF0000;}亲自试一试CSS3自动换行单词太长的话就可能无法超出某个区域：Thisparagraphcontainsaverylongword:thisisaveryveryveryveryveryverylongword.Thelongwordwillbreakandwraptothenextline.在CSS3中，word-wrap属性允许您允许文本强制文本进行换行-即使这意味着会对单词进行拆分：Thisparagraphcontainsaverylongword:thisisaveryveryveryveryveryverylongword.Thelongwordwillbreakandwraptothenextline.下面是CSS代码：实例允许对长单词进行拆分，并换行到下一行：p{word-wrap:break-word;}10亲自试一试新的文本属性属性描述CSShanging-punctuation规定标点字符是否位于线框之外。3punctuation-trim规定是否对标点字符进行修剪。3text-align-last设置如何对齐最后一行或紧挨着强制换行符之前的行。3text-emphasis向元素的文本应用重点标记以及重点标记的前景色。3text-justify规定当text-align设置为justify时所使用的对齐方法。3text-outline规定文本的轮廓。3text-overflow规定当文本溢出包含元素时发生的事情。3text-shadow向文本添加阴影。3text-wrap规定文本的换行规则。3word-break规定非中日韩文本的换行规则。3word-wrap允许对长的不可分割的单词进行分割并换行到下一行。3五、CSS3字体CSS3@font-face规则在CSS3之前，web设计师必须使用已在用户计算机上安装好的字体。通过CSS3，web设计师可以使用他们喜欢的任意字体。当您您找到或购买到希望使用的字体时，可将该字体文件存放到web服务器上，它会在需要时被自动下载到用户的计算机上。您“自己的”的字体是在CSS3@font-face规则中定义的。浏览器支持11属性浏览器支持@font-faceFirefox、Chrome、Safari以及Opera支持.ttf(TrueTypeFonts)和.otf(OpenTypeFonts)类型的字体。InternetExplorer9+支持新的@font-face规则，但是仅支持.eot类型的字体(EmbeddedOpenType)。注释：InternetExplorer8以及更早的版本不支持新的@font-face规则。使用您需要的字体在新的@font-face规则中，您必须首先定义字体的名称（比如myFirstFont），然后指向该字体文件。如需为HTML元素使用字体，请通过font-family属性来引用字体的名称(myFirstFont)：实例style@font-face{font-family:myFirstFont;src:url('Sansation_Light.ttf'),url('Sansation_Light.eot');/*IE9+*/}div{font-family:myFirstFont;}/style12亲自试一试使用粗体字体您必须为粗体文本添加另一个包含描述符的@font-face：实例@font-face{font-family:myFirstFont;src:url('Sansation_Bold.ttf'),url('Sansation_Bold.eot');/*IE9+*/font-weight:bold;}亲自试一试文件Sansation_Bold.ttf是另一个字体文件，它包含了Sansation字体的粗体字符。只要font-family为myFirstFont的文本需要显示为粗体，浏览器就会使用该字体。通过这种方式，我们可以为相同的字体设置许多@font-face规则。CSS3字体描述符下面的表格列出了能够在@font-face规则中定义的所有字体描述符：描述符值描述font-familyname必需。规定字体的名称。srcURL必需。定义字体文件的URL。font-stretchnormalcondensedultra-condensedextra-condensedsemi-condensed可选。定义如何拉伸字体。默认是normal。13expandedsemi-expandedextra-expandedultra-ex