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

(0)

相关推荐

  • CSS样式表常用小技巧收藏

    · ul 标签在 Mozilla 中默认是有 padding 值的,而在 IE 中只有 margin 有值. · 同一个的 class 选择符可以在一个文档中重复出现,而 id 选择符却只能出现一次:对一个标签同时使用 class和 id 进行 CSS 定义,如果定义有重复,id 选择符做的定义有效. · 初学可能会碰到这样一个情况,同样一个标签的属性在 IE 设置成 A 显示是正常的,而在 Mozilla 里必须要设成 B 才能正常显示,或者两个倒过来. 临时解决方法:选择符 {属性名:B !

  • 如何用JavaScript实现动态修改CSS样式表

    看过我写的<用JavaScript动态建立或增加CSS样式表的实现方法>之后,你就很容易想明白如何修改CSS样式表了. 正好今天在论坛碰到一位朋友问这样的一个问题: <style> .ls{width=120px;} </style> <script> //在这里加一句来改变.ls中width的值,如何写 </script> 有的朋友回答:"如果使用.ls的对象很多的话,用JS确实不方便, jquery方便,$(".ls&qu

  • 网页编辑中CSS样式表技巧总结

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

  • 浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预

    -任何标签的任何属性都可以修改! -HTML里是怎么写, JS就怎么写 以下是一段js 作用于 css 的 href的 代码 <link id="l1" rel="stylesheet" type="text/css" href="css1.css" rel="external nofollow" /> <script> function skin1() { var oL=docum

  • 用JavaScript动态建立或增加CSS样式表的实现方法

    1.简单的方法,不管不顾,直接这样就可以: document.createStyleSheet().cssText = '标签{color:red;' + // 这个注释只在当前JS中帮助理解,并不会写入CSS中 'width:300px;height:150px}' + '.类名{--}' + '#ID们{--}' ; //完活.我喜欢分号这样写,和指令书写的起始位置对齐比较好一点,尤其是后面有其它语句的时候. 2.完善一点的方法,防止重复添加,可以通过添加样式表ID并对其判断来实现: if

  • js获取页面引用的css样式表中的属性值方法(推荐)

    如下所示: function getStyle(node, property){ if (node.style[property]) { return node.style[property]; } else if (node.currentStyle) { return node.currentStyle[property]; } else if (document.defaultView && document.defaultView.getComputedStyle) { var s

  • Android ListView常用小技巧汇总

    ListView在我们Android项目中的地位是有目共睹的,相信几乎每一个App中都有它的身影. ListView主要是用列表形式来加载数据,在特定情况下需要实现一些特殊功能:如刷新数据,加载数据,实现动画效果等. 作为我们常用的控件,有哪些需要注意的呢? **为ListView的每一Item设置分隔线 第一种方法:也是最简单地方法,在布局文件中设置ListView的 divider属性 如:android:divider="@color/black" 第二种方法:设置android

  • CSS样式表规划与管理的经验总结

    彻底放弃表格布局,使用xhtml+CSS建站也已经有一年多了.一年多的实践也积累了一定的经验,现在写这篇文章来总结一下.在使用xhtml+CSS建站的过程中有一个比较关键的问题:网站的CSS样式表规划与管理. 我的CSS管理进化史 在最初使用CSS来控制网站样式的时候,并不清楚CSS管理规划之类的东西,所写的CSS基本上都是按照需要,随时添加,刚开始还不觉得有什么不好,但是后来越加越多,越改越乱,虽然有一些注释,但到最后还是变得让我自己看着都头疼.那个时候,一个网站所有的CSS都在一个文件中,没

  • ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】

    本文实例讲述了ES6常用小技巧.分享给大家供大家参考,具体如下: 1- 数组去重 var arr = [1,2,3,4,3,4]; var arr2 = [...new Set(arr)]; 这个时候arr2就是去重后的数组~ 2- 交换两个变量的值 let [x,y] = [1,2]; [y,x] = [x,y]; console.log(y); 3- 获取字符串中的某个字符 let arr= "hellomybo"; console.log(arr[3]); 4- 使用箭头函数代替

  • Pandas数据分析的一些常用小技巧

    Pandas小技巧 import pandas as pd pandas生成数据 d = {"sex": ["male", "female", "male", "female"], "color": ["red", "green", "blue", "yellow"], "age": [1

随机推荐