博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS3实践之路(一):CSS3之我观
阅读量:4308 次
发布时间:2019-06-06

本文共 1568 字,大约阅读时间需要 5 分钟。

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

CSS的W3官方网址是:,在这个《CSS3实践之路》中这官方资料是我主要参考资料,此外W3School的也是我这个系列的主要资料来源,也会有人问既然网站上有这么多学习资料,为什么我还出这么一个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还未正式发布,但其规则制定地非常详细了,发布只是个时间问题,由于各浏览器对它的支持不尽统一,而我们要设计的网页必须要兼容浏览器,参考这个网址()来查看目前各浏览器对CSS3的支持情况。

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

浏览器 前缀
Internet Explorer -ms-
Firefox -moz-
Google Chrome -webkit-
Safari -webkit-
Opera -o- -xv-(-xv-用于voice相关的)

 

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

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

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

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

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

转载于:https://www.cnblogs.com/Wenwang/archive/2011/11/01/2231076.html

你可能感兴趣的文章
5、JavaWeb学习之基础篇—标签(自定义&JSTL)
查看>>
8、JavaWEB学习之基础篇—文件上传&下载
查看>>
reRender属性的使用
查看>>
href="javascript:void(0)"
查看>>
h:panelGrid、h:panelGroup标签学习
查看>>
f:facet标签 的用法
查看>>
<h:panelgroup>相当于span元素
查看>>
java中append()的方法
查看>>
必学高级SQL语句
查看>>
经典SQL语句大全
查看>>
log日志记录是什么
查看>>
<rich:modelPanel>标签的使用
查看>>
<h:commandLink>和<h:inputLink>的区别
查看>>
<a4j:keeyAlive>的英文介绍
查看>>
关于list对象的转化问题
查看>>
VOPO对象介绍
查看>>
suse创建的虚拟机,修改ip地址
查看>>
linux的挂载的问题,重启后就挂载就没有了
查看>>
docker原始镜像启动容器并创建Apache服务器实现反向代理
查看>>
docker容器秒死的解决办法
查看>>