常用CSS技巧

11.17 CSS英文命名

在写CSS的时候，经常为一些名字而发愁，比如说菜单后面的背景要用什么词来表示呢？大家都知道，菜单一般用menu来表示，那么菜单后面的背景我会用menubg，CSS里就写#menubg {…}。
还有一些其他的比如搜索框之类的应该怎么命名呢？下面有一些可以算得上是标准的命名吧。如果有错误或者遗漏请朋友们帮忙补上，谢谢！

 

页头：header
登录条：loginbar
标志：logo
侧栏：sidebar
广告：banner
导航：nav
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
滚动：scroll
页面主体：main
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
热点：hot
新闻：news
下载：download
注册：regsiter
状态：status
按钮：btn
投票：vote
合作伙伴：partner
友情链接：friendlink
页脚：footer
版权：copyright
提交：submit
文本框：textbox
统计：count

 

以上结构可以组合使用，例如：左列标题lefttitle；底部导航footernav 书写原则是： 1.一律小写； 2.尽量用英文； 3.不加中杠和下划线； 4.尽量不缩写，除非一看就明白的单词。

11.17 网易的CSS写法

 

/* 全局CSS定义 */
body { text-align: center; font-family:"宋体", arial;margin:0; padding:0; background: #FFF; font-size:12px; color:#000;}
div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0;}
h1,h2,h3,h4,h5,h6 { margin:0; padding:0;}
table,td,tr,th{font-size:12px;}
/* 链接颜色 */
a:link {color: #1f3a87; text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
a:hover {color: #bc2931; text-decoration:underline;}
a:active {color: #bc2931;}
/* 颜色属性 [定义规则，小写c加颜色名称] */
.cRed,a.cRed:link,a.cRed:visited{ color:Red; }
.cBlue,a.cBlue:link,a.cBlue:visited{color:#1f3a87;}
.cDRed,a.cDRed:link,a.cDRed:visited{ color:#bc2931;}
.cGray,a.cGray:link,a.cGray:visited{ color: #4F544D;}
.cDGray,a.cDGray:link,a.cDGray:visited{ color: #666;}
.cWhite,a.cWhite:link,a.cWhite:visited{ color:#fff;}
.cBlack,a.cBlack:link,a.cBlack:visited{color:#000;}
a.cBlack:hover{color:#bc2931;}
.cYellow,a.cYellow:link,a.cYellow:visited{color:#ff0;}
.cGreen,a.cGreen:link,a.cGreen:visited{color:#008000;}
/* 字体属性 [定义规则，小写f加属性名称] */
.fB {font-weight: bold;}
.fI {font-style: italic;}
/* 字体大小*/
.f12px{ font-size:12px;}
.f14px{ font-size:14px;}
/* 其他属性 */
.left{ float: left;}
.right{ float: right;}
.clear{ clear: both; font-size:1px; width:1px; visibility: hidden; }
.hidden {display: none;}
.unLine ,.unLine a{text-decoration: none;}
.noBorder{border:none; }

 

页面上所有图片自动缩放的代码

 

<script language="JavaScript">
var imgObj;
for(i = 0; i < document.all.length; i++)
{
if(document.all(i).tagName.toLowerCase()=="img")
{
  imgObj = document.all(i) //建议只判断高度或者宽度其中一个，那样可以自动按比例缩放
  if (imgObj.height>500) //判断图片的高度，如果大于500，则设置为500，值可以自己修改
  {
   imgObj.height=500
  }
  if (imgObj.width>700) //判断图片的宽度，如果大于700，则设置为700，值可以自己修改
  {
   imgObj.width=700
  }
}
}
</script>

 

滚动条的颜色定义

 

scrollbar-face-color: #E0D5BE;<!--//滚动条页面颜色设定-->
scrollbar-track-color: #EBE4D3;<!--//滚动条底版颜色设定-->
scrollbar-highlight-color: #ffffff;<!--//滚动条斜面和左面颜色设定-->
scrollbar-shadow-color: #ffffff;<!--//滚动条下斜面和右面颜色设定-->
scrollbar-3dlight-color: #ffffff;<!--//滚动条上边和左边的边沿颜色设定-->
scrollbar-dark-shadow-color: #ffffff;<!--//滚动条下边和右边的边沿颜色设定-->
scrollbar-arrow-color: #978C71;<!--//滚动条两端箭头颜色设定-->

 

给图片加边框
在CSS文件中对img定义边界（border），例如我在CSS中定义了：

 

img.framed {
padding: 6px;
border: 1px solid #CCC;
background-color: #FFF; }

 

那么在HTML文件中，针对嵌入的图片定义class="framed"就会有相应的边框效果。

 

<img src="......" class="framed" >

 

在FF下一个自适应高度的简单做法

 

加上
height: 100%;
overflow: auto;

 

自动换行的简单做法

 

        table-layout: fixed;
        WORD-BREAK: break-all;
        WORD-WRAP: break-word;


 

怎样用CSS把层做成半透明？

 

用下面的样式表定义你的层
.alpha { filter: Alpha(Opacity=50, FinishOpacity=50, Style=0, StartX=0, StartY=0, FinishX=100, FinishY=100｝

 

解释：
Opacity=开始的不透明度(100的话就不透明了)
FinishOpacity=结束的不透明度(100的话就不透明了)
Style=样式，从0开始，1.2.3....有均匀透明啊，放射形状透明啊...
StartX=开始透明的X坐标，基本上为图片、层的左上角（0）
StartY= 开始透明的Y坐标，基本上也为图片、层的左上角（0）
FinishX=结束透明的X坐标，基本上也图片、层的右下（图片、层的宽度）
FinishY=结束透明的Y坐标，基本上也为图片、层的右下角（图片、层的高度）

再谈一下关于清除浮动(闭合浮动元素)最简单的方法
最简单的清除浮动(闭合浮动元素的方法是在父级容器内,浮动对象下面再插入一个额外的DIV标签，来清除浮动（clear）,浏览器兼容性好，没有HACKS，缺点是要增加一个无语义的标签,但在有的布局下,可使这个只起到清除作用的DIV,具有语义化.
先看代码

 

<div class="wrap">
    <div id="sideright">
      <p>......</p>
    </div>
    <div id="sideleft">
    <p>......</p>
    </div>
    <div id="foot">
      <address>
      http://www.forest53.com
      </address>
    </div>
  </div>

其中WRAP是父级容器,sideright和sideleft是左、右部分的内容，foot里放了内容，在左、右内容的下面，并在父级容器里面，起到了清除浮动DIV的作用。

 

有什么能控制滚动条大小的吗？

 

<div style="overflow:auto;width:200px; height:150px; zoom:0.5;">
<div style="width:2000px; height:1500px; zoom:2;">
有什么能控制滚动条大小的吗
</div>
</div>

 

同时调用几个地方的外部CSS

 

main.css
@import url(font.css);
@import url(nav.css);
@import url(form.css);
@import url(footer.css);
@import url(ad.css);

 

 

<strong>各浏览器padding、margin的差异</strong>
margin和padding总是有可能要用到，而产生的问题如何解决呢？由于浏览器解释容器宽度的方法不同：
IE 6.0 Firefox Opera等是
真实宽度=width+padding+border+margin
IE5.X
真实宽度=width-padding-border-margin

 

解决的方法是:

 

div.content {
width:400px; //这个是错误的width，所有浏览器都读到了
voice-family: "/"}/""; //IE5.X/win忽略了"/"}/""后的内容
voice-family:inherit;
width:300px; //包括IE6/win在内的部分浏览器读到这句，新的数值(300px)覆盖掉了旧的
}
html>body .content { //html>body是CSS2的写法
width:300px; //支持CSS2该写法的浏览器(非IE5)有幸读到了这一句
}
div.content {
width:300px !important; //这个是正确的width，大部分支持!important标记的浏览器使用这里的数值
width(空格)/**/:400px; //IE6/win不解析这句，所以IE6/win仍然认为width的值是300px；而IE5.X/win读到这句，新的数值(400px)覆盖掉了旧的，因为!important标记对他们不起作用
}
html>body .content { //html>body是CSS2的写法
width:300px; //支持CSS2该写法的浏览器有幸读到了这一句
}

 

关于W3C检验时候的DIV元素封闭

所有的标记都必须要有一个相应的结束标记
以前在HTML中，你可以打开许多标签，例如<p>和<li>而不一定写对应的</p>和</li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个"/"来关闭它。例如:

 

 

<br /><img height="80" alt="网页设计师" src="../images/logo_w3cn_200x80.gif" width="200" />

 

成对的标签应有打开标签和关闭标签,例如：

 

<table><tr><td> </td></tr></table>

 

没有成对关闭标签的元素 都要加 /

 

如：
<base>
<br>
<hr>
<img>
<input>
<link>
<meta>
<nobr>