Div的幾種選擇器
阿新 • • 發佈:2017-11-01
屬性選擇器 lin htm spa pass 能力 blog span css
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的幾種選擇器