HTML-CSS

1.CSS格式:
  1）行内式：直接在标签中写属性(最经常使用)
  <hl style="color:red"></hl>
  2）内嵌式：
  <style type="text/css">
    hl{
       color:blue;
    }
  <style>
  3）导入式：导入外部的css文件
  <style type="text/css">
    @import"css文件的存放路径（xxx.css）";
  <style>
  4）连接式：引入外部(最经常使用) ，最多引用31个css
  <link herf="mystyle.css" rel="stylesheet" type="text/css" />
2.CSS选择器：
  1）标记选择器
  css:
  h1{color:blue;}
  h1表示选择器，color是属性,blue是值.表示页面全部hl都应用这个样式
  2）类别选择器：
  <h1 class="a"></h1>
  css:  
  .a{color:red;}
  表示全部class等于a的标签都应用这个样式
  3）ID选择器：id在页面中惟一，优先级高于类别选择器
  <h1 id="abc" class="a"></h1>
  css:
  #abc{color：yellow} 
  4）交集选择器
  div.special{.....}
  div#special{.....}
  css:
  p.a{color:red}    同时为p标签和class="a"的标签为red  
  p#abc{color:red}  同时为p标签和id="abc"的标签为red
  5）并集选择器
  div h1.first,p.special{....}
  css:
  p,h1{color:red}  为p标签和h1标签为都red
  6）后代选择器
  div h1.first空格span.firstLetter{....}
  <p class="a">今天<font>天气</font>真好。</p>
  <font>今天真很差</font>
  css:
  p空格font{color:red}  表示p标签里面的标签变红
  7）*选择器：表明页面全部标签都变化，至关于body,传说中的通配符
3.css优先级：
  行内>ID样式>类别样式>标记样式
4.css文字样式：
  文本缩进：text-indent:px %cm
  文本对齐：text-align:center/left/right
  色彩：clor:#FFFFFF,grb(255,255,255)
  字体：font-familly：arial,黑体，宋体
  字体大小：font-size
  字体粗细：font-weight:normal bold light
  字体修饰：text-decoration:underline line-through overline none
  大小写：text-transform
  行高：line-height
5.css背景处理：
  背景固定：background-attachment:scroll/fixed
  背景颜色：background-color:red/....
  背景定位：background-position:top/center/bottom/left/right
  背景图像：background-image:url
  背景重复：background-repeat:no-repeat/repeat-x/repeat-y

6.盒子模型
  <div></div>
 1)content:内容
   width:50px
   heiht:50px
  2)padding:边框与内容间距
   border-top/left/right/bottom:或
   padding:10px;                4个距离都为10px
   padding:10px,20px;           上下距离都为10px，左右距离都为20px
   padding:10px,20px,30px;      上距离都为10px，下距离都为20px，左右距离都为30px
   padding:10px,20px,30px,40px;  上距离都为10px，下距离都为20px，左距离都为30px，右距离都为40px
  3）margin:外边距，与padding相似
  4）border：边框

  border-top/left/right/bottom:
  border-color:red
  border-width:1px
  border-style:dotted/dashed/solid/double
  简写：
  border:1px red dotted
  5）块级元素：占100%的空间
  <div></div>
  6）内联元素：不占100%的空间,宽度与长度由内容长度决定
  <span></span>
  7）浮动属性：
  float:right/left
  8）清除浮动属性：
  clear：left/right/both
  9）css伪类：（连接颜色变化）
   a:link     连接颜色
   a:visited  访问事后的颜色
   a:hover    滑过期的颜色
   a:active   点击时的颜色

7.列表样式：
  1）list-style-type：
  无序：
  disc:
  circle:
  square:
  none:
  有序：
  decimal:
  lower-roman:
  upper-roman:
  lower-alpha:
  upper-alpha:
  2）list-style-image:url
  3）list-style-position:outside/inside
8.css溢出：
  overflow:
  hidden:
  scroll:
  auto:
  visible:
  overflow-x:
  overflow-y:
9.css兼容：
  <!--|if!IE|><!-->除IE外均可识别<!--<!|endif|-->
  <!--|if IE|>全部的IE均可识别<!|endif|-->
  <!--|if IE 6|>仅IE6可识别<!|endif|-->
  <!--|if gte IE 6|>IE6及IE6以上均可识别<!|endif|-->
  <!--|if it IE6|>IE6及IE6如下的均可识别<!|endif|-->