css教程完整教学详解.ppt

CSS3技术概述 CSS3选择器 CSS3文字与文字相关样式 CSS3盒相关样式 CSS3背景与边框相关样式 CSS3中的变形处理 CSS3布局相关样式 CSS3媒体查询（Media Queries） CSS3颜色相关样式 CSS3渐变 颜色相关样式 Opacity：设置一个元素的透明度 RGBA：R(红色值)G(绿色值)B(蓝色值)A(alpha通道) HSLA：H(色调)S(饱和度)L(亮度)A(A(alpha通道) alpha通道与opacity区别 一、opacity “opacity”声明用来设置一个元素的透明度：层、文字、图片等…一个opacity的值为1的元素是完全不 透明的，反之，值为0是完全透明的。1到0之间的任何值都表示该元素的透明程度。 CSS3透明(例1：层) 上面的透明例子使用了下面的样式： 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; } 二、RGBA RGBA通过对RGB颜色设定通道alpha 来定义RGBA颜色，而这个”A”——RGBA中的最后一个值——允 许我们设置该元素的透明度。 CSS3 RGBA 色彩 上面的效果有以下样式实现： 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; } 三、HSLA HSLA通过对HSL颜色设定通道alpha 来定义HSLA颜色. 使用方法与RGBA相同，只是H代表色调，S代表饱和度，L代表亮度，A代表alpha通道 这里就不再列举。 四、Alpha通道与opacity属性的区别 Opacity与alpha都可以设置透明，1表示不透但是使用alpcity通道对元素设定透明度时，可以单独针对元素的背景色和文字颜色来指定透明度，而opacity属性只能指定整个元素的透明度。 CSS3技术概述 CSS3选择器 CSS3文字与文字相关样式 CSS3盒相关样式 CSS3背景与边框相关样式 CSS3中的变形处理 CSS3布局相关样式 CSS3媒体查询（Media Queries） CSS3颜色相关样式 CSS3渐变 CSS3渐变效果 background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue)) 渐变的类型? (linear) 渐变起头的X Y 轴坐标(0 0 – 或者left-top) 渐变结束的X Y 轴坐标(0 100% 或者left-bottom) 起头的颜色? (from(red)) 竣事的颜色? (to(blue)) background: -moz-linear-gradient(top, red, blue); 请注重我们将渐变的类型——linear——放到了属性前缀中了 渐变从哪里起头 ? (top – 我们也可以使费用数，好比 -45deg) 起头的颜色? (red) 竣事的颜色? (blue) CSS3效果展示 1.制作按钮 以第一个按钮为例： .awesome{ background: #222 url(/images/alert-overlay.png) repeat-x; display: inline-block; paddin