css 基础

什么是css？
css选择器：
 经常使用的选择器：
 一、标记选择器（简单选择器）
  标记的名称{
   属性名：属性值
  }
  
  body{
   color:red；
  }
  
 二、class选择器
  a、第一种形式 匿名的class选择器
    .选择器的名称{
   属性名：属性值;
    }
   
    .s1{
   font-style:
    }
   
  b、第二种形式 有命的class选择器
  标记的名称  .选择器的名称{
   属性名：属性值
  }
  
    div .s1{
   font-style:
    } 
   
    三、id选择器
  #选择器的名称{
   属性名：属性值
  }
  
     #s1{
   font-style:
    } 
   
    四、选择器的分组
  h1,h2,h3{
   
   color:green;
  }
  
 五、选择器的派生
  #d2 p{
   font-size :120px;
  }
  表示id为d2的标记内部的全部p标记的字体为120px
  
样式的优先级：
 1） 默认样式：浏览器默认的样式
 2） 外部样式：样式写在一个.csss文件里
 3） 内部样式：样式写在html文件里
 4） 内联样式：样式写在标记里
 从上到下，优先级愈来愈高
 
 
两个关键属性：
 一、display
   display的3个值
   none：不显示该标记
   block：按块标记的方式显示
   inline：按行内标记的方式来显示
 
 二、position
  position的3个值
   static（缺省值）：浏览器在默认状况下，会按从左到右，从上到下依次摆放各个标记
   absolute：先对父标记偏移
   relative：先按照默认的方式摆放，而后在偏移
   
快标记和行内标记
 一、块标记（另起一行）
  常见的块标记
  div
  p
  img
  form
  table
  h1...h6
  ul
  li
 二、行内标记（不用另起一行）
  行见的行内标记
  span
  strong
  a
  
一些常见的属性：
 文本
 font-size:30px;             字体大小
 font-family : "宋体"         字体
 font-style：italic/normal 风格
 font-weight：100             粗细100~900
 text-align：center           对齐方式 left , right , center
 text-decoration:underline;  加下划线
 cursor:pointer              光标的形状
  
  
 背景
 background-color : red                       背景颜色
 background-image :url(images/b1.jpg)         背景图片
 background-repeat:no-repeat                  平铺方式 repeat-x repeat-y
 background-position: 20px 10px;              位置
 background-attachment : fixed                 依附方式 scroll(缺省)
 
 也能够简化为：
 background : 背景颜色 背景图片 平铺方式 依附方式 水平位置 垂直位置
  
 边框
 border : 1px solid red;
 border-left;
 border-right;
 border-bottom;
 border-top;
 
 定位
 width : 100px;
 height: 200px;
 margin:                                   //外边距
   margin-left : 20px;
   margin-top  : 30px;
   margin-right: 40px;
   margin-bottom : 50 px;
 也能够简化为：
 margin： 30px 40px 50px 20px     顶右底左
 
 此外，还有这样一些形式
 margin ： 0px；
 margin：20px auto;  //上下各20px，左右平均分配。通常用于居中
 
 padding：                                    //内边距
  padding-left ：  20px;
  padding-top  :  30px;
  padding-right：  40px；
  padding-bottom: 50px;
  
 也能够简化为：
 padding:30px 40px 50px 20px;    顶右底左
 
 列表相关：list-style-type : none;
 
 浮动（即取消标记的独占一行的特性。浮动以后，其位置能够被其余标记使用）
 
 float:left;            //浮动 right
 clear:both;            //取消浮动的影响，指的是告诉浏览器，虽然浮动的标记让出了位置，可是不可以使用
 
  
 连接的伪样式：
 a : link {color : red } 没有访问时
 a ： visited {color : blue} 访问后
 a : active {color : lime} 鼠标立即但尚未放开时
 a : hover {color : aqua} 鼠标指向时