1、CSS樣式,1 概述 CSS是網(wǎng)頁設計的一個突破，它解決了網(wǎng)頁界面排版的難題。可以這么說，HTML的Tag主要是定義網(wǎng)頁的內(nèi)容(Content)，而CSS決定這些網(wǎng)頁內(nèi)容如何顯示(Layout)。 CSS的英文是Cascading Style Sheets，中文可以翻譯成層疊樣式表。,xhtml css基礎知識,html常用代碼標簽釋義大全文件類型 文件主題 文頭 文體 標題 （從1到6，有六層選擇） 標題的對齊 區(qū)分 創(chuàng)建一個有序列表 設置每個表單項的內(nèi)容 段落 創(chuàng)建一個無序列表 大字 小字 加粗 斜體 底線 刪除線 下標 上標 表格 預定格式 （保留文件中空格的大小） 向中看齊 （文字與圖

2、片都可以） 字體大小 （從1到7） 字體顏色 ,網(wǎng)頁設計中CSS樣式表的作用,格式和結構分離： HTML從來沒打算控制網(wǎng)頁的格式或外觀。這種語言定義了網(wǎng)頁的結構和個要素的功能，而讓瀏覽器自己決定應該讓各要素以何種模樣顯示。CSS代碼獨立出來控制頁面外觀。 控制頁面的布局： 能使我們調(diào)整字號，標簽幫助我們生成邊距，但是，我們對HTML總體上的控制卻很有限。 我們不可能精確地生成80象素的高度， 不可能控制行間距或字間距，我們不能在屏幕上精確定位圖象的位置。樣式表使這一切都成為可能。 高效維護及更新網(wǎng)頁：使用串接樣式表可以減少表格標簽及其它加大HTML體積的代碼,減少圖象用量從而減少文件尺寸。 樣

3、式表的主旨就是將格式和結構分離。對于樣式表，可以將站點上所有的網(wǎng)頁都指向單一的一個CSS文件，只要修改CSS文件即可，整個站點都會隨之發(fā)生變動。 要想學好css，首先要轉變觀念，需要拋棄傳統(tǒng)的表格(Table)布局方式，采用層(DIV)布局，并且使用層疊樣式表(CSS)來實現(xiàn)頁面的外觀。,htmlfilter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);,常見加載css樣式方法,內(nèi)嵌樣式(Inline Style) 內(nèi)部樣式表(Internal Style Sheet) 外部樣式表(External Style Sheet

4、),內(nèi)嵌樣式(Inline Style),Inline Style是寫在Tag里面的。 內(nèi)嵌樣式只對所在的Tag有效。 示例： 這個Style定義里面的文字是20pt字體，字體顏色是紅色。 這種在標簽內(nèi)以style標記的為內(nèi)嵌樣式，內(nèi)嵌樣式只針對標簽內(nèi)的元素有效，因其沒有和內(nèi)容相分離，所以不建議使用。, 內(nèi)嵌式樣式(Inline Style) 這個內(nèi)嵌樣式(Inline Style)定義段落里面的文字是20pt字體，字體顏色是紅色。 這段文字沒有使用內(nèi)嵌樣式。 ,完整示例：,內(nèi)部樣式表(Internal Style Sheet),內(nèi)部樣式表是寫在HTML的里面的。內(nèi)部樣式表只對所在的網(wǎng)頁有效。

5、它以和結尾，這樣的樣式表只能針對本頁有效。不能作用于其它頁面。 示例1： H2 font-size:20pt;font-style:italic;color:blue;text-align:center;margin-left:10%; Background:#ffcccc Pcolor:red;text-indent:6cm 情有獨鐘寫冰雪 沁園春.雪 鳳凰學院 數(shù)字媒體 ,示例2, H1.mylayout border-width:1; border:solid; text-align:center; color:red H2.mylayout 這個標題使用了Style。 這個標題沒有使用

6、Style。 ,當多個網(wǎng)頁需要用到同樣的樣式(Styles)，用什么方法呢？ 將樣式(Styles)寫在一個以.css為后綴的CSS文件里，然后在每個需要用到這些樣式(Styles)的網(wǎng)頁里引用這個CSS文件即可。 外部樣式表的好處是不但本頁可以調(diào)用，其它頁面也可以調(diào)用，是最常用的一種形式。,外部樣式表(External Style Sheet),示例步驟： 1.先用文本編輯器(記事本)建立一個叫home的文件，文件后綴不要用.txt，改成.css。文件內(nèi)容如下： H1#mylayout border-width: 1; border: solid; text-align: center;co

7、lor:red,2.然后再建立一個網(wǎng)頁，代碼如下：, 這個標題使用了Style。 這個標題沒有使用Style。 ,使用外部(Extenal)樣式表，相對于內(nèi)嵌(Inline)和內(nèi)部式(Internal)的，有以下優(yōu)點： 樣式代碼可以復用。一個外部CSS文件，可以被很多網(wǎng)頁共用。 便于修改。如果要修改樣式，只需要修改CSS文件，而不需要修改每個網(wǎng)頁。 提高網(wǎng)頁顯示的速度。如果樣式寫在網(wǎng)頁里，會降低網(wǎng)頁顯示的速度，如果網(wǎng)頁引用一個CSS文件，這個CSS文件多半已經(jīng)在緩存區(qū)(其它網(wǎng)頁早已經(jīng)引用過它)，網(wǎng)頁顯示的速度比較快。,css優(yōu)先級,ID和CLASS選擇器 Id（#）優(yōu)先級高于class（.）

8、id只能在頁面中對應一個元素，就像我們的身份證號一樣，每個人的都不一樣；class為類，可以對應多個元素，比如說一年級三班的學生，它所對應的可能是10個20個學生。 id的優(yōu)先級高于class，比如說今天三班的學生上體育課，小明留下來打掃衛(wèi)生。那么三班的學生上體育課這是一個類，而小明打掃衛(wèi)生這是個id，雖然小明也是三班的學生，但id高于class，所以小明執(zhí)行打掃衛(wèi)生的任務。,Cascading的順序是： 瀏覽器缺省(browser default)(優(yōu)先級最低) 外部樣式表(Extenal Style Sheet) 內(nèi)部樣式表(Internal Style Sheet) 內(nèi)嵌樣式表(Inli

9、ne Style)(優(yōu)先級最高) 樣式(Styles)的優(yōu)先級依次是內(nèi)嵌(inline), 內(nèi)部(internal), 外部(external), 瀏覽器缺省(browser default)。,示例：假設內(nèi)嵌(Inline)樣式中有font-size:30pt, 而內(nèi)部(Internal)樣式中有font-size:12pt，那么內(nèi)嵌(Inline)式樣式就會覆蓋內(nèi)部(Internal)樣式。, Cascading Order p font-size:12pt 這個段落的內(nèi)嵌樣式(Inline Style)覆蓋(overwrite)了內(nèi)部樣式表(Internal Style Sheet)，顯

10、示的字體大小是30pt，而不是12pt。 ,單列結構網(wǎng)站,兩列結構網(wǎng)站,三列結構網(wǎng)站,一列布局是所有布局的基礎，只需要一個div即可。 一列固定寬度 css樣式代碼如下： #layout height: 480px; width: 720px; margin-top: 20px; margin-left: 150px; border: thick double #F79A94; font-family: 宋體; font-size: 9pt; color: #993300;,margin,margin : auto | length 設置對象上、右、下、左四邊的外邊距。 如果只提供一個，將用于

11、全部的四邊。 如果提供兩個，第一個用于上下，第二個用于左右。 如果提供三個，第一個用于上，第二個用于左右，第三個用于下。,一列居中,關鍵CSS樣式代碼 #layout height: 480px; width: 720px; border: thick double #F79A94; font-family: “宋體”; font-size: 9pt; color: #993300; margin:0px auto； ,一列多行居中自適用, 無標題文檔 !- #header font-family: 新宋體; color: #FFFFFF; background-color: #33FFCC;

12、 height: 80px; width: 500px; margin-top: 5px; margin-right: auto; margin-bottom: 5px; margin-left: auto; text-align: center; line-height: 80px; #content font-family: 新宋體; color: #FFFFFF; background-color: #CC00CC; background-position: center; height: 400px; width: 500px; margin: 5px auto; text-align

13、: center; line-height: 80px; ,#footer font-family: 新宋體; color: #FFFFFF; background-color: #33FFCC; background-position: center; height:50px; width: 500px; margin: 5px auto; text-align: center; line-height: 80px; 此處顯示 id header 的內(nèi)容 此處顯示 id content 的內(nèi)容 此處顯示 id footer 的內(nèi)容 ,這句話標明本文檔是過渡類型，另外還有框架和嚴格類型，目前一

14、般都采用過渡類型，因為瀏覽器對XHTML的解析比較寬松，允許使用HTML4.0中的標簽，但必須符合XHTML的語法。許多同學在制作頁面時，往往喜歡把這句刪除掉，在這里建議保留這句話，刪除它后可能引起某些樣式表失效或其它意想不到的問題。,二列固定寬度,Xhtml代碼： 左列 右列 CSS代碼： #left background-color: #ccc; border: 5px solid #666; width: 300px; height: 600px; margin-right:10px; float: left; ,#right background-color: #ccc; border

15、: 5px solid #666; width: 300px; height: 600px; float: left; ,float CSS布局中非常重要的屬性?？刂茖ο蟮母硬季?。 float : none | left | right 使用none時表示對象不浮動 使用left時對象向左浮動 使用right時對象浮動網(wǎng)頁右側。,示例二：兩列自適應, 無標題文檔 此處顯示 id side 的內(nèi)容 此處顯示 id main 的內(nèi)容 ,當我們拖動瀏覽器窗口變大變小時，#main的寬度也會跟著改變。這里設置margin-left:120px;正好讓出#side占去的120px寬度，如果這里設置為122px的話，中間將出現(xiàn)2px的空隙，同學們可以試一下。,思考：兩列居中如何實現(xiàn)？,參考答案, #content width:470px; margin:0 auto; #side background: #99FF99; height: 300px; width: 120px;