第 9 讲层叠样式表 CSS3 张高川遗传学与生物信息学系基础医学与生物科学学院苏州大学医学部 WX: zhanggaochuan QQ: 苏州大学医学部基础医学与生物科学学院生物信息教研室张高川

第 9 讲层叠样式表 CSS3 张高川遗传学与生物信息学系基础医学与生物科学学院苏州大学医学部 Email: zhanggaochuan@suda.edu.cn WX: zhanggaochuan770609 QQ: 2257916241

CSS 基础 CSS 选择器 CSS 样式 CSS 定位 CSS 框模型

元素本身属性样式 id 或类选择器元素内部嵌套的其他元素样式 id 或类选择器 + 派生元素周围的边框样式 id 或类选择器元素摆放的位置 id 或类选择器

CSS3 Outline 透明度边框背景文本 2D 转换 3D 转换过渡动画

CSS 图像透明度 img { opacity: 0.4; filter: alpha ( opacity = 40 ); /* 针对 IE8 以及更早的版本 */ img:hover { opacity:1.0; filter:alpha(opacity=100); /* For IE8 and earlier */ <h1> 图像透明度 </h1> <img src="http://www.suda.edu.cn/images/index.jpg" alt=" 苏大主页 logo" height="200px"/>

CSS 透明文本框 div.background { width: 400px; height: 200px; background: url('http://www.suda.edu.cn/im ages/index.jpg') no-repeat; background-size:400px 200px; border: 1px solid blue; <div class="background"> <div class="transbox"> <p> 透明文本框透明文本框 </p> </div> </div> div.transbox { width: 300px; height: 100px; margin:50px; background-color: white; border: 1px solid red; filter:alpha(opacity=60); /* for IE */ opacity:0.6; /* CSS3 standard */ div.transbox p { margin:10px; color: purple;

CSS3 Outline 透明度边框背景文本 2D 转换 3D 转换过渡动画

CSS3 >> 边框属性描述 CSS border-image 设置所有 border-image-* 属性的简写属性 3 border-radius 设置所有四个 border-*- radius 属性的简写属性 3 box-shadow 向方框添加一个或多个阴影 3

CSS3 >> 边框 >> 圆角边框 <style> div { border:2px solid; border-radius:25px; -moz-border-radius:25px; /* Old Firefox */ <div> 圆角边框 </div> text-align:center; width: 250px; height: 50px; line-height:50px; </style>

CSS3 >> 边框 >> 边框阴影 <style> div { border:2px solid red; border-radius:25px; text-align:center; width: 250px; height: 50px; line-height:50px; background-color:yellow; box-shadow: 10px 10px 10px #888888; </style> <div> 圆角边框 </div> color:red;

CSS3 >> 边框 >> 边框图片 div { border:15px solid; border-radius:25px; text-align:center; width: 250px; height: 50px; line-height:50px; color:red; background-color:yellow; box-shadow: 10px 10px 10px #888888; #round { -webkit-borderimage:url(http://www.w3scho ol.com.cn/i/border.png) 30 30 round; /* Safari and Chrome */ -o-borderimage:url(http://www.w3scho ol.com.cn/i/border.png) 30 30 round; /* Opera */ borderimage:url(http://www.w3scho ol.com.cn/i/border.png) 30 30 round;

CSS3 >> 边框 >> 边框图片 div { border:15px solid; border-radius:25px; text-align:center; width: 250px; height: 50px; line-height:50px; color:red; background-color:yellow; box-shadow: 10px 10px 10px #888888; #stretch { -webkit-borderimage:url(http://www.w3scho ol.com.cn/i/border.png) 30 30 stretch; /* Safari and Chrome */ -o-borderimage:url(http://www.w3scho ol.com.cn/i/border.png) 30 30 stretch; /* Opera */ borderimage:url(http://www.w3scho ol.com.cn/i/border.png) 30 30 stretch;

CSS3 >> 边框 >> 边框图片 <style> div { border:15px solid; border-radius:25px; text-align:center; width: 250px; height: 50px; line-height:50px; color:red; background-color:yellow; box-shadow: 10px 10px 10px #888888; <div id="round"> 图片铺满整个边框 </div> <br> <div id="stretch"> 片被拉伸以填充该区域 </div> <p> 这是来自 W3school 的图片 : </p> <img src="http://www.w3school.co m.cn/i/border.png">

CSS3 >> 边框 >> 边框图片

CSS3 Outline 透明度边框背景文本 2D 转换 3D 转换过渡动画

CSS3 >> 背景 >> 新属性属性描述 CSS background-clip 规定背景的绘制区域 3 background-origin 规定背景图片的定位区域 3 background-size 规定背景图片的尺寸 3

CSS3 >> 背景 >> 调整背景图片的大小 body { background:url(http://www.suda.edu.cn/images/index.jpg); background-size:200px 100px; background-repeat:no-repeat; <p> 这是缩小的背景图片 </p> <br /> <p> 原始图片如下所示 :<img src="http://www.suda.edu.cn/images/index.jpg"></p>

CSS3 >> 背景 >> 调整背景图片的大小

CSS3 >> 背景 >> 对背景图片进行拉伸 body { background:url(http://www.suda.edu.cn/images/index.jpg); background-size: 50% 10%; background-repeat:no-repeat; <p> 这是缩小的背景图片 </p> <br /> <p> 原始图片如下所示 :<img src="http://www.suda.edu.cn/images/index.jpg"></p>

CSS3 >> 背景 >> 对背景图片进行拉伸

CSS3 >> 背景 >> background-origin 属性 background-origin 属性规定背景图片的定位区域背景图片可以放置于 content-box padding-box 或 borderbox 区域

CSS3 >> 背景 >> background-origin 属性 div { border:50px solid blue; padding:50px; height:100px; color:red; text-align:center; background:url(http://www.suda.edu.cn/images/index.jpg); background-size:100% 100%; background-repeat:no-repeat; background-origin:content-box; <div> content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box </div>

CSS3 >> 背景 >> background-origin 属性

CSS3 >> 背景 >> background-origin 属性 div { border:50px solid blue; padding:50px; height:100px; color:red; text-align:center; background:url(http://www.suda.edu.cn/images/index.jpg); background-size:100% 100%; background-repeat:no-repeat; background-origin:padding-box; <div> content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box </div>

CSS3 >> 背景 >> background-origin 属性

CSS3 >> 背景 >> background-origin 属性 div { border:20px dotted blue; padding:50px; height:100px; color:red; text-align:center; background:url(http://www.suda.edu.cn/images/index.jpg); background-size:10% 10%; background-repeat:repeat; background-origin:border-box; <div> content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box </div>

CSS3 >> 背景 >> background-origin 属性

CSS3 >> 背景 >> 多重背景图片 div { border:50px solid blue; padding:50px; height:100px; text-align:center; background: url(http://www.suda.edu.cn/images/banner.jpg), url(http://www.suda.edu.cn/images/index.jpg); background-repeat:no-repeat; background-origin:padding-box; <div> content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box content-box </div>

CSS3 >> 背景 >> 多重背景图片

CSS3 Outline 透明度边框背景文本 2D 转换 3D 转换过渡动画

CSS3 >> 文本 >> 新属性属性描述 CSS hanging-punctuation 规定标点字符是否位于线框之外 3 punctuation-trim 规定是否对标点字符进行修剪 3 text-align-last text-emphasis text-justify 设置如何对齐最后一行或紧挨着强制换行符之前的行向元素的文本应用重点标记以及重点标记的前景色规定当 text-align 设置为 "justify" 时所使用的对齐方法 text-outline 规定文本的轮廓 3 text-overflow 规定当文本溢出包含元素时发生的事情 3 text-shadow 向文本添加阴影 3 text-wrap 规定文本的换行规则 3 word-break 规定非中日韩文本的换行规则 3 word-wrap 允许对长的不可分割的单词进行分割并换行到下一行 3 3 3 3

CSS3 >> 文本 >> 文本阴影 h1 { text-shadow: 5px 5px #FF0000; <h1> 文本阴影效果!</h1>

CSS3 >> 文本 >> 自动换行 p {word-wrap:break-word;

CSS3 Outline 透明度边框背景文本 2D 转换 3D 转换过渡动画

CSS3 >> 2D 转换 >> 新属性属性描述 CSS transform 向元素应用 2D 或 3D 转换 3 transform-origin 允许你改变被转换元素的位置 3

CSS3 >> 2D 转换 >> transform 方法函数描述 matrix(n,n,n,n,n,n) 定义 2D 转换, 使用六个值的矩阵 translate(x,y) 定义 2D 转换, 沿着 X 和 Y 轴移动元素 translatex(n) 定义 2D 转换, 沿着 X 轴移动元素 translatey(n) 定义 2D 转换, 沿着 Y 轴移动元素 scale(x,y) 定义 2D 缩放转换, 改变元素的宽度和高度 scalex(n) 定义 2D 缩放转换, 改变元素的宽度 scaley(n) 定义 2D 缩放转换, 改变元素的高度 rotate(angle) 定义 2D 旋转, 在参数中规定角度 skew(x-angle,y-angle) 定义 2D 倾斜转换, 沿着 X 和 Y 轴 skewx(angle) 定义 2D 倾斜转换, 沿着 X 轴 skewy(angle) 定义 2D 倾斜转换, 沿着 Y 轴

CSS3 >> 2D 转换 >> translate() div { width:100px; height:75px; background-color:yellow; border:1px solid black; div#div2 { transform:translate(50px,100px); -ms-transform:translate(50px,100px); /* IE 9 */ -moz-transform:translate(50px,100px); /* Firefox */ -webkit-transform:translate(50px,100px); /* Safari and Chrome */ -o-transform:translate(50px,100px); /* Opera */ <div> 第一个 div 区块 </div> <div id="div2"> 第二个 div 区块 </div>

CSS3 >> 2D 转换 >> rotate() div { width:100px; height:75px; background-color:yellow; border:1px solid black; div#div2 { margin:20px; transform:rotate(30deg); -ms-transform:rotate(30deg); /* IE 9 */ -moz-transform:rotate(30deg); /* Firefox */ -webkit-transform:rotate(30deg); /* Safari and Chrome */ -o-transform:rotate(30deg); /* Opera */ <div> 第一个 div 区块 </div> <div id="div2"> 第二个 div 区块 </div>

CSS3 >> 2D 转换 >> scale() div { width:100px; height:75px; background-color:yellow; border:1px solid black; div#div2 { margin:100px; transform:scale(2,4); -ms-transform:scale(2,4); /* IE 9 */ -moz-transform:scale(2,4); /* Firefox */ -webkit-transform:scale(2,4); /* Safari and Chrome */ -o-transform:scale(2,4); /* Opera */ <div> 第一个 div 区块 </div> <div id="div2"> 第二个 div 区块 </div>

CSS3 >> 2D 转换 >> skew() div { width:100px; height:75px; background-color:yellow; border:1px solid black; div#div2 { margin:20px; transform:skew(30deg,20deg); -ms-transform:skew(30deg,20deg); /* IE 9 */ -moz-transform:skew(30deg,20deg); /* Firefox */ -webkit-transform:skew(30deg,20deg); /* Safari and Chrome */ -o-transform:skew(30deg,20deg); /* Opera */ <div> 第一个 div 区块 </div> <div id="div2"> 第二个 div 区块 </div>

CSS3 >> 2D 转换 >> matrix() div { width:100px; height:75px; background-color:yellow; border:1px solid black; div#div2 { margin:20px; transform:matrix(0.8,0.2,-0.4,1.5,10,20); -ms-transform:matrix(0.8,0.2,-0.4,1.5,10,20); /* IE 9 */ -moz-transform:matrix(0.8,0.2,-0.4,1.5,10,20); /* Firefox */ -webkit-transform:matrix(0.8,0.2,-0.4,1.5,10,20); /* Safari and Chrome */ -o-transform:matrix(0.8,0.2,-0.4,1.5,10,20); /* Opera */ <div> 第一个 div 区块 </div> <div id="div2"> 第二个 div 区块 </div>

CSS3 Outline 透明度边框背景文本 2D 转换 3D 转换过渡动画

CSS3 >> 3D 转换 >> 新属性属性描述 CSS transform 向元素应用 2D 或 3D 转换 3 transform-origin 允许你改变被转换元素的位置 3 transform-style 规定被嵌套元素如何在 3D 空间中显示 3 perspective 规定 3D 元素的透视效果 3 perspective-origin 规定 3D 元素的底部位置 3 backface-visibility 定义元素在不面对屏幕时是否可见 3

CSS3 >> 3D 转换 >> Transform 方法函数 matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) translate3d(x,y,z) translatex(x) translatey(y) translatez(z) scale3d(x,y,z) scalex(x) scaley(y) scalez(z) rotate3d(x,y,z,angle) rotatex(angle) rotatey(angle) rotatez(angle) perspective(n) 描述定义 3D 转换, 使用 16 个值的 4x4 矩阵定义 3D 转化定义 3D 转化, 仅使用用于 X 轴的值定义 3D 转化, 仅使用用于 Y 轴的值定义 3D 转化, 仅使用用于 Z 轴的值定义 3D 缩放转换定义 3D 缩放转换, 通过给定一个 X 轴的值定义 3D 缩放转换, 通过给定一个 Y 轴的值定义 3D 缩放转换, 通过给定一个 Z 轴的值定义 3D 旋转定义沿 X 轴的 3D 旋转定义沿 Y 轴的 3D 旋转定义沿 Z 轴的 3D 旋转定义 3D 转换元素的透视视图

CSS3 >> 3D 转换 >> rotatex() div { width:100px; height:75px; background-color:yellow; border:1px solid black; <div> 第一个 div 区块 </div> <div id= div2 > 第二个 div 区块 </div> div#div2 { transform:rotatex(120deg); -webkittransform:rotatex(120deg); /* Safari and Chrome */ -moz-transform:rotatex(120deg); /* Firefox */

CSS3 >> 3D 转换 >> rotatey() div { width:100px; height:75px; background-color:yellow; border:1px solid black; <div> 第一个 div 区块 </div> <div id= div2 > 第二个 div 区块 </div> div#div2 { transform:rotatey(120deg); -webkittransform:rotatey(120deg); /* Safari and Chrome */ -moz-transform:rotatey(120deg); /* Firefox */

CSS3 >> 3D 转换 >> 让你的东西动起来 <p onclick="rotatediv()" id="rotate1" class="animated_div" > 2D 旋转 </p> <p onclick="rotateydiv()" id="rotatey1" class="animated_div" > 3D 旋转 </p> #rotate1,#rotatey1 { border:1px solid black; background:red; margin:10px; opacity:0.7;.animated_div { width:60px; height:40px; color:white; position:relative; float:left; text-align:center; vertical-align:middle; line-height:40px;

CSS3 >> 3D 转换 >> 让你的东西动起来 <script> var x,y,n=0,ny=0,rotint,rotyint function rotatediv() { // 获取标签对象 x=document.getelementbyid("rotate1") // 清除计时器 clearinterval(rotint) // 设定计时器, 每 10 毫秒调用一次函数 startrotate() rotint = setinterval("startrotate()",10)

CSS3 >> 3D 转换 >> 让你的东西动起来 function startrotate() { n=n+1 // 旋转角度累加, 每次旋转 1 度 // 动态修改标签对象 x 的样式属性 x.style.transform="rotate(" + n + "deg)" x.style.webkittransform="rotate(" + n + "deg)" x.style.otransform="rotate(" + n + "deg)" x.style.moztransform="rotate(" + n + "deg)" if (n==180 n==360) // 每转半圈都将停止 { clearinterval(rotint) // 清除计时器 if (n==360){n=0 // 每转一圈, 角度累加变量清零

CSS3 >> 3D 转换 >> 让你的东西动起来 function rotateydiv() { y=document.getelementbyid("rotatey1") clearinterval(rotyint) rotyint=setinterval("startyrotate()",10)

CSS3 >> 3D 转换 >> 让你的东西动起来 function startyrotate() { ny=ny+1 y.style.transform="rotatey(" + ny + "deg)" y.style.webkittransform="rotatey(" + ny + "deg)" y.style.otransform="rotatey(" + ny + "deg)" y.style.moztransform="rotatey(" + ny + "deg)" if (ny==180 ny>=360) { clearinterval(rotyint) if (ny>=360){ny=0 </script>

CSS3 >> 3D 转换 >> 让你的东西动起来

CSS3 Outline 透明度边框背景文本 2D 转换 3D 转换过渡动画

CSS3 >> 过渡 >> 新属性属性描述 CSS transition 简写属性, 用于在一个属性中设置四个过渡属性 3 transition-property 规定应用过渡的 CSS 属性的名称 3 transition-duration 定义过渡效果花费的时间默认是 0 3 transition-timingfunction 规定过渡效果的时间曲线默认是 "ease" 3 transition-delay 规定过渡效果何时开始默认是 0 3

CSS3 >> 过渡 div { width:100px; height:100px; background:yellow; transition:width 2s, height 2s; -moz-transition:width 2s, height 2s; /* Firefox 4 */ -webkit-transition:width 2s, height 2s; /* Safari and Chrome */ -o-transition:width 2s, height 2s; /* Opera */ <div>css3 过渡 </div> div:hover { width:400px; height:200px;

CSS3 >> 过渡

CSS3 >> 过渡 >> 动起来

CSS3 >> 过渡 >> 动起来 <div class="animated_div" >CSS3 过渡 - 动起来 </div> <p class="animated_div" >CSS3 过渡 - 动起来 </p>

CSS3 >> 过渡 >> 动起来.animated_div { margin:50px; width:80px; height:60px; background:yellow; color:red; opacity:0.5; border-radius:5px; transition-property:width,height,transform,background,font-size,opacity; transition-duration:1s,1s,1s,1s,1s,1s; -webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s; -webkit-border-radius:5px; -o-transition-property:width,height,-o-transform,background,font-size,opacity; -o-transition-duration:1s,1s,1s,1s,1s,1s; -moz-transition-property:width,height,-o-transform,background,font-size,opacity; -moz-transition-duration:1s,1s,1s,1s,1s,1s;

CSS3 >> 过渡 >> 动起来.animated_div:hover { transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); opacity:1; background:green; color:yellow; width:160px; height:120px; font-size:24px;

CSS3 >> 过渡 >> 动起来?.animated_div:hover { transform: rotatey(360deg); -moz-transform: rotatey(360deg); -webkit-transform: rotatey(360deg); -o-transform: rotatey(360deg); opacity:1; background:green; color:yellow; width:160px; height:120px; font-size:24px;

CSS3 Outline 透明度边框背景文本 2D 转换 3D 转换过渡动画

CSS3 >> 动画动画是使元素从一种样式逐渐变化为另一种样式的效果您可以改变任意多的样式任意多的次数请用百分比来规定变化发生的时间, 或用关键词 "from" 和 "to", 等同于 0% 和 100% 0% 是动画的开始,100% 是动画的完成为了得到最佳的浏览器支持, 您应该始终定义 0% 和 100% 选择器

CSS3 >> 动画 >> 新属性属性描述 CSS @keyframes 规定动画 3 animation 所有动画属性的简写属性, 除了 animation-play-state 属性 animation-name 规定 @keyframes 动画的名称 3 animation-duration 规定动画完成一个周期所花费的秒或毫秒默认是 0 animation-timing-function 规定动画的速度曲线默认是 "ease" 3 animation-delay 规定动画何时开始默认是 0 3 animation-iteration-count 规定动画被播放的次数默认是 1 3 animation-direction animation-play-state 规定动画是否在下一周期逆向地播放默认是 "normal" 规定动画是否正在运行或暂停默认是 "running" animation-fill-mode 规定对象动画时间之外的状态 3 3 3 3 3

CSS3 >> 动画 <div class="animated_div" >CSS3 过渡 - 动起来 </div> <p class="animated_div" >CSS3 过渡 - 动起来 </p>

CSS3 >> 动画 >> 定义动画名称和时间.animated_div { margin:50px; width:80px; height:60px; background:yellow; color:red; border-radius:5px; animation:myfirst 5s; -moz-animation:myfirst 5s; /* Firefox */ -webkit-animation:myfirst 5s; /* Safari and Chrome */ -o-animation:myfirst 5s; /* Opera */

CSS3 >> 动画 >> 改变背景色 @keyframes myfirst { from {background:yellow; to {background:green; @-moz-keyframes myfirst /* Firefox */ { from {background:yellow; to {background:green; @-webkit-keyframes myfirst /* Safari and Chrome */ { from {background:yellow; to {background:green; @-o-keyframes myfirst /* Opera */ { from {background:yellow; to {background:green;

CSS3 >> 动画 >> 改变背景色 @keyframes myfirst { 0% {background:red; 25% {background:yellow; 50% {background:blue; 100% {background:green;

CSS3 >> 动画 >> 改变背景色和位置.animated_div { margin:20px; width:80px; height:60px; background:yellow; color:red; border-radius:5px; position:relative; animation:myfirst 5s; -moz-animation:myfirst 5s; /* Firefox */ -webkit-animation:myfirst 5s; /* Safari and Chrome */ -o-animation:myfirst 5s; /* Opera */

CSS3 >> 动画 >> 改变背景色和位置 @keyframes myfirst { 0% {background:red; left:0px; top:0px; 25% {background:purple; left:200px; top:0px; 50% {background:blue; left:200px; top:200px; 75% {background:green; left:0px; top:200px; 100% {background:gray; left:0px; top:0px;

CSS3 >> 动画 >> 循环动画

CSS3 >> 动画 >> 循环动画.animated_div { margin:20px; width:80px; height:60px; background:yellow; color:red; border-radius:5px; position:relative; animation-name:myfirst; animation-duration:5s; animation-timing-function:linear; animation-delay:2s; animation-iteration-count:infinite; animation-direction:alternate; animation-play-state:running;

CSS3 >> 动画 >> 循环动画 /* Firefox: */ -moz-animation-name: myfirst; -moz-animation-duration: 5s; -moz-animation-timing-function: linear; -moz-animation-delay: 2s; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -moz-animation-play-state: running; /* Opera: */ -o-animation-name: myfirst; -o-animation-duration: 5s; -o-animation-timing-function: linear; -o-animation-delay: 2s; -o-animation-iteration-count: infinite; -o-animation-direction: alternate; -o-animation-play-state: running; /* Safari 和 Chrome: */ -webkit-animation-name: myfirst; -webkit-animation-duration: 5s; -webkit-animation-timing-function: linear; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-play-state: running;

CSS3 >> 动画 >> 循环动画

CSS3 >> 动画 >> 让动画元素丰富起来 @keyframes myfirst { 0% {-webkit-transform: rotate(0deg); left: 0px; top:0px; background: yellow; 25% {-webkit-transform: rotate(360deg); left:400px; top:0px; background:blue; 50% {-webkit-transform: rotate(-360deg); left:400px; top:200px; background:purple; 75% {-webkit-transform: rotate(360deg); left:0px; top:200px; background:pink; 100% {-webkit-transform: rotate(-360deg); left:0px; top:0px; background:green;

拓展阅读和实践练习 http://www.w3school.com.cn/css3/ 以记事本 Dreamweaver 或 Frontpage 等进行简单的 CSS3 编写练习在机房或自己的电脑上调试运行, 提交调试通过的代码

第 9 讲层叠样式表 CSS3 张高川 遗传学与生物信息学系基础医学与生物科学学院苏州大学医学部 WX: zhanggaochuan QQ: 苏州大学医学部基础医学与生物科学学院生物信息教研室张高川

第 9 讲层叠样式表 CSS3 张高川遗传学与生物信息学系基础医学与生物科学学院苏州大学医学部 WX: zhanggaochuan QQ: 苏州大学医学部基础医学与生物科学学院生物信息教研室张高川