css 学习笔记

1.web标准：
 (1).结构： XHTML
 (2).表现： CSS
 (3).行为： JavaScript

2. web 标准的好处：
 --> 一次创建,随处使用.
 -->维护和改版方便.
 -->缩减页面代码,提高显示速度.
 -->加速开发.
 -->多浏览器,多平台兼容.
 -->更容易被搜索引擎搜索到.

**************************** CSS 盒模型 ****************************
3. background-color:#ccc
   background-image:url{logon_03.gif}
   background-repeat:no-repeat | repeat-y   其中 no-repeat 表示背景图片不要重复.repeat-y表示要纵向重复.
  
   缩写成一句:  background:url{logon_03.gif} #c00 no-repeat center| right bottom;  并且把图片放在中间(右下角).

   margin:50px                   外边框,也就是 this.盒和其他元素之间的距离为 50px.
   margin-top:50px;          距离上边框为50px
   margin:50px  20px  50px 10px  上 - 右 - 下 - 左
   padding:20px    表示 this.盒和内部内容之间的距离为20px.(同样的也有top,left等之分).

   border:10px  solid(实线) | dotted(虚线)  green     设计师最常用的是 1px.

*. 如何给按钮加图标:
 定义 css:
 .btn .bsave a{ background:url(images/bbt_save_off.gif) no-repeat; }    //默认的按钮图标
 .btn .bsave a:hover { background:url(images/bbt_save_on.gif) no-repeat; color:#D2B21C}//当鼠标放到按钮上时,显示的图标

**************************** 内联元素和块级元素 ****************************

4. 块级元素: 元素默认带回行的    如 table,div
   内联元素: 元素在同一行显示    如 div.

 #定义出来的是 id,   一个页面只能使用一次,  先找到内容/结构,再给它定义样式.
    .定义出来的是class ,可以多次引用,          先定义好一种样式,再套给多个结构/内容.

5. CSS 布局三大规则:
 @ 块级元素横向排列要浮动(float)
 @ 不需要浮动时使用clear:both
 @ 所有非内容图片全部用背景.

6.  一个 DIV (CSS盒模型):
 margin: 外边框
 background-color:
 background-image:
 padding: 内边框
 content:
 border:  边框
7.  1 em = 1 字体的高度(是变化的,如果屏幕上字体大小为 12px,呢 1em=12px,如果字体大小为 16px,呢1em=16px)
8.  解决 IE 默认 10 px的问题:
 body{margin:0 px;}]
9.  padding: 盒边框和内容之间的距离:
 padding-top,padding-left,
10.  background-image:url(logo.gif);
 background-repeat:no-repeat / repeat-y / repeat-x;
 缩写:
 background:url(logo.gif)  #EEE repeat-x [center / right bottom]; 其中center是让背景图片居中,或者右下角.

11.  border: 1px solid/dotted(虚线)  green;       //  细线描边 .
12.  原则上不采用绝对定位 .
13.  # --> ID ,   . --> class.
14.  background-image:url(1.gif)
   background-repeat:no-repeat/ repeat-x/ repeat-y.
   一句话:
   background:url(1.gif) #EEE repeat-x;
   background:url(1.gif) #EEE no-repeat center/right bottom/;
   
15.  DIV  border:1px solid/dotted  green;
16.  有图片的按钮：
   .btn .bsave a{background:url(images/bt_save_off.gif) no-repeat;color:#D2B21C}
   .btn .bsave a:hover{background:url(images/bt_save_on.gif) no-repeat;color:#D2B21C;}
17.  原则上不采用绝对定位：(系统默认是相对定位).
18.  不需要浮动时：
   clear:both /left   清除(左右)/左.
20.  CSS 技巧：
   *{margin:0px;padding:0px;}
21.  建议多用 padding 少用 margin : 因为 mazilla 和 IE 差别比较大。
22.  HTMl 4.0 中 设置
   <colgroup align="center">
   <colgroup align="center">
   表示第一列居中,第二列居左。
   <rowgroup align="center">
   <rowgroup align="right">
   表示第一行居中,第二行居左。