css实用技巧总结_第1页
css实用技巧总结_第2页
css实用技巧总结_第3页
css实用技巧总结_第4页
css实用技巧总结_第5页
已阅读5页，还剩10页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、1、CSS在网页制作中一般有三种方式的用法，那么具体在使用时该采用哪种用法？当有多个网页要用到的CSS，采用外连CSS文件的方式，这样网页的代码大大减少，修改起来非常方便；只在单个网页中使用的CSS，采用文档头部方式；只有在一个网页一、两个地方才用到的CSS，采用行内插入方式。2、CSS的三种用法在一个网页中要以混用吗？三种用法可以混用，且不会造成混乱。这就是它为什么称之为“层叠样式表”的原因，浏览器在显示网页时三种CSS的执行优先级是：行内插入式、头部方式、外连文件方式。3、在网页中如何使外部文件式CSS？在网页中使用外连文件式CSS并没有特殊要求，同样是用记事本创建一个*.css文件，在网

2、页的<head>与</head>之间加上一句下面的代码即可：<link rel="stylesheet" href="在这里填上你的CSS文件地址（相对路径+文件名）" type="text/css">4、在Dreamweaver3中采用行内插入式CSS要手动写代码吗？ 不用！先用CSS面板定义好要用的CSS，然后，在要插入CSS的标记插入：style=""，再把你刚才定义的CSS从<head>后面拖到这个双引号中来，把花括号以外的部分删去就行了。6、在方档头部方式和

3、外连文件方式的CSS中都有“<!-”和“->”，好象没什么用，不要可以吗？这一对东东的作用是为了不引起低版本浏览器的错误。如果某个执行此页面的浏览器不支持CSS，它将忽略其中的内容。虽然现在使用不支持CSS浏览器的人已很少了，由于互联网上几乎什么可能都会发生，所以还是留着为妙。7、如何给一部分文字加背景色？给文字加上不同颜色，在DW3中只要在属性面板上选取文字的颜色就行了，非常方便，但要给部分文字加不同的背景色却没有相应的功能，我们可以先做一个定义背景色的CSS（如：bgstyle），在DW3中点几下鼠就完成了。如一个定义淡黄色背景的CSS是这样的：<style type=&

4、quot;text/css"><!-.bgstyle background: #FFFFCC-></style>在要用时选取那段文字，再在CSS面板上点一下“bgstyle”就行了。8、如何给部分文字加背景图像？与加背景色操作类似，中是在背景在选择加载图象就是了，一个定义好的加背景图象的CSS例子的代码是这样的：<style type="text/css"><!-.imgbgstyle background-image: url(logo.gif)-></style>在要用时选取那段文字，再在CSS

5、面板上点一下“imgbgstyle”就行了9、如何使页面的背景在文字“滚动”时背景图案静止不动？要使背景图案不随文字“滚动”的CSS是这样的：<style type="text/css"><!-BODY background: purple url(bg.jpg); background-repeat:repeat-y; background-attachment:fixed -></style> 10、如何定义字间距？在DW3中CSS的属性定义对话框（Style Definition for .style1)的“Block”上的“let

6、ter spaceing”属性定义的就是字间距，它指的是每一个字符之间的额外间距，经长度为单位，正负值均可，当取负值时产生字符挤在一起的效果。下面代码是一个定义好的字间距CSS例子：<style type="text/css"><!-.style1 letter-spacing: 3px-></style> 11、如何给文字加上划线、下划线、删除线和闪烁？在DW3中CSS的属性定义对话框(Style Definition for .style1)的“Type”上的“decoration”属性定义的就是这些内容，要注意的是闪烁属性有些版本的

7、浏览器不支持，少用为好。下面是一个定义好上述效果的CSS例子：<style type="text/css"><!-.style1 text-decoration: underline overline line-through blink-></style> 其中： “underline”是定义下划线；“overline ”是定义上划线；“ line-through”定义的是删除线；“blink”定义的是文字闪烁。12、如何使网页具有“首行缩进”功能？由于DW3输入空格不方便，利用“首行缩进”将弥补这个不足。在DW3中CSS的属性定义对话

8、框（Style Definition for .style1)的“Block”上的“text-indent”属性定义的就是“首行缩进”，所谓“首行”是指每段内容的第一行，也就是直接按回车键就形成了一个新的段落。缩进最好以“em”（字符）为单位，比如：汉字编排要求每段开始缩进两个汉字，设置好的CSS如下所示：<style type="text/css"><!-.style1 text-indent: 2em-></style> 在DW3要注意：在DW3中CSS的属性定义对话框（Style Definition for .style1)的“B

9、lock”上的“text-indent”右面的缩进单位选择框中“ems”指的就是“em”。13、在用表格进行排版时，能使某一方向上的内容离开表格线一点吗？可以！在DW3中CSS的属性定义对话框（Style Definition for .style1)的“Box”上的“margin”定义的就是内容离开边缘的距离，分别可定义四个方向：“top”“bottom”“left”“right”。下面就是定义在左边离开“10px”的CSS例子代码： <style type="text/css"><!-.style1 margin: 0px 0px 0px 10px-&

10、gt;</style>14、能给某部分内容加边框吗？用CSS可以给某部分内容加边框，在DW3中CSS的属性定义对话框（Style Definition for .style1)的“Border”定义的就是边框线，“top”“bottom”“left”“right”四边可分别定义线的粗细和颜色，这些定义好后不要忘记在下面的“Style”中定义线型，否则将看不边框线，因为默认的线型是“none”。下面是一个定义了上边框为：蓝色细线；左边框为：绿色中粗线的CSS例子：<style type="text/css"><!-.style1 border:

11、solid; border-width: thin 0px 0px medium; border-color: #0000FF black black #00FF00-></style> Div+CSS常见错误总结CSSDIV是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用css+div的方式实现各种定位。应用DIV+CSS编码时很容易犯一些错误。本文列举了一些常见的错误：1. 检查HTML元素是否有拼写错误、是否忘记结束标记 即使是老手也经常

12、会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。2. 检查CSS是否正确检查一下有无拼写错误、是否忘记结尾的 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。 3. 确定错误发生的位置 如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。 4. 利用border属性确定出错元素的布局特性 使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。 5. float元素的父元素不能指定clear属

13、性 MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。 6. float元素务必指定width属性很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。另外指定元素时尽量使用em而不是px做单位。7. float元素不能指定margin和padding等属性IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div

14、来设置margin和padding)。也可以使用hack方法为IE指定特别的值。8. float元素的宽度之和要小于100%如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。9. 是否重设了默认的样式?某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。10. 是否忘记了写DTD?如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下面这行DTD： <!DOCTYPE HTML PUBLIC &q

15、uot;-/W3C/DTD HTML 4.01 Transitional/EN"CSS使用注意事项：一.使用css缩写使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看常用css缩写语法总结，这里就不展开描述。二.明确定义单位，除非值为0忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如：width: 100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。三.区分大小写当在XHTML中使

16、用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。四.取消class和id前的元素限定当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，class可以在页面中多次使用。你限定某个元素毫无意义。例如： 程序代码div#content /* declarations */ fieldset.details /* declarations */ 可以写成&

17、#160;程序代码#content /* declarations */ .details /* declarations */ 这样可以节省一些字节。五.默认值通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样： 程序代码* margin:0;padding:0;六.不需要重复定义可继承的值 CSS中，子元素自动继承父元素的属性值，像颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义

18、。但是要注意，浏览器可能用一些默认值覆盖你的定义。七.最近优先原则如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码 程序代码Update: Lorem ipsum dolor set在CSS文件中，你已经定义了元素p，又定义了一个classupdate 程序代码p margin:1em 0;font-size:1em;color:#333;.update font-weight:bold;color:#600;这两个定义中，class=update将被使用，因为class比p更近。你可以查阅W3C的 Calculating a selec

19、tors specificity 了解更多。八.多重class定义一个标签可以同时定义多个class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10 px的边框。 程序代码.onewidth:200px;background:#666;.twoborder:10px solid #F00;在页面代码中，我们可以这样调用 程序代码<div class=one two></div>这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。九.使用子选择器(descendant sel

20、ectors)CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码： 程序代码<div id=subnav><ul><li class=subnavitem> <a href=# class=subnavitem>Item 1</a></li>><li class=subnavitemselected> <a href=# class=subnavitemselected> Item 1</a> <

21、/li><li class=subnavitem> <a href=# class=subnavitem> Item 1</a> </li></ul></div>这段代码的CSS定义是： 程序代码div#subnav ul /* Some styling */ div#subnav ul li.subnavitem /* Some styling */ div#subnav ul li.subnavitem a.subnavitem /* Some styling */ div#subnav ul li.s

22、ubnavitemselected /* Some styling */ div#subnav ul li.subnavitemselected a.subnavitemselected /* Some styling */ 你可以用下面的方法替代上面的代码 程序代码<ul id=subnav><li> <a href=#> Item 1</a> </li><li class=sel> <a href=#> Item 1</a> </li><li> <a hr

23、ef=#> Item 1</a> </li></ul>样式定义是： 程序代码#subnav /* Some styling */ #subnav li /* Some styling */ #subnav a /* Some styling */ #subnav .sel /* Some styling */ #subnav .sel a /* Some styling */ 用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。十.不需要给背景图片路径加引号为了节省字节，我建议不要给背景图片路径加引号，因为引号不是必须的。例如： 

24、;程序代码background:url("images/*.gif") #333;可以写为 程序代码background:url(images/*.gif) #333;如果你加了引号，反而会引起一些浏览器的错误。十一.组选择器(Group selectors)当一些元素类型、class或者id都有共同的一些属性，你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。例如：定义所有标题的字体、颜色和margin，你可以这样写： 程序代码h1,h2,h3,h4,h5,h6 font-family:Lucida Grande,Lucida,Arial,

25、Helvetica,sans-serif;color:#333;margin:1em 0;如果在使用时，有个别元素需要定义独立样式，你可以再加上新的定义，可以覆盖老的定义，例如： 程序代码h1 font-size:2em; h2 font-size:1.6em; 十二.用正确的顺序指定链接的样式当你用CSS来定义链接的多个状态样式时，要注意它们书写的顺序，正确的顺序是：:link :visited :hover :active。抽取第一个字母是LVHA，你可以记忆成LoVe HAte(喜欢讨厌)。为什么这么定义，可以参考Eric Meyer的Link Specificity。如果你的

26、用户需要用键盘来控制，需要知道当前链接的焦点，你还可以定义:focus属性。:focus属性的效果也取决与你书写的位置，如果你希望聚焦元 素显示:hover效果，你就把:focus写在:hover前面；如果你希望聚焦效果替代:hover效果，你就把:focus放在:hover后面。十三.清除浮动一个非常常见的CSS问题，定位使用浮动的时候，下面的层被浮动的层所覆盖，或者层里嵌套的子层超出了外层的范围。通常的解决办法是在浮动层后面添加一个额外元素，例如一个div或者一个br，并且定义它的样式为clear: both。这个办法有一点牵强，幸运的是还有一个好办法可以解决，参看这篇文章How To C

27、lear Floats Without Structural Markup(注：本站将尽快翻译此文)。上面2种方法可以很好解决浮动超出的问题，但是如果当你真的需要对层或者层里的对象进行clear的时候怎么办？一种简单的方法就是用overflow属 性，这个方法最初的发表在Simple Clearing of Floats，又在Clearance和Super simple clearing floats中被广泛讨论。上面那一种clear方法更适合你，要看具体的情况，这里不再展开论述。另外关于float的应用，一些优秀的文章已经说得很清楚，推荐你阅读：Floatutorial、Containing

28、 Floats和Float Layouts十四.横向居中(centering)这是一个简单的技巧，但是值得再说一遍，因为我看见太多的新手问题都是问这个：CSS如何横向居中？你需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样：<!- 你的布局这里开始 ->你可以这样定义使它横向居中： 程序代码#wrap width:760px; /* 修改为你的层的宽度 */margin:0 auto;但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：用text-align属性。就象这样： 程序代码body tex

29、t-align:center;#wrap width:760px; /* 修改为你的层的宽度 */margin:0 auto;text-align:left;第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。十五.导入(Import)和隐藏CSS因为老版本浏览器不支持CSS，一个通常的做法是使用import技巧来把CSS隐藏起来。例如： 程序代码import url(main.css);然而，这个方法对IE4不起作用，这让我很是头疼了一阵

30、子。后来我用这样的写法： 程序代码import main.css;这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。想了解import语法的详细说明，可以看这里centricles css filter chart十六.针对IE的优化有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。1.注释的方法(a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector): 程序代码html>bo

31、dy p /* 定义内容 */(b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏) 程序代码* html p /* declarations */(c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用反斜线技巧： 程序代码/* */* html p declarations/* */2.条件注释(conditional comments)的方法另外一种方法，我认为比CSSHacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。就象这样：

32、60;程序代码<!-if IE><link rel=stylesheet type=text/css href=ie.css /><!endif->十七.调试技巧：层有多大？当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用 border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。另外一个经常出问题的属性是outline。ou

33、tline看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。十八.CSS代码书写样式在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯。在经过不断实践后，我决定采用下面这样的书写样式： 程序代码selector1,selector2 property:value;当使用联合定义时，我通常将每个选择器单独写一行，这样方便在CSS文件中找到它们。在最后一个选择器和大括号之间加一个空格，每个定义也单独写一行， 分号直接在属性值后，不要加空格。我习惯在每个属性值后面都加分号，虽

34、然规则上允许最后一个属性值后面可以不写分号，但是如果你要加新样式时容易忘记补上 分号而产生错误，所以还是都加比较好。最后，关闭的大括号单独写一行。空格和换行有助与阅读。十九.用CSS来处理垂直对齐垂直对齐用表格可以很方便地实现，设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。CSS方法是什么呢？对了，把 这些文字的行高设为 2em：line-height: 2em ，这就可以了。二十. 直通到屏幕底部的背景色在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容

35、栏一样直通到页面底部，用表格是很方便的，但如果只用这样的CSS： 程序代码#navigation background: blue; width: 150px 较短的导航条是不会直通到底部的，半路内容结束时它就结束了。该怎么办呢？不幸的是，只能采用欺骗的手段了，给这较短的一栏加上个背景图，宽度和栏宽一样，并让它的颜色和设定的背景色一样。 程序代码body background: url(blue-image.gif) 0 0 repeat-y 此时不能用em做单位，因为那样的话，一旦读者改变了字体大小，这个花招就会露馅，只能使用px。二十一.CSS用于文档打印许多网站上都有

36、一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印： 程序代码<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" /><link type="text/css" rel="stylesheet" href="printstyle.css"

37、media="print" />第1行就是显示，第2行是打印，注意其中的media属性。但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。总结的一些css实用技巧及必须得注意的事项:1.注释须知:html中注释不能这样写:<div></div><!-这是错误写法-><div></div><!-=这

38、是正确写法=->这种写法,FF中会忽略其下面的内容.2.CSS注释切记在/*之后及*/之前空一格,否则在有些语言中会出问题,正确写法:#divstyle/* 注释前后要空格 */3.最简单区分IE与FF的HACK写法#layerpadding-top:20px;/* FF中定义 */*padding-top:10px;/* IE中定义 */4.空div在IE(FF中没有)是有默认高度的,可以用定义:div witdh:100%; background:#9c0; ling-height:0的方式去掉默认高度.5.按钮按下时立体感效果:a:hover position:relative;

39、top:1px; left:1px/* 切记一定要是相对定位 */6.关闭当前页面代码:<div onclick="window.close();">关闭当前页面</div>7.整站变灰代码(加到样式表中):html filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);8.设为首页代码:<span onclick="var strHref=window.location.href;this.style.behavior='url(#default#h

40、omepage)'this.setHomePage('');" style="CURSOR:hand;">设为首页</span>9.加入收藏代码:<script language="JavaScript">function ITRenCai()window.external.addFavorite('','IT人才');if (document.all)document.write('<a href="javascript:void(0

41、);" onClick="ITRenCai();" title="把“IT人才”加入您的收藏夹！">收藏本站</a>')</script>10.导航间竖线的定义方法:css部分:.navwidth:408px;/* 这个宽度一定要按li中的宽度算好 */float:right;display:inline;overflow:hidden;.nav ulmargin:0;padding:0.nav lifloat:right;width:80px;height:auto;text-align:center;p

42、adding:0 10px;border-right:1px solid #444;margin-right:-1px;html部分:<div class="nav"><ul> <li><a href=" <li><a href=" <li><a href=" <li><a href=" <li><a href="</ul></div>11.中英文下划线对齐方式(利用图片的align=&q

43、uot;absmiddle"):<img src="img.gif" align="absmiddle">中英文并排:<a href="/">中文 gollum</a>12.li交替显示背景代码:ullist-style:none;font-size:12px;line-height:20px;color:#666;ul libackground-color:e?xpression(this.sourceIndex%2=0?'#EAF8FD':'#ffffff

44、9;);13.利用css reset规避IE6下密码表单和文本不等长的问题,在css reset中加入:inputfont-family:Arial, Helvetica, sans-serif;14.FF下上边距无效时,及时反应给父级div上写入overflow:hidden或overflow:auto;也可以在子级div中写入float:left; display:inline.15.描边文字效果:<div style="position:relative; width:200px; height:25px; line-height:25px; text-align:center; font-size:14px; color:#fff; background:#9c0;">这是描边文字<span style="position:absolute; left:-1

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论