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

来源：互联网发布：山东省软件评测中心编辑：程序博客网时间：2024/06/05 09:05
所有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;}
0 0