代码学堂(uxuew.cn)提供付费解决PHP WEB开发等技术服务,如果需要请 点击加我QQ:1662935793.
>web前端 > css技巧 > 常用CSS样式技巧总结(精华)

常用CSS样式技巧总结(精华)

css技巧 围观5896次 更新日期:2017-07-06 13:29:15 留下足迹

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 在某些方面比其它标签表现的要好的多。请在需要列对齐的地方用它。
 

· < s cript> 没有 language 这个属性,应该写成这样:< s cript  type="text/ javascrip t" >
 

· 标题是标题,标题的文字是标题的文字。有时候标题不一定需要显示文字,所以:< h1>标题内容</ h1> 改成 < h 1>< 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 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 有效
< 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 :  样式表定义

转载请注明:代码学堂>web前端 > css技巧 > 常用CSS样式技巧总结(精华)

喜欢 (748) or 分享 (109)