美文网首页
Chapter 10 div与span

Chapter 10 div与span

作者: Smnag | 来源:发表于2019-03-16 22:58 被阅读0次
    div
    • div将相关元素归组在一起,类似于其它块元素,这有利于保证结构清晰或方便增加样式。
      在html中增加<div id="idname"></div>
      在css中#idname{……}
    • 子孙选择器
      ' #elixirs h2比 div h2 {……} 更特定
      ' #elixirs blockquote h2 {……}
      选中直接子代 #elixirs>h2
    span

    <span>为内联内容建立逻辑分组

    <ul>
          <li><span class="cd">Buddha Bar</span>, <span class="artist">Claude Challe</span></li>
          <li><span class="cd">When It Falls</span>, <span class="artist">Zero 7</span></li>
          <li><span class="cd">Earth 7</span>, <span class="artist">L.T.J. Bukem</span></li>
          <li><span class="cd">Le Roi Est Mort</span>, <span class="artist">Vive Le Roi!, Enigma</span></li>
          <li><span class="cd">Music for Airports</span>, <span class="artist">Brian Eno</span></li>
        </ul>
    
    伪类 Pseudo-class

    可以用伪类为各个状态单独地指定样式,伪类最常用于<a>元素 。

    a:link {
      color: #007e7e;
    }
    
    a:visited {
      color: #333333;
    }
    
    a:hover {
      background: #f88396;
      color: #0d5353;
    }
    
    其它
    • width属性设置一个元素内容区的宽度
    • text-align用来设置文本对齐方式,是块元素的一个属性,在内联元素如<img>上则不适用
    • 如果读者在一个属性申明里最后加上 !important ,TA就能覆盖你的样式,如 h1 {font-size: 200% !important; } 。
    • line-height有点特殊,因为可以对它直接使用一个数字,而非一个相对量(如em和%)。如果使用数字1,则表示行高是自己字体大小的1倍,页面中字体大小不同时,可以设置为数字。
    • 简写


      简写1
    简写2

    相关文章

      网友评论

          本文标题:Chapter 10 div与span

          本文链接:https://www.haomeiwen.com/subject/xfmemqtx.html