分类： CSS

CSS是网页制作核心内容之一,这里提供相关的基础CSS知识和一些另类的CSS技术,包括CSS2甚至是CSS3的用法

默认css字体大小单位及样式研究

我们在给网页字体进行CSS定义的时候,以前通常是使用像素来进行定义,然而,这已经是很古老的方式了,在现如今手机,平板,笔记本等各种不同分辨率设备普及的情况下,我们不只是用电脑浏览网页了,更多的时候或许已经是手持设备了,那么,就将面临一个问题,如何在如此多的不同分辨率下的设备将页面正常展现出来呢?

今天我们暂且不提框架自适应的问题,流体布局以后我熟练掌握后与大家分享,呵呵,就拿这个在定义字体大小方面来进行讨论,用px呢还是em,或是%?

首先需要声明的是在中文网站中,大部分规范是使用12px的汉字作为内容,14px加粗作为标题,当然有些h1,h2或许更大,一般字体用为黑体,而小标题和内容部分字体一般情况下是使用宋体的,这是中文站的一般标准.虽然近两年,随着显示器的不断变大,分辨率的增加,很多网站开始把14px当作最小字体了.然而,可能在很多情况下并不合适,例如手机访问,是不是字太大了等等一系列问题,那么有人可能会说通过终端判断返回不同的CSS,那么这种处理方式较为繁杂.怎么解决页面字体大小就成了一个需要思考的问题.

其实,如果经常访问英文网站的朋友应该不难发现一个特点,他们页面的字体都是用的em作为单位,比如:

body { font: normal 100% Helvetica, Arial, sans-serif; } /* 字体大小是页面默认大小的100%,即16像素. */
h1 { font-size: 1.5em; } /* h1的大小是默认大小的1.5倍,即24像素(24/16=1.5). */
small { font-size: 0.875em; } /*  small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875). */

上面是个简单的CSS说明,在实际应用中,也是如此,给body内的font属性进行修改,就可以直接给整个页面字体大小进行缩放,这是一件十分方便的事情.以下我在做个简单的例子给大家直接预览.
先是body内100%时的效果:

http://jsfiddle.net/kingterrors/DEKSy/embedded/result,html,css/

PS:由于近日(2014年6月)jsfiddle无法正常访问,可能受内网影响,现将之前所有jsfiddle预览去除,不过你仍然可将以上地址拷贝到浏览器预览,或选择尝试以下代码:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font size research</title>
<style type="text/css">
body {font: normal 100% Helvetica, Arial, sans-serif;}
h1 {font-size: 1.5em;}
small {font-size: 0.875em;}
.small {font-size: 14px; /* never changed */}
</style>
</head>
<body>
  <h1>This is a Header1</h1>
  <small>and this is small part</small>
  <p class="small">this is another small part with css style sheet that would never change!</p>
  <p>and how about this?</p>
  <p>This is a reseach by <em>Whidy</em></p>
</body>
</html>

然后是body为87.5%时的效果:

http://jsfiddle.net/kingterrors/K3Qbt/embedded/result,html,css/

PS:由于近日(2014年6月)jsfiddle无法正常访问,可能受内网影响,现将之前所有jsfiddle预览去除,不过你仍然可将以上地址拷贝到浏览器预览,或选择尝试以下代码:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font size research</title>
<style type="text/css">
body {font: normal 87.5% Helvetica, Arial, sans-serif;}
h1 {font-size: 1.5em;}
small {font-size: 0.875em;}
.small {font-size: 14px; /* never changed */}
</style>
</head>
<body>
  <h1>This is a Header1</h1>
  <small>and this is small part</small>
  <p class="small">this is another small part with css style sheet that would never change!</p>
  <p>and how about this?</p>
  <p>This is a reseach by <em>Whidy</em></p>
</body>
</html>

大家可以通过两个例子看出来,不变的永远是用px做单位的元素(好像这句话很弱智…),不过显而易见的是,用em绝对是目前和将来的主流!(其实很多大网站普及很久了…z)

PS: 实际上在国内这种做法仍然未能很好应用,在wap端方向有部分网站开始使用,不知道国内是由于汉字原因呢还是什么,似乎网页设计字体标准仅仅由曾经的12px升级到14px而已(2014年5月17日)

主浏览器CSS HACK(IE6,IE7,IE8,IE9,Chrome,FF)

三月底,在匆匆找到工作后,立即开始了新的生活,在和程序员简单的交接后,开始了程序员的职业生涯.

昨天在对公司新做的专题页面制作工程中,我仔细的测试了IE6,IE7,IE8,Chrome,Firefox兼容性,发现没有问题,上传至服务器,刚发布完成,有同事说有个地方标题换行了,我走过去一看,的确是的,不过十分好奇的是IE9,居然会跟Chrome等浏览器解析效果不同.于是我回到我的办公桌查阅了一些关于IE9方面CSS HACK的文章.现在总结如下:

其实关于IE6,IE7,IE8的CSS HACK方式我想大家耳熟能详了,这里就不复述了,需要查看的话可以参考下面的CSS HACK文档,这里我主要说明一下IE9的做法.

你可以通过给某个样式前面加个:root,例如:

:root #element { font-size: 24px; } /* IE9 */

最后附上一篇摘自网络的关于CSS hack 文档:直接查看或下载(内含CSS HACK兼容表以及一些简单的兼容性技巧)

最后献上我经过反复测试的源码,大家也可以试试,不过注意css书写的顺序,免得出现问题.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ie9 css hack sample</title>
<style>
#element {
	font-size: 30px;
}
#element {
	font-weight: bold\9;/* IE */
}
#element {
	*font-size: 14px;/* IE6+7, doesn't work in IE8/9 as IE7 */
}
#element {
	_font-size: 10px;/* IE6 */
}
#element {
	font-size: 18px\0;/* IE8+9  */
}
:root #element {
	font-size: 24px;/* IE9 */
}
</style>
</head>

<body>
<div>
	<p id="element">IE font should be bolded</p>
	<p id="element">IE6 font size should be 10px</p>
	<p id="element">IE7 font size should be 14px</p>
	<p id="element">IE8 font size should be 18px</p>
	<p id="element">IE9 font size should be 24px</p>
	<p id="element">Other should be 30px</p>
	<em>This is a simple example for IE9 CSS Hack by <a href="/about">whidy</a>.</em>
</div>
</body>
</html>

http://jsfiddle.net/kingterrors/LQhEr/embedded/result,html,css/

当然有人会说,要用这么多不同的浏览器进行测试,尤其是IE9不支持XP,很麻烦,其实对于XP用户我推荐你们用Adobe的一个BrowserLab功能,之前也有过介绍,大家自己去看看,当然有装IE TESTER的朋友也可以测试多个不同的浏览器,不过XP依然不能用此软件测试IE9的效果,所以如何在XP下测试IE9的效果,那么只有用Adobe的BrowserLab,当然必须是在线的.如果大家有其他XP下测试IE9的CSS的办法欢迎发邮箱一起讨论.

最后上一张BrowserLab在线测试截图.

IE9CssHack和BrowserLab测试
IE9CssHack和BrowserLab测试

如有错误欢迎大家指正!~

PS: 随着时间的推移,对于IE9, IE10以及IE11的hack越来越不好用了,实际上,对于IE9以上的版本就不建议hack了.尽量按照WEB规范标准来做,一般是不会有错的.(2014年5月19日22:52:40)

列表中最后一个元素样式清除修改方法(jQuery)

我们在做动态网站的时候,当遇到导航条的栏目列表或某区域内文章列表等含有大量重复内容区域时,通常会用循环将他们输出,而他们节点的样式都是相同的,比如下边距,外边框的分隔样式,通过循环输出的结果就是最后一个节点依然保留着所有的样式我们是不希望他有下边距或者外边框.

例如: 导航上每个栏目标题(li)右侧可能会用竖线分隔每个栏目标题,于是最后一个栏目右侧也出现了不想要的竖线,但是这些同级的li都是循环出来的 ,我们无法单独给最后一个元素添加特殊的样式,本来有个很简单的方法,那就是使用CSS3的:first和:last选择器,但是当IE6和IE7不支持:first和:last选择器的,有个简单的方法,通过Js(本文用的jQuery)去除或修改列表或循环内容的第一个和最后一个节点的样式,可以兼容所有浏览器,是比较方便的,其实用js可以轻松实现,但是我后来发现,jQuery来处理或许更加轻松些,也是正好我最近在学习jQuery,的确很好用.在body内最后加上一小段就可以了,比如下面这个简单的例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LastChildStyleRemove</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
#mainContent {background-color:#eee;}
#mainContent ul.nav {list-style:none;font-size:12px;}
#mainContent ul.nav li {float:left;padding:5px 15px;border-left:1px solid #fff;border-right:1px solid #ddd;}
#mainContent ul.nav li a {color:#666;text-decoration:none;}
</style>
</head>
<body>
	<div id="mainContent">
		<ul class="nav">
			<li><a href="#">导航一</a></li>
			<li><a href="#">导航二</a></li>
			<li><a href="#">导航三</a></li>
			<li><a href="#">导航四</a></li>
		</ul>
		<div style="clear:both;"></div>
	</div>
</body>
<script>
	$("#mainContent ul.nav li:first-child").css("border-left", "none")
	$("#mainContent ul.nav li:last-child").css("border-right", "none")
</script>
</html>

这个例子除了用到最后一个元素样式清除,也用了首个元素样式清除,这个很好理解,这是两个方法,其实只用到一个函数css( propertyName , value  ),而关于元素选择器可以查看jQuery的例子::first-child Selector和:last-child Selector.上面的例子也很简单清晰易懂…

当然我也在网上看到有这样的javascript写法,不过相对较为复杂,内容如下:

<script language="javascript" type="text/javascript">
  function addClassName(tag,classname){
   if(!tag.className){
    tag.className=classname;
   }else{
    tag.className+=" "+classname;
   }
  }

  function addFirstChild(){
   var olitems=document.getElementsByTagName("ol");
   var ulitems=document.getElementsByTagName("ul");

   for(var i=0;i<olitems.length;i++){
    addClassName(olitems[i].getElementsByTagName("li")["0"],"first-child");
   }
   for(var i=0;i<ulitems.length;i++){
    addClassName(ulitems[i].getElementsByTagName("li")["0"],"first-child");
   }
  }
  function addLastChild(){
   var olitems=document.getElementsByTagName("ol");
   var ulitems=document.getElementsByTagName("ul");

   for(var i=0;i<olitems.length;i++){
    addClassName(olitems[i].getElementsByTagName("li")[olitems[i].children.length-1],"last-child");
   }
   for(var i=0;i<ulitems.length;i++){
    addClassName(ulitems[i].getElementsByTagName("li")[ulitems[i].children.length-1],"last-child");
   }
  }

  if(document.all && !window.opera){
   window.onload=addFirstChild;
   window.onload=addLastChild;
  }
 </script>

如果有兴趣可以尝试,至此,大家也发现实际上用jQuery并不困难,用好就有讲究了,不过最好还是打好js的基础,下次我将介绍另外一个简单的效果,关于用jQuery控制下拉菜单悬浮,我用了一个很笨的嵌套方法,有空我在写一下.今天就写到这里希望大家能有所收获.

PS: 其实这个例子就是简单介绍了jQuery的两个用法,如果动态脚本支持判断首尾元素的话,其实直接在HTML内写个判断(例如:phpcms文章列表循环不同样式制作方法),给首尾元素加个class=”first-tag”和class=”last-tag”之类的样式也是不错的选择,实际上现在已经不推荐这样的写法,因为你会发现有很多冗余的小代码,维护十分不方便,这里也就是举一反三,大家视情况来写吧( update: 2014年5月17日 )