CSS原文檔資料

1、CSS、CSS 既述1.1 CSS 概述? CSS 級聯(lián)樣式表單-Cascading Style Sheet-對 WE 頁面進行外觀控制的機制-將頁面的內容和表現(xiàn)分離? CSS 版本-目前為止，CSS 有兩個官方標準：CSS1 和 CSS2-CSS1 的功能在大多數(shù)瀏覽器中都被支持1.2示例 - 無 CSSCSS 入門 注意：此頁面沒有用到 CSS 羊式，很顯然源代碼重復的比較多，有冗余;vh2歡迎同學們學習 CSS 歡迎同學們學習 CSS 歡迎同學們學習 CSS 1.2示例 - 有 CSSCSS 入門 h2font-family： 宋體; color：red注意:此頁面用到了 CSS 請查看

2、源代碼，是不是干凈了許多；歡迎同學們學習 CSS歡迎同學們學習 CSS歡迎同學們學習 CSS1.3 CSS 優(yōu)點? 優(yōu)點-代碼獨立，便于控制-樣式文件可在瀏覽器中緩存-便于分工合作-提高了可訪問性-提供更多的外觀控制手段二、CSS 的樣式2.1 樣式? CSS 樣式-內聯(lián)樣式-嵌入樣式-外聯(lián)樣式2.2 內聯(lián)? 內聯(lián)樣式-把樣式代碼內聯(lián)到標記內? 使用 style 作為屬性，樣式語句作為屬性值? 如： ? 控制 標記的邊框樣式為不折疊2.2 內聯(lián)特點? 內聯(lián)樣式特點-看上去很直觀-針對個別元素控制-和傳統(tǒng)的外觀控制方式?jīng)]有本質的不同-不推薦使用2.3 嵌入? 嵌入樣式-使用標記把樣式代碼插入到頁

3、面中-一般插入到記中-女口： CSS 語句 2.3 嵌入特點? 特點-將 CSS 語句直接寫在 HTM 文檔中，但它獨立存在，方便維護和修改 -僅針對一個 HTM 文檔進行設置-代碼是 HTM 文檔的一部分，沒有利用瀏覽器的緩存機制2.4 外聯(lián)? 外聯(lián)樣式-通過外部樣式文件對頁面進行控制-外部的樣式文件通過 HTM 的 link 元素連接到 HTML 文檔中l(wèi)ink rel= “ styl esheet ” href= “ myCSS.css” type= “ text/css ”/href屬性指定了樣式文件的相對地址； rel 和 type 屬性表明這是一個樣式文件3.4 外聯(lián)使用? 使用-

4、建立外部樣式文件(.CSS )-外部的樣式文件不能含有任何像head或style這樣的 HTM 標記-樣式表文件僅僅由樣式規(guī)則或聲明組成例如: h3font-family: “宋體” Color:red文件名 myCSS.CSS3.6 外聯(lián)特點? 特點-當樣式被應用到很多的網(wǎng)頁時，推薦使用外部樣式表-網(wǎng)頁制作者使用外部樣式表，在改變整個網(wǎng)站的外觀時，僅需要改變一個文件-大多數(shù)瀏覽器會保存外部樣式表在緩沖區(qū)，從而如果樣式表在緩沖區(qū)就避免了在展示網(wǎng)頁時的延遲-在實際開發(fā)中一般都使用外聯(lián)樣式 三、CSS 基本語法4.1 語法? 選擇符屬性 1:屬性值 1; 屬性 2:屬性值 2;-選擇符(selec

5、tor): 指定樣式適用的標記,除指定標記外,樣式不起作用-屬性：樣式的關鍵字-屬性值：描述樣式的值；-格式：屬性與屬性之間使用分號分隔，屬性與屬性值之間使用冒號分隔-女口： Pfont-size:12pt; coloured;4.2 語法? 例子 :bodycolor:black - 單個屬性示例 .pfont-family:“sans serif”- 多個單詞屬性需要括起來“”ptext-align:center ； color:red - 多個屬性用分號隔開 . p注意代碼的格式可讀性text-align:center ； color:black ； tont-family:arial4

6、.3 選擇符分類 ? 選擇符分類4.5.1普通選擇符4.5.2類選擇符4.5.3id 選擇符5.1普通選擇符? 普通選擇符-任意的 HTML 標記-其樣式僅僅作用在選擇符指定的 HTM 元素上-如:pcolor:red5.2類選擇符? 類選擇符-同一類型的不同元素通過設置不同CLAS 睞顯示不同樣式，但一個元素只能設置一個 CLASS 屬性-HTML 元素名加上類名，中間用“”號分開,類名供該 HTML 元素的 CLASS 屬性使 用4.5.4如: 使用不同顏色顯示 , 下面例子建立了兩個類 ,OddColor 和 EvenColor, 供 tr 使用? tr.OddColor coloure

7、d? tr.Eve nColor color:blue-如果省略 HTML 元素名只寫“ 類名”表示這個類名適用于所有的HTML 元素的CLASS 屬性-下面例子建立了一個類 note，可以被任何元素使用4.5.5note font-size:small; color:red5.3id 選擇符? id 選擇符4.5.6個別地定義每個元素的成分-可以作用到任意 HTML 元素的 ID 屬性上4.5.7盡量少用,因為 id 選擇符具有一定的局限（嚴格來說,在一個頁面中 , 每個 id 只能使用一次）.4.5.8要有“ #”在名字前面- 如： #svpfont-size:12pt3.2.4 組合使用

8、-關聯(lián)? 關聯(lián)4.5.9是一個用空格隔開的兩個或更多的單元選擇符組成的字符串 4.5.10這些選擇符可以指定一般屬性 , 而且因為層疊順序的規(guī)則 , 它們的優(yōu)先權比單一的選擇符大 4.5.11如：? p em background:yellow?表示段落（p）中的強調文本（em）是黃色背景,而其它部分的強調文 本不受影響 -id 為 content 的標簽下的所有的 h1 標簽以上二者進行群組選擇- id 為 content 的 h1 的標簽下的 h2 標簽3.2.5 練習? 練習-建立一個 HTM 文件，其中有 h1-h6 標記的文字;-對 hl 與 h2 標記使用類型選擇符設置樣式；-對

9、h3 與 h4 標記使用 id 選擇符設置樣式；-對 h5 標記使用通用的類型選擇符設置樣式；-對 h6 標記使用通用的 id 選擇符設置樣式4.4樣式就近原則? 樣式就近-并列的定義? 當定義重復時，后出現(xiàn)的定義會覆蓋前面的定義 例子： lifont-size:12pt;lifont-size:14pt;-對同一結點指定樣式，但層次結構不一樣?在層次結構上最接近指定結點的CSS 起作用4.5偽類及偽對象? 偽類及偽對象-由 CSS 自動支持，屬 CSS 的一種擴展型類-名稱不能被用戶自定義-使用時只能按照標準格式進行應用選擇符: 偽對象 屬性: 值 p:first-letterfont-we

10、ight:bold ； color:red選擇符 : 偽類屬性: 值a:hoverbackground-color:#000000常用偽對象? 示例：div:first-linecolor:red; font-size:16px;p:first-lettercolor:red; font-size:16px;3.2.4 組合使用 ? 組合使用 h2 .p1#content h1h1 .p1,#content h1h1#content h25.1超鏈接偽類? a:linkcolor:#ffffff;? a:visitedcolor:#db7093;? a:hovercolor:#564b47;?

11、 a:activecolor:#000000;- 未訪問的鏈接狀態(tài)- 已訪問的鏈接狀態(tài)- 鼠標懸停在鏈接上狀態(tài)- 被激活的鏈接狀態(tài)注釋?注釋-/* */，但要注意不要將注釋嵌入到選擇器語句里面常用的樣式屬性屬性屬性名稱名稱說明說明顏色color文本屬性font-size字體大小font-family字體字體text-ahgn文本對齊邊框屬性（用于表 單兀素）bo rde restyle邊框樣式border-width邊框寬度border-color邊框頗色定位屬性(position)top頂部邊距（上邊距）left左邊距width寬度height高度高度z*indexz 軸索引號，用于層常用的

12、樣式屬性值一型類ffi怵性字屬宋rlfrlfSeSeri rilaLlaLArAr本生文屬%或B度It3.6常用的樣式屬性值二框屬性BrBrrdrdbobo上%或Ik%或呈度定位定位 屬屬性性opop呈度%或igigh hhehel l%或g度lefleft t至r r o oololc c稱名色顏兩a ab b四、CSS 布局div? div-放置內容的容器.-用于大面積，大區(qū)域的塊狀排版-div 本身與樣式?jīng)]有任何關系.-樣式需要編寫 CSS 來實現(xiàn).盒模型?盒模型-將所有元素都放置在一個盒子中，然后通過對這個盒子的外觀控制來實 現(xiàn)整個頁面的外觀控制。-一個盒模型包括 4 個區(qū)?內容（co

13、ntent ）?內邊距（padding ）?邊框（border）?外邊距（margin）盒模MARGINBOX4.2 內、外補丁屬性td padd ing: 2px 2px 2px 2px; td padd in g-left: 2px; padd in g-right: 2px; padd in g-top: 2px;padd in g-bottom: 2px;bodymargi n-left: 0px; margi n-right: 0px; margi n-top: 0px;margi n-bottom: 0px;CSS 布局?設計布局結構-米用 2 層 CSS 結構.-既能夠統(tǒng)一全站風

14、格，又能夠根據(jù)不同的頁面設計獨立的樣式.-如口：一個網(wǎng)站中有一個 index.html 文件，可以做設置 使用 div 布局?使用 div 布局4.2 盒模型可見區(qū)城widthheightbordercontentpadding_margin-真正使用 div 布局,要把頁面的內容和表現(xiàn)完全分離開， 在頁面的內容部 分不應該出現(xiàn)表現(xiàn)控制標記，如 font 、color 、height 、width 、align 等標 記。-使用 Div+css 設計：? 1 、用 div 來定義語義結構；? 2、使用 CSS 來美化網(wǎng)頁? 3、在 div 定義的盒子內加入內容示例布局步驟 1? 1 、使用 d

15、iv 定義語義結構 .-一個典型的版面分欄結構：頁頭、導航欄、內容、版權.-結構代碼：? ? ? ? -把這四個盒子裝進一個更大的盒子，body 中，如下 上面四行代碼 .布局步驟 2-這樣，我們定義最外邊的大盒子(body)的屬性，讓它在頁面居中，并 定義其寬度為760 像素，加上邊框，如下： bodyfont-family:Arial,Helvetica,sans-serif; font-size:12px;margin:0px auto; height:auto; width:760px; border:1px solid #006633;布局步驟 3-對于頁頭，我們應用一幅背景圖，并在

16、其下邊界設計一定的間隙，使頁 頭的圖片不要和下面的導航欄連在一起，如下：#header height:100px; width:760px; background-image:url(web_head.jpg);background-repeat:no-repeat; margin:0px 0px 3px 0px;布局步驟 4-對于導航欄，做成像一個個小按鈕，鼠標移上去會改變按鈕的背景色和 字體色,而這些小按鈕我們也可以理解為小盒子 , 則是一個盒子嵌套的問題 了, 如下：/* 定義一個導航欄的長盒子 */#nav height:25px; width:760px; font-size:14p

17、x; list-style-type:none; /*讓 nav 這個大盒子下面的小盒子 LI 列表樣式不顯示，這對于標準瀏覽器很重要 */#navli float:left; /* 讓 LI 這些小盒子左對齊 */布局步驟 5/* 讓 LI 盒子里面的鏈接樣式?jīng)]有下滑線 */ #nav li acolor:#000000; text-decoration:none; padding-top:4px;display:block;/* 讓 LI 里面的鏈接塊狀呈現(xiàn)，像一個按鈕，而不必一定要點中鏈接文字才起作用 */width:97px;height:22px; text-align:center

18、; background-color:#009966;margin-left:2px; 布局步驟 6/* 鼠標移到鏈接盒子上面改變盒子背景色 */ #nav lia:hover background-color:#006633;color:#FFFFFF; 布局步驟 7-對于內容部分，主要是放入文章內容，有標題和段落；給標題加粗，使 用 H標記;段落首行縮進 2 個字,同時所有內容看起來與大盒子的邊框要 有一定距離，如下：#content height:auto; width:740px; line-height:1.5em; padding:10px; #content p text-ind

19、ent:2em; #content h3font-size:16px; margin:10px; 布局步驟 8-對于版權欄，加上背景，與頁頭呼應，里面的文字要居中對齊，有多行內容 時,行間距合適 , 如下：#footerheight:50px; width:740px; line-height:2em; text-align:center;background-color:#009966;padding:10px; 布局步驟 9-最后，在開頭增加如下樣式代碼，用通配符初始化各標記邊界和填充 （因 為有部分標記默認有一定的邊界，如 form 標記）：* margin:0px; padding:0px;布局步驟 10? 結構代碼如下：Blog 論壇 幫助 前言vp第一段內容（插入大量文字）解 CSS 盒子模式 第二段內容（插入大量文字） 關于| |廣告服務| |招聘| |客服中心| | Q Q 留言| |網(wǎng)站管 理 | 會員登錄 | 購物車 Copyright ?2006- 2008 AllRights Reserved首頁v/li文 章 相冊 五、使用 JavaScript 控制 CSS控制 CSS-style? style 對象-利用 style 對象來控制元素的 CSS.