《HTML5程序设计及实践》课件第11章 CSS3.ppt

CSS3之前，符合标准的浏览器中元素width或height属性只包括content部分，而IE5浏览器中元素的width和height属性则包括border+padding+content三部分。CSS3利用盒模式进行了完善，通过设置box-sizing属性，可以设置不同的盒模型模式content-box：元素的属性width/height代表content的宽和高。border-box：元素的属性width/heigh代表border+padding+content的宽和高。inherit：继承父元素box-sizing属性的值。盒模型方式box-sizing:content-box|border-box|inherit;盒模型方式styletype=text/css div{ width:300px; height:400px; background:#996; padding:40px; /*border-box使得元素的宽和高不变，只是内容位置发生变化*/ -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}/styleCSS3中新增了resize属性，他运行通过拖动的方式改变元素的大小，而在之前如果要实现这种效果，通常需要使用javascript脚本。参数说明如下：none:不支持尺寸调整。both:运行用户调整宽度和高度。horizontal:运行用户调整宽度。vertical:运行用户调整高度。inherit:默认继承。调节元素尺寸resize:none|both|horizontal|vertical|inherit;调节元素尺寸styletype=text/css div{ width:200px; height:100px; border:1pxsolid#09F; background:url(images/121.jpg)no-repeatcenter; /*必须同时定义overflow和resize，否则resize无效*/ resize:both; overflow:auto; }/stylecontent属性可以替换文本内容以及替换文本属性，在CSS3之前，一般采用JavaScript脚本来实现这种任务。该语法参数解释如下：?normal:默认值。?string：插入文本。?attr()：插入属性。url()：插入一个外部资源，如图像、音视频等。?counter()：计数器，用于插入排序标识。?none：无内容。控制显示内容content:normal|string|attr()|uri()|counter()|none;控制显示内容!doctypehtmlhtmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/title无标题文档/titlestyletype=text/css div{ content:url(images/002.jpg); } /style/headbodydiv无边落木萧萧下,不尽长江滚滚来。/div/body/html在CSS3中，可以利用initial属性值取消对元素的样式指定恢复默认样式!doctypehtmlhtmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/title无标题文档/titlestyletype=text/css div{ font-family:华文行楷; font-weight:bold; font-size:25px; color:green; } div#div2{ font-weight:initial; color:initial; font-size:initial; }/style/headbody divid=div1曾经沧海难为水，除却巫山不是云。/divdivid=div2我自横刀向天笑，去留肝胆两昆仑。/divdivid=div3人生自古谁无死，留取丹心照汗青。/div/html利用transform属性可以实现文字或图像的旋转、缩放、倾斜、移动等几种效果。translate()：移动元素，基于X和Y坐标重新定位元素。scale()：缩放元素，取值包括正数、负数、小数。