Web 前端開發(fā)技術(shù) 教案 項(xiàng)目四 CSS 基礎(chǔ)_第1頁
Web 前端開發(fā)技術(shù) 教案 項(xiàng)目四 CSS 基礎(chǔ)_第2頁
Web 前端開發(fā)技術(shù) 教案 項(xiàng)目四 CSS 基礎(chǔ)_第3頁
Web 前端開發(fā)技術(shù) 教案 項(xiàng)目四 CSS 基礎(chǔ)_第4頁
Web 前端開發(fā)技術(shù) 教案 項(xiàng)目四 CSS 基礎(chǔ)_第5頁
已閱讀5頁，還剩3頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

Web前端開發(fā)技術(shù)教案設(shè)計(jì)項(xiàng)目課題CSS基礎(chǔ)授課時(shí)間授課對(duì)象大學(xué)生學(xué)習(xí)目標(biāo)1.理解CSS的概念。2.掌握CSS基本語法、選擇器的分類與聲明的結(jié)構(gòu)。3.理解CSS繼承與層疊的含義。學(xué)習(xí)重點(diǎn)掌握CSS基本語法、選擇器的分類與聲明的結(jié)構(gòu)。學(xué)習(xí)難點(diǎn)掌握CSS基本語法、選擇器的分類與聲明的結(jié)構(gòu)。教學(xué)方法講授法、課堂演示法教學(xué)用具多媒體課件教學(xué)流程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教學(xué)過程任務(wù)一CSS概述一、CSS概述由于Netscape和Microsoft兩家公司在自己的瀏覽器軟件中不斷地將新的HTML標(biāo)記和屬性(如字體標(biāo)記和顏色屬性等)添加到HTML規(guī)范中,因此導(dǎo)致創(chuàng)建具有清晰的文檔內(nèi)容并獨(dú)立于文檔表現(xiàn)層的站點(diǎn)變得越來越困難。為了解決這個(gè)問題,HakonWiumLie(哈肯·維姆·萊,挪威)和BertBos(伯特·波斯,荷蘭)于1994年共同發(fā)明了級(jí)聯(lián)樣式表。級(jí)聯(lián)樣式表(CascadingStyleSheet,CSS),也稱為層疊樣式表,是一種用于描述網(wǎng)頁或文檔外觀和樣式的語言。它允許網(wǎng)頁設(shè)計(jì)者通過CSS規(guī)則來控制網(wǎng)頁中元素的位置、大小、顏色等視覺特性。CSS不僅可以靜態(tài)地修飾網(wǎng)頁,還可以配合各種腳本語言動(dòng)態(tài)地對(duì)網(wǎng)頁中各元素進(jìn)行格式化。CSS能夠?qū)W(wǎng)頁中各元素位置的排版進(jìn)行像素級(jí)的精確控制,支持幾乎所有的字體、字號(hào)樣式,擁有對(duì)網(wǎng)頁對(duì)象和模型樣式進(jìn)行編輯的能力。CSS的主要優(yōu)勢之一是支持內(nèi)容和樣式的分離,這意味著網(wǎng)頁的結(jié)構(gòu)(內(nèi)容)和外觀(樣式)可以分開處理,這種分離提高了網(wǎng)站的可維護(hù)性和重用性。二、HTML5的優(yōu)勢1.擺脫對(duì)平臺(tái)的依賴用戶打開瀏覽器,直接就可以訪問自己的應(yīng)用,不需要經(jīng)過各種審核。2.實(shí)時(shí)更新通常平臺(tái)的審核都需要7個(gè)工作日左右,如果發(fā)布之后再出現(xiàn)問題則很難補(bǔ)救,而Web系統(tǒng)不存在這種問題。3.離線使用用戶可以離線使用,更新下載量較少時(shí),可以全部更新,也可以選擇替換部分文件。4.代碼更安全Web應(yīng)用有一個(gè)很重要的問題就是代碼的安全性問題,但HTML5可以將Web代碼全部加密,本地應(yīng)用解密后再運(yùn)行,在很大程度上提高了代碼的安全性。5.跨平臺(tái)HTML5的跨平臺(tái)兼容特性,使大部分核心代碼不需要重寫,這是因?yàn)镴avaScript的代碼可以在許多地方使用,包括移動(dòng)應(yīng)用、移動(dòng)網(wǎng)站、PC網(wǎng)站、各種瀏覽器插件,甚至可以用WebKit封裝作為跨平臺(tái)的應(yīng)用程序。6.可以充分利用NativeHTML5可以通過瀏覽器充分利用Native的好處。例如,可以使用GPS、照相機(jī)、本地相冊(cè)、讀取本地通信錄,也可以使用推送功能,最重要的是,某些Web無法實(shí)現(xiàn)的功能可以利用Native來實(shí)現(xiàn)。任務(wù)二CSS基本語法一、語法規(guī)則1.選擇器選擇器可以是HTML標(biāo)記名稱或?qū)傩缘闹?也可以是自定義的標(biāo)識(shí)符。選擇器選擇網(wǎng)頁上的具體對(duì)象和元素,指定了CSS屬性規(guī)則應(yīng)用的對(duì)象。瀏覽器根據(jù)選擇器嚴(yán)格解析匹配元素,再將定義的屬性值應(yīng)用到匹配的對(duì)象和元素上。當(dāng)多條屬性規(guī)則作用于同一個(gè)元素時(shí),采用就近原則,越接近該元素的屬性規(guī)則優(yōu)先級(jí)就越高。2.屬性CSS提供了豐富的屬性,包括寬度、高度、顏色、大小等。例如,font-style屬性用于設(shè)置文本的體,color屬性用于設(shè)置文本的顏色等。一個(gè)對(duì)象元素可以同時(shí)設(shè)置多組屬性效果。多組屬性設(shè)置之間用分號(hào)隔開。不同的對(duì)象元素可以設(shè)置的屬性有差別,如文本可以設(shè)置字體屬性,而圖像無字體屬性。應(yīng)用CSS3中新增的部分屬性時(shí),要考慮瀏覽器的兼容性。3.屬性值每個(gè)屬性可以設(shè)置的屬性值不同。在CSS中,有些屬性可以設(shè)置多個(gè)屬性值,用逗號(hào)分隔,其基本語法格式如下。selector{font-family:"楷體_gb2312","黑體","TimesNewRoman";}該樣式表說明了可以使用楷體_gb2312、黑體、TimesNewRoman3種字體來設(shè)置selector的字體效果。若在系統(tǒng)中找不到楷體_gb2312,則使用黑體;若找不到黑體,則使用TimesNewRoman,即按出現(xiàn)的先后順序優(yōu)先選擇。4.注釋像其他語言一樣,CSS允許用戶在源代碼中嵌入注釋。CSS注釋可以被瀏覽器忽略,不影響網(wǎng)頁效果。注釋有助于記住復(fù)雜的屬性規(guī)則的作用、應(yīng)用的范圍等,便于屬性規(guī)則的后期維護(hù)和應(yīng)用。CSS注釋以字符“/?”開始,以字符“?/”結(jié)束。注釋格式如下。/*這是多行注釋CSS文件名:out.css功能說明:定義屬性*//*單行注釋屬性段落p*/p{font-size:20px;/*行尾注釋定義字號(hào)*/}“/?……?/”這種格式可以單獨(dú)一行書寫,也可以寫在語句的后面;可以注釋一行,也可以注釋多行。注釋不能嵌套。二、使用方式CSS的使用方式是指屬性規(guī)則作用到網(wǎng)頁元素的方式,通常有行內(nèi)屬性、內(nèi)嵌屬性、鏈接屬性和導(dǎo)入屬性。1.行內(nèi)屬性行內(nèi)屬性是把CSS屬性規(guī)則直接添加到HTML標(biāo)記中,作為標(biāo)記style的屬性值。行內(nèi)屬性的應(yīng)用范圍是當(dāng)前標(biāo)記的內(nèi)容,屬性規(guī)則中省略了選擇器,其基本語法格式如下。<標(biāo)記名稱style="屬性規(guī)則">……</標(biāo)記名稱>行內(nèi)屬性雖然簡單,但不推薦使用,因?yàn)椴荒軐⒕W(wǎng)頁內(nèi)容和屬性分離,不利于維護(hù)和屬性重用。2.內(nèi)嵌屬性內(nèi)嵌屬性是將CSS屬性規(guī)則先用<style>……</style>進(jìn)行聲明,然后添加在HTML文件的任意位置(一般放在<head>和</head>之間)。內(nèi)嵌屬性的應(yīng)用范圍是本網(wǎng)頁中所有匹配的選擇器的內(nèi)容,其基本語法格式如下。<styletype="text/css">CSS屬性規(guī)則……</style><style>標(biāo)記中可以用type="text/css"屬性聲明類型,也可以不聲明。<style>和</style>之間的注釋,以“/?”開始,以“?/”結(jié)束。內(nèi)嵌屬性雖然沒有將內(nèi)容和屬性完全分離,但是可用于設(shè)置少量的屬性,實(shí)現(xiàn)同一頁面上元素屬性的統(tǒng)一。3.鏈接屬性鏈接屬性是先創(chuàng)建單獨(dú)的CSS樣式表文件,然后通過鏈接標(biāo)記<link>將樣式表文件鏈接到網(wǎng)頁中使用。CSS樣式表文件是純文本文件,文件內(nèi)容是屬性規(guī)則的集合。CSS樣式表文件的擴(kuò)展名是.css。網(wǎng)頁中鏈接樣式文件時(shí),<link>標(biāo)記要放在<head>和</head>之間。鏈接的樣式表中的屬性規(guī)則,對(duì)引用了該樣式表文件的網(wǎng)頁有效。一個(gè)網(wǎng)頁中可以使用多個(gè)<link>標(biāo)記鏈接多個(gè)CSS樣式表文件。多個(gè)樣式表中的屬性規(guī)則,依次作用于網(wǎng)頁元素,<link>標(biāo)記的基本語法格式如下。<head><linkrel="stylesheet"type="text/css"href="路徑/樣式表文件名.css"></head>鏈接屬性很好地實(shí)現(xiàn)了內(nèi)容和屬性的分離,使網(wǎng)頁的設(shè)計(jì)和維護(hù)變得十分方便,是最實(shí)用的CSS使用方式。4.導(dǎo)入屬性導(dǎo)入屬性和鏈接屬性的操作過程基本相同,需要在內(nèi)嵌樣式表的<style>標(biāo)記中使用@import導(dǎo)入一個(gè)外部的CSS文件。導(dǎo)入樣式是指在HTML文件初始化時(shí)將外部CSS文件導(dǎo)入到HTML文件內(nèi),作為文件的一部分,類似于嵌入效果。而鏈接樣式則是在HTML標(biāo)記需要樣式風(fēng)格時(shí)才以鏈接方式引入。導(dǎo)入樣式表的最大用處在于可以讓一個(gè)HTML文件導(dǎo)入很多的樣式表,不單是可以在HTML文件的<style>與</style>標(biāo)記中導(dǎo)入多個(gè)樣式表,在CSS文件中也可以導(dǎo)入其他樣式表,其基本語法格式如下。@importurl("路徑");或者@import"路徑";其中,“路徑”是指被導(dǎo)入樣式表文件的位置,可以是相對(duì)路徑或絕對(duì)路徑。使用url()函數(shù)時(shí),路徑被作為字符串來處理,并且必須是有效的URL。任務(wù)三CSS選擇器一、基本選擇器1.標(biāo)記選擇器標(biāo)記選擇器的形式為標(biāo)記名稱。若使用標(biāo)記名稱作為選擇器,則選擇了網(wǎng)頁內(nèi)標(biāo)記定義相同的元素。例如,p表示選擇網(wǎng)頁上的所有<p>標(biāo)記定義的元素。2.類選擇器類選擇器的形式為“.類名”。在網(wǎng)頁元素標(biāo)記中,需要事先使用class屬性設(shè)置元素的類名。若CSS中使用類名作為選擇器,則選擇了網(wǎng)頁內(nèi)類名相同的元素。網(wǎng)頁中元素的定義如下。<pclass="x">第一段落</p><h3class="x">第一行文字</h3>3.id選擇器id選擇器的形式為“#id名”。在網(wǎng)頁元素標(biāo)記中,需要事先使用id屬性設(shè)置元素的id。若CSS中使用id名作為選擇器,則選擇了網(wǎng)頁內(nèi)特定id名的元素。網(wǎng)頁中的元素定義如下。<pid="x">第一段落</p>4.全局選擇器使用全局選擇器“?”,可選擇頁面中所有的HTML元素。二、關(guān)系選擇器1.群組選擇器群組選擇器是用逗號(hào)連接多個(gè)選擇器,匹配列舉的選擇器。2.后代選擇器后代選擇器是用空格連接多個(gè)選擇器,從父代選擇器依次向下匹配到指定的后代選擇器。后代選擇器包含在父代選擇器中。3.子代選擇器子代選擇器用“>”連接兩個(gè)選擇器,在父代選擇器下匹配到指定的子代選擇器。子代選擇器包含在父代選擇器里,并且是第一代的子代。4.兄弟選擇器兄弟選擇器用“~”連接兩個(gè)選擇器,匹配前一個(gè)選擇器后的所有同級(jí)的后一個(gè)選擇器。5.相鄰選擇器相鄰選擇器用“+”連接兩個(gè)選擇器,匹配前一個(gè)選擇器后相鄰的同級(jí)的后一個(gè)選擇器。三、動(dòng)態(tài)偽類選擇器動(dòng)態(tài)偽類選擇器用于用戶交互時(shí)選擇處于不同狀態(tài)的元素。任務(wù)四CSS繼承與層疊CSS繼承即子標(biāo)記會(huì)繼承父標(biāo)記的所有樣式風(fēng)格,并且可以在父標(biāo)記樣式風(fēng)格的基礎(chǔ)上再加以修改,產(chǎn)生新的樣式風(fēng)格,而子標(biāo)記的樣式風(fēng)格完全不影響父標(biāo)記。值得注意的是,并不是所有的屬性都會(huì)自動(dòng)傳給子元素,有的屬性不會(huì)繼承父標(biāo)記的屬性值,如邊框?qū)傩跃褪欠抢^承的。(1)CSS層疊是多個(gè)樣式的疊加,是指瀏覽器解決沖突的一種能力,如果一個(gè)屬性通過兩個(gè)相同選擇器設(shè)置到同一個(gè)元素上,這時(shí)屬性就會(huì)將另外一個(gè)屬性覆蓋掉?？梢园褜盈B特性理解成“沖突”的解決方案,即對(duì)同一內(nèi)容設(shè)置了不同類型屬性產(chǎn)生沖突時(shí)的處理。(2)CSS的選擇器優(yōu)先級(jí)是一個(gè)相對(duì)復(fù)雜的概念,它規(guī)定了在一組樣式?jīng)_突時(shí),哪些樣式將被瀏覽器采納。CSS規(guī)定優(yōu)先級(jí)為:行內(nèi)屬性>id屬性>class屬性>標(biāo)記屬性。作業(yè)布置一、問答題(1)CSS的含義是什么?CSS的作用是什么?(2)CSS的語法規(guī)則包含哪幾部分?每部分的含義是什么?(3)CSS應(yīng)用到網(wǎng)頁中的方式有哪幾種?分別適用于什么類型的網(wǎng)頁?在大型復(fù)雜的網(wǎng)站中,多個(gè)網(wǎng)頁的樣式風(fēng)格要保持一致,最好采用哪種CSS使用方式?(4)CSS文件的內(nèi)容由什么組成?擴(kuò)展名是什么?(5)CSS的基本選

溫馨提示

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

評(píng)論

0/150

提交評(píng)論