自定義網(wǎng)站樣式
2024-02-24 分類： 網(wǎng)站建設(shè)
樣式表是網(wǎng)頁設(shè)計的重要部件。由于得到 Microsoft Internet Explorer 4.0 和 Netscape Navigator 4.0 的認(rèn)可，樣式表已經(jīng)成為可用的排版和設(shè)計工具。這兩種瀏覽器都有限地（不完整）支持由 Cascading Style Sheet 1.0 制定的 World Wide Web Consortium. 標(biāo)準(zhǔn)。在設(shè)計時，樣式表可以使您完整地控制網(wǎng)頁上文字元素的表現(xiàn)，為您帶來幾乎與出版業(yè)的設(shè)計一樣的多靈活性。
本文向您介紹創(chuàng)建和使用樣式表的基本內(nèi)容，以及跨瀏覽器兼容問題和樣式表在 Web 上的發(fā)展趨勢。假定您已掌握了基本的 HTML 知識。
基本內(nèi)容
樣式表只是一個格式化命令的列表，它使您可以在簡單 HTML 命令（如 <FONT>標(biāo)記）的基礎(chǔ)上控制網(wǎng)頁的外觀。樣式表的概念并非全新的，它們來自文字處理器和排版軟件。頁面上的每個元素，從個別字符到整個頁面均可通過樣式表中包含的信息來單獨定制格式。
在 Web 上，由于存在多種不同類型 瀏覽器，所以排版上有許多限制。并且每個瀏覽器僅有限地支持樣式表。用在 Web 上的樣式表被成為層疊樣式表 (CSS)，其被 W3C 所認(rèn)可的最新版本是 2.0。然而，象這里寫的一樣，沒有瀏覽器 100% 地支持 CSS 1.0 和 2.0 版。本文將集中介紹 CSS 1.0 版 － 不用擔(dān)心它會被淘汰，因為 2.0 版完全向下與 1.0 版兼容。
您可以創(chuàng)建的最簡單的樣式表被稱作"嵌入樣式表"。它可以直接被放置或?qū)懺诘侥玫?HTML 文檔中，該網(wǎng)頁的結(jié)構(gòu)如下所示：
<HTML> <HEAD> <TITLE>Style Sheets Demo</TITLE> <STYLE type="text/css" media="screen"> <!-- hide from legacy browsers P {color: red; font: Arial, Helvetica, sans-serif} A {color: blue; font: Comic Sans MS, sans-serif} --> </STYLE> </HEAD> <BODY>.....
現(xiàn)在您看到了樣式表的樣子，我們來解析它并為您解釋每個部件。
<STYLE type="text/css" media="screen">....</STYLE> 該標(biāo)記包含了被調(diào)用的樣式表信息，不奇怪， <STYLE>標(biāo)記。 類似于大多數(shù)的 HTML 標(biāo)記，它也需要被"封閉"，以正確實現(xiàn)功能（就是說，它必須以 </STYLE> 標(biāo)記結(jié)束）。這個特殊的標(biāo)記必須出現(xiàn)在 <HEAD>標(biāo)記之間，以使其能夠被大多數(shù)的瀏覽器解析。在這個開放標(biāo)記的聲明中，必須包含兩個屬性: 屬性告訴瀏覽器要使用的樣式表的格式 (在此例中，可用的類型是"text/css")，而 media屬性告訴瀏覽器顯示介質(zhì)是顯示器（屏幕）還是打印頁面（印刷品）；但對當(dāng)前的瀏覽器來說，該值只代表"屏幕"。
我剛才添加的這兩個 <STYLE> 屬性未必是所有的瀏覽器都需要的。Microsoft Internet Explorer 對樣式表的解釋不是非常嚴(yán)格，可以忽略這些屬性。Netscape Navigator卻不可思議的對這些屬 性的要求非常嚴(yán)格。我還是加上它們 － 這畢竟是好的編碼方式。如果 W3C聲明這些屬性是必 須的，那就加上它們吧。唯一的方法是建議兩大公司 (Microsoft and Netscape)采取一致行動， 為我們這些網(wǎng)頁設(shè)計者制定統(tǒng)一的 CSS標(biāo)準(zhǔn)。
<!-- .... --> 下面是注釋行。它出現(xiàn)在 <STYLE> 標(biāo)記行的下面，和 </STYLE>標(biāo)記行的上邊。注釋不是必須的，但添加注釋是好的編碼習(xí)慣；理由是注釋行可以在用戶使用舊瀏覽器（兩大公司的 3.0、2.0 和 1.0 系列）查看網(wǎng)頁時，可以使樣式表數(shù)據(jù)不被顯示出來。舊瀏覽器會自動略過它們無法識別的標(biāo)記，但由于在 <STYLE> 標(biāo)記之間的內(nèi)容是純文本，又未被任何標(biāo)記括起來，所以舊瀏覽器就可能會將它們顯示出來。但如果在這些內(nèi)容的前后加上注釋標(biāo)記，就可以確保這些內(nèi)容被那些瀏覽器略過。別忘了封閉您的注釋塊，否則整個頁面都將不顯示。
P {color: red; font: Arial, Helvetica, sans-serif} 最后我們來到 CSS 的核心 － 定義元素。通過下列方法定義每個元素：元素 {屬性: 值; 屬性: 值}。這里的"元素"是您要重新指定樣式的 HTML 標(biāo)記；"屬性：值"是預(yù)定義的樣式表的外觀（以 CSS 規(guī)范設(shè)置）及相應(yīng)的值。所有的"屬性：值"的組合必須用"{ }"括起來。屬性也可以通過冒號 [ : ] 帶一個值來描述，屬性－值的配對可以通過分號 [ ; ] 帶其它配對來描述。最后一個屬性－值的配對后不需帶 [ ; ]，因為在該括弧中沒有其它的配對跟隨其后了。
這里是一些定義特定元素樣式所例舉的屬性及其相應(yīng)的值：
屬性 可接受的值 注解 font-size xx-large, x-large, large, small, x-smll, xx-small, Npx, Npc, Npt, Nmm, Ncm, Nin N = 數(shù)字, px = 像素, pc = Picas, pt = 點, mm = 毫米, cm =厘米, in = 英寸。
這些值是絕對的，不管查看設(shè)備如何，將按同樣大小準(zhǔn)確顯示：Picas、點、毫米、厘米和英寸。其它值將根據(jù)查看設(shè)備和字體比例相對顯示。
font-family cursive, fantasy, mono-space, sans-serif, serif, 字體組合名稱 字體樣式的描述 (cursive、fantasy 等等) 告訴瀏覽器選取與描述類型相匹配的默認(rèn)字體 － 請記住，并非每個人都有您所擁有的字體。
如果您可以確定您網(wǎng)站的觀眾已安裝了所需的字體，那么選取特定的字體是好辦法。例如，所有 Windows 系統(tǒng)的用戶都默認(rèn)安裝了 Arial 字體，因此如果您的目標(biāo)觀眾是 Windows 用戶，那么將 Arial 設(shè)置為 font-family 就是安全的。
在解釋樣式表時，如果瀏覽器沒有檢測到指定的字體，那么它將自動移到該列表的下一個字體（如上面的例子，每個字體用逗號分隔）。如果列出的字體均未被發(fā)現(xiàn)，那么瀏覽器將使用默認(rèn)字體。
color 顏色名, 十六進制顏色代碼 只有使用字體名可以被 W3C 指定的瀏覽器識別。但使用十六進制值也是個好習(xí)慣。 font-weight normal, bold 作用與 ... 或 ... 標(biāo)記類似，但只用于樣式表。 font-style normal, italic 作用與 ...標(biāo)記類似，只用于樣式表。 font 字體名 比 font-family 更明確。需要單獨字體的名稱，而不是一個字體組合。與 font-family 一樣，如果瀏覽器找不到該字體，就使用默認(rèn)字體。 上面列出的屬性和值僅是整個集合的一小部分，但它們對您著手排版網(wǎng)頁已經(jīng)足夠了，不用再只使用<FONT> 標(biāo)記了。在您為某個元素定義了樣式之后，那么在網(wǎng)頁上該元素的實體將采用指定的格式。
本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！
基本內(nèi)容
樣式表只是一個格式化命令的列表，它使您可以在簡單 HTML 命令（如 <FONT>標(biāo)記）的基礎(chǔ)上控制網(wǎng)頁的外觀。樣式表的概念并非全新的，它們來自文字處理器和排版軟件。頁面上的每個元素，從個別字符到整個頁面均可通過樣式表中包含的信息來單獨定制格式。
在 Web 上，由于存在多種不同類型 瀏覽器，所以排版上有許多限制。并且每個瀏覽器僅有限地支持樣式表。用在 Web 上的樣式表被成為層疊樣式表 (CSS)，其被 W3C 所認(rèn)可的最新版本是 2.0。然而，象這里寫的一樣，沒有瀏覽器 100% 地支持 CSS 1.0 和 2.0 版。本文將集中介紹 CSS 1.0 版 － 不用擔(dān)心它會被淘汰，因為 2.0 版完全向下與 1.0 版兼容。
您可以創(chuàng)建的最簡單的樣式表被稱作"嵌入樣式表"。它可以直接被放置或?qū)懺诘侥玫?HTML 文檔中，該網(wǎng)頁的結(jié)構(gòu)如下所示：
<HTML> <HEAD> <TITLE>Style Sheets Demo</TITLE> <STYLE type="text/css" media="screen"> <!-- hide from legacy browsers P {color: red; font: Arial, Helvetica, sans-serif} A {color: blue; font: Comic Sans MS, sans-serif} --> </STYLE> </HEAD> <BODY>.....
現(xiàn)在您看到了樣式表的樣子，我們來解析它并為您解釋每個部件。
<STYLE type="text/css" media="screen">....</STYLE> 該標(biāo)記包含了被調(diào)用的樣式表信息，不奇怪， <STYLE>標(biāo)記。 類似于大多數(shù)的 HTML 標(biāo)記，它也需要被"封閉"，以正確實現(xiàn)功能（就是說，它必須以 </STYLE> 標(biāo)記結(jié)束）。這個特殊的標(biāo)記必須出現(xiàn)在 <HEAD>標(biāo)記之間，以使其能夠被大多數(shù)的瀏覽器解析。在這個開放標(biāo)記的聲明中，必須包含兩個屬性: 屬性告訴瀏覽器要使用的樣式表的格式 (在此例中，可用的類型是"text/css")，而 media屬性告訴瀏覽器顯示介質(zhì)是顯示器（屏幕）還是打印頁面（印刷品）；但對當(dāng)前的瀏覽器來說，該值只代表"屏幕"。
我剛才添加的這兩個 <STYLE> 屬性未必是所有的瀏覽器都需要的。Microsoft Internet Explorer 對樣式表的解釋不是非常嚴(yán)格，可以忽略這些屬性。Netscape Navigator卻不可思議的對這些屬 性的要求非常嚴(yán)格。我還是加上它們 － 這畢竟是好的編碼方式。如果 W3C聲明這些屬性是必 須的，那就加上它們吧。唯一的方法是建議兩大公司 (Microsoft and Netscape)采取一致行動， 為我們這些網(wǎng)頁設(shè)計者制定統(tǒng)一的 CSS標(biāo)準(zhǔn)。
<!-- .... --> 下面是注釋行。它出現(xiàn)在 <STYLE> 標(biāo)記行的下面，和 </STYLE>標(biāo)記行的上邊。注釋不是必須的，但添加注釋是好的編碼習(xí)慣；理由是注釋行可以在用戶使用舊瀏覽器（兩大公司的 3.0、2.0 和 1.0 系列）查看網(wǎng)頁時，可以使樣式表數(shù)據(jù)不被顯示出來。舊瀏覽器會自動略過它們無法識別的標(biāo)記，但由于在 <STYLE> 標(biāo)記之間的內(nèi)容是純文本，又未被任何標(biāo)記括起來，所以舊瀏覽器就可能會將它們顯示出來。但如果在這些內(nèi)容的前后加上注釋標(biāo)記，就可以確保這些內(nèi)容被那些瀏覽器略過。別忘了封閉您的注釋塊，否則整個頁面都將不顯示。
P {color: red; font: Arial, Helvetica, sans-serif} 最后我們來到 CSS 的核心 － 定義元素。通過下列方法定義每個元素：元素 {屬性: 值; 屬性: 值}。這里的"元素"是您要重新指定樣式的 HTML 標(biāo)記；"屬性：值"是預(yù)定義的樣式表的外觀（以 CSS 規(guī)范設(shè)置）及相應(yīng)的值。所有的"屬性：值"的組合必須用"{ }"括起來。屬性也可以通過冒號 [ : ] 帶一個值來描述，屬性－值的配對可以通過分號 [ ; ] 帶其它配對來描述。最后一個屬性－值的配對后不需帶 [ ; ]，因為在該括弧中沒有其它的配對跟隨其后了。
這里是一些定義特定元素樣式所例舉的屬性及其相應(yīng)的值：
屬性 可接受的值 注解 font-size xx-large, x-large, large, small, x-smll, xx-small, Npx, Npc, Npt, Nmm, Ncm, Nin N = 數(shù)字, px = 像素, pc = Picas, pt = 點, mm = 毫米, cm =厘米, in = 英寸。
這些值是絕對的，不管查看設(shè)備如何，將按同樣大小準(zhǔn)確顯示：Picas、點、毫米、厘米和英寸。其它值將根據(jù)查看設(shè)備和字體比例相對顯示。
font-family cursive, fantasy, mono-space, sans-serif, serif, 字體組合名稱 字體樣式的描述 (cursive、fantasy 等等) 告訴瀏覽器選取與描述類型相匹配的默認(rèn)字體 － 請記住，并非每個人都有您所擁有的字體。
如果您可以確定您網(wǎng)站的觀眾已安裝了所需的字體，那么選取特定的字體是好辦法。例如，所有 Windows 系統(tǒng)的用戶都默認(rèn)安裝了 Arial 字體，因此如果您的目標(biāo)觀眾是 Windows 用戶，那么將 Arial 設(shè)置為 font-family 就是安全的。
在解釋樣式表時，如果瀏覽器沒有檢測到指定的字體，那么它將自動移到該列表的下一個字體（如上面的例子，每個字體用逗號分隔）。如果列出的字體均未被發(fā)現(xiàn)，那么瀏覽器將使用默認(rèn)字體。
color 顏色名, 十六進制顏色代碼 只有使用字體名可以被 W3C 指定的瀏覽器識別。但使用十六進制值也是個好習(xí)慣。 font-weight normal, bold 作用與 ... 或 ... 標(biāo)記類似，但只用于樣式表。 font-style normal, italic 作用與 ...標(biāo)記類似，只用于樣式表。 font 字體名 比 font-family 更明確。需要單獨字體的名稱，而不是一個字體組合。與 font-family 一樣，如果瀏覽器找不到該字體，就使用默認(rèn)字體。 上面列出的屬性和值僅是整個集合的一小部分，但它們對您著手排版網(wǎng)頁已經(jīng)足夠了，不用再只使用<FONT> 標(biāo)記了。在您為某個元素定義了樣式之后，那么在網(wǎng)頁上該元素的實體將采用指定的格式。
本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！
分享文章：自定義網(wǎng)站樣式
轉(zhuǎn)載源于：http://jinyejixie.com/news23/318673.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計、虛擬主機、網(wǎng)站導(dǎo)航、關(guān)鍵詞優(yōu)化、電子商務(wù)、網(wǎng)站設(shè)計公司
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- Linux安全和常見弱點，保護VPS主機的安全提示 2024-02-24
- 做網(wǎng)站并不等于網(wǎng)絡(luò)營銷 2024-02-24
- 企業(yè)網(wǎng)站維護需要注意哪些問題 2024-02-24
- 成都百度排名推廣公司網(wǎng)站建設(shè)有什么好處 2024-02-24
- 成都網(wǎng)站建設(shè)在網(wǎng)站設(shè)計上應(yīng)該避免哪些問題？ 2024-02-24
- 成都網(wǎng)站推廣之網(wǎng)上商城如何進行開發(fā)建設(shè)？ 2024-02-24
- 了解美國VPS服務(wù)器租用中的優(yōu)質(zhì)選擇 2024-02-24
- 品牌網(wǎng)站設(shè)計都需要一個“新聞工具包”(濟南高端網(wǎng)站設(shè)計品牌) 2024-02-24
- 云服務(wù)器和專用服務(wù)器如何工作？專用托管和云托管之間的區(qū)別是什么？ 2024-02-24
- 網(wǎng)站建設(shè)中的優(yōu)化需要我們注意哪些 2024-02-24
- 淺談響應(yīng)式網(wǎng)站開發(fā)(響應(yīng)式網(wǎng)站和普通網(wǎng)站) 2024-02-24
- 成功的網(wǎng)站建設(shè)需要注意的是什么？ 2024-02-24
- 做成都網(wǎng)站建設(shè)文章維護更新有哪些關(guān)鍵需注意 2024-02-24
- 企業(yè)如何做微信營銷 2024-02-24
- 傳統(tǒng)制造業(yè)怎么通過互聯(lián)網(wǎng)轉(zhuǎn)型升級 2024-02-24
- 傳統(tǒng)企業(yè)商家轉(zhuǎn)型互聯(lián)網(wǎng)如何開展網(wǎng)絡(luò)營銷推廣 2024-02-24
- 成都網(wǎng)站設(shè)計——和風(fēng)網(wǎng)站的設(shè)計要點及常用素材 2024-02-24
- oa系統(tǒng)開發(fā)機構(gòu)需要注意的幾個問題 2024-02-24
- 成都微信小程序開發(fā)定制需要注意什么問題？ 2024-02-24