搜浪干货soola dry cargo
网站首页 他仍然痴心不改2016里约奥运女排决赛 >网站重构常用CSS技巧分析

网站重构常用CSS技巧分析?

时间:2012-12-21   
导读:网站重构常用CSS技巧分析

  纸上得来终觉浅,很多东西只有当我们碰到了,我们才能真正地体验到其真谛。用了Div+Css这么久,但对于一些Css的缩写却从未总结过。今天终于下定决心,将一些Css常用技巧进行总结。一方面为了更方便的使用Css,另一方面可以帮助减少Css文件的大小,更加易于阅读。

  一,min-width元素
  页面的最小宽度min-width是非常方便的CSS命令,可以指定元素最小也不能小于某个宽度,这样就能保证排版的正确性。但IE不认得这个,而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能使用,可以把它放到标签下,然后为div指定一个类:
  CSS这样设计:#container{min-width:600px;width:expression(document.body.clientWidth < 600? "600px":"auto" );}
  在这代码中,第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。

  二,Div+Css的结合应用
  当在XHTML中使用CSS区分大小写,CSS里定义的元素名称是区分大小写的。为了避免这种错误,建议大家所有的定义名称都采用小写。
  同时 ,class和id的值在HTML和XHTML中也区分大小写。如果一定要大小写混合写,请仔细确认你在CSS的定义和XHTML里的标签是一致的。

  三,inline和Block元素
  1,inline元素的特点:
  和其他元素都在一行上,高度、行高及顶和底边距不可改变;宽度就是文字或图片的宽度,不可改变。
  2,block元素的特点:
  总是在新行上开始,高度,行高以及顶和底边距都可控制;宽度缺省是它的容器的100%,除非设定一个度和是块元素的例子。
  用display:inline 或display:block命令就可以改变一个元素的这一特性。什么时候需要改变这一属性呢?
  让一个inline元素从新行开始,让块元素和其他元素保持在一行上,控制inline元素的宽度及高度。无须设定宽度,即可为一个块元素设定与文字同宽的背景色。

  四,公共样式的应用
当给一个元素定义样式,用class会比用id更好。因为id在页面是唯一的,而用class则可以多次使用,这样可以省略前面的元素限定。

分享到:QQ空间新浪微博腾讯微博人人网微信
返回首页 回顶部