*{padding:0px;margin:0px;font:12px normal "microsoft yahei";}/*normal是使用默认粗细的意思*/

      #tabs{width:290px;height:150px;padding:5px;margin:20px;}

      #tabs ul{list-style:none;display:block;height:30px;line-height:30px;border-bottom:2px saddlebrown solid;}/* 定义tabs 的子后代ullist-style意思是去掉列表默认的小圆点，display：block定义块状元素，块状元素的长宽高都可以定义，line-height是定义行高，后面是定义上边边框为2px 马鞍棕色 实心的线*/

      #tabs ul li{background:#fff;cursor:pointer;float:left;list-style:none;height:28px;line-height:28px;margin:0px 3px;border:1px solid #aaaaaa;border-bottom:none;display:inline-block;width:60px;text-align:center; }/*cursor:pointer意思就是鼠标放上去变成小手的形状，高度和行高的值一样的话就垂直居中了，margin设置了距离边界的距离上下为0左右为3 然后是设置边框 下边框为空 display定义为内联块状元素，然后设置宽度 很文本居中 */

      #tabs ul li.on{border-top:2px solid saddlebrown;border-bottom:2px solid #fff ;}/*说白了这个就是设置第一个选择框的样式，不过选择器也是有优先级的，加入都为同一个元素设置颜色就会显示id的 然后是.xx  其次是便签选择器*/

     #tabs div{height:120px;line-height:25px;border:1px solid #336699;border-top:none;padding:5px;  }     

     .hide{display:none;} /*此元素不会被显示*/  

---------------来自 程序爱好者11 的笔记 http://www.imooc.com/note/10?sort=sugg&ower=all

你说的把不同整体连起来 是这个 *{padding:0px;margin:0px;font:12px normal "microsoft yahei";}

里面的margin:0px; 通俗来说意思是外部没间隔，*是默认所有节点都会采用的样式