CSS 簡介

你在開始學習CSS之前,應確保自己擁有以下預備知識: 

  • HTML / XHTML 

要學習HTML和XHTML ,可透過PHP中文網(php.cn)首頁找到相關教學


#學習CSS就要知道什麼是CSS?

  • CSS 指層疊樣式表(Cascading Style Sheets)

  • 樣式定義如何顯示 HTML 元素

  • #樣式通常存儲在樣式表中

  • 把樣式加入HTML 4.0 中,是為了解決內容與表現分離的問題

  • ##外在樣式表可以極大提升工作效率

  • 外部樣式表通常儲存在 CSS 檔案中

  • 多個樣式定義可層疊為一


樣式解決了一個很大的問題

#HTML 標籤原本是設計用來定義文件內容,如下實例:


這是一個標題

這是一個段落.


樣式表定義如何顯示HTML 元素,就像HTML 3.2 的字型標籤和色彩屬性所扮演的角色。樣式通常保存在外部的 .css 檔案中。透過僅僅編輯一個簡單的 CSS 文檔,外部樣式表使你有能力同時改變網站中所有頁面的佈局和外觀。

為了解決這個問題,萬維網聯盟(W3C),這個非營利的標準化聯盟,肩負起了 HTML 標準化的使命,並在 HTML 4.0 之外創造出樣式(Style)。

當代瀏覽器都支援CSS .


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>