什麼是CSS ?

1. CSS基本介紹 :

階層樣式表 (Cascading Stylesheets；CSS) 可用以塑造網站的特殊風格。例如這段文字要用一般的黑色，或是改用紅色標明重點？某段重要內容應該置於畫面的何處？想用什麼背景圖片及顏色裝飾你的網站？

簡單來說就是幫HTML進行排版,塗上顏色,改變大小等等....,讓網站看起來更完整更適合閱讀

2. CSS怎麼撰寫呢 :

方法一 :

可以直接加在html裡面

<html>
	<p style="color: red;">hello knowhowfarm</p>
</html>

方法二 :

寫在同一支檔案 , 但是拆開寫

<html>
	<p>hello knowhowfarm</p>
</html>

<style type="text/css">
	p{
		color: red;
	}
</style>

方法三 :

創建一個文件夾，創造兩個檔案 index.html , style.css，然後將下面一行貼到index.html裡面的 head，也就是 <head> 和 </head> 標籤之間。放在head是因為要一開始就載入,以免網站在剛載入的時候還沒讀取到css而產生短暫的跑版

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

./style.css 路徑代表同一個文件夾裡面的style.css檔案

p{
	color: red;
}

3. 解析 CSS :

整個架構我們稱為規則集 (rule set)，或是簡稱為規則 (rule) 也可以。（也注意名字裡面的單獨部分）

選擇器（Selector）
在這個規則的最前頭為 HTML 的元素名。它將決定你 HTML 裡什麼元素將被你接下來的設定影響（在這個範例中,就是段落元素 p）。若要改變欲影響的元素，只要更改選擇器就行了。

宣告（Declaration）
單一個規則，例如 color: red; 指定了這個元素的呈現樣貌。

屬性 (Properties)
修改屬性是改變你HTML元素的一種方法 . (在這範例中, color 是段落（p）元素的一種屬性.) 在CSS中, 你可以選擇哪些屬性用來影響 rule.

屬性值 (Property value)
屬性值就是位於屬性右邊，在冒號（:）之後，從眾多的可能樣式選出一個給予屬性（範例中就是從眾多的 color 樣式中選出 red）

說明 : 將html裡面所有<p></p> ,裡面的文字的顏色改為紅色

4. 選擇多個元素 :

可以用逗號（,）包含數個選

p,li,h1 {
  color: red;
  font-size:18px;
}

5. 常用的選擇器的不同類型 :

元素選擇器 : 指定所有 HTML 元素中的特定元素

p{
   .....
   .....
   .....
}

ID 選擇器（ID selector） : 指定頁面上的特定 ID 元素(每個頁面的ID不能重複) ,但ID通常都給js使用比較少給css使用

<div id="test-id">hello i'm id</div>

<style type="text/css">
	#test-id{
		color: red;
	}
</style>

注意 : ID 是使用 #

Class 選擇器（Class selector）: 指定頁面上的特定 class 元素(每個頁面的Class可以重複)

<div class="test-class">hello i'm class</div>

<style type="text/css">
	.test-class{
		color: red;
	}
</style>

注意 : Class 是使用 .

馬克網頁設計