1、信息學院課題組23 七月 2021n隨著隨著Internet的迅猛開展，的迅猛開展，HTML被廣泛運用，被廣泛運用，上網的人們當然希望網頁做得美麗些，因此上網的人們當然希望網頁做得美麗些，因此HTML排版和界面效果的局限性日益暴顯露來。排版和界面效果的局限性日益暴顯露來。 nCSS可算是網頁設計的一個突破，它處理了網可算是網頁設計的一個突破，它處理了網頁界面排版的難題。可以這么說，頁界面排版的難題。可以這么說，HTML的標的標簽主要是定義網頁的內容簽主要是定義網頁的內容(Content)，而，而CSS決議這些網頁內容如何顯示決議這些網頁內容如何顯示(Layout)。nCSS的英文是的英文是Ca

2、scading Style Sheets，中文可以翻譯成串聯式層疊款式表。中文可以翻譯成串聯式層疊款式表。nCSS按其位置可以分成三種：按其位置可以分成三種：n內嵌款式內嵌款式(Inline Style) n內部款式表內部款式表 (Internal Style Sheet ) n外部款式表外部款式表(External Style Sheet)nCSS第一個字母，是第一個字母，是Cascading，意為串聯。，意為串聯。它是指不同來源的款式它是指不同來源的款式(Styles)可以合在一同，可以合在一同，構成一種款式。構成一種款式。nCascading的順序是：的順序是：n閱讀器缺省閱讀器缺省(b

3、rowser default )(優先級最優先級最低低) n外部款式表外部款式表(Extenal Style Sheet) n內部款式表內部款式表(Internal Style Sheet) n內嵌款式表內嵌款式表(Inline Style)(優先級最高優先級最高)n網頁維護方便，網頁內容和顯示分別。網頁維護方便，網頁內容和顯示分別。n縮短下載時間，防止標志的反復下載。縮短下載時間，防止標志的反復下載。n款式功能強大，款式效果豐富。款式功能強大，款式效果豐富。n可以一處指定，多處運用。可以一處指定，多處運用。n文件易讀性好。文件易讀性好。n選擇符選擇符屬性：值屬性：值n選擇符選擇符屬性屬性1：

4、值：值1；屬性；屬性2：值：值2nCSS注釋注釋n為了方便他本人或者他人日后更好地了解他的為了方便他本人或者他人日后更好地了解他的CSS代碼，他可以寫代碼，他可以寫CSS代碼注釋。代碼注釋。CSS代碼代碼注釋以注釋以/*開頭開頭 ，以，以*/終了。終了。n根本聲明方式：根本聲明方式：pfont-size:36pxn分項聲明方式：分項聲明方式： npfont-size:36pxnpcolor:#FF0000n集體聲明方式：集體聲明方式：nPfont-size:36px; color:#FF0000nP,h1font-size:36px; color:#FF0000n在在css款式面板上單擊鼠標右

5、鍵款式面板上單擊鼠標右鍵ncss款式面板右上角的下拉菜單款式面板右上角的下拉菜單ncss款式面板下方的款式面板下方的“新建新建css款式按鈕款式按鈕nCSS款式表類型款式表類型n類：可以被恣意標簽經過類：可以被恣意標簽經過Class屬性援用屬性援用n標簽：重新定義某特定標簽的外觀標簽：重新定義某特定標簽的外觀n高級：設定鏈接或特定高級：設定鏈接或特定ID的屬性的屬性n內嵌款式的運用方法：內嵌款式的運用方法：n將將STYLE屬性直接加在個別的元件標簽里，屬性直接加在個別的元件標簽里， 元件元件(標簽標簽) STYLE=屬性屬性1: 值值1; 屬性屬性2: 值值2; . n例如：例如：TD STY

6、LE=“COLOR:BLUE; font-size:9pt; font-family: “楷體楷體; line-height:150% 這種用法的優點這種用法的優點 是可乖巧運用款式於各標是可乖巧運用款式於各標簽中，但是缺陷那么是沒有整篇文件的簽中，但是缺陷那么是沒有整篇文件的“一致性一致性。 n內部款式表，寫在內部款式表，寫在HTML的的里面的。內部款式表只對所里面的。內部款式表只對所 在的在的網頁有效。網頁有效。 n例如：例如： STYLE TYPE=text/css !- BODY color: BLUE; background: #ffffff; font-size: 9pt TD,

7、P COLOR: GREEN; font-size: 9pt - /STYLEn將款式規那么寫在將款式規那么寫在STYLE./STYLE標簽之中。標簽之中。n通常是將整個的通常是將整個的 STYLE./STYLE構造寫在網頁的構造寫在網頁的HEAD /HEAD部份部份之中。這種用法的優點就是在於整篇文件的一之中。這種用法的優點就是在於整篇文件的一致性，只需是有聲明的的元件即會套用該款式致性，只需是有聲明的的元件即會套用該款式規那么。缺陷就是在個別元件的靈敏度缺乏。規那么。缺陷就是在個別元件的靈敏度缺乏。 n外部款式表外部款式表n將款式規那么寫在將款式規那么寫在.css的款式檔案中，再以的款式檔

8、案中，再以LINK標簽引入。標簽引入。 n假設我們把款式規那么存成一個假設我們把款式規那么存成一個example.css的的檔案，我們只需在網頁中參與檔案，我們只需在網頁中參與LINK REL=STYLESHEET TYPE=“text/css HREF=“example.css n即可套用該款式檔案中所制定好的款式了。即可套用該款式檔案中所制定好的款式了。 通常是通常是將將LINK標簽寫在網頁的標簽寫在網頁的head/head部部份之中。這種用法的優點就是在於可以把要套用一份之中。這種用法的優點就是在於可以把要套用一樣款式規那么的數篇文件都指定到同一個款式檔案樣款式規那么的數篇文件都指定到同

9、一個款式檔案即可。缺陷也是在個別文件或元件的靈敏度缺乏。即可。缺陷也是在個別文件或元件的靈敏度缺乏。 n運用運用import引入，跟引入，跟LINK用法很像，但必放在用法很像，但必放在STYLE./STYLE 中。中。 nSTYLE TYPE=“text/css !- import url(引入的的位址、途徑與檔名引入的的位址、途徑與檔名);- /STYLE n例如：例如： STYLE TYPE=text/css !- import url(yourweb/ example.css); - /STYLE nCSS款式定義的沖突款式定義的沖突n同一個標簽的一樣屬性被多處定義時，以最后同一個標簽的

10、一樣屬性被多處定義時，以最后定義的為準。定義的為準。n頁面元素被多個標簽作用時，假設標簽款式定頁面元素被多個標簽作用時，假設標簽款式定義有沖突，以間隔頁面元素最近的標簽款式為義有沖突，以間隔頁面元素最近的標簽款式為準。準。n一個標簽中，假設既有用一個標簽中，假設既有用HTML定義的款式，定義的款式，也有經過也有經過Class援用的款式，那么以援用的款式，那么以Class援用援用的款式為準。的款式為準。nCSS編輯器編輯器n類型類型n背景背景n區塊段落文字區塊段落文字n方框圖片、文字方框圖片、文字n邊框表格邊框表格n列表有序、無序列表列表有序、無序列表n定位層定位層n擴展擴展CSS濾鏡只適宜圖像、表格、層，不適濾鏡只適宜圖像、表格、層，不適宜直接作用于文字宜直接作用于文字n運用運用CSS款式款式n管理管理CSS款式款式n在在CSS款式面板上右鍵單擊