码迷,mamicode.com
首页 > 其他好文 > 详细

Div的几种选择器

时间:2017-11-01 21:33:05      阅读:230      评论:0      收藏:0      [点我收藏+]

标签:charset   元素选择器   style   log   lin   引入   利用   div2   ack   

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

标签:charset   元素选择器   style   log   lin   引入   利用   div2   ack   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!