2014年辛星web前端教程贺岁版第六本即css3教程

所需积分/C币:10 2014-10-22 10:35:30 1.53MB PDF
10
收藏 收藏
举报

这是2014年辛星web前端教程贺岁版第六本即css3教程,希望对您有所帮助。
日录 第一节:简介CSS3 4 第二节:边框、背景 第三节:渐、过度 .12 第四节:文本、转换 18 第五节:布局、界面 26 附录:意见反馈. 34 ☆k水;次;;k;k;;;!k;k;κ;;水;κ;;κ;κ;k;κ;;;;;k;κ!;;水κ;;水次 第一节:简介CSS3 3/35 >>>>>>>>>>>>说明<<<<<<<<<<<<<<<<<<< 1.在本糸列教程的第二本中已经介绍了CSs的基本知识,在网页制作 的时候采用层叠式样式表技术,可以有效的对网页的布局、字体 颜色、背景和一些特效实现更有效的控制。 2.而CS3则是S技术的升级版本,CS语言的开发是朝看模块化的 方向发展的。 3我们之前的规范作为一个模块实在是太庞大了,因此我们把它们 分解为荇干小模块,更多新的模抉也被加入进来了。这些模块主要 包括:盒模型模、列表模坎、超链接方式、语言谋爱、背景边框 文字特效、多栏布局等等。 4.而CS53是究全句后兼容的,因此我们对已有的设计是无需改变的, 而且浏览会永远支持〔S2,所以,我们也不急着过渡到CSs3 5.对于浏览器的支持程度,我们看到如下的截图(来自百度百科): MAC CHROME FIREFOK OPERA SAFAR) CHROME FIREFOX OPERA SAFARI Border Radius CS5 Animations C55 Gradients x Css Refil cSS PontIac 4/35 6.可以看出,对于〔5S3的支持还是不够统一,这也就导致了我们在 使用SS3的肘候还是不能碜放开手脚 7.而且有一个效果即使不同的浏览器都支持,但是对于不同的浏览 景却需要不同的写法,我对常见的一些表示给出了一个列表: 前缀 适用浏览器 -ns lE浏览紧 -moz 火狐浏览器 -webkit- Safari、 Chrome浏览器 Opera浏览器 8.这些随看我们学习的深入,都会变得越来越具体,也是会让我们 前端工作人员很头疼的一个问题,就是:浏览器兼容性。 >>>>>>>>>>>>>现状<<<<<<<<<<<<<<<<<<<< 1.由于W3C的CS3规范仍在开发中。 2.而且有不少新的CS3属性已经可以被现代浏览器所支持了,所以 我们可以使用了,但是,仍然有一些CSS的规范在使用的时候会面 临各种问题,比如浏览器兼容性等等。 3.因此,这门技术离成为一个标准尚需肘日,至少我这么看,不过 我们了解下还是很有必要的。 5/35 第三节:边框、背景 >>>>>>>>>>>>火纲<<<<<<<<<<<<<<<<<<<< 1.如果朋友们没有经历过设计圆角边框的痛苦,那么是体会不到CS3 有多么舒服的,因为在之前设计圆角的时候或者通过手工绘制,或 者是在四个角分别使用图片,工程量之大,可想而知,现在一个属 性就能搞定了。 2.而〔S3对于边框主要是提供了三个属性,我们通过下表来看到 属性 作用 border-radius 圆角边框 bOX-Shadow 盒阴影 border-image 边界图片 3.我们来分别试试吧。 >>>>>>>>>>>>圆角边框<<<<<<<<<<<<<<<< 1.对于为何需要圆角边框,我的回答是:没有为什么,因为这是目 前的审美观,就像我们印象中的绅士一般都会打个领带或者带个领 结,而不是围个围巾一样 2.对于圆角边框,只需要使用 border-radius属性即可了,宅以像素 为单位。 3.我们首先看下效果吧: file: ///D: / User. top /star. html )ef∥/D/ ers/Administrator/ Desktop/star. html v c圖-百度xct+kp 我是狼族辛星,向诸位发来诚挚的问候, 是不是感 祝您学习愉快(对学生),工作顺利(对上班 觉园角边 族),万事如意(对所有人) 框比方角 边框更加 柔和呢 4.那么它是怎么做出来的呢?下面我们给出源代码: 6/35 1 < DOCTYPE htm1> 2 html> head> <meta charset="utf-8> 3456789012345 <style> pt border: 2px solid #allal padding: 10px 40px background: t#eee width: 300px; border-radius: 25px </style> </head> <body 16 P>我是狼族辛星,向诸位发来诚挚的问候,祝您学 习愉快(对学生),工作顺利(对上班族),万事如意( 对所有人) 18 </body> 9(/html 5.这里我们使用 Firefox和 Chrome效果都是一样的。 >>>>>>>>>盒阴影<<<<<<<<<<<<<<<<<<<<<< 我不知道朋友们是否学习过美术,审美观到底怎么样。 2.阴影可以让一个物体的立体感更强,当没有阴影的效果: 3.当有阴影的效果: 5 star.htm ÷c口fe!/Dses/ Administrator/Desktop/ "star.html 有个阴影 男人因宗寞而优秀,你家寞吗? 奥,更具 立体感 7/35 4.当没有阴影的时候的效果图: star, h x 6> cD file: ///D: /Users/Administrator/Desktop/star. html 男人囚叙寞而优秀,你寂寞吗? 此处没有盒阴影 感觉有区别嘛 5.可以看出,如果有阴影的话,那么会给人什么感觉呢?给我的感 觉是更加--立体化。 6.我们首先看下上述效果的源码吧: i DOCTYPE html> 2 html> head> <meta charset=utf-8> <style> 6 border: 2px solid #allal padding: 10px 40px; background: #eeej width: 300px border-radius: 25px box-shadow: #ccc; /style? </head> <body> <p>男人因寂寞而优秀,你寂寞吗? </p> </body> Be </html> 7通过观家上述源码,我们分析得到使用box-shad∞w这个属性来 控制阴影,它可以有六个参数,我们分别看看它们都有什么作用吧 8/35 值 作用 h-shadow (必须)水平阴影的位置 V-shadow (必须)垂直阴影的位置 blur (可选)模糊距离 pread (可选)阴影大小 color (可)阴影颜色 inset (可选)从外层阴影改变内侧阴影 8.我们有了上面的知识,然后再去分析上面我们写的代码,我们发 现这个阴影向右有10个像素,向下有10个像素,而且模糊距离是 5个像素,而且颜色为灰色。 9.当然啦,更多的参数设置我就不介绍啦。 >>>>>>>>>>>边界图片<<<<<<<<<<<<<<<<<<< 1.有了S3的 border-image属性,我们可以使用图像创建一个边框。 2.这个属性的支持性已经比较好了,因为我发现至小在9已经支 持了,火孤谷歌测试也没问題。 3.我们首先选择一张图片,这里命名为 border. png,来看个效果: 4.然后我们看下在火孤浏览器下的效果吧: file:/ //D; User uktop/star html <6 file: ///D: /Users/Administrator/ Desktop/star html 小倩-辛星愿用一生去守护 效果还满意吧 9/35 5.那么下面是宅的源代码: 1 <DOCTYPE html> 2 <html head> 3456 <style> #xin border: 15px solid transparent, width: 250px; padding: 10px 20px; 89012345 border-image: url(border. png) 3030 round </style> </head> <body> <div id= xi 小信--辛星愿用一生去守护。 </div> </body> 8(/html> 6.这里的 round会重复使用,而如黑改为 stretch,那么会自动拉伸。 7.如果朋友问这个图像边框是否是一定有必要的,答案是不一定, 但是至少我们会多一个迭择。 3.关于更多用法,请去查阅手册。 >>>>>>>背景的两个属性<<<<<<<<<<<<<<<<<< 在S3中我们添加两个新属性,分别是 back ground-size和 background-origin 2.而 back ground-sie表示背景图像的大小,它可以指定背景图片, 让我们在不同的环境中指定肯景图片的大小,我们可以指定像素或 者百分比大小。 3.而 back ground- origin表示指定了背景图片的位置区域,劢它的值 可以设置为 content-box, padding-boⅩ或者 border-bo这三个值。 0/35

...展开详情
试读 35P 2014年辛星web前端教程贺岁版第六本即css3教程
立即下载 身份认证后 购VIP低至7折
一个资源只可评论一次,评论内容不能少于5个字
您会向同学/朋友/同事推荐我们的CSDN下载吗?
谢谢参与!您的真实评价是我们改进的动力~
关注 私信
上传资源赚钱or赚积分
最新推荐
2014年辛星web前端教程贺岁版第六本即css3教程 10积分/C币 立即下载
1/35
2014年辛星web前端教程贺岁版第六本即css3教程第1页
2014年辛星web前端教程贺岁版第六本即css3教程第2页
2014年辛星web前端教程贺岁版第六本即css3教程第3页
2014年辛星web前端教程贺岁版第六本即css3教程第4页
2014年辛星web前端教程贺岁版第六本即css3教程第5页
2014年辛星web前端教程贺岁版第六本即css3教程第6页
2014年辛星web前端教程贺岁版第六本即css3教程第7页

试读结束, 可继续读4页

10积分/C币 立即下载