CSS样式表常用小技巧收藏_经验交流

· ul 标签在 Mozilla 中默认是有 padding 值的,而在 IE 中只有 margin 有值。 

· 同一个的 class 选择符可以在一个文档中重复出现,而 id 选择符却只能出现一次;对一个标签同时使用 class和 id 进行 CSS 定义,如果定义有重复,id 选择符做的定义有效。 

· 初学可能会碰到这样一个情况,同样一个标签的属性在 IE 设置成 A 显示是正常的,而在 Mozilla 里必须要设成 B 才能正常显示,或者两个倒过来。
临时解决方法:选择符 {属性名:B !important ; 属性名:A;} //IE7 下无效 

· 如果一组要嵌套的标签之间需要些间距的话,那就留给位于里面的标签的 margin 属性吧,而不要去定义位于外面的标签的 padding 

· li 标签前面的图标推荐使用 background-image 而不是 list-style-image 

· IE 分不清继承关系和父子关系的差别,全部都是继承关系。 

· 在给你的标签疯狂加选择符的时候,别忘了在 CSS 里给选择符加上注释。 等你以后修改你的 CSS 的时候就知道为什么要这么做了。 

· 如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。 

· 定义链接的四种状态要注意先后顺序: Link Visited Hover Active 

· 与内容无关的图片请使用 background 

· 定义颜色可以缩写 #8899FF = #89F 

· table 在某些方面比其它标签表现的要好的多。请在需要列对齐的地方用它。 

· <script> 没有 language 这个属性,应该写成这样:<script type="text/javascript"> 

· 标题是标题,标题的文字是标题的文字。有时候标题不一定需要显示文字,所以:<h1>标题内容</h1> 改成 <h1><span>标题内容</span></h1> 

· 完美的单象素外框线表格(在IE5.0 IE6.0及 FF 中均可通过测试,其它未测试)table {border-collapse:collapse;} td {border:#000 solid 1px;} 

· margin 取负值可以在标签使用绝对定位的时候起到相对定位的作用,在页面居中显示时,使用绝对定位的层不适合使用 left:XXpx 这个属性。 把这个层放到一个要相对定位的标签旁,然后使用 margin 的负值是个好方法。 

· 绝对定位时使用 margin 值定位可以达到相对于本身所在位置的定,这与 top,left 等属性相对与窗口边缘的定位不同。绝对定位的优势在于可以让其它元素忽略它的存在。 

几个常用到的 CSS 样式

· 1.中文字两端对齐:text-align:justify; text-justify:inter-ideograph;

· 2.固定宽度汉字截断:overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不过只能处理文字在一行上的截断,不能处理多行。)(IE5以上) 

· 3.固定宽度汉字(词)折行:table-layout:fixed; word-break:break-all;(IE5以上)

· 4.<acronym style="cursor: help" title="输入要提示的文字">文字</acronym> 用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到,而国内的少又少。

· 5.图片设为半透明:.halfalpha { background-color: #000000; filter: Alpha(Opacity=50)} 在 IE6 及 IE5 测试通过,FF未通过。

· 6.FLASH透明: 选中 swf,打开原代码窗口,在 </object> 前输入 <param name="wmode" value="transparent"> 我们在做网页时常用到把鼠标放在图片上会出现图片变亮的效果,可以用图片替换的技巧,也可以用如下的滤镜,代码如下:

.pictures img { filter: alpha(opacity=45); }
.pictures a:hover img { filter: alpha(opacity=90); } 

· 如果文字过长,则将过长的部分变成省略号显示:IE5、FF 无效,但可以隐藏,IE6 有效
<div style="width: 120px; height: 50px; border: 1px solid blue; overflow: hidden; text-overflow:ellipsis">
<NOBR>就是比如有一行文字,很长,表格内一行显示不下.</NOBR> 

· title 换行用的符号或在 IE 中可能由于注释带来的文字重复问题时可以把注释改为:<!--[if !IE]>
Put your commentary in here...
<![endif]--> 

· 如何用 CSS 调用外部字体语法:@font-face { font-family : name; src: url ( url ); sRules }取值: 
name :  字体名称。任何可能的 font-family 属性的值
url ( url ) :  使用绝对或相对 url 地址指定OpenType字体文件
sRules :  样式表定义

时间: 2024-12-10 00:05:11

CSS样式表常用小技巧收藏_经验交流的相关文章

CSS样式表的背景渲染效率_经验交流

我的MzTreeView1.0树控件发布至今,得到了不少意见反馈,很多网友给了我很多的中肯的建议,也指出了这个控件里的诸多BUG和不足之处,所以我准备写一个新版本的树,将大家的建议都整合进来实现.这几天我就一直在写新版的树,树控件最重要的是效率,特别是大节点量的时候,效率稍微差点的模式就会拖垮浏览器,所以新版的树我首要的还是提高效率,比如增加异步数据加载的支持等,另外我还有一个设想,就是树的树型结构竖线用样式表(背景图)来实现,样式表背景图片只需要加载一次,而现在这个模式(用多个<img>)图

WEB设计中CSS样式表应用小技巧十四例

css|web|技巧|设计|样式表     CSS是Cascading style Sheets的简称,中文译作"层叠样式表单",我把它叫作"层叠样式表",我感到这样顺口一点,没别的意思.实际上它是一组样式.你可能对CSS这个名词比较陌生,实际上无论你用Internet Explorer还是 Netscape Navigator在网上冲浪,几乎随时都在与CSS打交道,在网上没有使用过CSS的网页可能不好找.不管你用什么工具软件制作网页,都有在有意无意地使用CSS.用

创建CSS样式表的十个技巧

  如果你想成为一位CSS专家的话,光背出一堆选择器是不够的,还要能够提高CSS样式表的可读性,开发效率以及维护性.这里,Jina Bolton 将给我们分享一下她关于如何创建性感的CSS样式表的十个技巧. 本文主要内容为:CSS代码编码规范,教你如何写出整洁漂亮性感的css代码,如何清晰的组织你的样式表文件.闲言少叙,直接进入正题 1. 不要在HTML文件中使用CSS样式定义 相信对于多数有一定工作经验的设计师来说,使用外部样式表来定义CSS样式是小菜一碟的工作.但我在这里仍然需要再次告诉你这

网页编辑中CSS样式表技巧总结_经验交流

一.关于注释 在创建xhtml+CSS网站时,CSS中的注释非常重要.在创建CSS样式时,应当保持随手注释的习惯.一般的,我习惯于使用"/* 注释内容 */"的格式来写注释,因为在EditPlus等具有高亮功能的编辑器里,使用C语言中常用的"/***************/"之类的注释是无意义的,没有必要填充大量无意义内容作为分隔.带有注释的文档作为网站的原始CSS文档,在发布网站的时候,可以使用CSS压缩工具压缩CSS,在输出的CSS中去掉注释以提高文件传输效率

进阶教程:网页CSS样式表设计十条技巧

css|技巧|教程|设计|网页|样式表 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 verdana,serif 现

初学者来看:网页CSS样式表设计十条技巧

css|初学|技巧|设计|网页|样式表 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 verdana,serif 现

CSS样式表高效使用技巧充分利用样式表的强大性

为了提高网页的维护更新效率,我们可以使用样式表,来仅仅改变一个文件,就能达到同时改变几百个网页的外观.为了能充分用好样式表的强大性和灵活性,笔者就怎样有效使用样式表,来谈谈自己的一些心得体会   随着互联网经济的不断发展,互联网上的专业网站.公众服务网站以及企业门户的数量都在飞速的增长,各网站的信息量也呈爆炸性增长的趋势.面对这些庞大的信 息量,我们对网页中每一个栏目的增删,都会是一个很复杂的过程.为了提高网页的维护更新效率,我们可以使用样式表,来仅仅改变一个文件,就能达到同时改变 几百个网页的

非常不错的关于IE与FireFox的js和css几处不同点[转自星火燎原]_经验交流

在蓝色上看到这篇文章的,感觉作者总结的不错,至少有些偶自己也没有真正的认识过.这些 东西的确是应该好好总结一下的,可惜偶这人比较懒,收藏整理于此,便于自己学习! 1.firefox不能对innerText支持. firefox支持innerHTML但却不支持innerText,它支持textContent来实现innerText,不过默认把多余的空格也保留了.如果不用textContent,如果字符串里面不包含HTML代码也可以用innerHTML代替. 2.禁止选取网页内容: 在IE中一般用j

更有效率的css代码编写第1/3页_经验交流

这是许多网页制作者与开发者都关心的问题.大概没有什么魔法,可以保证一下就把你的样式表缩小到百分之多少,但合理的 CSS 编码与组织技巧,的确能够帮助你的更有效率地写出更清晰高效的代码,自然,样式表大小的缩减还能减少下载的时间.   一.排版: 1.关键词和操作符之间加适当的空格. 2.相对独立的程序块与块之间加空行 3.较长的语句.表达式等要分成多行书写. 4.划分出的新行要进行适应的缩进,使排版整齐,语句可读. 5.长表达式要在低优先级操作符处划分新行,操作符放在新行之首. 6.循环.判断等语