HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第3章初識CSS

阿新 • • 發佈：2020-07-24

本教程案例線上演示

免費配套視訊教程

教程配套原始碼資源

考慮對人的描述方式

人 {
   身高:175cm;   
    體重:70kg;   
    膚色:黃色
}

CSS基本語法結構

選擇器 {
 	宣告1;
    宣告2;

    }

h1 {
	font-size:12px;
	color:#F00;
}

style標籤

<style type="text/css">
h1 {
	font-size:12px;
	color:#F00;
}
</style>

標籤選擇器

HTML標籤作為標籤選擇器的名稱

<h1>…<h6>、<p>、<img/>

p { font-size:16px;}

類選擇器

<標籤名 class= "類名稱">標籤內容</標籤名>

.類名稱 { font-size:16px;}

ID選擇器

<標籤名 id= "id名稱">標籤內容</標籤名>

#id名稱 { font-size:16px;}

標籤選擇器直接應用於HTML標籤

類選擇器可在頁面中多次使用

ID選擇器在同一個頁面中只能使用一次

製作《浣溪沙》

使用標籤選擇器設定標題字型大小為20px

頁面中所有段落中的文字字型大小為16px

使用類選擇器設定正文和譯文內容字型顏色為綠色

使用ID選擇器設定譯文標題顏色為藍色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>《浣溪沙》</title>
  <style type="text/css">
    h1 {
      font-size: 20px;
    }

    p {
      font-size: 16px;
    }

    .poem {
      color: green;
    }

    #title {
      color: blue;
    }
  </style>
</head>
<body>
  <h1>浣溪沙</h1>
  <hr />
  <p class="poem">一曲新詞酒一杯，<br />
    去年天氣舊亭臺。<br />
    夕陽西下幾時回？<br />
    無可奈何花落去，<br />
    似曾相識燕歸來。<br />
    小園香徑獨徘徊。
  </p>
  <p id="title">譯文</p>
  <p class="poem">聽一支新曲喝一杯美酒，還是去年的天氣舊日的亭臺，西落的夕陽何時再回來？
    那花兒落去我也無可奈何，那歸來的燕子似曾相識，在小園的花徑上獨自徘徊。</p>
</body>
</html>

CSS複合選擇器

後代選擇器

交集選擇器

並集選擇器

後代選擇器

在CSS選擇器中通過巢狀的方式，對特殊位置的HTML標籤進行宣告.

外層的標籤寫在前面，內層的標籤寫在後面，之間用空格分隔.

標籤巢狀時，內層的標籤成為外層標籤的後代.

h3 strong{color:blue; font-size:36px;}

交集選擇器

由兩個選擇器直接連線構成，選中二者各自元素範圍的交集.

第一個必須是標籤選擇器，第二個必須是類選擇器或者ID選擇器.

選擇器之間不能有空格，必須連續書寫

p.txt{color:blue; line-height:28px;}

並集選擇器

多個選擇器通過逗號連線而成.

利用並集選擇器同時宣告風格相同樣式.

h3,.first,.second,#end{
        font-size:16px; 
        color:green; 
        font-weight:normal;
}

製作《花千骨大結局》

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    p strong,
    h1 strong {
      color: red;
    }
  </style>
</head>

<body>
  <h1><strong>花千骨</strong>大結局</h1>
  <p>人間帝王軒轅郎、無所不知所不能東方彧卿（其實他就是超脫六界之外的異朽君）、妖魔兩界聖君殺阡陌那時都是愛花千骨的，都希望白子畫能夠善待花千骨。</p>
  <p>白子畫的善待是八十一根消魂釘，普通仙一根消魂釘就死去活來。花千骨受了17根，又被白子畫用斷念劍看了近百劍，<strong>花千骨心裡那個痛苦不言而喻</strong>。而後，花千骨扔到地牢。白子畫替她承受了剩下的消魂釘。
    <strong>白子畫</strong>
    在霓漫天的告知下，白子畫的師兄摩嚴得知花千骨居然悖逆天理愛上白子畫，用絕情水潑到花千骨的喉嚨裡，臉上，於是花千骨又瞎又啞又毀容，被髮配到了幾乎不可能走出來的蠻荒之地。</p>
  <strong>花千骨又瞎又啞又毀容</strong>
</body>
</html>

HTML中引入CSS樣式

行內樣式
內部樣式表
外部樣式表

行內樣式

<h1 style="color:red;">style屬性的應用</h1>
<p style="font-size:14px; color:green;">直接在HTML標籤中設定的樣式</p>

內部樣式表

CSS程式碼寫在<head>的<style>標籤中

優點
方便在同頁面中修改樣式

缺點
不利於在多頁面間共享複用程式碼及維護，對內容與樣式的分離也不夠徹底

外部樣式表

CSS程式碼儲存在副檔名為.css的樣式表中.

HTML檔案引用副檔名為.css的樣式表，有兩種方式

連結式
匯入式
連結外部樣式表

<head>
  ……
<link href="style.css" rel="stylesheet" type="text/css" />
……
</head>

匯入外部樣式表

<head>
……
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>

CSS繼承特性

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<title>Title</title>    
<style type="text/css">        
    body{color:red;}    
</style>
</head>
    <body>
        <p>
            父級P
            <strong>子級strong</strong>
            父級P
        </p>
        <ul>    
            <li>子級li1</li>
            <li>子級li2</li>
        </ul>
    </body>
</html>

子標籤可以繼承父標籤的樣式風格

子標籤可以覆寫父標籤的樣式，但不會影響父標籤的樣式風格

<h1>勇氣</h1>
<p class="first">三年級時，我還是一個<strong>膽小如鼠</strong>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。
</p>
<p id="second">到了三年級下學期時，我們班上了一節公開課，老師提出了一個很<strong>簡單</strong>的問題，班裡很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。
</p>

p{color:red;} 
.first strong{color: blue}

CSS的優先順序

ID選擇器>類選擇器>標籤選擇器

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<title>Title</title>    
<style type="text/css">        
p{color:red;}        
.first{color:green;}    
</style>
</head>
<body>
<p class="first" id="pid">三年級時，我還是一個<strong>膽小如鼠</strong>的小女孩。</p></body>
</html>

p和.first都匹配到了p這個標籤上，green是正確的顏色

在html檔案中對於同一個元素可以有多個css樣式存在，當有相同權重的樣式存在時，會根據這些css樣式的前後順序來決定，處於最後面的css樣式會被應用

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
    p{color:red;} 
    p{color:green;}
</style>
</head>
<body>
    <p class="first" id="pid">三年級時，我還是一個<strong>膽小如鼠</strong>的小女孩。</p>
</body>
</html>

內聯樣式表（標籤內部）> 嵌入樣式表（當前檔案中）> 外部樣式表（外部檔案中）。

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<title>Title</title>    
<style type="text/css">        
    p{color:red;}        
    p{color:blue;}    
</style>
</head>
<body> 
    <p class="first" id="pid" style="color:green">三年級時，我還是一個<strong>膽小如鼠</strong>的小女孩。</p> 
</body>
</html>

有些特殊的情況需要為某些樣式設定具有最高權值，怎麼辦？這時候我們可以使用!important來解決。

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<title>Title</title>    
<style type="text/css">        
    p{color:red!important;}         
    .first{color:blue;}   
</style>
</head>
<body> 
      <p class="first" id="pid" style="color:green">三年級時，我還是一個<strong>膽小如鼠</strong>的小女孩。</p>
</body>
</html>