CSS基础学习7-CSS设置组织元素（span和div）

本文链接：https://blog.csdn.net/rongrong_love_lc/article/details/52870915

所有CSS基础学习文档下载地址：http://download.csdn.net/detail/rongrong_love_lc/9663463

七、CSS设置组织元素（span和div）
    span和div元素用于组织和结构化文档，并经常联合class和id属性一起使用。
    span使用局限在一个块元素内。
    1.用span组织元素：
        span元素是一种中性元素，因为他不对文档本身添加任何东西。但是与CSS结合使用的话，span可以对文档中的不分文本添加视觉效果。
    html文件如下：
      <html>
            <head>
                 <title>Color例子</title>
                 <link rel="stylesheet" type="text/css" href="color.css"/>
             </head>
             <body>
                 <p>study测试文本信息study</p>
                 <h1 >study<span class="green">测试文本信息1</span>study</h1>
                 <h2 >study<span class="black">测试文本信息2</span>study</h2>
                 <h3 >study<span class="yellow">测试文本信息3</span>study</h3>
             </body>
           </html>
      CSS文件如下:
           body {background:white url("image1.jpg") no-repeat fixed center;
               }
           p {text-align:justify;
              letter-spacing:5px;
              text-transform:none;}
           span.green {color:green;
                       text-decoration:underline;}
           span.black {color:black;
                       text-decoration:underline;}
           span.yellow {color:yellow;
                        text-decoration:underline;}
    2.用div组织元素：
        div可以被用来组织一个或者多个块的元素。
      html文件如下:
        <html>
              <head>
                 <title>Color例子</title>
                 <link rel="stylesheet" type="text/css" href="color.css"/>
               </head>
               <body>
             <p> <div id="ddd">测试信息1</div></p>
             <ul>
                <li><a href="https://www.baidu.com" class="green">百度一下1</a></li>
                <li><a href="https://www.sogou.com" class="yellow">搜狗1</a></li>
                <li><a href="http://translate.google.cn" class ="red">谷歌翻译1</a></li>
               <li><a href="http://fanyi.youdao.com" class="black">有道翻译1</a></li>
             </ul>
             <p>测试信息2</p>
             <div id = "ddd">
                 <ul>
                    <li><a href="https://www.baidu.com">百度一下2</a></li>
                    <li><a href="https://www.sogou.com">搜狗2</a></li>
                    <li><a href="http://translate.google.cn">谷歌翻译2</a></li>
                    <li><a href="http://fanyi.youdao.com">有道翻译2</a></li>
                 </ul>
             </div>
               </body>
          </html>
    CSS文件如下：
      body {background:white url("image1.jpg") no-repeat fixed center;
        }
      p {text-align:justify;
         letter-spacing:5px;
         text-transform:none;}
      a.green {color:green;
               text-decoration:underline;}
      a.black {color:black;
           text-decoration:underline;}
      a.yellow {color:yellow;
            text-decoration:underline;}
      a.red {color:red;
             text-decoration:underline;}
      #ddd {background-color:#AABBCC;
        color:red;}