Div的几种选择器

Div 是一个html标签，一个块级元素（单独显示一行），单独使用没有意义，需要结合CSS来使用，主要用于页面的布局。

div选择器：

1.元素选择器：

 1     <style>

 2                 div{

 3             font-size: 5px;

 4             color: red;

 5          }

 6     </style>

 7     <body>

 8         <div >

 9             你停在了那条我们熟悉的街。

10         </div>

11     </body>

2.类选择器：

 1     <style>

 2                 .div2{

 3             font-size: 5px;

 4             color: red;

 5          }

 6     </style>

 7     <body>

 8         <div  class="div2">

 9             你停在了那条我们熟悉的街。

10         </div>

11     </body>

3.id选择器：

 1     <style>

 2                 #div3{

 3             font-size: 5px;

 4             color: red;

 5          }

 6     </style>

 7     <body>

 8         <div  id="div3">

 9             你停在了那条我们熟悉的街。

10         </div>

11     </body>

4.层级选择器

 1     <style>

 2                div  font{

                font-size: 40px;

                color:brown;

            }

 6     </style>

 7     <body>

 8             <div>

            把你准备好的台词全念一遍。

            <font> 爱你到最后 不痛不痒</font>

        </div>

11     </body>

5.属性选择器：

 1     <style>

 2               input[type = 'text']{

            font-size: 40;

                color: yellow;

            }

 6     </style>

 7     <body>

 8            <div>

            我们的爱 <input type="text" name="password" />

        </div>

11     </body>

6.行内引入：

1 <div style="color: orange; font-size:20px ;">

2 怪我没能力跟随。

3 </div>

7.外部引入

style1.css文件中

     div{

             font-size: 5px;

             color: red;

           } 

利用link导入：

<html>

    <head>

        <meta charset="UTF-8">

        <title> div选择器</title>

            <link rel="stylesheet" href="style1.css" type="text/css"/>

    </head>

    <body>

        <div>

            你还要我怎样

        </div>

    </body>

</html>

Div 浮动特性

left:左侧不允许浮动元素

right:右侧侧不允许浮动元素

both 两侧都不允许浮动元素

none 默认值两侧都允许浮动元素

inherit 从父元素继承clear属性值。

添加浮动用float,清除浮动用clear。

巴特西

Div的几种选择器

最新文章

热门文章