样式表CSS布局经验

  随着时间的积累这里的内容会有增加或者修改,希望下面的东西对后来的标准学习者会有些帮助,或者毫无用处.

  主要的内容是在IE和MOZILLA之间的差异和容易忽视的细节,一些经典应用的最佳实现方法,应该避免违犯的错误.

  由于是自己平时经验的积累,难免会出现一些错误的解释,如有幸被高人看到,请务必指出,先谢过了.

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

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

  一个兼容性调整(IE和Mozilla)的笨办法:

  初学可能会碰到这样一个情况:同样一个标签的属性在IE设置成A显示是正常的,而在Mozilla里必须要设成B才能正常显示,或者两个倒过来.

  临时解决方法:

  选择符 {属性名:B !important ; 属性名:A;}

  如果一组要嵌套的标签之间需要些间距的话,那就留给位于里面的标签的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>

  完美的单象素外框线表格

table {border-collapse:collapse;}
td {border:#000 solid 1px;}

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

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

(0)

相关推荐

  • 样式表CSS布局经验

    随着时间的积累这里的内容会有增加或者修改,希望下面的东西对后来的标准学习者会有些帮助,或者毫无用处. 主要的内容是在IE和MOZILLA之间的差异和容易忽视的细节,一些经典应用的最佳实现方法,应该避免违犯的错误. 由于是自己平时经验的积累,难免会出现一些错误的解释,如有幸被高人看到,请务必指出,先谢过了. ul 标签在Mozilla中默认是有padding值的,而在IE中只有margin有值. 同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次;对一个标签同时使用cla

  • javascript实现的样式表(CSS) 格式整理与压缩

    样式表(CSS) 格式整理与压缩 html,body,form,fieldset,textarea { height:100%; margin:0; padding:0; border:0; font-size:10pt; background:#eee; } form { margin:0 1%; overflow:hidden; } legend { line-height:3em; font-weight:bolder; } button { float:left; margin:1% 1

  • 学习样式表CSS参考-常用的CSS知识

    1. Block和inline元素对比 所有的HTML元素都属于block和inline之一. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. 相反地,inline元素的特点是: 和其他元素都在一行上: 高,行高及顶和底边距不可改变: 宽度就是它的文字或图片的宽度

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

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

  • 详谈 CSS样式表使用:链接/嵌入

    在阿捷的w3cn中,他说: 引用内容在以前,我们通常采用2种方法使用样式表:页面内嵌法:就是将样式表直接写在页面代码的head区.类似这样:<style type="text/css"> <!-- body { background : white ; color : black ; } --> </style>外部调用法:将样式表写在一个独立的.css文件中,然后在页面head区用类似以下代码调用.<link rel="styles

  • Bootstrap 实现表格样式、表单布局的实例代码

    1. 表格的一些样式 举例: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test bootstrap</title> <link rel="stylesheet" href="./css

  • JS函数实现动态添加CSS样式表文件

    先给出函数. 复制代码 代码如下: varaddSheet=function(){ vardoc,cssCode; if(arguments.length==1){ doc=document; cssCode=arguments[0] }elseif(arguments.length==2){ doc=arguments[0]; cssCode=arguments[1]; }else{ alert("addSheet函数最多接受两个参数!"); } if(!+"v1"

  • 浅谈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

  • 获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)

    可是DOM.style这种写法只能访问<DOM style=""></DOM>,这样在标签里内置的样式,如果样式写在<style type="text/css"></style>,或者.css文件里,那么就办法读到样式了. 其实呢,还有别的方法可以读到这些样式信息,方法有两种,一种是通过document.styleSheets对象,另一种是通过"最终样式"对象.其中 IE中这个对象叫做current

  • JS 控制CSS样式表

    下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css"> .orig { display: none; } </style> 你想要改变把他的display属性由none改为inline. 解决办法: 在IE里: document.styleSheets[0].rules[0].style.display = "inline"; 在firef

随机推荐