Web開發之CSS樣式基本知識
阿新 • • 發佈：2018-12-26
定義
CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用於定義HTML內容在瀏覽器內的顯示樣式，如文字大小、顏色、字型加粗等
語法
css 樣式由選擇符和宣告組成，而宣告又由屬性和值組成，如下圖所示：
選擇符：又稱選擇器，指明網頁中要應用樣式規則的元素，如本例中是網頁中所有的段（p）的文字將變成藍色，而其他的元素（如ol）不會受到影響。
宣告：在英文大括號“｛｝”中的的就是宣告，屬性和值之間用英文冒號“：”分隔。當有多條宣告時，中間可以英文分號“;”分隔，如下所示：
p{
font-size:12px;
color 三種寫法
內聯式
就是把css程式碼直接寫在現有的HTML標籤中，如下面程式碼：
<p style="color:red">這裡文字是紅色。</p>css樣式程式碼要寫在style=”“雙引號中，如果有多條css樣式程式碼設定可以寫在一起，中間用分號隔開。如下程式碼：
<p style="color:red;font-size:12px">這裡文字是紅色。</p>嵌入式
就是直接把css程式碼寫在該檔案中，如下面的程式碼：
<html>
<head>
<meta 外部式
外部式css樣式(也可稱為外聯式)就是把css程式碼寫一個單獨的外部檔案中，這個css樣式檔案以“.css”為副檔名，在<head>內（不是在<style>標籤內）使用<link>標籤將css樣式檔案連結到HTML檔案內，如下面程式碼：
<link href="base.css" rel="stylesheet" type="text/css" />
注意：
1. css樣式檔名稱以有意義的英文字母命名，如 main.css。
2. rel=”stylesheet” type=”text/css” 是固定寫法不可修改。
3. 標籤位置一般寫在標籤之內。
完整示例：
<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" /><!--引用外部的css檔案-->
</head>
<body>
<p>慕課網，<span>超酷的網際網路</span>、IT技術免費學習平臺，創新的網路一站式學習、實踐體驗；<span>服務及時貼心</span>，內容專業、<span>有趣易學</span>。專注服務網際網路工程師快速成為技術高手！</p>
</body>
</html>三種寫法的優先順序：
對於同一個元素我們同時用了三種方法設定css樣式，優先順序按照就近原則（離被設定元素越近優先級別越高）
但注意上面所總結的優先順序是有一個前提：內聯式、嵌入式、外部式樣式表中css樣式是在的相同權值的情況下，關於權值的問題以後再討論