http://dev.itcivil.net/html/wyzz/css/index.html 网页制作 / css zh-cn <a href=http://www.dedecms.com target=_blank>Power by DedeCms</a> support@itcivil.net http://dev.itcivil.net/html/wyzz/css/20070123/383.html 我们都知道浏览器之间是有差异的，很多人在使用XHTML+ CSS 方式制作网页的时候都曾为此无比头痛。要在这些差异的影响下工作需要很多的技巧，“隐藏CSS”就是其中很重要的一种技巧（甚至是最重要的）。这种技巧的主要思想是，用某些方式对某些浏览器隐藏某些重载的CSS规 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/382.html 1. CSS 导入： 第一种是把CSS文档放到head文档中： style type=“text/css” …… /style 其中style中的“type=‘text/css’”的意思是style中的代码是定义样式表单的。 第二种方法是把CSS样式表写在HTML的行内，比如下面的代码： p style=“font-size：14pt；color：b 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/381.html 介绍两个关键的 CSS style media="print" .Noprint { DISPLAY: none } .PageNext{ PAGE-BREAK-AFTER: always } /style第一个在不需要打印的标签上添加（子标签也将不被打印），第二个在需要换行的标签处添加（该标签所表示的内容将在当前打印的一页内） 接下来通过调用 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/380.html 编辑母板页时，若在内联 CSS 里使用诸如background-image: url(title.jpg)或background-image: url(/title.jpg)或background-image: url(../title.jpg)或background-image: url(~/title.jpg)，都将导致网页的图片无法显示，或者是位于其他目录的网页，或者是全站的所有 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/379.html style type="text/ CSS ".input1{font-family: verdana;background-color: #EEEEEE;border-bottom: #FFFFFF 1px solid;border-left: #CCCCCC 1px solid;border-right: #FFFFFF 1px solid;border-top: #CCCCCC 1px solid;font-size: 12px;}.input1-bor {font-family:ver 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/378.html !doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"html lang="us-en"headtitle CSS 选项卡(html组件)/titlelink rel="shortcut icon" href="favicon.ico" type="image/x-icon" /meta http-eq 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/377.html 当前页面--比如说现在的页面是首页，那么在导航栏上首页的色彩等和其他栏目有所不 同，用以给浏览者一个明显的指示。 下面来说下具体的做法，菜单的基本实现和一般的 CSS 菜单没多大区别，着重说下如何 实现当前页。 设菜单有5个栏目：home、about、products、services 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/376.html CSS 的常用技巧放送(一) 一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。 二.明确定义单位，除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/375.html !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd " html xmlns=" http://www.w3.org/1999/xhtml " head meta http-equiv="Content-Type" content="text/html; charset=GB2312" / meta name="Author" con 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/374.html 使用XHTML+ CSS 构架好处不少，但也确实存在一些问题，不论是因为使用不熟练还是思路不清晰，我就先把一些我遇到的问题写在下面，省的大家四处找。 1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法: div{margin:30px!important;margin:28px;} 注意这 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/373.html 前些天加了一个设计群,里面一帮人都在嚷嚷要学 CSS ,但是不知道从哪里入手,于是我就在群里随便嘀咕了一句"哈哈,我是高手...." 结果引来骂声无数,虽然我心里不服,不过还是承认自己的css功底不够,除了布局/文字/链接这些简单的处理之外,其他的一些行为基本不会. 其中有个 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/372.html 1. CSS 字体 简写规则 当使用css定义字体时你可能会这样做: font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-variant: small-caps; font-family: verdana,serif; 事实上你可以简写这些属性: font: 1em/1.5em bold italic small-caps 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/371.html 使用缩写可以帮助减少你 CSS 文件的大小，更加容易阅读。css缩写的主要规则如下： 颜色 16进制的色彩值，如果每两位的值相同，可以缩写一半，例如： #000000可以缩写为#000;#336699可以缩写为#369; 盒尺寸 通常有下面四种书写方法: property:value1; 表示所有边都是一 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/370.html 一.使用 CSS 缩写 使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。 二.明确定义单位，除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/369.html 认清 CSS 的类class和标识id选择符 在CSS初级教程中我们仅仅考虑了HTML选择符──以HTML标签形式出现。你当然可以用类选择符class和标识选择符id来定义自己的选择符。这样做的好处是，依赖于class或者id，你可以不同地表现相同的HTML元素。 在CSS中，类选择符在一个半 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/368.html 在开发网络应用时，没有比外观更重要的事情了。所以，如果发现设计人员十分关注 字体 及字体大小，我不会感到奇怪! 在设计网络应用时，您必须决定如何编辑字体。使用 CSS 时存在大量选项，每个开发者都有自己的喜好。本文主要讨论字体大小和网络应用内的操作。 字体大 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/367.html 实时切换 CSS 样式 用W3C标准建造的网站，从理论上来说可以做到完全的表现与结构相分离。打个比方，就是可以在不动骨架（结构，XHMTL）和肌肉（行为， javascript ）的前提下，彻彻底底地换一身皮（表现，CSS）。 当然，换皮之前你需要先按W3C标准建好你的网站，并且为 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/366.html CSS 样式里使用 javascript (onmouseover/onmouseout) !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" HTML HEAD TITLE CSS样式里使用JavaScript(onmouseover/onmouseout)2/TITLE META NAME="Generator" CONTENT="EditPlus" META NAME="Author" CONTEN 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/365.html 当前页面--比如说现在的页面是首页，那么在导航栏上首页的色彩等和其他栏目有所不 同，用以给浏览者一个明显的指示。 下面来说下具体的做法，菜单的基本实现和一般的 CSS 菜单没多大区别，着重说下如何 实现当前页。 设菜单有5个栏目:home、about、products、services 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/364.html 如果用传统的方法制作这个翻转菜单，至少需要把图片切成10块，还要加上JS代码，在图片按钮上再加行为，现在完全用 CSS 来实现，图片只要一张，见下图： CSS代码: 以下是引用片段： #imgmenu{ width:450px; height:25px;/*高度是背景图片的一半*/ background:url(/image 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/363.html !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"headmeta http-equiv="Content-Type" content="text/html; charset=gb2312" /titlea href="http 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/362.html htmlheadmeta http-equiv="Content-Type" content="text/html; charset=gb2312"title网页特效观止|http://homepage.yesky.com/|--- CSS 制作的阴影链接文字/title/headbodystyleul,li{ margin:0px; padding:0px;list-style-type: none;}http://homepage.yesky.com/nav{ 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/361.html htmlheadmeta http-equiv="Content-Type" content="text/html; charset=gb2312"title网页特效代码--- CSS 仿a href="http://com.chinabyte.com/taobao/" class="bluekey" target="_blank"淘宝/a首页导航条按钮布局效果/titlestyle /*子鼠*/ body{ font-size:12px; text 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/360.html 本翻译并未得到作者或网站授权。一切权利都归原作者及原网站所有。如果你得到原作者或原发表网站的授权，可以自由使用本翻译。 1. CSS 字体 属性简写规则 一般用CSS设定字体属性是这样做的： font-weight:bold; font-style:italic; font-varient:small-caps; font-size 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/359.html 一段文字，当鼠标在文字上面单击，文字消失，原来文字的地方却立即变成了一张图片，当鼠标在图片上单击，图片又消失，原来的文字又重现了，像变魔术一样，是不是有意思?!这种效果用 Dreamweaver 的Behavirs 功能也可实现，但那要增加一段 javascript 程序，明显增加了 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/358.html 一段文本或一张图片，它的周围有一圈光晕，这圈光晕每一秒钟闪烁一次，而当鼠标移到上面时，立即停止闪烁，当鼠标移开时又继续闪烁。这种效果用于那些需要特别引起别人注意的内容上(如:警示、报告新增内容等)，能起到较好的效果。 上面这个示例就能实现上面所的效果， 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/357.html 一般而言，鼠标以斜向上的箭头显示，移到文本上时变为有头的竖线，移到超级链接上变为手型。但用 CSS 可控制鼠标的显示效果，如可使鼠标移到普通文本上也显示成手型。 用css控制的语法如下: span style="cursor:*"文本或其它页面元素/span 把 * 换成如下15个效果的一种 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/356.html HTML对于＜font＞内容＜/font＞卷标只有： ＜font color=colorvalue size=fontsize face=字型＞＜/font＞这3种设定，而关于 CSS 对于＜font＞内容＜/font＞的延伸规格让我们可以对字型的有更详细的设定。对于字型的设定： font-family:字型名称1,字型名称3,字型名称3等 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/355.html /**//*按钮样式*/ .Button CSS {}{ font-family: "Tahoma", "宋体"; font-size:9pt; color: #003399; border: 1px #003399 solid; color:006699; BORDER-BOTTOM: #93bee2 1px solid; BORDER-LEFT: #93bee2 1px solid; BORDER-RIGHT: #93bee2 1px solid; BORDER-TOP: #9 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/354.html IE5及其以后版本支持在 CSS 中使用expression，用来把CSS属性和Javas cript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式，CSS属性的值等于Javas cript表达式计算的结果。 在表达式中可以直 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/353.html 你也许已经意识到，你可以通过指定每一键接的不同风格以建立 CSS 翻滚效果，这些链接包括普通的链接link (normal), 访问，翻转，以及激活。并且，你可能也知道CSS类型的顺序可以产生效果上的差别，CSS代码后顺序的风格将会取代针对于相同元素的前顺序的风格。建立翻滚 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/352.html 原地址:http://siyizhu.com/article.asp?id=496 实现方法很简单 在 CSS 中添加以下代码: img { filter:expression( this.不能去掉 ? "" : ( (!this.complete) ? "" : this.runtimeStyle.filter = ("progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this. 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/351.html 在浏览网页的时候我们有时可以看到有的网页滚动条颜色不是系统默认的，而是漂亮的红色或其它颜色，其实这就是在网页代码之间加入代码来实现的，具体是哪些代码呢？ 网页滚动条代码及其解释如下：（复制时请将大写尖括号改为小写） 以下是引用片段： ＜Style type="text 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/350.html 利用相对定位和偏移量属性，可以很好的实现以前需要用图片才能实现的界面，而且实现起来比也很方便。例如，当需要用户输入某些信息，我们常常会用到：标题栏－内容－确定按钮 这种结构，下面是利用 CSS 样式的相对定位及偏移量做的输入界面。主要特点是： 标题栏图片有 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/349.html 在table或div里显示文章的时候，如果是汉字，文章会根据table和div的width属性自动分行，但如果是英文，当单词长度超过table或div宽度的时候，table/div便会被撑开，有时候会造成页面很难看，这时可以给table/div设置如下样式：word-break:break-all;word-wrap:break-wo 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/348.html 最近，我不得不对我的一个客户的旧网站进行更新，使得它能够达到可访问性的标准。对三四年前的旧代码进行挖掘的想法根本没有吸引力，主要是因为我曾经使用的很多编程惯例已经不再适用，特别是从可访问性上来讲。我曾经使用绝对的 字体 大小，固定的页面宽度和表格来做版 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/347.html 现看看其 CSS 样式表代码： 以下是引用片段： style type="text/css" !-- #menu { font-size:12px; height:380px; margin:0; padding:0; width:180px; overflow:hidden; background:#f0f0f0; list-style:none; border-left:1px solid #cccccc; border-right:1px solid # 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/346.html 代码如下： 以下是引用片段： style #galleryh { padding:0; margin:0 auto 5em auto; list-style-type:none; overflow:hidden; width:495px; height:240px; border:1px solid #888; background:#fff url(/imagelist/06/24/o9642o826u4n.gif); } #galleryh li { float:l 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/345.html 看到上面的效果，你也许以为这是一张带文字的图片而已;呵呵，用你的鼠标去选取文字看看，发现了吧，这完完全全是一张图片和文字的组合，下面我就来介绍它是怎么做的。 先看看代码: 以下是引用片段： div id="info" h2TRACKING YOUR IMAGES/h2 div id="holdit" img src= 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/344.html 先看看代码，十分简单： 以下是引用片段： style .out { position:relative; background:#bbb; margin:10px auto; width:285px } .in { background:#fff; border:1px solid #555; padding:10px 5px; position:relative; top:-5px; left:-5px; } /style div class="out" 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/343.html style type="text/ CSS " .showCSS{ event:expression( onmouseover = function() { this.style.backgroundColor='#f0f0f0' }, onmouseout = function() { this.style.backgroundColor='#ffffff' } ) } /style div class="showCSS"把鼠标放上去试试看！：）/div 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/342.html 整体声明的方法 1. 基本上，整体声明有两种方法，第一种就是针对一个标签，然后一次设定好几个样式。第二种就是同时对好几个标签设定相同的样式。下面这个例子就是：“针对一个标签，然后一次设定好几个样式”： stype="text/ CSS " body{font-size:9pt; font-color:re 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/341.html 分项声明 搞懂了基本声明和整体声明后，现在要来谈谈分项声明了，这个内容基本上不用多讲，因为并没有什么特别的用法，看看下例就知道了： style type="text/ CSS " body{font-size:9pt; font-color:red} body{font-family:宋体; background:white} /style 你会发现， 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/340.html 怎么样用 CSS 实现表格背景颜色的渐变效果呢，请看下面的例子： styletd{text-align:center;color:white;font-family:宋体;font-size:14px;}table{table-layout:fixed;border:1 dashed blue;width:567;height:234;filter:progid:DXImageTransform.Microsoft.gradient(s 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/339.html 很多朋友问过我absolute与relative怎么区分，怎么用？我们都知道absolute是绝对定位，relative是相对定位，但是这个绝对与相对是什么意思呢？绝对是什么地方的绝对，相对又是相对于什么地方而言的呢？那他们又有什么样的特性，可以做出什么样的效果呢？关于两者之间又 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/338.html 首先我们要明确，display:inline;与float:left;正确含义。display:inline;(内联)《 CSS 权威指南》中文字显示:任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如，我们设定一个内 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/337.html 写了个SlideShow的原型,利用image的complete,判断图片是否调用完全，调用完全以后才显示，否则是LOADING的图片，还考虑的是 1.每调用一张图片之前先出现loading的过程, 2.调用图片中不会因为网速和图片过大而未显示全,直接跳到下一张,要按顺序一张一张播放. 3.第一次 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/336.html 以下是引用片段： div id="navcontainer" ul id="navlist" li id="active"a href="#" id="current"Item one/a ul id="subnavlist" li id="subactive"a href="#" id="subcurrent"Subitem one/a/li lia href="#"Subitem two/a/li lia href="#"Subitem three/a/li lia hre 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/335.html Top Right Banner Style #topright { position: absolute; right: 0; top: 0; display: block; height: 125px; width: 125px; background: url(TRbanner.gif) no-repeat; text-indent: -999em; text-decoration: none;} Top Left Banner Style #topleft { position: ab 2007-01-23 css 秩名 开发文档库 http://dev.itcivil.net/html/wyzz/css/20070123/334.html 以下是引用片段： style type="text/ CSS " a{ color:#333333; text-decoration:none;} a:visited {color:#333333; text-decoration:none;} a:hover { color:#FF0000; text-decoration:underline;} a span { color:#333333;} /style a href="#"span111/span/a style ty 2007-01-23 css 秩名 开发文档库