CSS3 为不同媒介设置样式的方法(CSS3 Media Queries)

随着智能手机、平板电脑越来越流行,许多网站都开始考虑为这些移动设备开发一套专属布局和样式。幸好 CSS3 提供了针对不同设备的查询规则,让这一目的变得非常容易实现。

<style type="text/css">
/*
	说明:CSS3 为不同媒介设置样式的方式(CSS3 Media Queries)
	来源:http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
	整理:CodeBit.cn [ http://www.codebit.cn ]
*/

/* 智能手机 (纵向 和 横向) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* 智能手机 (横向) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* 智能手机 (纵向) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPad 系列 (纵向 和 横向) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPad 系列 (横向) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPad 系列 (纵向) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* 台式机 和 笔记本 ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* 大屏幕 ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
</style>

当然,将所有样式放在一起不是一个好主意,你可以将不同设备特定的 CSS 放到不同文件中,然后再通过 link 节点的 media 属性来加载:

<head>

<link rel="stylesheet" href="smartphone.css" 
media="only screen and (min-device-width : 320px) 
and (max-device-width : 480px)">

<link rel="stylesheet" href="smartphone-landscape.css" 
media="only screen and (min-width : 321px)">

<link rel="stylesheet" href="smartphone-portrait.css" 
media="only screen and (max-width : 320px)">

<link rel="stylesheet" href="ipad.css" 
media="only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)">

<link rel="stylesheet" href="ipad-landscape.css" 
media="only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)">

<link rel="stylesheet" href="ipad-portrait.css" 
media="only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)">

<link rel="stylesheet" href="widescreen.css" 
media="only screen and (min-width : 1824px)">

<link rel="stylesheet" href="iphone4.css" 
media="only screen 
and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5)">

</head>

纯 CSS3 制作的页面卷曲阴影效果

虽然 CSS3 还没有完全定稿,但目前已知的一些功能足以让所有的前端开发攻城师激动不已,灵活的背景图片设置、轻松实现的阴影及边框,还有之前只能靠 Javascript 才能实现的动画效果,在 CSS3 中都能由前端攻城师自己来定义。

虽然 IE 系列浏览器对 CSS3 还不能很好的支持,但 CSS3 毕竟是趋势,所以本站会开始介绍一些 CSS3 的效果。更多精彩,敬请期待 :) 如果你有好的点子,也欢迎和网友们分享,点此了解如何发布文章

本文介绍的是使用纯 CSS3 制作的页面卷曲阴影效果,先看图和示例:

纯 CSS3 制作的页面卷曲阴影效果

纯 CSS3 制作的页面卷曲阴影效果 – 示例

<style type="text/css">
/*
	说明:纯 CSS3 制作的页面卷曲阴影效果
	来源:Matt Hamm [ http://matthamm.com/box-shadow-curl.html ]
	整理:CodeBit.cn [ http://www.codebit.cn ]
*/
ul.box {
	position: relative;
	z-index: 1; /* prevent shadows falling behind containers with backgrounds */
	overflow: hidden;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.box li {
	position: relative;
	float: left;
	width: 250px;
	height: 150px;
	padding: 0;
	border: 1px solid #efefef;
	margin: 0 30px 30px 0;
	background: #fff;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}

ul.box li:before,
ul.box li:after {
	content: '';
	z-index: -1;
	position: absolute;
	left: 10px;
	bottom: 10px;
	width: 70%;
	max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
	max-height: 100px;
	height: 55%;
	-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	-webkit-transform: skew(-15deg) rotate(-6deg);
	-moz-transform: skew(-15deg) rotate(-6deg);
	-ms-transform: skew(-15deg) rotate(-6deg);
	-o-transform: skew(-15deg) rotate(-6deg);
	transform: skew(-15deg) rotate(-6deg);
}

ul.box li:after {
	left: auto;
	right: 10px;
	-webkit-transform: skew(15deg) rotate(6deg);
	-moz-transform: skew(15deg) rotate(6deg);
	-ms-transform: skew(15deg) rotate(6deg);
	-o-transform: skew(15deg) rotate(6deg);
	transform: skew(15deg) rotate(6deg);
}
</style>
<ul class="box">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

注意:如果有父节点,需要给父节点设置 position: relative; z-index: 99; 否则,阴影可能不会正常显示。

负边距(negative margin)的相关问题整理

负边距(negative margin)在页面制作过程中,有许多妙用,用的好了能让原本复杂的问题变的简单,本文是针对负边距相关问题的整理,欢迎各位补充。

负边距的使用非常简单:

 
<style type="text/css">
/*
说明:负边距(negative margin)的相关问题整理 
整理:CodeBit.cn ( http://www.codebit.cn )
*/
.one {
	height:100px;
	width:300px;
	border:2px solid red;
	margin-bottom:-10px;
}
.two {
	height:100px;
	width:300px;
	border:2px solid blue;
}
</style>
 
<p class="one"></p>
<p class="two"></p>

这时,我们会看到蓝色的框伸到了红色框的里面,下面总结一些问题:

如何改变覆盖顺序

在本例中,就是如何让红色框覆盖蓝色框,很简单,在需要覆盖到上面的元素样式中添加 : position:relative; 在本例中,就是要在红色的样式 .one 中添加。

负边距可以用在哪些地方:

导航高亮效果的实现:

 
<style type="text/css">
/*
说明:负边距(negative margin)的相关问题整理 
整理:CodeBit.cn ( http://www.codebit.cn )
*/
.nav, .nav li {
	list-style:none;
}
.nav li {
	border:2px solid #000;
	float:left;
	margin-left:10px;
	background:#333;
	padding:3px 20px;
	margin-bottom:-2px; /* 遮盖下面内容的边框部分 */
	position:relative; /* IE 下要添加此行 */
}
.nav a {
	color:#fff; 
	text-decoration:none;
}
.nav li.current {
	border-bottom:2px solid #eee; /* 当前的把下边框的颜色换成和下边内容相同的 */
	background:#eee; /* 背景的颜色也换成相同的 */
}
.nav li.current a {color:#000;}
.content {
	border:2px solid #000;
	background:#eee;
	height:100px;
	width:300px;
	clear:both;
}
</style>
 
<ul class="nav">
	<li class="current"><a href="">当前</a></li>
	<li><a href="">导航</a></li>
	<li><a href="">导航</a></li>
</ul>
<div class="content">
</div>

结果:

注意:firefox 下面 .nav li 不用加 position:relative; 也能覆盖到下面的 div ,但是 ie 下面要加上。

修正 IE 的 bug

相信大家都很了解 IE 的 3 像素 bug,当浮动元素和非浮动元素相邻时,会增加额外的 3 像素,这个时候,我们就可以用负边距来解决(并非唯一的办法):

 
<style type="text/css">
/*
说明:负边距(negative margin)的相关问题整理 
整理:CodeBit.cn ( http://www.codebit.cn )
*/
#floatContent {
	float: left;
	width: 300px;
}
#otherContent {
	margin-left: 300px;
}
/* 对 MacIE 隐藏 */
* html #floatContent {
	margin-right: -3px;
}
* html #otherContent {
	height: 1%; /* 如果你没有设置 #otherContent 的高度或者宽度 */
	margin-left: 0;
}
/* 隐藏结束 */
</style>

这里只是列举了部分和负边距相关的问题,欢迎各位修正、完善。

CSS 实现文字、图片垂直对齐(vertical-align)专题文章

垂直对齐在 Firefox 和 IE7 等最新浏览器中,已经不是什么难事,但是IE6下使用 DIV 布局,垂直对齐则依然是个非常令人头痛的问题;虽然 IE 7 已经越来越普及,但是 IE6 依然占了很大的份额,所以,还是让我们一起看看解决方法吧!

CSS 实现文字、图片垂直对齐(vertical-align)专题文章 – 示例

 
<style type="text/css">
 
/*
	说明:IE 6 下 DIV 垂直居中对齐
	来源:CssPlay [ http://www.cssplay.co.uk ]
	整理:CodeBit.cn [ http://www.codebit.cn ]
*/
.fixVerticalCenterOuter{
	width:300px;
	height:200px;
	border:1px solid #ccc;
	text-align:center;
	display:table-cell;
	vertical-align:middle;
}
 
/* for IE 6 */
* html .fixVerticalCenterAdd {
	width:0;
	height:100%;
	display:inline-block;
	vertical-align:middle;
}
* html .fixVerticalCenterInner{
	vertical-align:middle;
	display:inline-block;
}
 
</style>
 
<div class="fixVerticalCenterOuter">
	<span class="fixVerticalCenterAdd"></span><!-- // fixVerticalCenterAdd -->
	<span class="fixVerticalCenterInner"><a href="http://www.codebit.cn"><img src="http://www.codebit.cn/admin/tpl/default/img/logo.gif" alt="CodeBit.cn - 聚合小段精华代码" /></a></span><!-- // fixVerticalCenterInner -->
</div><!-- // fixVerticalCenterOuter -->

通过 Javascript 实现的 CSS 浏览器选择符(CSS Browser Selector)

CSS 在不同浏览器下的最终显示效果是不同的,因此,出现了很多根据不同浏览器作相应处理的 HACK 技术,本文介绍的是通过 Javascript 检测浏览器和操作平台类型,然后设置特定选择符。设置样式时,通过 CSS 的包含选择符,我们很容易就能根据不同浏览器作出不同处理。

通过 Javascript 实现的 CSS 浏览器选择符(CSS Browser Selector) – 示例

 
<script type="text/javascript">
// 说明 : 通过 Javascript 实现的 CSS 浏览器选择符(CSS Browser Selector)
// 整理 : CodeBit.cn ( http://www.codebit.cn )
 
// CSS Browser Selector   v0.2.5
// Documentation:         http://rafael.adm.br/css_browser_selector
// License:               http://creativecommons.org/licenses/by/2.5/
// Author:                Rafael Lima (http://rafael.adm.br)
// Contributors:          http://rafael.adm.br/css_browser_selector#contributors
var css_browser_selector = function() {
	var 
		ua=navigator.userAgent.toLowerCase(),
		is=function(t){ return ua.indexOf(t) != -1; },
		h=document.getElementsByTagName('html')[0],
		b=(!(/opera|webtv/i.test(ua))&&/msie (d)/.test(ua))?('ie ie'+RegExp.$1):is('gecko/')? 'gecko':is('opera/9')?'opera opera9':/opera (d)/.test(ua)?'opera opera'+RegExp.$1:is('konqueror')?'konqueror':is('applewebkit/')?'webkit safari':is('mozilla/')?'gecko':'',
		os=(is('x11')||is('linux'))?' linux':is('mac')?' mac':is('win')?' win':'';
	var c=b+os+' js';
	h.className += h.className?' '+c:c;
}();
</script>

其原理是:先用 js 检测浏览器类型和操作系统平台,然后给最高节点 “HTML” 赋上对应的 class ,然后在设置样式时,我们就可以通过 css 的包含选择符,根据不同浏览器作出不同处理了。

用 CSS 实现图片替换文字(Image replacement)

不论是对浏览者还是对搜索引擎,文字都是最佳的页面内容展示方式,但是,由于字体等原因的限制,纯文字的展示渐渐无法满足爱美的设计师的要求。

于是,出现了通过 CSS 来实现用图片替换文字的方法,这种方式既能实现页面上各种丰富的效果,又能满足搜索引擎优化的需要。因此,深受网页设计师的喜爱,本文介绍了几种常见的图文替换技术。

Fahrner Image Replacement (FIR)

这是最早出现的图文替换技术,是由 Todd Fahrner 提出的,非常容易理解:

HTML 代码:

 
<h2>
	<span>Hello World</span>
</h2>

CSS 代码

 
<style type="text/css">
h2 {
	background:url(hello_world.gif) no-repeat;
	width: 150px;
	height: 35px;
}
span {
	display: none;
}
</style>

代码非常明白:先将图片应用在 H2 的背景中,然后将 SPAN 的标签隐藏。但是这种方式有个问题,就是当图片无法显示时,将导致这个区域没有任何内容。同时,使用 display:none 的方式隐藏的内容,将被许多主流屏幕阅读器忽略,从而造成可用性问题,因此,应该尽量避免使用。

Phark 的方法

这种技术是由 Mike Rundle 提出的,好处是不需要额外的标签:

HTML 代码:

 
<h2>
Hello World
</h2>

CSS 代码

 
<style type="text/css">
h2 {
	text-indent: -5000px;
	background:url(hello_world.gif) no-repeat;
	width: 150px;
	height:35px;
}
</style>

代码也非常简单,通过文本缩进,将文字隐藏,但是,当图片无法显示时,依然存在 FIR 的问题。

Gilder/Levin 的方法

这种技术是由 Tom Gilder 和 Levin Alexander 共同提出的,这也许是一个最完善的图文替换技术了:

HTML 代码:

 
<h2>
	<span></span>Hello World
</h2>

CSS 代码

 
<style type="text/css">
h2 {
	width: 150px;
	height: 35px;
	position: relative;
}
h2 span {
	background: url(hello_world.gif) no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
}
</style>

首先,将 H2 的 position 设为 relative ,这样将使 H2 里面的元素定位以 H2 为参照,然后将 SPAN 元素绝对定位,撑满整个 H2 区域,同时将背景图应用在 SPAN 标签里面;这种方法的原理是将 SPAN 标签覆盖在文字内容上面,一旦 SPAN 里面的背景图无法显示,将显示下层的文字内容,不影响正常使用。但是,此方法也有一个缺陷,就是背景图不能透明,否则将透出下面的文字。

CSS Hack 汇总快查

由于浏览器之间存在兼容性问题,在制作网页的时候,为了使页面能在不同浏览器中显示相对一致或者其他原因,网页制作人员总结了种种 Hack 方法;在解决兼容性问题之前,这些方法还经常会用到。

屏蔽IE浏览器(也就是IE下不显示)

 
*:lang(zh) select {font:12px  !important;} /*FF,OP可见,特别提醒:由于Opera最近的升级,目前此句只为FF所识别*/
select:empty {font:12px  !important;} /*safari可见*/
这里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。

仅IE7与IE5.0可以识别

 
*+html  select {…}
当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。

仅IE7可以识别

 
*+html  select {…!important;}
当面临需要只针对IE7做样式的时候就可以采用这个HACK。

IE6及IE6以下识别

 
* html  select {…}
这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。
html/**/ >body  select {…}
这句与上一句的作用相同。

仅IE6不识别,屏蔽IE6

 
select { display /*屏蔽IE6*/:none;}
这里主要是通过CSS注释分开一个属性与值,注释在冒号前。

仅IE6与IE5不识别,屏蔽IE6与IE5

 
select/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽IE5.5

仅IE5不识别,屏蔽IE5

 
select/*IE5不识别*/ {…}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别,IE5.5可以识别。

盒模型解决方法

 
selct {width:IE5.x宽度; voice-family :""}""; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通过!important来处理的。这点要明确。

清除浮动

 
select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的HACK来对父级做一次定义,那么就可以解决这个问题。

截字省略号

 
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾,很好的一个技术。只是目前Firefox并不支持。

只有Opera识别

 
@media all and (min-width: 0px){ select {……} }
针对Opera浏览器做单独的设定。

以上都是写CSS中的一些HACK,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出来,不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式,也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

IE5.x的过滤器,只有IE5.x可见

 
@media tty {
i{content:"";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */

IE5/MAC的过滤器,一般用不着

 
/**//*/
    @import "ie5mac.css";
/**/

IE的if条件Hack

 
<!--[if IE]> Only IE <![endif]-->
所有的IE可识别
<!--[if IE 5.0]> Only IE 5.0 <![endif]-->
只有IE5.0可以识别
<!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->
IE5.0包换IE5.5都可以识别
<!--[if lt IE 6]> Only IE 6- <![endif]-->
仅IE6可识别
<!--[if gte IE 6]> Only IE 6/+ <![endif]-->
IE6以及IE6以下的IE5.x都可识别
<!--[if lte IE 7]> Only IE 7/- <![endif]-->
仅IE7可识别

原文网址:http://andymao.com/andy/post/76.html

不增加额外元素实现清除浮动( 闭合浮动元素 Clear Floats )

浮动(Float)是页面布局中经常用到的技巧,但是,同时也出现了很多由于浮动引发的问题;父元素不能闭合具有浮动属性的子元素,是这些问题中最常见且最让新手头痛的一个。

清除浮动常见的做法是加一个额外的标签,然后给这个标签加上 clear:both 的设置,追求完美的人当然不乐意这种方式,于是,便有了本文将要介绍的:不增加额外元素实现清除浮动的方法。

 
<style type="text/css">
 
/*
说明:不增加额外元素实现清除浮动( 闭合浮动元素 Clear Floats )
整理: CodeBit.cn ( http://www.CodeBit.cn )
*/
 
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
 
.clearfix {display: inline-block;}
 
/* Hides from IE-mac */
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
 
</style>

使用时,给需要清除浮动的元素增加一个 clearfix 的 class 即可。

准确获取指定元素 CSS 属性值

当处理 DOM 元素的 CSS 属性时,我们经常会遇到一个问题:明明页面上已经定义了 CSS 属性值,但在获取的时候却为空,这是因为任何样式表文件或内联 CSS 预设的样式信息并不能可靠地反映到 style 属性上,本文向你介绍准确获取指定元素 CSS 属性值的方法。

准确获取指定元素 CSS 属性值 – 示例

 
<script type="text/javascript">
 
// 说明:准确获取指定元素 CSS 属性值
// 作者:John Resig 《Pro JavaScript Techniques》
// 来源:http://bbs.blueidea.com/viewthread.php?tid=2745446
// 整理:CodeBit.cn ( http://www.CodeBit.cn )
 
function getStyle( elem, name )
{
	//如果该属性存在于style[]中,则它最近被设置过(且就是当前的)
	if (elem.style[name])
	{
		return elem.style[name];
	}
 
	//否则,尝试IE的方式
	else if (elem.currentStyle)
	{
		return elem.currentStyle[name];
	}
 
	//或者W3C的方法,如果存在的话
	else if (document.defaultView && document.defaultView.getComputedStyle)
	{
		//它使用传统的"text-Align"风格的规则书写方式,而不是"textAlign"
		name = name.replace(/([A-Z])/g,"-$1");
		name = name.toLowerCase();
 
		//获取style对象并取得属性的值(如果存在的话)
		var s = document.defaultView.getComputedStyle(elem,"");
		return s && s.getPropertyValue(name);
 
	//否则,就是在使用其它的浏览器
	}
	else
	{
		return null;
	}
}
 
</script>

本文摘录自 John Resig 的《Pro Javascript Techniques》
蓝色 mozart0 版主发布了中文翻译:
http://bbs.blueidea.com/viewthread.php?tid=2733371

用图片的方式制作引用块(Blockquote)效果

我们在发布文章时经常要引用他人的观点,为了更好的区分正文和引用文字,我们需要给引用文字赋予不同的样式,本文就是介绍一种让文章中出现的引用文字更加形象的方法。

用图片的方式制作引用块(Blockquote)效果 – 示例

 
<style type="text/css">
 
blockquote {
	background: transparent url(quoleft.gif) left top no-repeat;
}
 
blockquote div {
	padding: 0 40px;
	background: transparent url(quoright.gif) right bottom no-repeat;
}
 
</style>
 
<blockquote cite="http://www.CodeBit.cn">
	<div>
	在编程的过程中,我们通常都会积累很多简单、有效并且可重用的小段代码,一个简单的字符串处理函数或者一个验证邮件地址的正则表达式,又或者一个简单的文件上传类,甚至一个效果不错的CSS导航样式。这些小技巧为我们节省了不少时间,但是时间一长,代码数量越来越多,寻找起来也耗费了不少时间。因此,本站致力于收集整理一些类似的小知识,并且努力提高文章搜索质量,一来方便大家查阅,二来也算是支持一下开源事业。
	</div>
</blockquote>

我们在 blockquote 下面加了一个 div 标签,然后为各自定义一个背景图片,设置好 padding 即可实现引用块(Blockquote)效果。