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 -->

用 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 即可。

用图片的方式制作引用块(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)效果。

用 CSS 让你的按钮(button)更加迷人

这篇文章教你用 CSS 制作漂亮的有点击效果的按钮,明白了原理,相信你也可以制作更加丰富的效果。

用 CSS 让你的按钮(button)更加迷人 – 示例

我们用 A 包含一个 SPAN 标签来实现此效果:

 
<a class="button" href="#"><span>按钮文字</span></a>

设置按钮样式:

 
<style type="text/css">
 
a.button {
	background: transparent url('bg_button_a.gif') no-repeat scroll top right;
	color: #444;
	display: block;
	float: left;
	font: normal 12px arial, sans-serif;
	height: 24px;
	margin-right: 6px;
	padding-right: 18px; /* sliding doors padding */
	text-decoration: none;
}
 
a.button span {
	background: transparent url('bg_button_div.gif') no-repeat;
	display: block;
	line-height: 14px;
	padding: 5px 0 5px 18px;
}
 
</style>

为按钮添加点击样式:

 
<style type="text/css">
 
a.button:active {
	background-position: bottom right;
	color: #000;
	outline: none; /* hide dotted outline in Firefox */
}
 
a.button:active span {
	background-position: bottom left;
	padding: 6px 0 4px 18px; /* push text down 1px */
}
 
</style>

由于 IE 下点击后不能还原到默认状态,因此,我们需要在标签里添加一段代码:

 
<a class="button" href="#" onclick="this.blur(); return false;"><span>按钮文字</span></a>

如果你需要用它提交表单(FORM),那么可以在 onclick 里面添加一个提交语句,如:document.forms[‘theForm’].submit();

本文翻译自:
http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

为了方便学习,本文并未完整翻译,如果你有兴趣,请直接浏览原文。

如何在图片浮动时不让文字内容环绕到图片下方

如何在图片浮动时不让文字内容环绕到图片下方

类似左侧图片右侧文字的排版方式我们经常能够见到,但是,有许多网友都遇到过一个问题:在图片浮动到一侧时,超出图片高度的文字往往会环绕到图片的下方。

ghettocooler.net 的解决方案:

如何在图片浮动时不让文字内容环绕到图片下方 – 示例1

 
<style type="text/css">
 
.callout {
	border:1px solid #000;
	float:left;
	width:275px;
}
 
.callout h3 {
	width:115px;
	height:65px;
	float:left;
	text-indent:-8008px;
	background:transparent url(team-report.gif) no-repeat 0 0;
}
 
.callout * {
	width:160px;
	float:right;
}
 
.callout * * {
	width:auto;
	float:none;
}
 
</style>
 
<div class="callout">
	<h3>team report graphic, replaced image</h3>
	<h2>Team Report 10-06-05</h2>
 
	<ul>
		<li>An <a href="#">anchor tag</a> perhaps?</li>
		<li>Or a <strong>strong tag</strong> perhaps?</li>
	</ul>
 
	<p>Here's a paragraph too!</p>
</div>

原文请浏览:
http://www.ghettocooler.net/2005/11/13/image-floats-without-the-text-wrap/

用背景图的方式实现在图片浮动时不让文字内容环绕到图片下方

这个方法的好处是代码简单,使用方便,当然,前提是你不需要在图片上加链接。

如何在图片浮动时不让文字内容环绕到图片下方 – 示例2

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