用CSS3将你的设计带入下个高度


Posted in HTML / CSS onAugust 08, 2009

尽管CSS3的诸多新特性还不被很多浏览器支持,或者说支持的不好。但作为一个前端开发人员,你总不能等到所有浏览器都完美支持它的时候再去学习。
CSS3到底给我们带来了哪些新特性呢?简单的说,CSS3把很多以前需要使用图片和脚本来实现的效果,只需要短短几行代码就能搞定。比如圆角,图片边框,文字阴影和盒阴影等。CSS3不仅能简化前端开发工作人员的设计过程,还能加快页面载入速度。
本文里面,就让我们来全面的看一下CSS3的各种新特性。也别忘了检阅我们之前发布的一些CSS教程和技巧文章: 60+CSS技巧教程资源大全 CSS3.0相关资源和参考手册收集整理 使用浏览器专有属性
为了使用大部分CSS3特性,我们不得不与原来的属性一起使用生产商专有扩展。原因是直到现在,大部分浏览器只支持部分CSS3属性。而且不幸的是,一些属性甚至到最后都可能不被W3C推荐,所以通过指定浏览器专有属性,将他们与标准属性区分开来是很重要的(然后在他们是多余的的时候使用符合标准的样式将之覆盖)。
当然,这种方法的劣势是,将导致一个杂乱的样式表和网站在浏览器之间的表现不一致。毕竟,我们不想在我们的样式表中重拾私有浏览器hack的需求。 Internet Explorer的臭名昭著的marquee、blink以及其它标签在大量样式表中被应用,并在20世纪九十年代成为一个传奇;它们依然让现存的很多网 站(在其他浏览器中)表现不一致甚至难以阅读。而我们现在也不想将我们自己置于同样的境地,对吧?
然而,网站不需要在所有的浏览器中看起来必须严格的一致。有的时候在某个浏览器中使用私有属性来实现特定的效果是可行的。
最常见的私有属性是用于Webkit核心浏览器的(比如, Safari), 它们以-webkit-开始,以及Gecko核心的浏览器(比如, Firefox),以-moz-开始,还有Konqueror (-khtml-)、Opera (-o-) 以及Internet Explorer (-ms-)都有它们自己的属性扩展(目前只有IE8支持-ms-前缀)
作为专业的设计师,我们不得不注意:使用这些私有属性将让我们的样式表不能通过验证。所以目前将他们放到最终版的样式中是少见的。但是在某种情况下,比如试验或学习,我们至少可以考虑将他们和标准的CSS属性一起写到一个样式表中。扩展阅读 Vendor-specific extensions and W3C Vendor-specific extensions to CSS3 Vendor-specific properties 1. 选择器
CSS选择器是个难以置信地强大的工具:它们允许我们在标签中指定特定的HTML元素而不必使用多余的 class、 ID 或JavaScripts。而且它们中的大部分并不是CSS3中新添加的,而是没有被得到应有的广泛应用。如果你在尝试实现一个干净的、轻量级的标签以及 结构与表现更好的分离,高级选择器是非常有用的。它们可以减少在标签中的class和ID的数量并让设计师更方便的维护样式表。属性选择器
三个新的属性选择器被添加到CSS3: [att^="value"]
匹配包含以特定的值开头的属性的元素 [att$="value"]
匹配包含以特定的值结尾的属性的元素 [att*="value"]
匹配包含含有特定的值的属性的元素
值的属性的元素
用CSS3将你的设计带入下个高度
a[title$="tweetCC"] {
position: absolute;
top: 0;
right: 0;
display: block;
width: 140px;
height: 140px;
text-indent: -9999px;
}

浏览器支持:只有IE6不支持CSS的属性选择器。IE7和IE8、Opera、Webkit核心和Gecko核心的浏览器都支持。所以在你的样式中使用属性选择器是比较安全的。 连字符
CSS3中唯一新引入的连字符是通用的兄弟选择器(同级)。它针对一个元素的有同一个父级节点的所有兄弟级别元素。
比如,给某个特定的div的同级的图片添加一个灰色的边框(div和图片应该有同一个父级节点),在样式表中定义下面的样式就足够了:
div~img {
border: 1px solid #ccc;
}

浏览器支持:所有的主要浏览器都支持这个通用的兄弟选择器除了我们最爱的IE6!伪类
或许在CSS3中增加最多的就是新的伪类了,这里是一些最有趣和最有用的: :nth-child(n)
让你基于元素在父节点的子元素的列表位置来指定元素。你可以是用数字、数字表达式或odd 和even 关键词(对斑马样式的列表很完美)。所以如果你想匹配在第四个元素之后的一个3个元素的分组,你可以简单的这样使用: :nth-child(3n+4) { background-color: #ccc; }/*匹配第4,7,10,13,16,19...个元素*/ :nth-last-child(n)
与上个选择器的思想同样,但是从后面匹配元素(倒序),比如,为了指定一个div里面的最后两个段落,我们可以使用下面的选择器: div p:nth-last-child(-n+2) :last-child
匹配一个父节点下的最后一个子元素,等同于:nth-last-child(1) :checked
匹配选择的元素,比如复选框 :empty
匹配空元素(没有子元素)。 :not(s)
匹配所有不符合指定声明(s)的元素。比如,如果你想让所有的没有使用”lead”类的段落的显示为黑色,可以这样写:
p:not([class*="lead"]) { color: black; }
Andrea Gandino 在他的网站上使用:last-child 为选择器指定每篇日志的最后一个段落,并将其的外间距(margin)设置为0:
用CSS3将你的设计带入下个高度
#primary .text p:last-child { margin: 0; }
浏览器支持: Webkit核心和Opera 浏览器支持所有新的CSS3 伪类,Firefox 2 和3 (Gecko核心) 只支持:not(s), :last-child, only-child, :root, :empty, :target, :checked, :enabled 和:disabled,但是Firefox 3.5 将更加广泛的支持CSS3 选择器。Trident核心浏览器(Internet Explorer)事实上不支持这些伪选择器。伪元素
在CSS3中唯一引入的伪元素是::selection.它可以让你指定被用户高亮(选中)的元素。
浏览器支持: 目前没有任何一款Internet Explorer 或Firefox 浏览器支持::selection 伪元素。Safari, Opera 和Chrome 均支持。扩展阅读 Selectors Level 3: W3C Working Draft CSS3: Attribute selectors: CSS3.info Compatibility table: CSS3 Selectors CSS selectors and pseudo selectors browser compatibility CSS3 Attribute Selectors ::selection General Sibling Selector CSS3 Pseudo-classes

上一页12 3 4 5 6 7 8 下一页 阅读全文
HTML / CSS 相关文章推荐
详解css3自定义滚动条样式写法
Dec 25 HTML / CSS
css3实现波纹特效、H5实现动态波浪效果
Jan 31 HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
纯CSS3实现的阴影效果
Dec 24 HTML / CSS
利用SVG和CSS3来实现一个炫酷的边框动画
Jul 22 HTML / CSS
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
Dec 30 HTML / CSS
html5的新增的标签和废除的标签简要概述
Feb 20 HTML / CSS
HTML5 embed 标签使用方法介绍
Aug 13 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
Dec 26 HTML / CSS
深入理解HTML的FormData对象
May 17 HTML / CSS
Canvas绘制浮动球效果的示例
Dec 29 HTML / CSS
HTML中实现音乐或视频自动播放案例详解
May 30 HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 #HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 #HTML / CSS
HTML5 CSS3给网站设计带来出色效果
Jul 16 #HTML / CSS
CSS3 圆角效果
Jul 15 #HTML / CSS
CSS3 完美实现圆角效果
Jul 13 #HTML / CSS
CSS3 box-sizing属性
Apr 17 #HTML / CSS
CSS3伪类选择器:nth-child()
Apr 02 #HTML / CSS
You might like
phpMyAdmin 安装及问题总结
2009/05/28 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
PHP中PDO事务处理操作示例
2018/05/02 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
网站上面有这种切换效果
2006/06/26 Javascript
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
javascript获取URL参数与参数值的示例代码
2013/12/20 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
Json解析的方法小结
2016/06/22 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
vue 中swiper的使用教程
2018/05/22 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
python获取一组汉字拼音首字母的方法
2015/07/01 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
简单了解Django项目应用创建过程
2020/07/06 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
数字漫画:comiXology
2020/06/13 全球购物
日语系毕业生推荐信
2013/11/11 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书
python引入其他文件夹下的py文件具体方法
2021/05/23 Python