學習誌
首頁 網頁設計指引 行內式CSS

如果你曾經看過關於HTML的資料，你一定會覺得奇怪，為什麼在文字格式中沒有介紹如何設定字型顏色、字體大小等讓網頁美化的HTML語法。原本這些設定可透過標籤的屬性來做到，但是W3C(制定XHTML規範的機構，也是制定CSS規範的機構)建議以CSS取代元素中的排版類型的屬性，使用CSS能夠讓你更方便快速地美化你的網頁。

範例 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>
      CSS概說
    </title>
  </head>
  <body>
    <p>
      這是<span style="color:red;">紅色</span>的字
    </p>
    <p>
      這也是<span style="color:#FF0000;">紅色</span>的字
    </p>
    <p>
      這還是<span style="color:rgb(255,0,0);">紅色</span>的字
    </p>
  </body>
</html>

以上的範例說明了讓文字改變色彩的方法，以前是用<font color="red"> </font>，現在改成<span style="color:red;"> </span>感覺上好像變得更冗長，實際上，當你看完以下的範例就會知道使用CSS的威力。

範例 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>
      CSS概說
    </title>
  </head>
  <body>
    <p style="color:blue;">
    這是一段藍色的字，
但是有夾雜<span style="color:red;">紅色</span>的字和<span style="background-color:black;">背景變色</span>的字，
用元素font可做不到只讓一小段文字改變背景顏色的喔。
雖然只有<span style="background-color:black;">背景變色，
由於較內層的HTML元素會繼承外層HTML元素的樣式，
所以這一小段是黑底藍字</span>，
除非內層元素重複設定了外層元素已經設定過的樣式，
這樣會因為內層樣式有高於外層樣式的優先權，
而產生<span style="font-weight:bold;">修改樣式</span>的效果。
這是<span style="color:yellow; background-color:black;">黃色前景加上黑色背景</span>的字，
不錯吧？
    </p>
    <p>
      這是另一段文字。
    </p>
  </body>
</html>

以上的範例的說明：幾乎所有的HTML元素都有style，除了html、head、meta、title、base、param、script、style。而style的屬性值是以"屬性名稱:屬性值; 屬性名稱:屬性值; ..."的形式設定，每一個樣式屬性皆以;結尾。span用於更動一個字或一行字這樣小範圍的樣式，如果網頁整體是一種樣式，只是有某個大範圍需要另一種樣式，那就用div。

範例 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>
      CSS概說
    </title>
  </head>
  <body style="background-color:black; color:white;">
    <p>
      第一段
    </p>
    <p>
      第二段
    </p>
    <p>
      第三段
    </p>
    <div style="color:yellow;">
      <p>
        第四段
      </p>
      <p>
        第<span style="color:red;">五</span>段
      </p>
      <p>
        第六段
      </p>
    </div>
    <p>
      第七段
    </p>
    <p>
      第八段
    </p>
    <p>
      第九段
    </p>
  </body>
</html>

以上的範例，body的樣式設定為黑底白字，只有少部分的段落或文字有修改樣式。之前的範例都是使用style來設定樣式，我們稱此為或稱為行內樣式。用這種方式設定樣式很麻煩，而且W3C的CSS Validation Service不認為這網頁使用了CSS，所以不會檢驗該網頁是否符合CSS。

Valid XHTML 1.0! Valid CSS!