夜鹰教程网-程序员的加油站
 当前位置:文章中心 >> Css3.0_css2.0_html5
css3学习笔记一
夜鹰教程网 来源:www.yyjcw.com 日期:2017-11-25 18:20:04
css3学习笔记一

CSS 的英文全称Cascading Style Sheets,中文意思是级联样式表,通过设立样式表,可以统一地控制HMTL中各DOM元素的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表,可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力。


CSS的W3官方网址是:www.w3.org/TR/CSS/,在这个《CSS3实践之路》中这官方资料是我主要参考资料,此外W3School的CSS3学习网址也是我这个系列的主要资料来源,也会有人问既然网站上有这么多学习资料,为什么我还出这么一个CSS的学习系列,因为一些好的学习HTML5和CSS3的网站都国外网站,虽然国内也有相关的学习网站,但上面的资源大多是一个一个的特效,并没有比较系统的学习资料,为了提高国内网页设计水平、拉近与国际网页设计水平的距离这一崇高理想微笑,本人不才,特准备这一CSS3的学习系列以飨网友,不足之处还望广大网友海涵,多多支持。眨眼


接下来概括下这个系列要讲的内容:


1. 盒子模型(Box Model)


2. 颜色(Color)


3. 背景与边框(Backgrouds and Borders)


4. 文本特效(Text Effects)


5. 2D和3D转换(2D/3D Transformations)


6. 动画(Animations)


7. 多列布局(Multiple Column Layout)


8. 用户界面(User Interface)


9. 选择器(Selectors)


每讲一个功能属性,我都会附上比较好的示例,来加深对CSS3的理解。上面列出的内容只是本人目前想到必须要讲的内容,以后随着本系列的深入可能会讲更多的内容,本人在学习CSS3某些新效果(2D/3D Transformations  && Gradient)时,更像是定义富媒体(flash&&Sliverlight)外观,此外在讲CSS3的同时,会讲些CSS以前版本的内容。


虽然CSS3还未正式发布,但其规则制定地非常详细了,发布只是个时间问题,由于各浏览器对它的支持不尽统一,而我们要设计的网页必须要兼容浏览器,参考这个网址(http://www.w3schools.com/cssref/css3_browsersupport.asp)来查看目前各浏览器对CSS3的支持情况。


下面表格显示各种浏览器前缀


浏览器 前缀

Internet Explorer -ms-

Firefox -moz-

Google Chrome -webkit-

Safari -webkit-

Opera -o- -xv-(-xv-用于voice相关的)

 


如果是开发简体中文网页,浏览器的兼容性更不好做,因为国内有很多”套子浏览器”(就是那些用别人浏览器的内核,而只是换了一些外表),而这些浏览器基本上都是使用IE内核,而文档渲染模式(至少默认的)为IE7,可能还有一些更古板的国内浏览器还是IE6模式,这些情况对国内的前端设计者来说真是悲剧,所以我敢说国内网站从技术运用上来说要比国外的网站慢很多年,在IT业的其它方面也是一样的,很多IT新技术、新创意都是在国外火了,才拿到国内来应用的,比如说团购网站,哎,中国人一直在模仿。。。


说了这么多,接下来展示一个CSS3按钮的示例,来更大的激发网友们对CSS3的兴趣: 

普通按钮 


CSS3按钮


这些是运用CSS3的border-radius、box-shadow和gradient(只有moz和webkit支持)制作出来的效果,当然这在支持CSS3的浏览器中观看,本人测试过在以下浏览可以看到效果:


IE9 、Firefox4以上、Google Chrome 10以上、Safari5以上 、Opera10.5以上。


下一章我将详细讲解盒子模型(Box Model)和边框。


复制链接 网友评论 收藏本文 关闭此页
上一条: css3学习笔记二  下一条: HTML5触摸事件详解(touchstart、touchm…
夜鹰教程网成立于2008年,目前已经运营了将近 13 年,发布了大量关于 html5/css3/C#/asp.net/java/python/nodejs/mongodb/sql server/android/javascript/mysql/mvc/easyui/vue/echarts原创教程。 我们一直都在坚持的是:认证负责、一丝不苟、以工匠的精神来打磨每一套教程,让读者感受到作者的用心。我们默默投入的时间,确保每一套教程都是一件作品,而不是呆板的文字和视频! 目前我们推出在线辅导班试运营,模式为一对一辅导,教学工具为QQ。我们的辅导学科包括 java 、android原生开发、webapp开发、商城开发、C#和asp.net开发,winform和物联网开发、web前端开发,但不仅限于此。 普通班针对的是国内学员,例如想打好基础的大学生、想转行的有志青年、想深入学习的程序员、想开发软件的初学者或者业余爱好者等。 就业办针对即将毕业上岗的大四学生,或者打算转行的初级开发工程师。 留学生班针对的是在欧美、加拿大、澳洲、日本、韩国、新加坡等地留学的中国学子,目的是让大家熟练地掌握编程技能,按时完成老师布置的作业,并能顺利地通过考试。 详细咨询QQ:1416759661   夜鹰教程网  基于角色的权限管理系统(c-s/b-s)。
  夜鹰教程网  基于nodejs的聊天室开发视频教程
  夜鹰教程网  Git分布式版本管理视频教程
  夜鹰教程网  MVC+EasyUI视频教程
  夜鹰教程网  在线考试系统视频教程
  夜鹰教程网  MongoDB视频教程。
  夜鹰教程网 Canvas视频教程
  夜鹰教程网 报表开发视频教程
  热点推荐
什么是css框架
meta标签实现页面的动感效果
CSS半透明滤镜在FIREFOX和IE下面的…
div+css鼠标悬停在div上,div背景色…
纯css下拉菜单特效
div+css的浏览器兼容问题
CSS定义表格线为单一线
CSS滤镜效果收集(全)
列表显示文字和图片垂直居中对齐
在固定位置显示背景图片
网站变换图片的显示方法
在select外面套一个div或span, se…
常用的CSS命名规则
闪字闪字闪字闪字闪字闪字闪字闪字…
css让图片自动适应表格大小
  最近更新
HTTP协议实现文件断点续传
H5实现断点上传
行内元素和块级元素汇总
H5视频直播技术介绍
border-image详解
你必须知道的HTML5的新特性
html5 js控制音乐播放
HTML+CSS代码规范
css3学习笔记 transition与animat…
css3学习笔记Transform
css3学习笔记2D或3D转换
css3学习笔记文本特效
css3学习笔记颜色和透明度
css3学习笔记二
css3学习笔记一

关于我们 | 网站建设 | 技术辅导 | 常见问题 | 联系我们 | 友情链接

夜鹰教程网 版权所有 www.yyjcw.com All rights reserved 备案号:蜀ICP备08011740号3