CSS样式表常用小技巧收藏

(编辑:jimmy 日期: 2024/12/24 浏览:2)

· 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 :  样式表定义

一句话新闻

一文看懂荣耀MagicBook Pro 16
荣耀猎人回归!七大亮点看懂不只是轻薄本,更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。
众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?