css | Notion

Cascading Style Sheets 階層式樣式表

可美化網頁(eg:字體、自行、顏色...…)

規則：1.Cascading階層 2.specificity特定度 3.inheritance

inline styling > id > class >element selector >inheritance

文法=Syntax

h1{
	color:green;
}

以上程式碼可使字型為h1的字體變成綠色

放置位置

inline styling
```
<h1 style="color:green">文字 </h1>
```
使個別標籤的文字變色
internal styling
```
<style>
	h1{
			color:green;
		}
	p{
			color:coral;
		}
</style>
```
使所有的h1(標題)變色、使所有p(段落)變色
external styling

在外部新增一個文件(命名名稱.css)
```
h1{
		color:green;
	}
p{
		color:coral;
	}
```
在原本的檔案中要放入新增文件的連結(放在head裡面)
```
<head>	
	<link rel="sheetstyle" href="./名稱.css" />
</head>
```

Color Styling

reserved color (被保留的)

系統內原本就有(140種)

rgb

h1{
	color: rgb(紅數字,綠數字,藍數字);
}

0≤數字≤255(共256的三次方種)

rgba

a=alpha(透明度)

h1{
	color: rgb(紅數字,綠數字,藍數字,a數字);
}

0≤a數字≤1

hex=hexadecimal十六進制

hex=6 ; decimal=十進制

十六進制：0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F
```
h1{
	color: 顏色的代號;
}
```
顏色代號由搜尋hex color或使用coloor網站等可得
hsl

(hue顏色,saturation飽和度,lightness亮度)

Comment 設置()

/*這是comment*/