Day43-Web Foundation CSS (I)

Day43-367 : Goal

將上一堂所製作的個人檔案，加上CSS去美化

Day43-368: Indrodution to CSS

階層樣式表 (Cascading Stylesheets；CSS) ,是一種用來為結構化文件(markup language)添加樣式的電腦語言, 本身單用是沒任何意義的
Why CSS was created?
1. 最早在只用HTML寫網頁時，只能利用各種tag或是tag的attribute來做一些樣式的設定，像是font tag設定字體, center tag使文字置中, attribute bgcolor修改背景色等等...
2. 通常只有HTML時，常常一個簡單的畫面卻要寫很多的tag, 像是用table tag做出layout的效果,可能就會要包好幾層的table tag, 這code會非常雜亂也增加debug的難度

Day43-369: Inline CSS

可以在tag裡透過attribute style可以直接使用CSS:

更換body tag背景色：

<body style="background-color: green">
# background-color: green 就是CSS語法
# color有很多種寫法，如下：

/* Keyword values */
background-color: red;
background-color: indigo;

/* Hexadecimal value */
background-color: #bbff00;    /* Fully opaque */
background-color: #11ffee00;  /* Fully transparent */

/* RGB value */
background-color: rgb(255, 255, 128);        /* Fully opaque */
background-color: rgba(117, 190, 218, 0.5);  /* 50% transparent */

/* HSL value */
background-color: hsl(50, 33%, 25%);         /* Fully opaque */
background-color: hsla(50, 33%, 25%, 0.75);  /* 75% opaque, i.e. 25% transparent */

/* Special keyword values */
background-color: transparent;

/* Global values */
background-color: currentcolor;

background-color - CSS: Cascading Style Sheets | MDN

Color hunt: 可以看一些配色參考的網站

Color Hunt - Trendy Color Palettes

Day43-370: A Quick Note about the Next Lesson

Day43-371: Internal CSS

前面用inline的寫法有個缺點，就是它只能針對使用該attribute的tag，其他tag要用就要複製一模一樣的code，不方便且亂，因此本節要學習如何使用style tag建立讓同一份文件的tag通用的CSS

在head tag裡加上style tag
在style tag的範圍內，加上要改變的tag,如：body , hr..
在{ }內加上要改變的樣式. key: value;(記得結尾要加分號)

<head>
	<style>
		body{ 
				background-color: green;
		}
		hr{ 
				background-color: green;
		}
		
	<style>
</head>

有些tag在瀏覽器上會有預設值，像是hr

CSS Default Browser Values for HTML Elements
CSS長度及寬度除了pixel也可以用百分比