個人資訊
李百麗
訪客 (47362), 推薦 (1)
文章 (35)
回應 (14)
文章分類
隨手小品 (1)
最新文章
(2012-11-05) 數位內容導論 第18講 (11-05)
(2012-10-31) 數位內容導論 第17講 (10-31)
(2012-10-30) 3D電腦動畫 第15講 (10-30)
(2012-10-26) 3D電腦動畫 第14講 (10-26)
(2012-10-25) 3D電腦動畫 第13講 (10-25)
最新回應
re: 性別與升遷的小小分享 (10-11, 李百麗)
re: 性別與升遷的小小分享 (10-11, 黃惠玲)
re: 20121007(數位內容導論)上課筆記 (10-11, 黃惠玲)
re: 20121007(數位內容導論)上課筆記 (10-09, 莊春敏)
re: 20121007(數位內容導論)上課筆記 (10-08, 洪月霞)
(2012-10-16) 數位內容導論 第11講 
by 李百麗
2012-10-16 13:43:35, 回應(0), 人氣(915)
2012-10-16 13:43:35, 回應(0), 人氣(915)
---CSS排版樣式的用法---
1.inline，直接在tag上，使用style屬性。
2.embeding，先定義css樣式的類別(class)或者識別碼(id)，然後在tag上使用class的屬性或id屬性。
3.linking，將css樣式的class或id定義在一個檔案(.css檔)，然後在tag上使用class的屬性或id屬性。
---CSS Linking用法的例子(1/2)---
<html><head>
<title>My first XHTML page</title>
<link rel="stylesheet" type="text/css" href="css1.css"/>
</head>
<body>
<p>This is my first XHTML page</p>
<p class="bigsans">This is the second paragraph of my first XHTML page</p>
</body></html>
---CSS Linking用法的例子(2/2)---
p{
font-size:16pt;
font-family:'comic sans MS','fantasy';
color:maroon;
}
.bigsans{
font-size:24pt;
font-family:arial,sans-serif;
color:red;
}
---以瀏覽器實測---
．CSSlink.htm
．CSS1.css
---css與HTML的完美配合---
．HTML標籤只負責"content"(內容)。
．css負責外觀。
．若以linking的方式使用css，css檔還可以存放在遠端伺服器上。
---css檔存放在遠端web server的實例測試---
．css1.css的儲存路徑為
http://www2.nkfust.edu.tw/~weichih/CSS/css1.css
．<link rel="stylesheet" type="text/css" href="css1.css"/>
相對路徑
改為
．<link rel="stylesheet" type="text/css" href="http://www2.nkfust.edu.tw/~weichih/CSS/css1.css"/>
絕對路徑
---css的學習網站介紹---
．http://www.pcnet.idv.tw/pcnet/css/
1.inline，直接在tag上，使用style屬性。
2.embeding，先定義css樣式的類別(class)或者識別碼(id)，然後在tag上使用class的屬性或id屬性。
3.linking，將css樣式的class或id定義在一個檔案(.css檔)，然後在tag上使用class的屬性或id屬性。
---CSS Linking用法的例子(1/2)---
<html><head>
<title>My first XHTML page</title>
<link rel="stylesheet" type="text/css" href="css1.css"/>
</head>
<body>
<p>This is my first XHTML page</p>
<p class="bigsans">This is the second paragraph of my first XHTML page</p>
</body></html>
---CSS Linking用法的例子(2/2)---
p{
font-size:16pt;
font-family:'comic sans MS','fantasy';
color:maroon;
}
.bigsans{
font-size:24pt;
font-family:arial,sans-serif;
color:red;
}
---以瀏覽器實測---
．CSSlink.htm
．CSS1.css
---css與HTML的完美配合---
．HTML標籤只負責"content"(內容)。
．css負責外觀。
．若以linking的方式使用css，css檔還可以存放在遠端伺服器上。
---css檔存放在遠端web server的實例測試---
．css1.css的儲存路徑為
http://www2.nkfust.edu.tw/~weichih/CSS/css1.css
．<link rel="stylesheet" type="text/css" href="css1.css"/>
相對路徑
改為
．<link rel="stylesheet" type="text/css" href="http://www2.nkfust.edu.tw/~weichih/CSS/css1.css"/>
絕對路徑
---css的學習網站介紹---
．http://www.pcnet.idv.tw/pcnet/css/