前端開發HTML&css入門——CSS&選擇器練習

本文轉載自查看原文 2019-08-16 10:43 526

　CSS　

　　層疊樣式表 (Cascading Style Sheets)css可以用來為網頁創建樣式表，通過樣式表可以對網頁進行裝飾。所謂層疊，可以將整個網頁想象成是一層一層的結構，層次高的將會覆蓋層次低的。而css就可以分別為網頁的各個層次設置樣式。　　

　　CSS的樣式表由一個一個的樣式構成，一個樣式又由選擇器和聲明塊構成。

　　語法：

　　　　– 選擇器 {樣式名:樣式值；樣式名:樣式值 ; }
　　　　– p {color:red ; font-size:12px;}

方法一：

　　內聯樣式

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>CSS</title>
 6 　　 </head>
 7     <body>
 8 　　　　　　　　　　<p style="color:red;font-size:40px;">鋤禾日當午，汗滴禾下土</p>
 9                 <p style="color:red;font-size:40px;">誰知盤中餐，粒粒皆辛苦</p>
10     </body>
11 </html>

　　可以將CSS樣式編寫到元素的style屬性當中將樣式直接編寫到style屬性中，這種樣式我們稱為內聯樣式。內聯樣式只對當前的元素中的內容起作用，內聯樣式不方便復用內聯樣式屬於結構與表現耦合，不方便后期的維護，不推薦使用。所以我們就有了CSS。

　　內部樣式

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" /
 5     <style type="text/css">
 6             p{
 7                 color:red;
 8                 font-size:40px;
 9             }
10         
11         </style>
12         
13     </head>
14     <body>
15 <p>誰知盤中餐，粒粒皆辛苦</p>
16         <p>誰知盤中餐，粒粒皆辛苦</p>
17         <p>誰知盤中餐，粒粒皆辛苦</p>
18         <p>誰知盤中餐，粒粒皆辛苦</p>
19         <p>誰知盤中餐，粒粒皆辛苦</p>
20         <p>誰知盤中餐，粒粒皆辛苦</p>
21     </body>
22 </html>

　　這樣就解決了數量很龐大的標簽項目的樣式設定。但是如果我們在其他頁面也使用內部樣式那？

　　外部樣式表

　　先將上述p標簽的樣式復制下來，然后在新建一個文本文件，將樣式拷貝進文本文件中，然后右鍵另存為sytle.css

　　然后我們編寫了一個外部的CSS文件，然后通過link標簽來將外部的CSS文件引入到當前頁面中，這樣外部文件中的css樣式表將會應用到當前頁面中。

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>CSS</title>
 6     <link rel="stylesheet" type="text/css" href="style.css" />
 7         
 8         
 9     </head>
10     <body
11 <p>誰知盤中餐，粒粒皆辛苦</p>
12         <p>誰知盤中餐，粒粒皆辛苦</p>
13         <p>誰知盤中餐，粒粒皆辛苦</p>
14         <p>誰知盤中餐，粒粒皆辛苦</p>
15         <p>誰知盤中餐，粒粒皆辛苦</p>
16         <p>誰知盤中餐，粒粒皆辛苦</p>
17     </body>
18 </html>

　　將CSS樣式統一編寫到外部的樣式表中，完全使結構和表現分離，可以是樣式表可以在不同的頁面中使用，最大限度的使樣式可以進行復用，將樣式統一寫在樣式表中，然后通過link標簽引入，可以利用瀏覽器的緩存，加快用戶訪問的速度提高了用戶體驗，所以在開發中我們最推薦使用的方式就是外部的CSS文件。href=css的路徑。

　　css的注釋

　　CSS的注釋，作用和HTML注釋類似，只不過它必須編寫在style標簽中，或者是css文件中。

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>CSS</title>    
 6         <style type="text/css">
 7             
 8             /*
 9                 CSS的注釋，作用和HTML注釋類似，只不過它必須編寫在style標簽中，或者是css文件中
10                 
11                 CSS的語法：
12                 
13                     選擇器 聲明塊
14                     
15                 選擇器：
16                     - 通過選擇器可以選中頁面中指定的元素，
17                         並且將聲明塊中的樣式應用到選擇器對應的元素上
18                         
19                         
20                 聲明塊：
21                     - 聲明塊緊跟在選擇器的后邊，使用一對{}括起來，
22                         聲明塊中實際上就是一組一組的名值對結構，
23                             這一組一組的名值對我們稱為聲明，
24                         在一個聲明塊中可以寫多個聲明，多個聲明之間使用;隔開，
25                         聲明的樣式名和樣式值之間使用:來連接
26                     
27             */
28             
29                 
30             p{
31                 color:red;
32                 font-size:50px;
33             }
34         
35         </style>
36         
37     </head>
38     <body>
39             
40         <p style="color:red">天天下雨，我已經半個月沒見太陽了</p>
41         
42     </body>
43 </html>

　　塊元素和內聯元素

　　div就是一個塊元素，所謂的塊元素就是會獨占一行的的元素,無論他的內容有多少，他都會獨占一整行。

　　p h1 h2 h3 ... 都是塊元素。

　　div這個標簽沒有任何語義，就是一個純粹的塊元素，並且不會為它里邊的元素設置任何的默認樣式，div元素主要用來對頁面進行布局的。　

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6       </head>
 7      <body>
 8             <div style="background-color:red ; width: 200px;">
 9                 我是一個div
10             </div>
11         <p>我是一個p標簽</p>
12         <p>我是一個p標簽</p>
13            
14         
15     </body>
16 </html>

　　span是一個內聯元素（行內元素）：所謂的行內元素，指的是只占自身大小的元素，不會占用一行
　　常見的內聯元素：a img iframe span
　　span沒有任何的語義，span標簽專門用來選中文字，
　　然后為文字來設置樣式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
<span>我是一個span</span>
        <span>我是一個span</span>
        
        <span>我是一段文字</span>
        
    </body>
</html>

　　塊元素主要用來做頁面中的布局，內聯元素主要用來選中文本設置樣式，
　　一般情況下只使用塊元素去包含內聯元素，而不會使用內聯元素去包含一個塊元素
　　a元素可以包含任意元素，除了他本身
　　p元素不可以包含任何塊元素

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>    
 7     　　<p><span>我是一個span</span></p>
 8         
 9         <a href="#"></a>
10         
11         
12         <a href="#">
13             <div style="background-color:red ; width: 200px;">
14                 我是一個div
15             </div>
16         </a>
17     </body>
18 </html>

　　在HTML5中，內聯元素和塊元素這兩個概念已經取消了。但是我們在這里便於理解還是使用老的概念。

　　常用的CSS選擇器

　　　　元素選擇器
　　　　作用：通過元素選擇器可以選則頁面中的所有指定元素
　　　　語法：標簽名 {}

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>常用選擇器</title>
 6         <style type="text/css">
 7          p{
 8                 color: red;
 9             }
10             
11             
12             h1{
13                 color: red;
14             }        
15         </style>
16     </head>
17     <body>
18         <h1>憫農</h1>
19         <p>鋤禾日當午</p>
20         <p>鋤禾日當午</p>
21     </body>
22 </html>

　　這種選擇器缺點顯而易見，如果單獨想設置某一個P標簽的樣式。就會更改整體P標簽的樣式。

　　　　id選擇器
　　　　通過元素的id屬性值選中唯一的一個元素
　　　　語法：
　　　　 #id屬性值 {}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>常用選擇器</title>
        <style type="text/css">   
#p1{
                font-size: 20px; 
}
</style>
    </head>
    <body>
        <h1>憫農</h1>
        <p>鋤禾日當午</p>
        <p>鋤禾日當午</p>
        <p id="p1">鋤禾日當午</p>
    </body>
</html>

　　雖然解決了不能單獨分配樣式的問題，但是相同的帶來另外一個問題就是不能分組去分配樣式。如果想多個分配樣式必須把每一個P標簽分配一個ID。　　

　　類選擇器
　　通過元素的class屬性值選中一組元素
　　語法：
　　class屬性值{}

  <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>常用選擇器</title>
        <style type="text/css">
          .p2{
                color: red;
            }
　　　　　　.hello{
　　　　　　　　　　font-size: 50px;
　　　　　　　}
          
        </style>
    </head>
    <body> 
             <p class="p2 hello">鋤禾日當午</p>
             <p class="p2">鋤禾日當午</p>
             <p class="p2">鋤禾日當午</p>        
    </body>
</html>

　　　　我們可以為元素設置class屬性，
　　　　class屬性和id屬性類似，只不過class屬性可以重復
　　　　擁有相同class屬性值的元素，我們說他們是一組元素
　　　　可以同時為一個元素設置多個class屬性值，多個值之間使用空格隔開

　　　選擇器分組(並集選擇器)
　　　　通過選擇器分組可以同時選中多個選擇器對應的元素
　　　　語法：選擇器1,選擇器2,選擇器N{}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>常用選擇器</title>
        <style type="text/css">
            
        #p1 , .p2 , h1{
           background-color: yellow;
            }
        </style>
    </head>
    <body>
            <h1>憫農</h1>
            <p id="p1">鋤禾日當午</p>
            <p class="p2">鋤禾日當午</p>
    </body>
</html>

　　　　　　復合選擇器（交集選擇器）
　　　　　　　　可以選中同時滿足多個選擇器的元素
　　　　　　　　語法：
　　　　　　　　選擇器1選擇器2選擇器N{}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>常用選擇器</title>
        <style type="text/css">
　　　　　      　span.p3{
                 background-color: yellow;
            　 　　　}
　　　　　</style>
    </head>
    <body>
　　　　　　　   <p class="p3">鋤禾日當午</p>
       　　　　 <span class="p3">汗滴禾下土</span>
               </body>
</html>

　　　　　　對於id選擇器來說，不建議使用復合選擇器

　　　　　通配選擇器
　　　　　他可以用來選中頁面中的所有的元素
　　　　　語法：*{}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>常用選擇器</title>
        <style type="text/css">
           *{
                color: red;
            }
        </style>
    </head>
    <body>
            <h1>憫農</h1>
            <p id="p1">鋤禾日當午</p>
            <p class="p2">鋤禾日當午</p>
    </body>
</html>

　　　　　　　后代元素選擇器

　　　　　　　選中指定元素的指定后代元素
　　　　　　　　語法：
　　　　　　祖先元素后代元素{}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        div span{
                color: greenyellow;
            }
              </style>
     </head>
    <body>
        <div>
            <span>我是div標簽中的span</span>
            <p><span>我是p標簽中的span</span></p>
        </div>
        <span>我是body中的span元素</span>
           
</body>
</html>

　　　只要是div塊元素后代的span標簽都會應用選擇器，而不是div塊元素后代的span標簽不會應用選擇器。而且后代元素選擇器也可以交叉使用ID選擇器，class選擇器例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
　　　　　　　　#d1 span{
                color: greenyellow;
           　　 }
　　　　　</style>
    </head>
    <body>
　　　　　　　<div id="d1">
            <span>我是div標簽中的span</span>
            <p><span>我是p標簽中的span</span></p>
        　　</div>
    
    </body>
</html>

也可以單獨選擇一個后代元素進行應用（第幾個后代就在后面加幾個標簽）例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
　　　　　　　　#d1 p span{
                font-size: 50px;
               }
　　　　　</style>
    </head>
    <body>
　　　　　　　<div id="d1">
            <span>我是div標簽中的span</span>
            <p><span>我是p標簽中的span</span></p>
        　　</div>
    </body>
</html>

　　　　　　　　子元素選擇器
　　　　　　　　　　選中指定父元素的指定子元素
　　　　　　　　　　父元素 > 子元素
　　　　　　　　　* IE6及以下的瀏覽器不支持子元素選擇器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
                    div > span{
                background-color: yellow;
            }
        </style>
    </head>
    <body>       
              <div id="d1">
            <span>我是div標簽中的span</span>
            <p><span>我是p標簽中的span</span></p>
       　　　　 </div>
    </body>
    </html >

只選定子元素進行應用。

練習：

CSSdinner

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 前端開發HTML&css入門——偽類選擇器和一些特殊的選擇器 HTML&CSS實驗(4)---學習CSS選擇器的使用方法 HTML&CSS基礎-子元素的偽類選擇器前端開發HTML&css入門——盒子模型以及部分CSS樣式 HTML&CSS基礎-子元素和后代元素選擇器 CSS選擇器餐廳練習【前端開發系列】—— CSS3屬性選擇器總結前端之css樣式（選擇器）。。。前端基礎--css基本語法,選擇器 html添加css——樣式選擇器