IT热点
  • 电脑硬件
  • 手机
  • MP4
  • 品牌机
  • 办公产品
  • 投影机
  • 服务器
  • 奥林巴斯
  • 尼康
  • 佳能
  • 阿尔卡特
  • 索尼
  • 微星
  • 七彩虹
  • 笔记本
  • 数码相机
  • 数码摄像机
  • 惠普
  • 戴尔
  • 联想
  • 诺基亚
  • 摩托罗拉
  • 索尼爱立信
  • LG
  • 西门子
  • 飞利浦
  • 华硕
  • 硕泰克
  • - - - - - - - - - -
    首页 >> 学院 >> 网页制作 >> 网页制作HTMLCSS
    CSS设计网页时的一些常用规范 [网页制作HTMLCSS]
    网页教学网
    2008-7-7 15:53:00 文/


      4、颜色值的缩写:

      当RGB三个颜色值数值相同时,可缩写颜色值代码。如:

      .menu { color:#ff3333;}

      可缩写为:

      .menu {color:#f33;}

    四.hack书写规范

      因为不同浏览器对W3C标准的支持不一样,各个浏览器对于页面的解释呈视也不尽相同,比如IE在很多情况下就与FF存在3px的差距,对于这些差异性,就需要利用css 的hack来进行调整,当然在没有必要的情况下,最好不要写hack来进行调整,避免因为hack而导致页面出现问题。

      1、 IE6、IE7、Firefox之间的兼容写法:

      写法一:

      IE都能识别*;标准浏览器(如FF)不能识别*;
      IE6能识别*,但不能识别 !important,
      IE7能识别*,也能识别!important;
      FF不能识别*,但能识别!important;
      根据上述表达,同一类/ID下的CSS  hack可写为:
      .searchInput {
      background-color:#333;/*三者皆可*/
      *background-color:#666 !important; /*仅IE7*/
      *background-color:#999; /*仅IE6及IE6以下*/
      }
      一般三者的书写顺序为:FF、IE7、IE6.

      写法二:

      IE6可识别“_”,而IE7及FF皆不能识别,所以当只针对IE6与IE7及FF之间的区别时,可这样书写:
      .searchInput {
      background-color:#333;/*通用*/
      _background-color:#666;/*仅IE6可识别*/
      }

      写法三:

      *+html 与 *html 是IE特有的标签, Firefox 暂不支持。
      .searchInput {background-color:#333;}
      *html .searchInput {background-color:#666;}/*仅IE6*/
      *+html .searchInput {background-color:#555;}/*仅IE7*/

      屏蔽IE浏览器:

      select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。

      *:lang(zh) select {font:12px !important;} /*FF的专用*/
      select:empty {font:12px !important;} /*safari可见*/

      IE6可识别:

      这里主要是通过CSS注释分开一个属性与值,注释在冒号前。

      select { display /*IE6不识别*/:none;}

      IE的if条件hack写法:

      所有的IE可识别:

       Only IE
      只有IE5.0可以识别:
       Only IE 5.0
      IE5.0包换IE5.5都可以识别:
       Only IE 5.0+
      仅IE6可识别:
       Only IE 6-
      IE6以及IE6以下的IE5.x都可识别:
       Only IE 6/+
      仅IE7可识别:
       Only IE 7/-

      2、清除浮动:

      在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的HACK来对父级做一次定义,那么就可以解决这个问题。

      select:after {
      content:”.”;
      display:block;
      height:0;
      clear:both;
      visibility:hidden;
      }

      ———————–分割线———————


    ·IT产品报价大全
    更多相关: 手机
    在百度中更多内容: 手机


    [第一页] [上一页] 1 2 3 4 [最后一页]

    打印此 投稿与建议 返回顶部

    相关文章
    ·CSS初学者常犯错误汇总
    ·了解Dreamweaver CS3的CSS布局规则
    ·CSS教程:简单理解em
    ·CSS教程:汇总CSS初学者的几个技巧
    ·DIV+CSS常见错误汇总