【使用DIV+CSS重寫網站首頁案例】CSS選擇器

時間 2020-08-04

標籤使用 div+css div css 重寫網站首頁案例選擇器欄目 HTML 简体版

原文原文鏈接

使用表格<table></table>對網站首頁進行佈局有缺陷，不能拖動版塊，不靈活。css

DIVhtml

Div是一個html的標籤，單獨使用沒有意義，必須結合CSS使用；佈局

是一個塊級元素，單獨佔一行；網站

它主要用於頁面的佈局；spa

Span3d

Div是一個html的標籤，單獨使用沒有意義，必須結合CSS使用；code

是一個內聯元素，顯示一行；htm

它主要用於對括起來的內容進行樣式的修飾；blog

CSSinput

層疊樣式表：同一元素，同一屬性，設置不一樣值；

解決內容與表現分離的問題（html只能將元素展示出來，內容樣式沒法展現出來），對內容進行修飾；

語法和規範：

設置樣式：

*第一種寫法：寫在<head></head>內部

（選擇器：用於快速查找須要設置樣式的元素）

選擇器{

屬性名1:屬性值1；

屬性名2:屬性值2(；)

}

*冒號是英文輸入法的

*最後一個分號能夠省略

基本選擇器：(3種)

元素選擇器：對總體設置樣式（div）

例子：

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title>元素選擇器</title>
 7         <!--對總體設置樣式-->
 8         <style  type="text/css">
 9  div{
10  font-size:50px;
11  color:pink;
12             }
13         </style>
14     </head>
15     <body>
16         <div>
17  哈哈哈哈哈11 18         </div>
19         <div>
20  哈哈哈哈哈22 21         </div>
22         <div>
23  哈哈哈哈哈33 24         </div>
25         <div>
26  哈哈哈哈哈44 27         </div>
28         <div>
29  哈哈哈哈哈55 30         </div>
31     </body>
32 
33 </html>

結果：

類選擇機器：部分設置樣式（. class名字）

例子：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>類選擇器</title>
 6         <!--部分設置樣式-->
 7         <style>
 8  .div2{
 9  font-size: 30px;
10  color:gold 11             }
12         </style>
13     </head>
14     <body>
15         <div>
16  哈哈哈哈哈11 17         </div>
18         <div class="div2">
19  哈哈哈哈哈22 20         </div>
21         <div>
22  哈哈哈哈哈33 23         </div>
24         <div class="div2">
25  哈哈哈哈哈44 26         </div>
27         <div>
28  哈哈哈哈哈55 29         </div>
30     </body>
31 </html>

結果：

id選擇器：單個設置樣式（# id名）

*注意：雖然44能夠實現樣式，但不是id選擇器的目的，此處是有問題的。使用時只設置一個。

例子：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>id選擇器</title>
        <!--單個設置樣式-->
        <style> #div5 { font-size: : 30px; color: yellow;
            }
        </style>
    </head>

    <body>
        <div> 哈哈哈哈哈11 </div>
        <div class="div2"> 哈哈哈哈哈22 </div>
        <div> 哈哈哈哈哈33 </div>
        <!--雖然44能夠實現樣式，但不是id選擇器的目的，此處是有問題的。使用時只設置一個。-->
        <div class="div2" id="div5"> 哈哈哈哈哈44 </div>
        <div id="div5"> 哈哈哈哈哈55 </div>
    </body>

</html>

結果：

其餘選擇器

層級選擇器：層次選擇樣式(div p)

例子：

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title>層級選擇器</title>
 7         <style>
 8  div p{
 9  font-size:30px;; 10  color:green;
11             }
12         </style>
13     </head>
14 
15     <body>
16         <div>
17  哈哈哈哈哈11 18         </div>
19         <div>
20  哈哈哈哈哈22 21         </div>
22         <div>
23  哈哈哈哈哈33 24         </div>
25         <div>
26             <p>
27  哈哈哈哈哈55 28             </p>
29         </div>
30         <div>
31  哈哈哈哈哈55 32         </div>
33     </body>
34 
35 </html>

結果：

屬性選擇器：屬性選擇樣式( input[type='..' ] )

例子：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>屬性選擇器</title>
 6         <style>
 7  input[type='text']{
 8  background-color: red;
 9             }
10             
11  input[type='password']{
12  background-color: blue;
13             }
14         </style>
15     </head>
16     <body>
17         用戶名：<Input type="text" name="username"/><br />
18         密碼：<input type="password" name="password" />
19     </body>
20 </html>