首页 > 其他 > 详细

Div的几种选择器

时间:2017-11-01 21:26:51      阅读:284      评论:0      收藏:0      [点我收藏+]

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的几种选择器

原文:http://www.cnblogs.com/swiftF/p/7768348.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!