深圳網(wǎng)站制作就上篇文章：《網(wǎng)站制作之什么是CSS語(yǔ)言？（一）》的css語(yǔ)言介紹，今天繼續(xù)分享css語(yǔ)言的基本用法做一個(gè)分享。
一、靜態(tài)網(wǎng)頁(yè)制作之CSS基本用法
CSS樣式代碼必須保存在.css類型的文本文件中，或者放在網(wǎng)頁(yè)內(nèi)<style>標(biāo)簽中，或者插在網(wǎng)頁(yè)標(biāo)簽的style屬性值中，否則是無(wú)效的，瀏覽器會(huì)視其如普通的字符串，而不對(duì)其進(jìn)行解析。詳細(xì)說(shuō)明如下：
1.直接放在標(biāo)簽的style屬性中。
【示例1】在下面代碼中，直接使用style屬性為標(biāo)簽定義樣式。
<spanstyle="color:red;">紅色字體</span>
<divstyle="border:solid1pxblue;width:200px;height:200px;"></div>這樣當(dāng)瀏覽器解析這些標(biāo)簽時(shí)，檢測(cè)到該標(biāo)簽包含有style屬性，于是就調(diào)用CSS引擎來(lái)解析這些樣式碼，并把效果呈現(xiàn)出來(lái)。這種通過(guò)style屬性直接把樣式碼放在標(biāo)簽內(nèi)的做法被稱之為行內(nèi)樣式，因?yàn)樗c傳統(tǒng)網(wǎng)頁(yè)布局中在標(biāo)簽增加屬性的設(shè)計(jì)方法沒(méi)有什么兩樣，這種方法實(shí)際上還沒(méi)有真正把HTML結(jié)構(gòu)和CSS表現(xiàn)分開(kāi)進(jìn)行設(shè)計(jì)，因此不建議使用。除非為頁(yè)面中個(gè)別元素設(shè)置某個(gè)特定樣式效果而單獨(dú)進(jìn)行定義。
2.把樣式代碼放在<style>標(biāo)簽內(nèi)。
【示例2】在下面代碼中，把樣式代碼放置在<style>標(biāo)簽內(nèi)。
<styletype="text/css">
body{/*頁(yè)面基本屬性*/
font-size:12px;
color:#CCCCCC;
}
/*段落文本基礎(chǔ)屬性*/
p{background-color:#FF00FF;}
</style>
在設(shè)置<style>時(shí)應(yīng)該指定type屬性，告訴瀏覽器該標(biāo)簽包含的代碼是CSS源代碼。這樣當(dāng)瀏覽器解析<style>標(biāo)簽所包含的代碼時(shí)，會(huì)自動(dòng)調(diào)用CSS引擎進(jìn)行解析。這種CSS應(yīng)用方式也被稱為網(wǎng)頁(yè)內(nèi)部樣式。如果僅為一個(gè)頁(yè)面定義CSS樣式時(shí)，使用這種方法比較高效，且管理方便。但是在一個(gè)網(wǎng)站中，或多個(gè)頁(yè)面之間引用時(shí)，使用這種方法會(huì)產(chǎn)生代碼冗余，不建議使用，而且一頁(yè)頁(yè)管理樣式也是不經(jīng)濟(jì)的。內(nèi)部樣式一般放在網(wǎng)頁(yè)的頭部區(qū)域，目的是讓CSS源代碼早于頁(yè)面源代碼下載并被解析，這樣避免當(dāng)網(wǎng)頁(yè)信息下載之后，由于沒(méi)有CSS樣式渲染而使頁(yè)面信息無(wú)法正常顯示。
3.保存在.css類型的文件中。把樣式代碼保存在單獨(dú)的.css類型文件中，然后使用<link>標(biāo)簽或者@import關(guān)鍵字導(dǎo)入。這樣當(dāng)瀏覽器遇到這些代碼時(shí)，會(huì)自動(dòng)根據(jù)它們提供的URL把外部樣式表文件導(dǎo)入到頁(yè)面中并進(jìn)行解析。關(guān)于這個(gè)話題將在下面詳細(xì)分析。這種應(yīng)用樣式的方式也被稱為外部樣式。一般網(wǎng)站都采用外部樣式來(lái)設(shè)計(jì)網(wǎng)站的表現(xiàn)層問(wèn)題，以便統(tǒng)籌設(shè)計(jì)CSS樣式，并能夠快速開(kāi)發(fā)和高效管理。
二、靜態(tài)網(wǎng)頁(yè)制作之CSS樣式表
一個(gè)或多個(gè)CSS樣式可以組成一個(gè)樣式表。樣式表包括內(nèi)部樣式表和外部樣式表，它們沒(méi)有本質(zhì)區(qū)別，都是由一個(gè)或者多個(gè)樣式組成。
1．內(nèi)部樣式表內(nèi)部樣式表包含在<style>標(biāo)簽內(nèi)，一個(gè)<style>標(biāo)簽就表示一個(gè)內(nèi)部樣式表。而通過(guò)標(biāo)簽的style屬性定義的樣式屬性就不是樣式表。如果一個(gè)網(wǎng)頁(yè)文檔中包含多個(gè)<style>標(biāo)簽，就表示該文檔包含了多個(gè)內(nèi)部樣式表。
2．外部樣式表如果CSS樣式被放置在網(wǎng)頁(yè)文檔外部的文件中，則稱為外部樣式表，一個(gè)CSS樣式表文檔就表示一個(gè)外部樣式表。實(shí)際上，外部樣式表也就是一個(gè)文本文件，擴(kuò)展名為.css。當(dāng)把CSS樣式代碼復(fù)制到一個(gè)文本文件中后，另存為.css文件，它就是一個(gè)外部樣式表。如圖
所示就是禪意花園的外部樣式表（http://www.csszengarden.com/）。
可以在外部樣式表文件頂部定義CSS源代碼的字符編碼。
【示例】下面代碼定義樣式表文件的字符編碼為中文簡(jiǎn)體。@charset"gb2312";如果不設(shè)置CSS文件的字符編碼，可以保留默認(rèn)設(shè)置，則瀏覽器會(huì)根據(jù)HTML文件的字符編碼來(lái)解析CSS代碼。深圳網(wǎng)站制作博納網(wǎng)絡(luò)編輯整理，全文未完，敬請(qǐng)持續(xù)關(guān)注本站網(wǎng)站。
