Web 前端開發(fā)技術(shù)（HTML5+CSS3+JavaScript+jQuery） 課件 項(xiàng)目四　 CSS 基礎(chǔ)_第1頁
Web 前端開發(fā)技術(shù)（HTML5+CSS3+JavaScript+jQuery） 課件 項(xiàng)目四　 CSS 基礎(chǔ)_第2頁
Web 前端開發(fā)技術(shù)（HTML5+CSS3+JavaScript+jQuery） 課件 項(xiàng)目四　 CSS 基礎(chǔ)_第3頁
Web 前端開發(fā)技術(shù)（HTML5+CSS3+JavaScript+jQuery） 課件 項(xiàng)目四　 CSS 基礎(chǔ)_第4頁
Web 前端開發(fā)技術(shù)（HTML5+CSS3+JavaScript+jQuery） 課件 項(xiàng)目四　 CSS 基礎(chǔ)_第5頁
已閱讀5頁，還剩17頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

CSS基礎(chǔ)Web前端開發(fā)技術(shù)篇2

：CSS技術(shù)

本項(xiàng)目重點(diǎn)介紹CSS的語法規(guī)則和使用方式,以及選擇器的應(yīng)用,簡略介紹CSS的繼承與層疊。通過引入CSS屬性及使用不同的選擇器,引導(dǎo)學(xué)生在實(shí)際開發(fā)項(xiàng)目時(shí)學(xué)會(huì)突出重點(diǎn)而非面面俱到,遵循以用戶為導(dǎo)向的原則,培養(yǎng)學(xué)生在開發(fā)過程中對細(xì)節(jié)的把控能力,同時(shí)提升對問題的總結(jié)能力、分析能力和解決能力。序言目錄CONTENTSCSS概述CSS基本語法CSS選擇器01020304CSS繼承與層疊01CSS概述Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.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ā)明了級聯(lián)樣式表。級聯(lián)樣式表(CascadingStyleSheet,CSS),也稱為層疊樣式表,是一種用于描述網(wǎng)頁或文檔外觀和樣式的語言。它允許網(wǎng)頁設(shè)計(jì)者通過CSS規(guī)則來控制網(wǎng)頁中元素的位置、大小、顏色等視覺特性。CSS不僅可以靜態(tài)地修飾網(wǎng)頁,還可以配合各種腳本語言動(dòng)態(tài)地對網(wǎng)頁中各元素進(jìn)行格式化。CSS能夠?qū)W(wǎng)頁中各元素位置的排版進(jìn)行像素級的精確控制,支持幾乎所有的字體、字號樣式,擁有對網(wǎng)頁對象和模型樣式進(jìn)行編輯的能力。CSS的主要優(yōu)勢之一是支持內(nèi)容和樣式的分離,這意味著網(wǎng)頁的結(jié)構(gòu)(內(nèi)容)和外觀(樣式)可以分開處理,這種分離提高了網(wǎng)站的可維護(hù)性和重用性。CSS概述02CSS基本語法Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.語法規(guī)則1.選擇器選擇器可以是HTML標(biāo)記名稱或?qū)傩缘闹?也可以是自定義的標(biāo)識(shí)符。選擇器選擇網(wǎng)頁上的具體對象和元素,指定了CSS屬性規(guī)則應(yīng)用的對象。瀏覽器根據(jù)選擇器嚴(yán)格解析匹配元素,再將定義的屬性值應(yīng)用到匹配的對象和元素上。當(dāng)多條屬性規(guī)則作用于同一個(gè)元素時(shí),采用就近原則,越接近該元素的屬性規(guī)則優(yōu)先級就越高。2.屬性CSS提供了豐富的屬性,包括寬度、高度、顏色、大小等。例如,font-style屬性用于設(shè)置文本的體,color屬性用于設(shè)置文本的顏色等。一個(gè)對象元素可以同時(shí)設(shè)置多組屬性效果。多組屬性設(shè)置之間用分號隔開。不同的對象元素可以設(shè)置的屬性有差別,如文本可以設(shè)置字體屬性,而圖像無字體屬性。應(yīng)用CSS3中新增的部分屬性時(shí),要考慮瀏覽器的兼容性。CSS基本語法語法規(guī)則3.屬性值每個(gè)屬性可以設(shè)置的屬性值不同。在CSS中,有些屬性可以設(shè)置多個(gè)屬性值,用逗號分隔,其基本語法格式如下。selector{font-family:"楷體_gb2312","黑體","TimesNewRoman";}該樣式表說明了可以使用楷體_gb2312、黑體、TimesNewRoman3種字體來設(shè)置selector的字體效果。若在系統(tǒng)中找不到楷體_gb2312,則使用黑體;若找不到黑體,則使用TimesNewRoman,即按出現(xiàn)的先后順序優(yōu)先選擇。4.注釋像其他語言一樣,CSS允許用戶在源代碼中嵌入注釋。CSS注釋可以被瀏覽器忽略,不影響網(wǎng)頁效果。CSS基本語法語法規(guī)則注釋有助于記住復(fù)雜的屬性規(guī)則的作用、應(yīng)用的范圍等,便于屬性規(guī)則的后期維護(hù)和應(yīng)用。CSS注釋以字符“/?”開始,以字符“?/”結(jié)束。注釋格式如下。/*這是多行注釋CSS文件名:out.css功能說明:定義屬性*//*單行注釋屬性段落p*/p{font-size:20px;/*行尾注釋定義字號*/}“/?……?/”這種格式可以單獨(dú)一行書寫,也可以寫在語句的后面;可以注釋一行,也可以注釋多行。注釋不能嵌套。CSS基本語法使用方式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)容,其CSS基本語法使用方式基本語法格式如下。<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基本語法使用方式用。CSS樣式表文件是純文本文件,文件內(nèi)容是屬性規(guī)則的集合。CSS樣式表文件的擴(kuò)展名是.css。網(wǎng)頁中鏈接樣式文件時(shí),<link>標(biāo)記要放在<head>和</head>之間。鏈接的樣式表中的屬性規(guī)則,對引用了該樣式表文件的網(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)入屬性CSS基本語法使用方式導(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)入樣式表文件的位置,可以是相對路徑或絕對路徑。使用url()函數(shù)時(shí),路徑被作為字符串來處理,并且必須是有效的URL。CSS基本語法03CSS選擇器Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.基本選擇器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>CSS選擇器基本選擇器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元素。CSS選擇器件采購匯總表CSS選擇器關(guān)系選擇器1.群組選擇器群組選擇器是用逗號連接多個(gè)選擇器,匹配列舉的選擇器。2.后代選擇器后代選擇器是用空格連接多個(gè)選擇器,從父代選擇器依次向下匹配到指定的后代選擇器。后代選擇器包含在父代選擇器中。3.子代選擇器子代選擇器用“>”連接兩個(gè)選擇器,在父代選擇器下匹配到指定的子代選擇器。子代選擇器包含在父代選擇器里,并且是第一代的子代。4.兄弟選擇器兄弟選擇器用“~”連接兩個(gè)選擇器,匹配前一個(gè)選擇器后的所有同級的后一個(gè)選擇器。5.相鄰選擇器相鄰選擇器用“+”連接兩個(gè)選擇器,匹配前一個(gè)選擇器后相鄰的同級的后一個(gè)選擇器。動(dòng)態(tài)偽類選擇器動(dòng)態(tài)偽類選擇器用于用戶交互時(shí)選擇處于不同狀態(tài)的元素。動(dòng)態(tài)偽類選擇器的設(shè)置方式如表4-1所示。CSS選擇器04CSS繼承與層疊Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.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特性理解成“沖突”的解決方案,即對同一內(nèi)容設(shè)置了不同類型屬性產(chǎn)生沖突時(shí)的處理。(2)CSS的選擇器優(yōu)先級是一個(gè)相對復(fù)雜的概念,它規(guī)定了在一組樣式?jīng)_突時(shí),哪些樣式將被瀏覽器采納。CSS規(guī)定優(yōu)先級為:行內(nèi)屬性>id屬性>class屬性>標(biāo)記屬性。CSS繼承與層疊實(shí)訓(xùn)工單問答題：(4)CSS文件的內(nèi)容由什么組成?擴(kuò)展名是什么?(5)CSS的基本選擇器有哪幾種?有什么區(qū)別?(6)CSS的關(guān)系選擇器有哪幾種?有什么區(qū)別?(7)CSS的屬性選擇器根據(jù)什么選擇元素?操作題設(shè)計(jì)網(wǎng)頁,網(wǎng)頁運(yùn)行效果如圖4-3所示。要求:(1)網(wǎng)頁背景顏色為黃色。(2)標(biāo)題文本為“最新公告”并為其設(shè)置2像素的直線邊框,背景顏色為白色。(3)第一條公告的字號設(shè)置為20像素。(4)鼠標(biāo)

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(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ǔ)空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論