css经验总结

oracle的风格特别简单，他的简单风格中却体现出一种不简单的东西。

---------------------------------------------------------------
当radio的名称相同时意味着这两个radio在一组中可以像访问数组一样
来访问这个radio
<script type="text/javascript" language="javascript">
function setRadio(item)
{
  document.{form name}.{radio name[item]}.click();
}
</script>
---------------------------------------------------------------
javascript打开子画面
function openWindow(popupurl, myname, w, h, scroll)
{
  var winl = (screen.width - w) / 2;
  var wint = (screen.height - h) / 2;
  winprops = 'height='+h+',width='+w+', statusbar=no, top='+wint+
             ', left='+winl+', scrollbars='+scroll+',resizable'
  win = window.open(popupurl, myname, winprops)
}

---------------------------------------------------------------
img有个属性hspace,vspace与align一起使用来设定图像与周围文本的距离
一个是左右边缘的空白距离，一个是上下边缘的空白距离。

---------------------------------------------------------------
巢补白(表格填充)(cellpadding) -- 代表巢外面的一个距离,用于隔开巢与巢空间
巢空间(表格间距)(cellspacing) -- 代表表格边框与巢补白的距离,也是巢补白之
间的距离

---------------------------------------------------------------
oracle中通过在一个表格中设置背景色为黑色然后在其中设定一个div
通过设定外层table的cellpadding来汇出边框线，真是细节阿。

以下为转载，总结的内容很不错。

---------------------------------------------------------------
1.善用css缩写可以减少页面文件大小，提高下载速度，同时使代码简洁可读。

p{border:1px solid #cccccc}
/*注意上、右、下、左的书写顺序*/
div{margin:10px 20px 30px 40px}
/*注意，数值与单位不能有空格，每个值之间用空格隔开*/

2.可以同时为一个html元素的class属性设定多个规则(多重class定义)。

CSS：
.a{…}
.b{….}
HTML：
<p class="a b">该元素同时包括a和b中设定的样式</p>

3.明确定义单位，除非值为0 注意：不要在数值和单位之间加空格。
4.区分大小写
5.CSS的最近优先原则
注意：
（1）注意样式的几个优先顺序(优先级由上至下递减)：
--元素style设定
--head区<style></style>中的设定
--外部引用css文件

（2）优先级不是按访问顺序来设定的，而是按css中的声明顺序来设定的。
如上例中<p class="yellow blue">此处显示为黄色</p>也显示为黄色，
因为在css定义中.yellow在.blue的后面。

6.使用子选择器减少id和class的定义
#contain{..}
#contain ul{...}
.contain ul li{...}
<div id="contain">
<ul>
    <li></li>
    <li></li>
</ul>
</div>

7.不要给背景图片路径加引号
将background:url("xxx.gif")改为background:url(xxx.gif)
因为对于部分浏览器加引号反而会引起错误。

8、背景图片的路径是相对与当前css页面的路径。

例如：
有如下目录结构
|--images
   |--xxx.gif
|--css
   |--xx.css
|--index.html
代码内容
index.html引用xx.css文件。
<link rel="stylesheet" href="css/xx.css" />
xx.css要引用xxx.gif图片其写法为：
background:url(../images/xxx.gif)

9.使用组选择器为不同元素应用相同的样式
如h1,h2,h3,div{font-size:16px;font-weight:bold}

10.书写正确的链接样式
当用css定义链接的各种状态时，一定要注意其书写顺序，
即：:link :visited :hover :active。
如果不按照该顺序书写可能无法达到自己希望的效果。为了
记忆该顺序我们抽取每个单词的首字母：L V H A，你可以
通过记忆LoVe,Hate,两个单词来记住其顺序。

11.禁止内容换行与强制内容换行
在表格或层中我们可能希望内容不换行或强制换行，我们可以
通过一些css属性来达到这些要求。
禁止换行：white-space:nowrap
强制换行：word-wrap: break-word; word-break: normal;

12.区别relative和absolute
Absolute，CSS中的写法是：position:absolute; 他的意思是
绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、
LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父
级的做标原始点为原始点。如果设定TRBL并且父级没有设定
position属性，那么当前的absolute则以浏览器左上角为原始
点进行定位，位置将由TRBL决定。
Relative，CSS中的写法是：position:relative;  他的意思是
绝对相对定位，他是参照父级的原始点为原始点，无父级则以
BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding
等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。

13.区别div和span
div是一个块级元素，可以包含段落，表格等内容，用于放置不同的内
容。一般我们在网页通过div来布局定位网页中的每个区块。
span是一个内联元素，没有实际意义，它的存在纯粹是为了应用样式，
给一段内容加上<span></span>标记可以通过在span上定义样式来设定
其内容的样式。

14.区别display和visibility
display:none和visibility:hidden都可以隐藏一个元素
但visibility:hidden只是隐藏了元素的内容，但其使用的位置空间仍然
被保留。而display:none则相当把元素从页面中去除，其占用位置也将
被删除。