Java Blog From WeiChunHua

Java

留言簿(1)

隨筆分類

隨筆檔案

相冊

Introduction MySelf

閱讀排行榜

評論排行榜

常用鏈接

統計

隨筆 - 34
文章 - 0
評論 - 54
引用 - 0

develop

train java (rss)
this is training department.

news

apache (rss)
open source websize
news (rss)
days news

CSS 全解

CSS在英文中有如下幾種常見的縮寫：

1，Cascading Style Sheets 層疊樣式表

2，Content Scrambling System DVD電影的加密系統

3，Cast Semi-Steel 半鑄鋼, 鋼性鑄鐵

4，College Scholarship Service 大學獎學金處

其中在網絡上最常見的是Cascading Style Sheets（層疊樣式表）

感性體驗CSS

什么是CSS呢？你可能急迫的想知道答案。但是空泛的文字描述意義不大，讓我們先來一點感性體驗吧。看看這個沒有添加CSS的HTML文件：http://www.csszengarden.com/zengarden-sample.html
是一個普普通通的網頁。然而通過給這個文件添加的CSS規則，我們可以得到十分美觀的網頁：http://www.csszengarden.com/

這還不是全部，不改動HTML，只是通過添加不同的CSS規則，我們就可以得到各種不同樣式的網頁：
http://www.csszengarden.com/?cssfile=/208/208.css&page=0
好了，下面我們再來回答什么是CSS這個問題。

什么是Cascading Style Sheets（層疊樣式表）

* CSS是Cascading Style Sheets(層疊樣式表)的簡稱.
* CSS語言是一種標記語言,它不需要編譯,可以直接由瀏覽器執行(屬于瀏覽器解釋型語言).
* 在標準網頁設計中CSS負責網頁內容(XHTML)的表現.
* CSS文件也可以說是一個文本文件,它包含了一些CSS標記,CSS文件必須使用css為文件名后綴.
* 可以通過簡單的更改CSS文件,改變網頁的整體表現形式,可以減少我們的工作量,所以她是每一個網頁設計人員的必修課.
* CSS是由W3C的CSS工作組產生和維護的.

如何將樣式表加入到網頁

可以用以下三種方式將樣式表加入您的網頁。而最接近目標的樣式定義優先權越高。高優先權樣式將繼承低優先權樣式的未重疊定義但覆蓋重疊的定義。例外請參閱 !important 聲明。

鏈入外部樣式表文件 (Linking to a Style Sheet)
你可以先建立外部樣式表文件（.css），然后使用HTML的link對象。示例如下：
<head>
<title>文檔標題</title>
<link rel=stylesheet type="text/css">
</head>
而在XML中，你應該如下例所示在聲明區中加入：
<? xml-stylesheet type="text/css" ?>

定義內部樣式塊對象 (Embedding a Style Block)
你可以在你的HTML文檔的<HTML>和<BODY>標記之間插入一個<STYLE>...</STYLE>塊對象。定義方式請參閱樣式表語法。示例如下：
<html>
<head>
<title>文檔標題</title>
<style type="text/css">

</style>
</head>
<body>
請注意，這里將style對象的type屬性設置為"text/css"，是允許不支持這類型的瀏覽器忽略樣式表單。

內聯定義 (Inline Styles)
內聯定義即是在對象的標記內使用對象的style屬性定義適用其的樣式表屬性。示例如下：
這一行被增加了左右的外補丁

Cascading Style Sheets（層疊樣式表）的歷史
從1990年代初HTML被發明開始樣式表就以各種形式出現了，不同的瀏覽器結合了它們各自的樣式語言，讀者可以使用這些樣式語言來調節網頁的顯示方式。一開始樣式表是給讀者用的，最初的HTML版本只含有很少的顯示屬性，讀者來決定網頁應該怎樣被顯示。
但隨著HTML的成長，為了滿足設計師的要求，HTML獲得了很多顯示功能。隨著這些功能的增加外來定義樣式的語言越來越沒有意義了。
1994年哈坤·利提出了CSS的最初建議。伯特·波斯（Bert Bos）當時正在設計一個叫做Argo的瀏覽器，他們決定一起合作設計CSS。
當時已經有過一些樣式表語言的建議了，但CSS是第一個含有“層疊”的主意的。在CSS中，一個文件的樣式可以從其它的樣式表中繼承下來。讀者在有些地方可以使用他自己更喜歡的樣式，在其他地方則繼承，或“層疊”作者的樣式。這種層疊的方式使作者和讀者都可以靈活地加入自己的設計，混合各人的愛好。
哈坤于1994年在芝加哥的一次會議上第一次展示了CSS的建議，1995年他與波斯一起再次展示這個建議。當時W3C剛剛建立，W3C對CSS的發展很感興趣，它為此組織了一次討論會。哈坤、波斯和其他一些人（比如微軟的托馬斯·雷爾登）是這個項目的主要技術負責人。1996年底，CSS已經完成。1996年12月CSS要求的第一版本被出版。
1997年初，W3C內組織了專門管CSS的工作組，其負責人是克里斯·里雷。這個工作組開始討論第一版中沒有涉及到的問題，其結果是1998年5月出版的第二版要求。到2004年為止，第三版還未出版。

* 1996年W3C正式推出了CSS1.
* 1998年W3C正式推出了CSS2.
* CSS2.1是W3C現在正在推薦使用的.
* CSS3現在還處于開發中.

網頁設計中常用的CSS屬性

文字或元素的顏色 color
背景顏色 background-color
背景圖像 background-image
字體 font-family
文字大小 font-size
列表樣式 list
鼠標樣式 cursor
邊框樣式 border
內補白 padding
外邊距 margin
等...

CSS的語法:

　　CSS的定義是由三個部分構成:
　　選擇符(selector)，屬性(properties)和屬性的取值(value)。
　　語法: selector {property: value} (選擇符 {屬性:值})
　　說明:
　　·選擇符是可以是多種形式，一般是你要定義樣式的HTML標記，例如BODY、P、TABLE……，你可以通過此方法定義它的屬性和值，屬性和值要用冒號隔開:
　　例子:body {color: black}，此例的效果是使頁面中的文字為黑色。
　　·如果屬性的值是多個單詞組成，必須在值上加引號，比如字體的名稱經常是幾個單詞的組合:
　　例子:p {font-family: "sans serif"} (定義段落字體為sans serif)
　　· 如果需要對一個選擇符指定多個屬性時，我們使用分號將所有的屬性和值分開:
　　例子:p {text-align: center; color: red} (段落居中排列;并且段落中的文字為紅色)
　　2. 選擇符組
　　你可以把相同屬性和值的選擇符組合起來書寫，用逗號將選擇符分開，這樣可以減少樣式重復定義:
　　h1, h2, h3, h4, h5, h6 { color: green } (這個組里包括所有的標題元素，每個標題元素的文字都為綠色)
　　p, table{ font-size: 9pt } (段落和表格里的文字尺寸為9號字)
　　效果完全等效于:
　　p { font-size: 9pt }
　　table { font-size: 9pt }
　　3. 類選擇符
　　用類選擇符你能夠把相同的元素分類定義不同的樣式，定義類選擇符時，在自定類的名稱前面加一個點號。假如你想要兩個不同的段落，一個段落向右對齊，一個段落居中，你可以先定義兩個類:
　　p.right {text-align: right}
　　p.center {text-align: center}
　　然后用不在不同的段落里，只要在HTML標記里加入你定義的class參數:
　　這個段落向右對齊的
　　這個段落是居中排列的
　　類選擇符還有一種用法，在選擇符中省略HTML標記名，這樣可以把幾個不同的元素定義成相同的樣式:
　　.center {text-align: center} (定義.center的類選擇符為文字居中排列)
　　這樣的類可以被應用到任何元素上。下面我們使h1元素(標題1)和p元素(段落)都歸為“center”類，這使兩個元素的樣式都跟隨“.center”這個類選擇符:
　　<h1 class="center">這個標題是居中排列的</h1>
　　這個段落也是居中排列的

　　注意:這種省略HTML標記的類選擇符是我們經后最常用的CSS方法，使用這種方法，我們可以很方便的在任意元素上套用預先定義好的類樣式。
　　4. ID選擇符
　　在HTML頁面中ID參數指定了某個單一元素，ID選擇符是用來對這個單一元素定義單獨的樣式。
　　ID選擇符的應用和類選擇符類似，只要把CLASS換成ID即可。將上例中類用ID替代:
　　這個段落向右對齊
　　定義ID選擇符要在ID名稱前加上一個“#”號。和類選擇符相同，定義ID選擇符的屬性也有兩種方法。下面這個例子，ID屬性將匹配所有id="intro"的元素:
　　#intro
　　{
　　font-size:110%;
　　font-weight:bold;
　　color:#0000ff;
　　background-color:transparent
　　} (字體尺寸為默認尺寸的110%;粗體;藍色;背景顏色透明)
　　下面這個例子，ID屬性只匹配id="intro"的段落元素:
　　p#intro
　　{
　　font-size:110%;
　　font-weight:bold;
　　color:#0000ff;
　　background-color:transparent
　　}
　　注意:ID選擇符局限性很大，只能單獨定義某個元素的樣式，一般只在特殊情況下使用。
　　5. 包含選擇符
　　可以單獨對某種元素包含關系定義的樣式表，元素1里包含元素2，這種方式只對在元素1里的元素2定義，對單獨的元素1或元素2無定義，例如:
　　table a
　　{
　　font-size: 12px
　　}
　　在表格內的鏈接改變了樣式，文字大小為12象素，而表格外的鏈接的文字仍為默認大小。
　　6. 樣式表的層疊性
　　層疊性就是繼承性，樣式表的繼承規則是外部的元素樣式會保留下來繼承給這個元素所包含的其他元素。事實上，所有在元素中嵌套的元素都會繼承外層元素指定的屬性值，有時會把很多層嵌套的樣式疊加在一起，除非另外更改。例如在DIV標記中嵌套P標記:
　　div { color: red; font-size:9pt}
　　……
　　這個段落的文字為紅色9號字
　　(P元素里的內容會繼承DIV定義的屬性)
　　注意:有些情況下內部選擇符不繼承周圍選擇符的值，但理論上這些都是特殊的。例如，上邊界屬性值是不會繼承的，直覺上，一個段落不會同文檔BODY一樣的上邊界值。
　　另外，當樣式表繼承遇到沖突時，總是以最后定義的樣式為準。如果上例中定義了P的顏色:
　　div { color: red; font-size:9pt}
　　p {color: blue}
　　……
　　這個段落的文字為藍色9號字
　　我們可以看到段落里的文字大小為9號字是繼承div屬性的，而color屬性則依照最后定義的。
　　不同的選擇符定義相同的元素時，要考慮到不同的選擇符之間的優先級。ID選擇符，類選擇符和HTML標記選擇符，因為ID選擇符是最后加上元素上的，所以優先級最高，其次是類選擇符。如果想超越這三者之間的關系，可以用!important提升樣式表的優先權，例如:
　　p { color: #FF0000!important }
　　.blue { color: #0000FF}
　　#id1 { color: #FFFF00}
　　我們同時對頁面中的一個段落加上這三種樣式，它最后會依照被!important申明的HTML標記選擇符樣式為紅色文字。如果去掉!important，則依照優先權最高的ID選擇符為黃色文字。
　　
7. 注釋:/* ... */
　　你可以在CSS中插入注釋來說明你代碼的意思，注釋有利于你或別人以后編輯和更改代碼時理解代碼的含義。在瀏覽器中，注釋是不顯示的。CSS注釋以"/*" 開頭，以"*/" 結尾，如下:
　　/* 定義段落樣式表 */
　　p
　　{
　　text-align: center; /* 文本居中排列 */
　　color: black; /* 文字為黑色 */
　　font-family: arial /* 字體為arial */
　　}

css可以用任何寫文本的工具進行開發,如文本工具,dreamweaver開發
css也是一種語言,這種語言要和html或者xhtml語言相結合才起作用,
css簡單來說就是用來美化網頁用的,用css語言來控制網頁的外觀
舉個例子
xhtml部分:
<ul>
<li>主頁</li>
<li>留言</li>
<li>論壇</li>
</ul>
此時在頁面上的表達形式是一個豎向列表,這樣不夠美觀,
可以css來改善這個列表為一個橫向導航條和超鏈接
css部分:
ul{list-style:none;margin:0px;padding:0px}
ul li{margin:0px;padding:0px;float:left;}
ul li a{display:block;width:100px;height:30px;background:#efefef;color:#333;text-decoration:none;text-align:center}
ul li a:hover{background:#333;color:#fff;}
添加上css后,這個列表變成橫向的導航條了,超級鏈接是淡色背景,灰色字體,沒有下劃線,高度是30像素,寬度是100像素
當我們鼠標經過這個超級鏈接時候,變成灰色背景,白色字體

在主頁制作時采用CSS技術，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制。

只要對相應的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數不同的網頁的外觀和格式。

它的作用可以達到：

（1）在幾乎所有的瀏覽器上都可以使用。

（2）以前一些非得通過圖片轉換實現的功能，現在只要用CSS就可以輕松實現，從而更快地下載頁面。

（3）使頁面的字體變得更漂亮，更容易編排，使頁面真正賞心悅目。

（4）你可以輕松地控制頁面的布局。

（5）你可以將許多網頁的風格格式同時更新，不用再一頁一頁地更新了。你可以將站點上所有的網頁風格都使用一個CSS文件進行控制，只要修改這個CSS文件中相應的行，那么整個站點的所有頁面都會隨之發生變動。

想一想，沒有使用CSS前我們是如何控制字體的顏色和大小以及所使用的字體的？我們一般使用HTML標簽來實現，代碼非常煩瑣。

很難想象，如果在一個頁面里需要頻繁地更替字體的顏色大小，最終生成的HTML代碼的長度一定臃腫不堪。

說實話，CSS就是為了簡化這樣的工作誕生的，當然其功能決非這么簡單。

CSS是通過對頁面結構的風格控制的思想，控制整個頁面的風格的。

式樣單放在頁面中，通過瀏覽器的解釋執行，是完全的文本，任何懂得HTML的人都可以掌握，非常的容易。甚至對一些非常老的瀏覽器，也不會產生頁面混亂的現象。

CSS的一大優點是它的圖片傳輸速度比較完全的HTML網頁要快一點。

CSS:
Chinese,Surface-to-Surface
中國面對面導彈簡稱ＣＳＳ－Ｎ
CSS具有兩面性。就像它在格式化文本、導航欄、圖片以及其他小小的網頁方面很棒一樣，當你準備好布局完整的網頁時，它真正可怕的一面也展現出來了。
CSS布局有兩種風格——絕對定位和浮動。絕對定位讓你把一個元素以像素級的精確性定位在網頁的任何位置——或者理論上是這樣。這種整體控制令人興奮，就如你將在下一章中所看到的，但是實際上很難實現。這就是大量網頁使用基于浮動的布局的原因，也是本章的主題。
CSS布局如何進行
How CSS Layout Works
如在第1章中討論過的，HTML的局限性迫使設計師們去開發更聰明的方式來使他們的網頁更美觀。過去最常用的工具是[table]標簽，它本是用來創建電子數據表——比如由數據行和列組成的信息顯示表。但是設計師們卻用HTML的表格來創建一種用來組織網頁內容的腳手架（見圖11-1）。可是由于[table]標簽本來不是要用于布局的，因此設計師們不得不經常以各種不尋常的方式來使用這個標簽——比如把一個表格放在另一個表格的單元里面——僅僅為了得到他們想要的效果。這種方法的工作量很大，增加了大量額外的HTML代碼，并使得后面要修改設計很難。但是在CSS出現之前，那就是網頁設計師們所擁有的一切辦法。
如果你已經習慣于使用[table]標簽，那么當你開始使用CSS進行布局時，必須發展一種新的思維。首先，忘掉行和列（運用表格時的一種重要的觀念）。沒有
列跨度、行跨度和格子狀的表格結構在CSS中是找不到的。然而，你可以把一個標簽當成一個表格單元。有了表格單元，標簽就是把你要的內容定位在網頁區域的一個邏輯位置。此外，如你所見，CSS設計經常把一個div嵌套在另一個div里面，就像你把表格嵌套在表格里面來獲得特定的效果一樣——但是，幸運的是，CSS方法只用少得多的HTML代碼。
強大的標簽
The Mighty Tag
無論使用表格還是CSS，網頁布局都是把大塊的內容放進網頁的不同區域里面。有了CSS，最常用來組織內容的元素就是標簽。如第18頁所述，標簽是沒有固有格式化屬性的一個HTML元素（除了瀏覽器把這個標簽當成前后有換行的塊之外）；反之，它被用來標識元素的一個邏輯組合或者網頁中的一個分區。
你將代表性地把一大塊屬于一起的HTML包圍在一個里面。圖11-1中包含logo和導航欄的元素占據了網頁頂部，因此用一個標簽把它們包圍起來很有意義。至少，你要給網頁的所有主要區域包含標簽，例如橫幅、主要內容區域、工具條、頁腳，等等。但是它也可能把一個或者更多的div包在一個里面。一種最常用的方法就是把<body>標簽里面的HTML包在一個里面。然后可以通過把CSS應用到包裝，設置基礎的頁面屬性。你可以給網頁內容設定一個整體的寬度，設置左邊距和右邊距，或者把所有網頁內容在屏幕的中間居中。（在第313頁的教程中，你有機會用到一個包裝。）
一旦已經把標簽放在了適當的位置上，再給每個標簽添加一個類或者ID，變成你分別對每個定義樣式的句柄。對于只出現一次和形成網頁的基本構建塊的網頁部位，設計師們通常使用一個ID。一個網頁橫幅區域的標
簽看起來可能像這樣：。你可以對一個ID每頁只使用一次，因此當有一個多次顯示的元素時，就用一個類代替。如果你有幾個定位照片和照片說明的div時，可以創建一個樣式像這樣：。
有了類似這些的樣式，就可以定位各種各樣的網頁元素了。利用CSS的float屬性，你可以定位不同的內容塊給一張網頁的左邊或者右邊（或者一個包含塊比如另一個的左邊或者右邊）。
至理名言
更多并非更好
雖然div對于CSS布局很重要，但也別對你的網頁濫用div。一個常見的陷阱是相信你必須把一張網頁中的一切都包圍在一個標簽里面。假設你的主導航欄是一個鏈接的無序列表
（就像第218頁中所述）。由于它是一個重要的元素，你可能會試探用一個來把它圍起來：<ul>...</ul>
。但是當<ul>標簽唾手可得時，就沒有必要去添加一個了。只要<ul>包含主要的導航欄鏈接，就只需添加ID樣式給這個標簽：<ul id= "mainNav">。多余的只是一些沒有必要的代碼。

posted on 2008-06-30 11:22 sunny spring 閱讀(356) 評論(0) 編輯收藏所屬分類: javaee

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: JDBC連接數據庫大全 quartz 詳解 CSS 全解 jspSmartUpload上傳下載全攻略 JavaScript HTML標簽詳解 java文件上傳代碼 ResultSet大全 javascript頁面間傳參數 HTTP Status 403 - Access to the requested resource has been denied