第3講Web程序設(shè)計基礎(chǔ)-DIV+CSS-8-9_第1頁
第3講Web程序設(shè)計基礎(chǔ)-DIV+CSS-8-9_第2頁
第3講Web程序設(shè)計基礎(chǔ)-DIV+CSS-8-9_第3頁
第3講Web程序設(shè)計基礎(chǔ)-DIV+CSS-8-9_第4頁
第3講Web程序設(shè)計基礎(chǔ)-DIV+CSS-8-9_第5頁
已閱讀5頁，還剩37頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

第3講基于DIV+CSS的網(wǎng)站構(gòu)架XHTML+CSS任務(wù)8：使用CSS層疊樣式表1．CSS的概念

CSS是CascadingstyleSheets的簡稱，中文譯作“層疊樣式表單”，我把它叫作“層疊樣式表”。W3C：WorldWideWebConsortium萬維網(wǎng)聯(lián)盟創(chuàng)建于1994年，是Web技術(shù)領(lǐng)域最具權(quán)威和影響力的國際中立性技術(shù)標準機構(gòu)。到目前為止，W3C已發(fā)布了200多項影響深遠的Web技術(shù)標準及實施指南，如廣為業(yè)界采用的超文本標記語言（標準通用標記語言下的一個應(yīng)用）、可擴展標記語言（標準通用標記語言下的一個子集）以及幫助殘障人士有效獲得Web內(nèi)容的信息無障礙指南（WCAG）等，有效促進了Web技術(shù)的互相兼容，對互聯(lián)網(wǎng)技術(shù)的發(fā)展和應(yīng)用起到了基礎(chǔ)性和根本性的支撐作用。任務(wù)8：使用CSS層疊樣式表1．CSS的概念CSS，中文譯為層疊樣式表，常稱為CSS樣式表或是樣式表，其擴展名為.css。CSS是用于增強或控制頁面樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標記語言。W3C與1996年12月推出CSS1.0（Level1）規(guī)范，為HTML4.0添加了樣式。1998年5月又發(fā)布了新版本CSS2.0（Level2），該版本在兼容舊版本的情況下又擴展了一些其他的內(nèi)容。CSS負責為網(wǎng)頁設(shè)計人員提供豐富的樣式來設(shè)計網(wǎng)頁。CSS所提供的網(wǎng)頁結(jié)構(gòu)內(nèi)容與表現(xiàn)形式分離的機制大大簡化了網(wǎng)站的管理，提高了開發(fā)網(wǎng)站的工作效率。CSS可用于控制任何HTML和XML內(nèi)容的表現(xiàn)形式。任務(wù)8：使用CSS層疊樣式表

在設(shè)計頁面時采用CSS技術(shù)可以有效地對頁面的布局、字體、顏色、背景和其他效果實現(xiàn)更加精確的控制。只要對相應(yīng)的代碼做一些簡單地修改，就可以改變同一頁面的不同部分，或者不同網(wǎng)頁的外觀和格式。概括來說，CSS有如下特點：任務(wù)8：使用CSS層疊樣式表（1）豐富的樣式定義CSS允許頁面具有更為豐富的文檔樣式外觀以及設(shè)置文本屬性、背景屬性的能力；允許為任何元素創(chuàng)建邊框并調(diào)整邊框與文本之間的距離；允許改變文本的大小寫方式、修飾方式（比如加粗、斜體等）、文本字符間隔，甚至隱藏文本以及其他頁面。任務(wù)8：使用CSS層疊樣式表（2）易于使用和修改CSS能夠?qū)邮蕉x代碼集中于一個樣式文件中以實現(xiàn)某種頁面效果，這樣就不用將樣式代碼分散到整個頁面文件代碼中，從而方便管理。另外，還可以將幾個CSS文檔集中應(yīng)用于一個頁面，也可以將CSS樣式表單獨應(yīng)用于某個元素，從而應(yīng)用到整個頁面。如果需要調(diào)整頁面的樣式外觀，只需修改CSS樣式表的樣式定義代碼即可。任務(wù)8：使用CSS層疊樣式表（3）可重復使用不僅可以將多個CSS樣式表應(yīng)用于一個頁面，也可以將一個CSS樣式表應(yīng)用于一個網(wǎng)站的所有頁面。通過在各個頁面引用該CSS樣式表，能夠保證網(wǎng)站風格及格式的統(tǒng)一。任務(wù)8：使用CSS層疊樣式表（4）層疊先舉一個例子，一個CSS樣式表main.css定義了一個網(wǎng)站的10個頁面的樣式外觀，但是由于需求的變化，需要對其中一個頁面布局在保持外觀的情況下更改，此時就可以應(yīng)用CSS樣式表的層疊特性。再創(chuàng)建一個只適用于該頁面的CSS樣式表css.css，該樣式表中包含修改的那一部分樣式定義代碼。將樣式表css.css和main.css同時應(yīng)用在該頁面，那么css.css樣式表中新定義的樣式規(guī)則將代替main.css樣式表的樣式規(guī)則。任務(wù)8：使用CSS層疊樣式表（5）頁面壓縮一個擁有精美頁面的網(wǎng)站往往需要大量或重復的表格和<font>標記形成各種規(guī)格的文字樣式，這樣做的后果就是會產(chǎn)生大量的標記，從而使頁面文件大小增加。將用于描述頁面的相似的代碼形成塊加到CSS樣式表中可以大大地減少頁面的容積，這樣加載頁面的時間也會減少。任務(wù)8：使用CSS層疊樣式表2．CSS基礎(chǔ)語法（1）CSS樣式規(guī)則CSS樣式表是由若干條樣式規(guī)則組成，這些樣式規(guī)則可以應(yīng)用到不同的元素或文檔中，從而定義這些元素或文檔的顯示外觀。每一條樣式規(guī)則都由3部分構(gòu)成：選擇符（selector）、屬性（properties）和屬性的取值（value），基本格式如下：任務(wù)8：使用CSS層疊樣式表selector{property：value}selector選擇符可以采用多種形式，選擇符區(qū)分大小寫。如果定義選擇符的屬性，則屬性和屬性值為一組，組與組之間有分號（；）隔開。格式如下。selector{property1：value1；property2：value；…}任務(wù)8：使用CSS層疊樣式表下面就給出一條樣式規(guī)則：P{color:red}該樣式規(guī)則的選擇符P是指為段落標記<P>提供樣式，color為指定文字顏色的屬性,，red為屬性值，該規(guī)則表示<P>指定的段落文字為紅色。如果屬性值由多個字符串和空格組成，那么該屬性就必須用雙引號。比如設(shè)置段落字體為西方TimesNewRoman，樣式規(guī)則如下：P{font-family:"TimesNewRoman"}如果要為段落標記內(nèi)容同時設(shè)置多種樣式，則可以使用下列語句。P{font-family:"隸書";color:red;font-size:40px;font-weight:bold}任務(wù)8：使用CSS層疊樣式表一般情況下，為了便于閱讀，書寫樣式規(guī)則時可以采用分行的格式P{font-family:"隸書";color:red;font-size:40px;font-weight:bold}任務(wù)8：使用CSS層疊樣式表（2）CSS的樣式劃分為3種CSS樣式，即嵌入式樣式、內(nèi)聯(lián)式和外聯(lián)式。①內(nèi)聯(lián)樣式內(nèi)聯(lián)樣式是將樣式代碼直接內(nèi)聯(lián)到標記內(nèi)，以style語句作為屬性值，例如：<tablestyle="border-collapse:collapse">這種CSS樣式與HTML標記書寫在一起，簡單直觀并且能夠單獨控制個別元素的外觀。②嵌入樣式嵌入樣式是使用<style>標記將一段CSS代碼嵌入到HTML文檔中。一般是使用<style>標記將一段CSS代碼插入到HTML文檔頭部，也就是<head></head>標記之間。下面的代碼演示了嵌入式CSS的用法。任務(wù)8：使用CSS層疊樣式表

任務(wù)8：使用CSS層疊樣式表

任務(wù)8：使用CSS層疊樣式表③外聯(lián)樣式把上例的樣式定義部分單獨存入一個文本文件，這種文件叫樣式文件，后綴為.css。在要使用的時候把其導入（鏈接）到文檔中來，這種通過導入（鏈接）外部的樣式文件的樣式叫外聯(lián)樣式。指定樣式文件的標記是<link>，一般使用格式如下：<linkrel="stylesheet"href="css/stylesheetl.css"type="text/css"/>

該標記一般都放在文檔的<head></head>標記之間，REL屬性用于定義連接的文件和HTML文檔之間的關(guān)系。StyleSheet的意思就是樣式調(diào)用，REL=StyleSheet指定一個固定或首選的樣式，href屬性指定了樣式文件的路徑，type屬性表明這是一個樣式文件。外聯(lián)式CSS樣式的應(yīng)用代碼如下：任務(wù)8：使用CSS層疊樣式表任務(wù)8：使用CSS層疊樣式表（3）選擇符（5個）

①標記選擇符標記選擇符是選擇符為HTML中的標記名稱的選擇符。我們前面舉的例子都是標記選擇符，如P{color:red}，對標記<P>內(nèi)的內(nèi)容顯示為紅色。標記選擇符的作用范圍為文檔內(nèi)所使用該標記的所有內(nèi)容，改變的是該標記的默認顯示格式。如:table{background-color:#00FF00;Border-color:#ff0000;}在該文檔內(nèi)的所有表格的背景色為綠色（＃00ff00），邊框色為紅色（＃ff0000）。任務(wù)8：使用CSS層疊樣式表②類選擇符使用類選擇符能夠為相同的標記定義不同的樣式，也可以使用到不同的標記上。定義類選擇符時，需要在自定義類的名稱前面加一個句點“．”。任務(wù)8：使用CSS層疊樣式表例如，為段落標記定義兩個類來表示不同的樣式.rr{color:red}p.green{color:green}在上面兩個樣式規(guī)則中，p表示樣式應(yīng)用的標記為段落標記<P>，rr、green為定義的類選擇符的類的名稱，｛｝內(nèi)為樣式定義。將定義的類選擇符應(yīng)用到不同的段落中，只要在<P>標記中指定class屬性即可。例如：<pclass="rr">紅色</p><pclass="green">綠色</p>任務(wù)8：使用CSS層疊樣式表③ID選擇符ID選擇符類似于類選擇符，但有一個重要的區(qū)別就是ID選擇符前不是句點“．”，而是“?！碧?。在頁面中，具有ID屬性的標記才能夠使用ID選擇符定義樣式，所以與類選擇符相比，使用ID選擇符是有一定局限性的。<pid=＂fontstyle＂>段落樣式</p>類選擇符與ID選擇符主要有以下兩個區(qū)別：類選擇符可以給任意數(shù)量的標記定義樣式，但ID選擇符在頁面的標記中只能使用一次。ID選擇符對給定標記應(yīng)用何種樣式比類選擇符具有更高的優(yōu)先級。任務(wù)8：使用CSS層疊樣式表id選擇器可以為標有特定id的HTML元素指定特定的樣式。HTML元素以id屬性來設(shè)置id選擇器,CSS中id選擇器以"#"來定義。以下的樣式規(guī)則應(yīng)用于元素屬性實例<pid=＂fontstyle＂>段落樣式</p>......#fontstyle{text-align:center;color:red;}任務(wù)8：使用CSS層疊樣式表④偽類選擇符偽類選擇符可以看作是一種特殊的類選擇符，它是一種能被CSS的瀏覽器自動識別的特殊選擇符。偽類選擇符的最大作用就是可以對鏈接的不同狀態(tài)定義不同的樣式效果。偽類選擇符定義的樣式常應(yīng)用在定位錨標記“<a>”上，即錨的偽類選擇符，它表示動態(tài)鏈接4種不同的狀態(tài)：未訪問的鏈接（link）、已訪問的鏈接（visited）、激活鏈接（active）和鼠標停留在鏈接上（hover）。例如：a:link{color:#FF0000;text-decoration:none}a:visited{color:#00ff00;text-decoration:none}a:active{color:#0000FF;text-decoration:underline}a:hover{color:#FF00FF;text-decoration:underline}任務(wù)8：使用CSS層疊樣式表⑤派生選擇符HTML的標記是有一定的層次關(guān)系，標記之間形成一個樹形層次結(jié)構(gòu)，CSS依據(jù)元素在其位置的上下文關(guān)系來定義樣式，這樣可以使標記更加簡潔。比方說，你希望列表中的strong元素變?yōu)樾斌w字，而不是所有的strong元素都變?yōu)榈男斌w字，可以這樣定義一個派生選擇器。在下面的例子中，只有l(wèi)i元素中的strong元素的樣式為斜體字，無需為strong元素定義特別的class或id，代碼更加簡潔。任務(wù)8：使用CSS層疊樣式表listrong{font-style:italic;font-weight:normal;}<p><strong>我是粗體字，不是斜體字，因為我不在列表當中，所以這個規(guī)則對我不起作用</strong></p><ol><li><strong>我是斜體字。這是因為strong元素位于li元素內(nèi)。</strong></li><li>我是正常的字體。</li></ol>在上面的例子中，只有l(wèi)i元素中的strong元素的樣式為斜體字，無需為strong元素定義特別的class或id，代碼更加簡潔。任務(wù)8：使用CSS層疊樣式表（4）盒子模型CSS中有個重要的思維模型，就是盒子模型(Boxmodel)。如圖2-16所示：任務(wù)8：使用CSS層疊樣式表盒子里由外至里依次是：margin邊距、border邊框、padding間隙、content(內(nèi)容，比如文本，圖片等)下面介紹盒子模型的一些重要屬性，這是CSS中定位技術(shù)的核心部分。①邊距屬性(margin)：用來設(shè)置一個元素所占空間的邊緣到相鄰元素之間的距離。②邊框?qū)傩?border)：用來設(shè)定一個元素的邊線（包括線寬、線型、線色）。③間隙屬性(padding)：是來設(shè)置元素內(nèi)容到元素邊框的距離。④背景屬性（background）：指的是content和padding區(qū)域，可設(shè)顏色或圖片背景。⑤寬高屬性（width、height）：指的是content區(qū)域的寬和高，而不是指整個盒子的寬和高，這在布局時要特別注意。盒子的寬＝width+2×padding+2×border+2×margin?；蛘哒fwidth=盒子的寬-2×padding-2×border-2×margin⑥定位屬性：包括定位坐標類型position屬性、定位坐標（left、top、right、bottom）、文本流float屬性。任務(wù)8：使用CSS層疊樣式表其中，定位坐標有l(wèi)eft、top、right、bottom四個，一般指盒子一個角，如左上坐標，注意不能同時設(shè)定left/right或top/bottom自相矛盾的坐標，否則出現(xiàn)異常。position：指定位坐標的類型，有以下幾種：static：默認次序，即文本流順序，從左到右，從上到下。這時指定的定位坐標無效。relative：相對坐標，相對于“原來的位置”，需設(shè)定左上角的偏移量（left、top）。absolute：絕對坐標，顯示在父容器的指定的絕對坐標上。此時將忽略其他對象（塊、層、盒子）的存在，會覆蓋其他的對象。fixed：固定坐標，瀏覽器窗口坐標，固定在窗口的某一位置，不隨頁面滾動而移動。我們上網(wǎng)常遇到這樣的小廣告，始終顯示在窗口的某一位置。inherit：繼承父容器的position。文本流float：控制文本流的顯示方向，可設(shè)定的left、right、none、inherit。取left或right會影響其他對象（層）的排列。任務(wù)8：使用CSS層疊樣式表層疊屬性z-index：控制層（盒子）在Z軸上排列次序，為整數(shù)，值越大越靠上面。該屬性只對position設(shè)置為absolute或relative有效。可見性屬性visibility：控制顯示或隱藏。可取visible、hidden、collapse和inherit等。說明：盒子模型中的margin邊距、border邊框、padding間隙的四個方向?qū)傩钥梢允遣幌嗤?，可分別設(shè)置。任務(wù)9：基于DIV+CSS布局1．DIV+CSS頁面布局的優(yōu)點在W3C標準中，網(wǎng)頁主要由三部分組成：結(jié)構(gòu)(Structure)、表現(xiàn)(Presentation)和行為(Behavior)。在Web標準中,HTML/XHTML負責頁面結(jié)構(gòu),CSS負責樣式表現(xiàn),JavaScript負責動態(tài)行為。結(jié)構(gòu)主要包括DIV在內(nèi)的一系列的XHTML標記，表現(xiàn)主要包括CSS層疊樣式表，行為主要包括對象模型（如W3C、DOM）等。利用這種模式開發(fā)的網(wǎng)頁是符合W3C設(shè)計標準的，有下列優(yōu)點：任務(wù)9：基于DIV+CSS布局（1）網(wǎng)頁開發(fā)與維護變得更簡單、容易。因為使用了更具有語義和結(jié)構(gòu)化的XHTML，讓程序員更加容易、快速的理解網(wǎng)頁代碼。（2）網(wǎng)頁下載、讀取速度變得更快。使用DIV+CSS模式開發(fā)網(wǎng)頁，網(wǎng)頁HTML代碼減少，下載速度更快；因為網(wǎng)頁

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論