上一篇
下一篇
CSS(Cascading Style Sheets)簡(jiǎn)介
作者:晉城網(wǎng)站建設(shè) 日期:2010-02-16
在學(xué)CSS之前
學(xué)習(xí)CSS之前，首先應(yīng)學(xué)會(huì)寫(xiě)HTML。如果你對(duì)HTML還一無(wú)所知。
CSS(Cascading Style Sheets)簡(jiǎn)介
當(dāng)初一幫技術(shù)人員想出HTML，主要側(cè)重于定義內(nèi)容，比如<p>表示一個(gè)段落，<h1>表示標(biāo)題，而并沒(méi)有過(guò)多設(shè)計(jì)HTML的排版和界面效果。
隨著Internet的迅猛發(fā)展，HTML被廣泛應(yīng)用，上網(wǎng)的人們當(dāng)然希望網(wǎng)頁(yè)做得漂亮些，因此HTML排版和界面效果的局限性日益暴露出來(lái)。為了解決這個(gè)問(wèn)題，人們也走了不少?gòu)澛罚昧艘恍┎缓玫姆椒ǎ热缃oHTML增加很多的屬性結(jié)果將代碼變得很臃腫，將文本變成圖片，過(guò)多利用Table來(lái)排版，用空白的圖片表示白色的空間等。直到CSS出現(xiàn)。
CSS可算是網(wǎng)頁(yè)設(shè)計(jì)的一個(gè)突破，它解決了網(wǎng)頁(yè)界面排版的難題。可以這么說(shuō)，HTML的Tag主要是定義網(wǎng)頁(yè)的內(nèi)容(Content)，而CSS決定這些網(wǎng)頁(yè)內(nèi)容如何顯示(Layout)。
CSS的英文是Cascading Style Sheets，中文可以翻譯成串聯(lián)式樣式表。
CSS按其位置可以分成三種：
- 內(nèi)嵌樣式(Inline Style)
- 內(nèi)部樣式表(Internal Style Sheet)
- 外部樣式表(External Style Sheet)
內(nèi)嵌樣式(Inline Style)
Inline Style是寫(xiě)在Tag里面的。內(nèi)嵌樣式只對(duì)所在的Tag有效。
<P style="font-size:20pt; color:red">這個(gè)Style定義<p></p>里面的文字是20pt字體，字體顏色是紅色。</p>
內(nèi)部樣式表(Internal Style Sheet)
內(nèi)部樣式表是寫(xiě)在HTML的<head></head>里面的。內(nèi)部樣式表只對(duì)所在的網(wǎng)頁(yè)有效。
<HTML>
<HEAD>
<STYLE type="text/css">
H1.mylayout {border-width:1; border:solid; text-align:center; color:red}
</STYLE>
</HEAD>
<BODY>
<H1 class="mylayout"> 這個(gè)標(biāo)題使用了Style。</H1>
<H1>這個(gè)標(biāo)題沒(méi)有使用Style。</H1>
</BODY>
</HTML>
內(nèi)部樣式表(Internal Sytle Sheet)要用到Style這個(gè)Tag，寫(xiě)法如下：
<STYLE type="text/css">
......
</STYLE>
外部樣式表(External Style Sheet)
如果很多網(wǎng)頁(yè)需要用到同樣的樣式(Styles)，用什么方法呢？
將樣式(Styles)寫(xiě)在一個(gè)以.css為后綴的CSS文件里，然后在每個(gè)需要用到這些樣式(Styles)的網(wǎng)頁(yè)里引用這個(gè)CSS文件。
比如可以用文本編輯器(NotePad)建立一個(gè)叫home的文件，文件后綴不要用.txt，改成.css。文件內(nèi)容如下：
H1.mylayout {border-width: 1; border: solid; text-align: center;color:red}
然后你建立一個(gè)網(wǎng)頁(yè)，代碼如下：
<HTML>
<HEAD>
<link href="../asdocs/css_tutorials/home.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<H1 class="mylayout"> 這個(gè)標(biāo)題使用了Style。</H1>
<H1>這個(gè)標(biāo)題沒(méi)有使用Style。</H1>
</BODY>
</HTML>
使用外部(Extenal)樣式表，相對(duì)于內(nèi)嵌(Inline)和內(nèi)部式(Internal)的，有以下優(yōu)點(diǎn)：
- 樣式代碼可以復(fù)用。一個(gè)外部CSS文件，可以被很多網(wǎng)頁(yè)共用。
- 便于修改。如果要修改樣式，只需要修改CSS文件，而不需要修改每個(gè)網(wǎng)頁(yè)。
- 提高網(wǎng)頁(yè)顯示的速度。如果樣式寫(xiě)在網(wǎng)頁(yè)里，會(huì)降低網(wǎng)頁(yè)顯示的速度，如果網(wǎng)頁(yè)引用一個(gè)CSS文件，這個(gè)CSS文件多半已經(jīng)在緩存區(qū)(其它網(wǎng)頁(yè)早已經(jīng)引用過(guò)它)，網(wǎng)頁(yè)顯示的速度就比較快。
串聯(lián)(Cascading)
CSS第一個(gè)字母，是Cascading，意為串聯(lián)。它是指不同來(lái)源的樣式(Styles)可以合在一起，形成一種樣式。
Cascading的順序是：
- 瀏覽器缺省(browser default)(優(yōu)先級(jí)最低)
- 外部樣式表(Extenal Style Sheet)
- 內(nèi)部樣式表(Internal Style Sheet)
- 內(nèi)嵌樣式表(Inline Style)(優(yōu)先級(jí)最高)
樣式(Styles)的優(yōu)先級(jí)依次是內(nèi)嵌(inline), 內(nèi)部(internal), 外部(external), 瀏覽器缺省(browser default)。假設(shè)內(nèi)嵌(Inline)樣式中有font-size:30pt, 而內(nèi)部(Internal)樣式中有font-size:12pt，那么內(nèi)嵌(Inline)式樣式就會(huì)覆蓋內(nèi)部(Internal)樣式。
Tags: