從了解到深入——樣式表幾點分析

2019-11-18 12:25:41

字體：大中小

來源：轉載

供稿：網友

樣式表簡介
　　
　　樣式表（或者稱為層疊樣式表，英文名Cascading Style Sheet，即CSS）是Html的一部分，但作為對HTML元素（或者標識）展示效果的一種擴展，其功能極為強大，可以說，有了樣式表，你可以完全放棄HTML元素的屬性不用就能實現精美的網頁排版于布局，因此本站將樣式表和HTML分開來，作為專門的一塊進行講訴。對于有HTML基礎的朋友來說，學習樣式表是非常輕松安閑的事。
　　
　　樣式表不算是什么新東西，它已經誕生了許多年了，但因為在實現方面的缺乏，它的強大性和重要性在很大程度上未被注重到。網頁制作者渴望通過改善WEB的展示樣式來為自己的網頁加入創新的動力，于是開始使用NETSCAPE或者IE專有的擴展功能，而不是功能更加強大的樣式表。這是很自然的，因為這些專有的擴展功能能被大多數的瀏覽者看見，而強大的樣式表卻很少人看見。
　　
　　而今越來越多的瀏覽齊支持樣式表，樣式表答應改善整個展示樣式的同時保留平臺獨立性的獨有特性開闊了網頁制作者的視野。樣式表的優點變得更加明顯，實現一個滿足的效果更加輕易。雖然不斷的為展示效果不斷地加入越來越多的HTML標記是一個缺點。
　　
　　Netscape的BODY屬性現在被廣泛的使用，成了HTML3.2及HTML4.0的標準。可是其bgcolor，text等屬性和其他屬性的靈活程度完全比不上樣式表。大部分的背景圖象會任由網頁不能讓那些只有16色顯示的人所接受。而對于一些網頁256色仍很難接受。使用傳統的BODY屬性，一個網頁制作者必須權衡使用背景圖象帶來的好處是否比付出的代價還重。使用樣式表的話，網頁制作者可以用一些不同的樣式表提交一批不同的圖象，以便用戶可以根據自己的系統可以顯示的顏色而選擇是24位樣式表還是8位樣式表。假如網頁制作者提供的樣式表都不適合用戶，用戶只要忽略網頁制作者的樣式表就是了。
　　
　　樣式表可以令網頁制作者的工作更加輕松，當每個水平線語句都需要使用<hr width="75%" size=5 align="center">的時候，網頁制作者將覺得非常麻煩。使用樣式表，只需要指定這樣的參數一次，網頁樣式就可以被整個網站應用。而且假如網頁制作者覺得width=50%更好需要更改的話，那么他只需要在一個地方改變這個參數，而不是找遍幾百頁來更改HTML。不僅僅如此，當一個文件包含了所有的樣式信息時，樣式表還可以減少下載的時間。
　　
　　樣式表也為他們提供的展示效果的項目給予更多的靈活性。屬性，如顏色，背景，邊界，邊框和許多其他的屬性都能被所有的元素應用（包括在通常情況下無法使用背景和邊框屬性的<p>,<a>,<b>,<h1>~<h6>等元素）。僅僅使用HTML和它專有的擴展，必須依靠象bgcolor之類的屬性，而這些屬性只對于少數的一些元素有效（比如對前面提到的<p>,<a>等元素就無效）。樣式表給予應用一個樣式到所有段落，或所有的二級標題，或所有的強調文字很大的靈活性。
　　
　　在段落中，通常都會讓首行文字前面會留些空白，這就叫縮進。使用樣式表，網頁制作者可以使用文本縮進屬性來縮進文本，而不是非常麻煩的鍵入來用空格進行縮進。假如網頁制作者決定改變網站中所有段落的縮進，他只需要改變樣式表中的一行就行了。
　　
　　使用HTML的<font size=#>元素定義網頁中的文字大小，不但只有size=1~7共七種效果供選擇，瀏覽者還可以通過瀏覽器的一個菜單來進行調整，這經常會使原本排版精美的頁面變得凌亂不堪，更不用說精確定位了。使用樣式表，不但可以任意選擇文字大小，而且還提供了常規的靜態定位，相對定位甚至是絕對定位。
　　
　　樣式表在WEB方面邁開了一個巨大的前進步伐。隨著HTML和樣式表的內容和展示效果的差距，WEB不需要放棄優秀的思想??平臺獨立性。今天，樣式表已經成為HTML4.0的一個事實標準。誰都愿意看到邏輯清楚，簡潔而美麗的HTML源代碼。網頁制作者最終可以改善文檔的展示而不會使源代碼太復雜以至于擁護根本不能閱讀網頁。
　　
　　樣式表實例講解
　　
　　有好幾種方法將樣式表應用到網頁中，最簡單的就是使用HTML的style組件并且放置在網頁的頭元素<head></head>中，比如下面的代碼實現段落呈黑色背景，白色字體顯示的代碼：
　　
　　<html>
　　
　　<head>
　　
　　<title>樣式表范例</title>
　　
　　<style type="text/css">
　　
　　p{background-color:#000000;color:#ffffff}
　　
　　</style>
　　
　　</head>
　　
　　<body>
　　
　　<p>樣式表不算是什么新東西，它已經誕生了許多年了，但因為在實現方面的缺乏，它的強大性和重要性在很大程度上未被注重到。網頁制作者渴望通過改善WEB的展示樣式來為自己的網頁加入創新的動力，于是開始使用NETSCAPE或者IE專有的擴展功能，而不是功能更加強大的樣式表。這是很自然的，因為這些專有的擴展功能能被大多數的瀏覽者看見，而強大的樣式表卻很少人看見。
　　
　　</p>
　　
　　</body>
　　
　　</html>
　　
　　顯示效果如下：
　　
　　樣式表不算是什么新東西，它已經誕生了許多年了，但因為在實現方面的缺乏，它的強大性和重要性在很大程度上未被注重到。網頁制作者渴望通過改善WEB的展示樣式來為自己的網頁加入創新的動力，于是開始使用NETSCAPE或者IE專有的擴展功能，而不是功能更加強大的樣式表。這是很自然的，因為這些專有的擴展功能能被大多數的瀏覽者看見，而強大的樣式表卻很少人看見。
　　
　　下面就讓我們來分析一下樣式表的構成。style標識是HTML原有的，在這里其type=text/css屬性是必須的。夾在style標識之間的就是樣式表定義的內容了?？紤]到用戶的瀏覽器版本過低不支持樣式表的情況下會錯誤的將style中的內容顯示在頁面上，這是網頁設計者所不愿見到的，因此還需要在style內加上HTML的注釋標識，這樣高版本的瀏覽器可以正確讀取樣式信息，同時不會在低版本的瀏覽器中顯示出來。即寫成：
　　
　　<style type="text/css">
　　
　　
　　
　　</style>
　　
　　今后我們將只書寫樣式表中的內容，省略其他部分（包括style標識），請自己添加。
　　
　　你可能已經注重到style標識中僅有p{background:#000000;color:#ffffff;}這么短短的一點代碼，對，就是它在起作用。花括號前面的p稱為選擇符，表示對該文件中的<p>標識起作用，同樣的道理，你可以將其換為body{……}，就可以控制<body>標識了。
　　
　　花括號中的background-color當然是背景顏色了，color則是文字顏色，它們都可以稱為樣式表中的屬性，至于#000000和#ffffff則是屬性對應的值，他們代表什么就不用我多說了吧！屬性和值之間用冒號':'分隔。多個屬性之間用分號';'分隔。冒號和分號前后假如有空格不會對樣式語法及效果表產生影響。假如是有多個選擇符，沒關系直接寫下去就可以了，比如下面的樣子：
　　
　　body{width:600px}p{color:#000000}
　　
　　當然為了美觀建議在定義完body后，即在p之前換行，當然這樣僅僅是為了美觀，如下：
　　
　　body{width:600px}
　　
　　p{color:#000000}
　　
　　你甚至可以將包括style標識在內的所有代碼都寫在一行以內，前提是你不怕樣式表修改時不易閱讀的話。
　　
　　假如有如下的樣式定義：
　　
　　body{font-size:12px}
　　
　　p{font-size:12px}
　　
　　即定義兩個或者多個元素具有相同的屬性，我們是否可以將其合并一次定義呢？答案是肯定的。只要用逗號分隔兩個選擇符即可：
　　
　　body,p{font-size:12px;}
　　
　　假如一個頁面中有很多個鏈接元素<a>，而現在只需要定義所有位于段落中的<a>元素（即形如：<p>……<a href=#>……</a>……</p>的鏈接元素）帶刪除線而不影響位于table中的a元素怎么辦呢？寫成下面這樣就可以了：
　　
　　p a{text-decoration:line-through}
　　
　　即用空格表示元素的包含關系。那么假如一個屬性具有的兩個或者多個值可以并存怎么辦呢？也用空格分隔屬性值即可，比如定義鏈接具有上劃線和下劃線：
　　
　　a{text-decoration:underline overline}
　　
　　樣式表定義的幾種方法
　　
　　上一講中只能對同一類元素進行樣式定義，假如我們只需要定義某一個元素，比如在一個HTML頁面中有許多p元素，現在我只想定義其中一個p元素怎么辦呢？這就是我們這一講中將要闡明的。事實上樣式表共有4中方法進行表示，上一講只提到兩種，剩下的兩種都可以解決這個問題。讓我們看看：
　　
　　1，以HTML元素作為選擇符方式：
　　
　　這就是上一講的主要內容，用法很簡單，HTML元素后緊跟花括號進行定義即可。
　　
　　2，關聯選擇符方式：
　　
　　就是前面提到的只定義位于某一類元素中的HTML元素，比如只定義嵌套在表格table中的表格寬300個象素：
　　
　　table table{width:300px}
　　
　　其中px是象素單位，當然也可以用絕對單位如毫米mm，厘米cm，磅pt及百分比單位40%；
　　
　　3，類選擇符方式：
　　
　　自定義一個類名進行定義，并在HTML元素中加上屬性class=#，其中#表示自定義的類名。比如定義樣式：
　　
　　.warning{color:#ff0000;}
　　
　　其中warning是自定義的類名，可以隨意取名。注重在warning前面有個小圓點。然后在body中對需要應用該樣式的地方加上屬性class=類名，如：
　　
　　<p class="warning">類選擇符進行定義</p>
　　
　　類選擇符方式是樣式表應用最多的

上一篇：J2EE綜合：如何處理大數據量的查詢

下一篇：找到打包jre使JBuilder生成exe文件運行