[HeadFirst-HTMLCSS入门][第十章div,span]

新元素

• <div>逻辑容器

  能进行分组，等于用一个大的盒子进行包装

• <span> 内联字符的逻辑分组

• text-align 改变所有内联元素位置。

  属性

  • center 居中

行高

• 相对于自身高度的行间距

  #elixirs{
          line-height :1;
  }
  

子孙选择器

• 基本

  div h2{
      color: black;
  }
  

• 基于ID和类的 子孙选择器

  • 选择所有孩子

    #elixirs h2{
        color:black;
    }
    

  • 选择直系孩子

    #elixirs>h2
    

  • 选择孩子的孩子

    #elixirs blockquote h2{
        color:blue;
    }
    

伪类

• <a>

  a:link{
      color: green;
  }
  a:visited{
      color: red;
  }
  a:hover{
      color: yellow;
  }
  

  • link 本来的
  • visited 访问过后
  • hover 指到时
  • focus 聚焦时
  • active

• 很多元素都有伪类

层叠

• !important 读者层次表强行覆盖

改进输入方式

• padding 顶部逆时针

  padding: 0px 20px 30px 10px;
  

• margin 同理

  margin:0px 20px 30px 10px
  

• border 灵活随意分配，宽度，颜色，式样

  border: soild thin #007e7e;
  border: #007e7e solid thin;
  

• background 颜色，背景图，repeat,position(top left)

  background:white url repeat-x;
  

• font[font-style font-variant font-weight 必须再前]font-size/line-height font-family

  font:small/1.6em Verdana,Helvetica,Arial,sans-serif;