[Lab] Codecademy CSS 教學筆記 1

3月 14, 2014

--- CSS: An Overview ---

1 / 26
Seeing is believing

2 / 26
What CSS is
CSS 是 Cascading Style Sheets 直翻就是階層性的樣式表

"A style sheet is a file that describes how an HTML file should look. That's it!

We say these style sheets are cascading because the sheets can apply formatting when more than one style applies." -- from codecademy

cascading 階層性的概念，舉例來講如下，你希望整個段落文字都是紅色的，先做全面性的第一層設定，又希望其中一個字是藍色的，可以在這層設定之下再做細部的下一層設定。

CSS 設定文字顏色
color: 顏色;

3 / 26
Why separate form from function?

1. You can apply the same formatting to several HTML elements without rewriting code (e.g.style="color:red":) over and over
2. You can apply similar appearance and formatting to several HTML pages from a single CSS file

CSS 設定文字大小，字體

font-size: 文字大小px;
font-family: 字體;

4 / 26
If it's in, it's out!
加入CSS語法的方法其中之一
在<style></style> 之間寫CSS

例如
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: purple;
}
</style>
<title>Result</title>
</head>
<body>
<p>Check it out! I'm purple!</p>
</body>
</html>
上述的code能將文字設定成紫色，要注意的是<style></style>寫在<head>與</head>之間

5 / 26
Link it up!
將html檔案與CSS檔案連結：在html <head></head>之間放入link標籤！
<link/> 標籤裡面有三個屬性設定 : 1. type = "text/css" 2. rel = "stylesheet" 3. href="放置CSS檔案的路徑"
<link type="text/css"; rel="stylesheet"; href="stylesheet.css"/>

6 / 26
PSA: Self-closing tags

<link type="text/css" rel="stylesheet" href="CSS file address"/>

<img src="web address"/>

7 / 26
Syntax for the wintax
CSS基本用法

selector {
    property: value;
}

這邊的 selector 可以是HTML裡面的標籤，像是 <p>, <img>, or <table>. You just take off the <>s! 可調整想要設定的 property 跟 value。
例如：

p {
    color: red;
}

8 / 26
One selector, many properties

p {
    font-family: Arial;
    color: blue;
    font-size: 24px;
}

9 / 26
Many selectors, many properties

10 / 26
The importance of semicolons

11 / 26
Color commentary
整理
HTML 註解 
CSS 註解 /* 註解內容 */

12 / 26
Check yourself before you wreck yourself

13 / 26
Hexawhatnow?

顏色色碼可用十六進位來設定 hexadecimal values

14 / 26
Roses are red...
Search for "hex color palette" or "hex color picker" with your favorite web browser to find a bunch of options!
Hex values always start with a pound sign (#), are up to six "digits" long, and are case-insensitive: that is, they don't care about capitalization.#FFC125 and #ffc125 are the same color.

15 / 26
Pixels and ems
文字大小的單位 px與em
這邊的em 是相對的大小，可隨各平台裝置大小相對調整！
p.s. 不是之前的<em></em> tag

16 / 26
A font of knowledge
CSS 字型：serif, sans-serif, cursive

17 / 26
Backup values
CSS當中的設定可以分層級，
像是在字型設定

p {
    font-family: Tahoma, Verdana, sans-serif;
}

如果該瀏覽器有Tahoma字型，就會優先用Tahoma，反之，就會用第二順位的Verdana，要是又沒有，就會用第三順位的sans-serif字型。

18 / 26
Review
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Free Play!</title>
</head>
<body>
<h3>Title</h3>
<p>hi everyone i'm writing <span>CSS</span></p>
<div>this is div</div>
<table>
<thead>
<tr>
<th>XDDDD</th>
</tr>
</thead>
<tbody>
<tr>
<td>xD</td>
<td>xD</td>
</tr>
<tr>
<td>XD</td>
<td>XD</td>
</tr>
</tbody>
</table>
</body>
</html>
-----------CSS--------------
/*Write your CSS below!*/
h3{
font-family:sans-serif;
color:#a7b310;
}
p {
color:red;
}
span{
color:green;
}
div{
width:150px;
height:30px;
background-color:yellow;
}
thead{
font-family:Tahoma,serif;
color:purple;
}
tbody{
font-family:Verdana;
color:blue;
}