CSS樣式代碼在網(wǎng)頁設(shè)計時必須保存在.css類型的文本文件中，或者放在網(wǎng)頁內(nèi)<style>標(biāo)簽中，或者在網(wǎng)頁設(shè)計時插在網(wǎng)頁標(biāo)簽的style屬性值中，否則是無效的，瀏覽器會視其如普通的字符串，而不對其進(jìn)行解析。詳細(xì)說明如下：
?直接放在標(biāo)簽的style屬性中。
【示例1】在下面代碼中，直接使用style屬性為標(biāo)簽定義樣式。
<span style="color:red;">紅色字體</span>
<div style="border:solid 1px blue;
width:200px; height:200px;"></div>
這樣當(dāng)瀏覽器解析這些標(biāo)簽時，檢測到該標(biāo)簽包含有style屬性，于是就調(diào)用CSS引擎來解析這些樣式碼，并把效果呈現(xiàn)出來。這種通過style屬性直接把樣式碼放在標(biāo)簽內(nèi)的做法被稱之為行內(nèi)樣式，因為它與傳統(tǒng)網(wǎng)頁布局中在標(biāo)簽增加屬性的設(shè)計方法沒有什么兩樣，這種方法實際上還沒有真正把HTML結(jié)構(gòu)和CSS表現(xiàn)分開進(jìn)行設(shè)計，因此不建議使用。除非為頁面中個別元素設(shè)置某個特定樣式效果而單獨進(jìn)行定義。
?把樣式代碼放在<style>標(biāo)簽內(nèi)。
【示例2】在下面代碼中，把樣式代碼放置在<style>標(biāo)簽內(nèi)。
<style type="text/css">body {/*頁面基本屬性*/
font-size: 12px;
color: #CCCCCC;}
/*段落文本基礎(chǔ)屬性*/
p { background-color: #FF00FF; }
</style>
在網(wǎng)頁設(shè)計時設(shè)置<style>時應(yīng)該指定type屬性，告訴瀏覽器該標(biāo)簽包含的代碼是CSS源代碼。
這樣當(dāng)瀏覽器解析<style>標(biāo)簽所包含的代碼時，會自動調(diào)用CSS引擎進(jìn)行解析。這種CSS應(yīng)用方式也被稱為網(wǎng)頁內(nèi)部樣式。如果僅為一個頁面定義CSS樣式時，使用這種方法比較高效，且管理方便。但是在一個網(wǎng)站中，或多個頁面之間引用時，使用這種方法會產(chǎn)生代碼冗余，不建議使用，而且一頁頁管理樣式也是不經(jīng)濟(jì)的。
內(nèi)部樣式一般放在網(wǎng)頁的頭部區(qū)域，目的是讓CSS源代碼早于頁面源代碼下載并被解析，這樣避免當(dāng)網(wǎng)頁信息下載之后，由于沒有CSS樣式渲染而使頁面信息無法正常顯示。
?保存在.css類型的文件中。
把樣式代碼保存在單獨的.css類型文件中，然后使用<link>標(biāo)簽或者@import關(guān)鍵字導(dǎo)入。這樣當(dāng)瀏覽器遇到這些代碼時，會自動根據(jù)它們提供的URL把外部樣式表文件導(dǎo)入到頁面中并進(jìn)行解析。關(guān)于這個話題將在之后詳細(xì)分析。這種應(yīng)用樣式的方式也被稱為外部樣式。一般網(wǎng)站都采用外部樣式來設(shè)計網(wǎng)站的表現(xiàn)層問題，以便統(tǒng)籌設(shè)計CSS樣式，并能夠快速開發(fā)和高效管理。