前几天,一朋友说他要公司里的人培训
css,让我写一份类似的东西给他,现在我把他贴出来,供大家参考下
样式我也不是用的特别好,希望大家看了后别对我大喷口水
,大家一起学习.
1、将公用的css表独立成单独文件（即每个页面都要使用到这些样式效果），这样可以提高样式的使用效率
(建议这个独立文件名为 global.css)
比如：
body,td,th {font-size: 12px; font-family:Arial, Helvetica, sans-serif}
body {margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: underline;}
a:active {text-decoration: none;}
可以放在这个独立文件中
调用这个文件可以是用
<link href="../Style/Index.css" rel="stylesheet" type="text/css">
或直接放在样式文件
<style type="text/css">
<!--
@import url("sitefiles/localhost/Style/top.css");
@import url("sitefiles/localhost/Style/index.css");
-->
</style>
2、强制换行
#wrap{word-break:break-all; width:200px;}
注：#wrap和.wrap的区别在于,#对应的是id，.对应的是.class。
Id是在使用js效果的时候用的比较经常，建议在定义大块时，使用id，使用小块时用.class
例如：
<style type="text/css">
<!--
#wrap{word-break:break-all; width:200px;}
.wrap1{word-break:break-all; width:200px;}
-->
</style>
<div id=’wrap’>aaaaa</div>
<div class=’wrap1’ >bbbbb</div>
3、左右两边对起
.justify{text-align:justify;text-justify : }
4、float的使用
Float浮动看www.zhong-design.com 的使用
5、float结合li的使用
以个人的使用经验来说，我在使用这个的比较多的是在导航的制作，
以www.zhong-design.com 为例子，他的导航的效果
<div class=’menu’>
<ul>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
</ul>
</div>
<div class=’clear’></div>
<style type="text/css">
<!--
.menu{width:200px; margin-top:10px; margin-right:10px; margin-buttom:10px; margin-left:10px;
}
.menu ul{ margin:0; padding:0; list-style-type:none }
.menu ul li{width:99px; margin-right:1px; color:#ff0000; background:#000; float:left}
.clear{clear:both}/*使用完float必须清除浮动，否则在其他浏览器的下会出现结构混乱的情况*/
-->
</style>
margin-top:10px; margin-right:10px; margin-buttom:10px; margin-left:10px;这段可以简写成margin:10px 或者margin:10px 10px 10px 10px（规则：上右下左）
padding类似用法
margin对应的是块的外边，padding对应的是块的内容
例如：
<div class=’info’></div>
<style type="text/css">
<!--
.menu{width:200px; margin:10px; border:1px solid #000; padding:15px}
-->
</style>
实际看到的是，menu的长度230px，所以我们只需要他显示200个px的时候，需要减去padding-left:15px和padding-right:15px 即30px
所以.menu{width:2170px; margin:10px; border:1px solid #000; padding:15px}
6、连接样式的定义
例子：
<div class=”Class_Link”><a href=’Index.asp’>**科技</a></div>
.Class_Link{height:24px; line-height:24px; width:100px; text-algin:center}
.Class_Link a{color:ff0000; text-decoration: none;}
.Class_Link a:link{color:ff0000; text-decoration: none;}
.Class_Link a:hover{color:fff; text-decoration: none;}
.Class_Link a:visited {text-decoration: none;}
.Class_Link a:active {text-decoration: none;}
7、浏览器兼容
区别IE6与FF：background:orange;*background:blue;
区别IE6与IE7： background:green
!important;background:blue;
区别IE7与FF：background:orange; *background:green;
区别FF，IE7，IE6： background:orange;*background:green
!important;*background:blue;
注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
| IE6 | IE7 | FF |
* | √ | √ | × |
!important | × | √ | √ |
另外再补充一个，下划线"_",
IE6支持下划线，IE7和firefox均不支持下划线。
于是大家还可以这样来区分IE6，IE7，firefox
: background:orange;*background:green;_background:blue;
注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。
8、超过固定长度隐藏
.overflow {OVERFLOW: hidden; WHITE-SPACE: nowrap; TEXT-OVERFLOW: ellipsis; WIDTH: 278px}
即超文字长度超过278px后，自动隐藏掉，隐藏的信息’…’结束,但是在该功能虽然火狐或者其他浏览器功能还是存在，但是他的’…’还是会显示成隐藏掉的文字
