設計師學習HTML/CSS之路-07

P2G發表於2018-06-30
HTMLCSS

不瞭解前端的UI不是好美工，以下是慕課網HTML+CSS基礎教程學習筆記，不廢話，Start!

第7章 CSS樣式基本知識

7-1 內聯式css樣式，直接寫在現有的HTML標籤中

CSS樣式程式碼插入的形式分3種：
1.內聯式：把CSS程式碼直接寫在現有的html標籤中，如下程式碼：

這裡的文字是紅色，字號為12px。 

<p style="color:red;font-size:12px">
這裡的文字是紅色，字號為12px。
</p>
複製程式碼

css樣式要寫在style=""雙引號中，多條樣式程式碼中間用分號隔開。

7-2 嵌入式CSS樣式，寫在當前文的檔案中

嵌入式的優勢在於可以一對多修改樣式。

嵌入式css樣式程式碼寫在<style type="text/css">...</style>之間。
把需要帶有css樣式的文字放在<span></span>標籤之間。

<head>
 <style type="text/css">
 span{
    color:red;
    font-size:20px;
 }
 </style>
</head>
複製程式碼

嵌入式css樣式必須寫在<style></style>之間，並且一般情況下嵌入式css樣式寫在<head></head>之間。

7-3 外部式CSS樣式，寫在單獨的一個檔案中

外部式css樣式是把css程式碼寫在一個單獨的外部檔案中管理。這個css樣式以“.css”為副檔名，在<head>內使用<link>標籤。如下：

<link href="h1.css" rel="stylesheet" type="text/css" />
複製程式碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css樣式</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
   <p>外部式css樣式是把<span>css程式碼</span>寫在一個單獨的外部檔案中管理。這個css樣式以“.css”為副檔名。
   </P>
</body>
</html>
複製程式碼

單獨外部檔案如下：

設計師學習HTML/CSS之路-07

注意：
1. css樣式檔名稱以有意義的英文字母命名，如h1.css。<br>
2. 同嵌入式一樣，把需要帶有css樣式的文字放在<span></span>標籤之間。<br>
3. rel="stylesheet" type="text/css"是固定寫法。<br>
4. <link>標籤一般寫在<head>內。
複製程式碼

7-4 三種方法優先順序

優先順序:
內聯式(行內) > 嵌入式(head內) > 外部式(單獨檔案) 總結來說就是就近原則

相關文章