CSS 簡介
你在開始學習CSS之前，應確保自己擁有以下預備知識：
HTML / XHTML
要學習HTML和XHTML ，可透過PHP中文網（php.cn）首頁找到相關教學
#學習CSS就要知道什麼是CSS?
CSS 指層疊樣式表(Cascading Style Sheets)
樣式定義如何顯示 HTML 元素
#樣式通常存儲在樣式表中
把樣式加入HTML 4.0 中，是為了解決內容與表現分離的問題
- ##外在樣式表可以極大提升工作效率
- 外部樣式表通常儲存在 CSS 檔案中
- 多個樣式定義可層疊為一
樣式解決了一個很大的問題
#HTML 標籤原本是設計用來定義文件內容，如下實例：這是一個段落.
CSS 樣式表大大提高了工作效率
樣式表格定義如何顯示HTML 元素樣式表定義如何顯示HTML 元素，就像HTML 3.2 的字型標籤和色彩屬性所扮演的角色一樣。樣式通常保存在外部的 .css 檔案中。透過僅僅編輯一個簡單的 CSS 文檔，外部樣式表使你有能力同時改變網站中所有頁面的佈局和外觀。
CSS實例
#一個HTML文件可以顯示不同的樣式<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网（php.cn）</title>
<style>
h1{color: #00a0e9}
p{background-color: #8de943
}
p.ex {margin-top:2cm;}
p.bottommargin {margin-bottom:25%;}
</style>
</head>
<body>
<h1>标题</h1>
<p>一个没有指定边距大小的段落。</p>
<p class="ex">一个2厘米上边距的段落。</p>
</body>
</html>執行程式試試看
新建檔案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
h1 {color:#00ff00;}
p{color: #ffd4f0
}
.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个普通的段落。请注意,本文是红色的。页面中定义的默认文本颜色选择器。</p>
<p class="ex">这段文字是蓝色的</p>
</body>
</html>
預覽
Clear
- 課程推薦
- 課件下載
課件暫不提供下載，工作人員正在整理中，後期請多關注該課程~ 