最新CSS使用技巧.doc
精品资料CSS使用技巧.分享：CSS使用技巧20则-(0)1. CSS字体属性简写规则一般用CSS设定字体属性是这样做的：font-weight: bold;font-style: italic;font-varient: small-caps;font-size: 1em;line-height: 1.5em;font-family: verdana,sans-serif但也可以把它们全部写到一行上去：font: bold italic small-caps 1em/1.5em verdana,sans-serif真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。2. 同时使用两个类一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：<p class="text side">.</p>同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。3. CSS border的缺省值通常可以设定边界的颜色，宽度和风格，如：border: 3px solid #000这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。4. CSS用于文档打印许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：<link type="text/css" rel="stylesheet" href=" media="screen" /><link type="text/css" rel="stylesheet" href=" media="print" />第1行就是显示，第2行是打印，注意其中的media属性。但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。5. 图片替换技巧一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。比如你想整个卖东西的图标，你就用了这个图片：<h1><img src=" alt="Buy widgets" /></h1>这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：<h1>Buy widgets</h1>但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：h1background: url(widget-image.gif) no-repeat;height: image heighttext-indent: -2000px注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。6. CSS box模型的另一种调整技巧这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：#boxwidth: 100px;border: 5px;padding: 20px这样调用它：<div id="box">.</div>这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。但用CSS也可以达到同样的目的，让它们显示效果一致。#boxwidth: 150px#box divborder: 5px;padding: 20px这样调用：<div id="box"><div>.</div></div>这样，不管什么浏览器，宽度都是150点了。7. 块元素居中对齐如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样：#contentwidth: 700px;margin: 0 auto你会使用 <div id="content"> 来围上所有元素。这很简单，但不够好，IE6之前版本会显示不出这种效果。改CSS如下：bodytext-align: center#contenttext-align: left;width: 700px;margin: 0 auto这会把网页内容都居中，所以在Content中又加入了text-align: left 。8. 用CSS来处理垂直对齐垂直对齐用表格可以很方便地实现，设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。CSS方法是什么呢？对了，把这些文字的行高设为 2em：line-height: 2em ，这就可以了。9. CSS在容器内定位CSS的一个好处是可以把一个元素任意定位，在一个容器内也可以。比如对这个容器：#containerposition: relative这样容器内所有的元素都会相对定位，可以这样用：<div id="container"><div id="navigation">.</div></div>如果想定位到距左30点，距上5悖?梢哉庋 网页特效之CSS制作的三级下拉菜单<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>网页特效| 制作的三级菜单</title><style type="text/css"><!-body font-family: Arial, Helvetica, sans-serif; font-size: 11px; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;#menu background-color: #FEF0E5;filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#FEF0E5', gradientType='0');#nav, #nav ul float:left; /* 菜单总体水平位置 */ clear:right; list-style:none; /*line-height:22px; 一级菜单高 */ /*background: #eee; 所有菜单移出色 */ /*font-weight: bold;8*/ padding:0px; margin:0px; /*border:1px solid #ccc; border-right: 0px;*/#nav ul ul /*border:1px solid #ccc;*/ border-top:0px; border-right:0px;#nav a width:120px; display:block; color:#333; text-decoration:none; text-align:left; /*border-right:1px solid #CCC;*/ padding: 3px 4px 3px 7px;#nav a:hovercolor:#000;border:1px solid #CCC;margin: 0px;padding: 3px 5px 3px 6px;background-color: #f1f1f1;text-decoration: none; /* 所有 a:hover 字体样式 */#nav a.selectedbackground:url(flyout_arrow.gif) no-repeat right 50%; /* 下拉图标 */#nav li float:none;clear:right;height:22px;width:120px;#nav li ul lifloat:none;clear:right;height:22px;width:120px;#nav li ul /* 二级弹出位 */ position:absolute; margin:-22px 0px 0px 119px; padding:0; left:-9999em; width:120px; font-weight:normal; display:block; border:1px solid #CCCCCC; background:#fff; /* 二级菜单宽 */#nav li ul a width:120px; /* 二级菜单宽 */ /*line-height:24px; 二级菜单高 border:1px solid #CCC;*/ height:22px; text-align:left; margin: 0px;#nav li ul ul margin:-22px 0px 0px 120px;border:1px solid #CCC; /* 三级弹出位 */#nav li:hover ul ul,#nav li.sfhover ul ulleft:-9999em;#nav li:hover ul,#nav li li:hover ul,#nav li.sfhover ul, #nav li li.sfhover ulleft:auto;height:22px; /* 所有弹出菜单自动左边距 */#nav li:hover, #nav li.sfhover background:#f1f1f1;height:22px; /* 所有悬浮样式 */-></style><script type="text/javascript"><!-/-><!CDATA/><!-img1=new Image();img1.src="flyout_arrow.gif"sfHover = function() var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i+) sfElsi.onmouseover=function() this.className+=" sfhover" sfElsi.onmouseout=function() this.className=this.className.replace(new RegExp(" sfhoverb"), ""); window.onload=sfHover;/-><!></script></head><body><table width="120" border="0" cellspacing="0" cellpadding="0" > <tr> <td valign="top" id="menu"><ul id="nav"> <li><a href="" target="_blank"> <span style="font-size: 9pt">首页</span></a></li> <li><a href=" target="_blank" class="selected"> <span style="font-size: 9pt">项目需求合作</span></a><span style="font-size: 9pt"> </span> <ul> <li ><a href=" class="selected"><span style="font-size: 9pt">网站项目 </span> </a> <ul> <li><a href=" <span style="font-size: 9pt">网站项目 </span> </a> <li><a href=" <span style="font-size: 9pt">整站项目</span></a></li> <li><a href=" <span style="font-size: 9pt">网站分析策划</span></a></li> <li><a href=" target="_blank"> <span style="font-size: 9pt">网页设计制作</span></a></li> <li><a href=" <span style="font-size: 9pt">网站制作与开发</span></a></li> <li><a href=" <span style="font-size: 9pt">网站flash动画</span></a></li> <li><a href=" <span style="font-size: 9pt">网站服务器</span></a></li> </ul> </li> <li ><a href=" class="selected"><span style="font-size: 9pt">多媒体设计制作</span></a><span style="font-size: 9pt"> </span> <ul> <li><a href=" <span style="font-size: 9pt">网站项目 </span> </a> <li><a href=" <span style="font-size: 9pt">平面设计</span></a></li> <li><a href=" <span style="font-size: 9pt">CAD工程图设计</span></a></li> <li><a href=" <span style="font-size: 9pt">3D建模与动画</span></a></li> <li><a href=" <span style="font-size: 9pt">Flash游戏动画</span></a></li> <li><a href=" <span style="font-size: 9pt">音效及音乐</span></a></li> <li><a href=" <span style="font-size: 9pt">游戏原画设定</span></a></li> </ul> </li> <li ><a href=" class="selected"><span style="font-size: 9pt">软件开发</span></a><span style="font-size: 9pt"> </span> <ul> <li><a href=" <span style="font-size: 9pt">应用软件</span></a></li> <li><a href=" <span style="font-size: 9pt">游戏开发</span></a></li> <li><a href=" <span style="font-size: 9pt">驱动程序</span></a></li> <li><a href=" <span style="font-size: 9pt">嵌入式开发</span></a></li> <li><a href=" <span style="font-size: 9pt">手机开发</span></a></li> <li><a href=" <span style="font-size: 9pt">单片机</span></a></li> <li><a href=" <span style="font-size: 9pt">数据库设计</span></a></li> <li><a href=" <span style="font-size: 9pt">代码移植</span></a></li> </ul> </li> <li><a href=" style="font-size: 9pt">网络硬件</span></a></li> </ul> </li> <li><a href=" target="_blank" class="selected"> <span style="font-size: 9pt">信息与知识</span></a><span style="font-size: 9pt"> </span> <ul> <li><a class="selected" href=" style="font-size: 9pt">信息与知识</span></a><span style="font-size: 9pt"> </span> <ul> <li><a href=" <span style="font-size: 9pt">实用信息与工具 </span> </a></li> <li><a href=" <span style="font-size: 9pt">新闻动态</span></a></li> <li><a href=" <span style="font-size: 9pt">知识与技能</span></a></li> <li><a href=" <span style="font-size: 9pt">设计制作与欣赏</span></a></li> <li><a href=" <span style="font-size: 9pt">项目交易经验谈</span></a></li> <li><a href=" <span style="font-size: 9pt">下载</span></a></li> </ul> </li> </ul> </li> <li><a href=" <span style="font-size: 9pt">优秀作品欣赏</span></a></li> <li><a href=" target="_blank"> <span style="font-size: 9pt">招骋</span></a></li> <li><a href=" <span style="font-size: 9pt">关于本站</span></a></li> </ul></td> </tr></table></body></html>
