CSS3实践之路(一):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的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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/275208.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

18个项目必备的JavaScript代码片段——数组篇

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与,目前近3000人参与,0-5年工作经验的都可以参与学习。1.chunk转换二维数组将数组(array)拆分成多个数组,并将这些…

美学评价_卡美学的真正美

美学评价In collectible card games like Hearthstone, Legends of Runeterra, and Magic: The Gathering, the aesthetic of the cards is indubitably one of the greatest highlights for many, if not all players. Although the game loop is reliant on physically build…

好程序员web前端分享CSS Bug、CSS Hack和Filter学习笔记

为什么80%的码农都做不了架构师?>>> CSS Bug、CSS Hack和Filter学习笔记 1)CSS Bug:CSS样式在各浏览器中解析不一致的情况,或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug. 2)CSS Hack: CSS中,Hack是指一种兼容CSS在不同…

ux和ui_设计更好的结帐体验-UX / UI案例研究

ux和uiPlated Cuisine is a food ordering and delivery app for Plated Cuisine Restaurant founded and managed by Rayo Odusanya.Plated Cuisine是由Rayo Odusanya创建和管理的Plated Cuisine Restaurant的食品订购和交付应用程序。 A short background about Rayo Rayo O…

Django中ajax发送post请求,报403错误CSRF验证失败解决办法

今天学习Django框架,用ajax向后台发送post请求,直接报了403错误,说CSRF验证失败;先前用模板的话都是在里面加一个 {% csrf_token %} 就直接搞定了CSRF的问题了;很显然,用ajax发送post请求这样就白搭了&…

如何在EXCEL中添加下拉框

筛选主要是将已有列的信息以下拉框的形式显示出来 选中数据栏中的筛选按钮即可生成 如果是想添加未有信息则如下图步骤 首先,选择你要出现下拉的区域,在数据栏中的选择数据有效性 然后,下面对话框中,有效性条件中按如下设置即可&a…

每次新增页面复制粘贴?100多行源码的 element-ui 的新增组件功能教你解愁

1. 前言大家好,我是若川。最近组织了源码共读活动,感兴趣的可以点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。已进行三个月了,很多小伙伴表示收获颇丰。想学源码,极力推荐之前我…

原子设计_您需要了解的有关原子设计的4件事

原子设计重点 (Top highlight)Industries such as Architecture or Industrial Design have developed smart modular systems for manufacturing extremely complex objects like airplanes, ships, and skyscrapers. Inspired by this, Atomic Design was proposed as a syst…

C#中的Clipboard与ContextMenuStrip应用举例

今天,突然想起了怎样在一个文本中实现复制、剪切与粘贴的功能,并给这些功能添加右键的快捷方式。于是,就用自己的VS2008写了一个简单的小应用,以熟悉C#中剪贴板与快捷菜单的使用。 首先,我们不难发现,剪贴板…

控制台ui_设计下一代控制台UI

控制台ui游戏UX (GAMES UX) Yesterday’s Sony presentation showed us the final look of the PlayStation 5, as well as an impressive of next-gen games that will be released with it. What we didn’t get to see, however, is the new operating system and it’s use…

写给前端新手看的一些模块化知识

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以点此加我微信ruochuan12 进群参与,每周大家一起学习200行左右的源码,共同进步。已进行三个月了,很多小伙伴表示收获颇丰。一、 为什么需要模块化以前没有模块化时…

代码实现照片素描_我的代码素描之旅

代码实现照片素描In 2018 I started the process of consistently creating and posting my code sketches online. These are small animations I make with code and post on instagram. Through these sketches I tried to visually express my ideas using color, animatio…

真效率神器,UI稿智能转换成前端代码,准确率极高

大家好,我是若川。在这充满网络促销活动的几个月,倍感压力的,除了你的口袋,是否还有程序员的发量呢?每年的双十一、双十二购物狂欢节,各大电商平台都会上线让消费者充满购买欲望的活动页面,而这…

几个用于序列化的代码片段

参考JavaScriptSerializer,一般用来做JSON格式化http://msdn.microsoft.com/zh-cn/library/system.web.script.serialization.javascriptserializer.aspx http://msdn.microsoft.com/zh-cn/library/system.web.script.serialization.javascriptconverter.aspxDataContractSeria…

桌面图标摆放图案_用图标制作醒目的图案

桌面图标摆放图案Level up your video calls with a custom backdrop created using Noun Project icons.使用使用Noun Project图标创建的自定义背景来升级视频通话。 The only thing more visually pleasing than a well-designed icon is a neat, eye-catching pattern made…

3个多月,近3000人参与的源码共读,诚邀加入~

大家好,我是若川。众所周知,从8月份开始,我组织了源码共读活动,每周学习200行左右的源码,到现在持续了3个多月,坚持答疑解惑。帮助了不少人,还是挺开心的。另外,涌现了很多优秀的读者…

“这张图告诉你什么?”

For data to be impactful, it must be understood.为了使数据具有影响力,必须理解它。 I’ve happily spent hundreds and hundreds of hours of my life watching users misunderstand data visualizations. I’m strangely hooked on it.我快乐地度过了数百个小…

我们从 UmiJS 迁移到了 Vite

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以点此加我微信ruochuan12 进群参与,每周大家一起学习200行左右的源码,共同进步。已进行三个月了,很多小伙伴表示收获颇丰。我们从 UmiJS迁移到 Vite 已经上线半年…

将DataTable的内容以EXCEl的形式导出到本地

1.在搞项目的时候一般会遇到,将GridView或者Repeater的内容以Excel的形式保存到本地,即导出功能。我总结了两个方法。 方法一: 1 DataTable dt query.GetItems().GetDataTable();2 if (dt ! null)3 {4 …

智能家居数据库设计_设计更智能的数据表

智能家居数据库设计重点 (Top highlight)Data tables are hard. There are many different ways to think about them. So, naturally, the first step would be to figure out what your users need.数据表很难。 有许多不同的方式来考虑它们。 因此,自然地&#x…