css基础

1、css是什么?
  cascading stylesheet(级联样式表),为网页提供表现形式。按照
 w3c规范，设计一个网页，应该将网页的数据与结构写在.html文件里，
 网页的外观写在.css文件，而网页的行为写在.js文件里。这样做的
 目的是将网页的数据、外观、行为分离，方便代码的维护。
 2、css选择器
  1)什么是选择器？
   告诉浏览器，如何将样式施加到匹配的html标记之上。
   语法:
    选择器的名称{
     属性名:属性值;
     ...
    }
  2)五种选择器
   a,标记选择器(简单选择器)
   选择器的名称与html标记一样。
   b,class选择器
    匿名的class选择器:
    .s1{
     font-size:80px;
     color:green;
    }
    标记的class属性值是s1的所有标记起作用。
    有名称的class选择器:
    div.s1{
     font-size:120px;
     color:yellow;
    }
    必须是div这个标记，然后class属性值是s1。
   c,id选择器
    #d1{
     font-style:italic;
     font-weight:900;
    }
    标记的id值必须是d1。在同一个html文件当中，
   标记的id值必须唯一。
   d,选择器的分组
    h1,h2,h3{
     color:blue;
    }
   e,选择器的派生
    #d2 p{
     color:yellow;
     font-size:40px;
    }
 3、样式的优先级
  外部样式：将样式写在.css文件里。
  内部样式：将样式写在.html文件里,需要使用
      <style>标记。
  内联样式: 将样式写在标记里，需要使用style
      属性。
  外部样式 < 内部样式 < 内联样式。
 4、样式的继承
  子标记会继承父标记的样式。
 5、两个关键属性
  1)display
   block:按块标记的方式显示该标记。
   inline:按行内标记的方式显示该标记。
   none:不显示该标记。
  块标记：需要另起一行的标记，比如:
  h1,h2,..h6,form,table,ul,li,img,div,p。
  行内标记：不需要另起一行的标记，比如：
  a, span,strong
  2)position
   static:缺省值。浏览器会将标记按默认的方式
   摆放(从左到右，从上到下)。
   absolute: 相对父标记偏移。
   relative: 先按照默认的方式摆放，然后再偏移。
 6、常用属性
  1)文本相关的属性
  font-size:30px;  //字体大小
  font-style: normal/italic;
  font-weight:900; //粗细
  font-family:"宋体"; //字体
  text-align: left/center/right; //水平对齐
  line-height: 30px;//行高
  cursor: pointer/wait; //光标的形状。
  2)背景
  background-color:#88eeff;//背景颜色
         rgb(100,100,100);
  background-image:url(images/t1.jpg); //背景图片
  background-repeat:no-repeat/repeat-x/repeat-y;//平铺方式
  background-position: 30px 20px;//水平位置 垂直位置
  background-attachment:scroll/fixed;//依附方式
  也可以同时设置背景的多个特性:
  background: 背景颜色 背景图片 平铺方式
   依附方式 水平位置 垂直位置
  3)边框
   border-left: 1px solid red;
   border-right: 2px dotted black;
   border-bottom:
   border-top:
   也可以简化为 border: 1px solid red;
  4)定位
   width:100px; //宽度
   height:200px;//高度
   margin-left:20px;
   margin-right:30px;
   margin-bottom:40px;
   margin-top:50px;
   也可以简化为 margin: top right bottom left;
   比如: margin 50px 30px 40px 20px;
   padding //内边距
   padding-left:20px;
   padding-right:
   padding-bottom:
   padding-top:
   也可以简化为 padding: top right bottom left;
   内边距会将父标记撑开。
  5)浮动
   取消标记独占一行的特性。
   float: left/right; //向左，向右浮动。
   clear:both; //清除浮动的影响
  6)其它
   list-style-type:none; 除掉列表选项的小圆点。
   text-decoration:none/underline;给文本加上下划线。
  7)链接的伪样式
   a:link { color: red} 没有访问时
   a:visited { color: blue} 访问后
   a:active { color: lime} 鼠标点击但还没有放开时
   a:hover { color: aqua} 鼠标指向时