1、css层叠样式表
2、 div+css是网站标准 
    div是用于存放内容的（文字、图片等等）
    css主要用于说明div中的内容的样式（大小，颜，背景，位置）
  好处：1、减少大量的table，tr，td  html变简单
          2、内容和样式分离
        3、符合搜索引擎的喜好
        4、节约带宽
3、初识CSS
  〈span font-size:N;color:Color;等等〉〈/span〉
    <元素名 style=“属性名：属性值；”/>
    使用CSS可以统一网站风格
    写五个栏目
    几个图片是灰  img{ filter:gray;}  a:link  a:hover鼠标停在上面
4、选择器  <link type="text/css"  rel="stylesheet" href="my.css"/>
    .style就是类选择器
      .类选择器名{
    属性名：属性值；
    } 
    案例：五个新闻
   
    id选择器
    基本用法：
      #id选择器名{
    属性名：属性值；
    }
    <元素名 id=“id选择器的名称”></元素名>
    html选择器
    body{
    属性名：属性值；
    }
  结论：当一个元素同时被id选择器，类选择器，html选择器使用时
        id>类>html  选择器
css鼠标点击样式    a:link {} 
    a:hover{} 鼠标放在超链接上面
    a:visited {}  超链接被点击完之后
    通配符选择器  *{  margin:  padding:  }设置页面距离
    父子选择器  #style    #style+已经存在的标记 如span
      <span id="">123<span>456</span></span>
      **父子选择器可以有多级
    *父子选择器适用于id选择器和类选择器
    一个元素最多有一个id选择器，但可以有多个类选择器
    一个元素有多个类选择器时，用空格分开  当发生冲突时 哪个CSS类型写在后面就以谁为主
    <span class="style1 style2 style3"></span>
    在有些CSS中，我们可以把多个类选择器或者ID选择器共同的部分提出，写在一起，可以简化CSS文件
    .style1,.style2,.style3{
        color:....;
    }
5、块元素和行内元素
  行内元素又叫内联元素（inline element） 
    常见的有元素<span><a>  只覆盖内容宽度，默认不会换行，行内元素一般放文本或其他的行内元素
  块元素（block element）
    常见的有元素<div><p> 不管内容多少，他都要换行，同时占满整行  可以放文本，行内元素，块元素
  将行内元素与块元素相互转换
    display：block；所有使用到某某样式的内容都转换为块元素显示
    display：inline；所有使用到某某样式的内容都转换为行内元素显示
6、标准流和非标准流
  标准流：在网页布局中，写在前面的元素出现在前面，写在后面的元素显示在后面，默认的布局方式
  非标准流：在实际网页布局中，我们有时需要使用非标准的流的方式布局（让某个元素脱离他本身的位置）
        CSS核心内容
7、盒子模型（content \border）
  两个元素间的距离称为margin；  margin：0 auto；上下边距为0，左右居中
  内外两元素之间的距离称为padding（填充）；
  border：9px solid color；指定了宽度，样式，颜
  a、html中元素都可以看成是一个盒子
  b、盒子模型参照物不一样，则使用的CSS属性也就不一样
  c、如果不希望破坏外观，则尽量使用margin，因为padding会撑大盒子，margin如果过大，盒子内容会被挤到外面去，但是盒子大小不变
8、list-style-type： none 用于去除ul中的列表项的圆点
9、浮动
  浮动必要性：因为默认情况下div是纵向排列的，如果想改变方向，则浮动就很重要了
  float: left/right让元素尽量向某个方向浮动，直到碰到他的父元素的边框为止
  特别注意：如果一行不够排下所有元素，会自动换行，如果某个div过大，则会卡住别的div
10、清除浮动
    clear：left/right/both 
11、定位
    position属性：static（默认）/relative/absolute/fixed/inherit
    ******先实践后回头看理论******
    relative：相对原来的位置移动
      元素框偏移某个距离，元素本身形状不变化，它本身的所占空间仍保留
    例如： #s{  position:relative;  left:50px;top:10px;}
    absolute:绝对定位，参照物变为离自己最近的非标准流的元素
      元素从文档流完全删除，并相对于其包含块定位，元素原来所占空间会关闭
        元素从原来位置脱离，并让出自己的空间，后面的空间补上
    fixed：其包含块固定为body，视窗本身
    inherit：继承父类属性

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。