前言

1.CSS    cascading   stylesheet  级联样式表 ，外观显示(页面内容显示的方式)。CSS文档以.css作为后缀   
2、w3c推荐页面文件定义
     数据和结构   html
     样式             css
     行为             javascript

正文

CSS(cascading style sheets,层叠式样式表)
作用：设置HTML页面的布局和样式
css的语法
 选择器｛样式属性;样式属性｝

HTML中引入样式

 a.外部样式（外部文件），link标签引入

 
  b.内部样式，style标签引入

<script src="https://code.csdn.net/snippets/343305.js" type="text/javascript"></script>

 c.内联样式，通过style属性设置

注： 样式优先级别

1.内联样式>内部样式>外部样式
   
2. 在新版浏览器中内部样式和外部样式
 根据样式的引入先后顺序，后引入会覆盖前面的样式

选择器

 1.标签选择器
     标签名称｛....｝
 2.ID选择器
     #id ｛...｝
 3.Class选择器
     .class ｛...｝
 4.群组选择器
     标签名称1,标签名称2 ｛.....｝
 5.包涵选择器
     父标签 子标签 ｛...｝
     直接包涵
     父标签 > 子标签 ｛....｝  IE不支持

常用样式属性

 1.字体相关属性

  1）字体颜色  color:颜色英文单词、#十六进制形式  RGB 如：color:#0099ff
 2） 字体大小  font-size
  3）字体样式  font-style
  4）字体  font-family
  5）单词间距  word-spacing
  6）字符间距  letter-spacing

 2.文本相关属性

  1）文本对齐方式  text-align：left/center/right
  2）文本与左边界的距离  text-indent
  3）文本线条  text-decoration:underline 下划线  overline 上划线  line-through 删除线 none 去掉线条

 3.背景相关属性

1）  背景色  background-color:red
2）  引入背景图片  background-image:url(...)
3）  图片平铺方式  background-repeat:no-repeat 不平铺  repeat-x 在水平方向上平铺  repeat-y 在垂直方向上平铺

 4.边框相关的属性

 1） border:线形  粗细  颜色
        线形： solid实线 、 dotted点线、  double双线 和  dashed虚线

 2） border-top:顶层边框
  3）border-bottom:底层边框
  4）border-left:左边框
  5）border-right:右边框

 5.宽度高度属性

  width:
  height:

 6.鼠标相关

  cursor:wait 漏斗形 pointer(hand)  手指型

 7.显示相关的样式

  display:none  隐藏  inline 将div变成span   block 将span转换成div

 8.超链接

  1）a:link{.....}  超链接点击之前的样式设置
  2）a:hover{....}  鼠标浮上的样式设置
  3）a:active{....}  鼠标点击的样式设置
  4）a:visited{....}  访问过后的样式设置

 9.定位相关样式

1）  position:   absolute 绝对定位:相对父标签的左上角坐标进行定位      relative 相对定位：相对当前标签默认出现的位置进行偏移
2）top:设置上边距
3）  left:设置左边距

 10.内外边距

  margin: 外边距
  padding:内边距

总结

     基本语法

      选择器{
         属性:属性值;
         .......
     }  
    选择器
    a.标签选择器
       标签名{
         属性:属性值;
      }
    b.class 选择器
       .选择器的名字{
属性:属性值;
      }
     特殊
      标签名.选择器名字{//只对相对应标签有效果
        属性:属性值;
      }
    c.id  选择器
      #选择器名字{
         属性:属性值;
     }
    d.包含选择器
    标签名1  标签名2{
     属性:属性值；
   }
    对包含在标签1中的标签2有效果
   e.群组选择器
     标签名,标签名{
         属性:属性值；
     }

样式的继承

    子标记会继承父标记的样式