《網(wǎng)頁設(shè)計與制作》課件-第四章 CSS3入門_第1頁
《網(wǎng)頁設(shè)計與制作》課件-第四章 CSS3入門_第2頁
《網(wǎng)頁設(shè)計與制作》課件-第四章 CSS3入門_第3頁
《網(wǎng)頁設(shè)計與制作》課件-第四章 CSS3入門_第4頁
《網(wǎng)頁設(shè)計與制作》課件-第四章 CSS3入門_第5頁
已閱讀5頁，還剩22頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

本章知識點CSS簡介網(wǎng)頁中使用CSS的4種方式CSS的基本語法基本選擇器高級選擇器選擇器的優(yōu)先級偽類和偽元素一、CSS簡介CSS的作用修飾美化網(wǎng)頁內(nèi)容，簡陋的HTML顯示效果在CSS的作用下變得精致而美觀CSS樣式開發(fā)理念：HTML負責(zé)網(wǎng)頁結(jié)構(gòu)、CSS負責(zé)網(wǎng)頁美化、Javascript負責(zé)動作交互目標(biāo)是要實現(xiàn)“結(jié)構(gòu)、樣式、動作分離”一、CSS簡介CSS（CascadingStyleSheets）“層疊樣式表”或“級聯(lián)樣式表”，簡稱“樣式表”是用于（增強）控制網(wǎng)頁樣式，并且能夠?qū)邮叫畔⑴c網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言在1994年被提議，1996年被瀏覽器支持，現(xiàn)使用的是CSS3一、CSS簡介CSS的優(yōu)點豐富的修飾樣式各種修飾屬性，實現(xiàn)所想即所得內(nèi)容與修飾分離，利于團隊開發(fā)標(biāo)簽組織內(nèi)容，CSS修飾元素內(nèi)容實現(xiàn)樣式復(fù)用，提高開發(fā)效率CSS樣式可以同時作用于多個元素實現(xiàn)頁面的精確控制使用選擇器對頁面元素進行控制與修飾二、網(wǎng)頁中使用CSS的4種方式內(nèi)聯(lián)樣式表又稱為行內(nèi)樣式表每一個HTML標(biāo)簽都有一個“style”屬性，內(nèi)聯(lián)樣式表的內(nèi)容就是style屬性的屬性值內(nèi)聯(lián)樣式表只對使用了的標(biāo)簽有用不建議使用例如：<divstyle="font-size:36px;color:#F00;">

窗前明月光，疑是地上霜。</div>二、網(wǎng)頁中使用CSS的4種方式內(nèi)嵌樣式表樣式的定義部分包含在<style>標(biāo)簽之間內(nèi)嵌樣式表是HTML文件的一部分，<style>標(biāo)簽一般放在<head>標(biāo)簽之間內(nèi)嵌樣式表對整個網(wǎng)頁都有效建議少使用例如：<html><head>……<styletype="text/css">

p

{ font-size:18px; color:#F00; }</style></head><body> <div>靜夜思</div>

<p>窗前明月光，疑是地上霜。 </p>

<p>舉頭望明月，低頭思故鄉(xiāng)。 </p></body></html>二、網(wǎng)頁中使用CSS的4種方式外鏈樣式表是指在網(wǎng)頁中通過<link>標(biāo)簽調(diào)用外部的CSS樣式表文件的方式<link>標(biāo)簽一般位于head元素內(nèi)外部樣式表文件的后綴為“.css”，其內(nèi)容僅為“定義的CSS樣式”，除此之外不包含任何其它內(nèi)容外鏈樣式表對引入它的頁面都有效（多個頁面）強烈建議使用二、網(wǎng)頁中使用CSS的4種方式外鏈樣式表:CSS文件（mycss.css）舉例：p{ font-size:18px;color:#F00; }li{ font-size:16px; color:#309;}使用<link>標(biāo)簽引入：<linkrel=“stylesheet”type=“text/css”href=“css/mycss.css”/>

二、網(wǎng)頁中使用CSS的4種方式導(dǎo)入樣式表導(dǎo)入樣式表和外鏈樣式表基本相同，都是引入外部的獨立CSS文件導(dǎo)入樣式表是通過<style>標(biāo)簽內(nèi)部的“@import”關(guān)鍵字實現(xiàn)的導(dǎo)入樣式表對整個網(wǎng)頁都有效不建議使用使用<style>標(biāo)簽的@import關(guān)鍵字：<styletype="text/css">@importurl("css/mycss.css");</style>三、CSS的基本語法選擇器（selector）：用來選擇樣式呈現(xiàn)的對象聲明部分（declarationblock）：大括號及其內(nèi)的所有內(nèi)容聲明（declaration）：由“屬性（property）”和“屬性值（value）”組成，屬性和屬性值之間使用英文狀態(tài)下的冒號“:”作為分隔符。在聲明部分中，可以有多個聲明，聲明與聲明之間使用英文狀態(tài)下的分號“;”作為分隔符。css對大小寫敏感，css中屬性名稱都要求小寫四、基本選擇器CSS支持三種基本選擇器HTML選擇器Class選擇器Id選擇器四、基本選擇器HTML選擇器又稱標(biāo)簽選擇器，以HTML標(biāo)簽名稱作為選擇器，用來控制這一類標(biāo)簽的樣式實際應(yīng)用（見書上示例）注意：CSS中的注釋只能使用“/*注釋內(nèi)容*/”HTML選擇器常用于這樣的場景：希望網(wǎng)頁中某個標(biāo)簽的樣式全部統(tǒng)一四、基本選擇器Class選擇器又稱類選擇器，每個標(biāo)簽都擁有一個名為”class”的屬性。使用Class選擇器的兩個步驟給目標(biāo)HTML標(biāo)簽一個class屬性，并賦值在內(nèi)嵌樣式表或外鏈樣式表中，以目標(biāo)HTML標(biāo)簽的class屬性的值作為選擇器名稱，前面加符號“.”，然后再定義該選擇器的聲明部分實際應(yīng)用（見書上示例）Class選擇器代表著顯示風(fēng)格是一類的對象，Class選擇器中定義的樣式一個重要的特征就是“可按分類重用”四、基本選擇器Id選擇器每個HTML標(biāo)簽都擁有一個名為“id”的屬性CSS中的Id選擇器就是用標(biāo)簽的id屬性的值作為選擇器的名稱，Id選擇器名稱前用符號“#”作為標(biāo)記Id選擇器的使用步驟（與類選擇器類似）給目標(biāo)HTML標(biāo)簽一個Id屬性，并賦值在內(nèi)嵌樣式表或外鏈樣式表中，以目標(biāo)HTML標(biāo)簽的Id屬性的值作為選擇器名稱，前面加符號“#”，然后再定義該選擇器的聲明部分四、基本選擇器Id選擇器實際應(yīng)用（見書上示例）Id選擇器與類選擇器的差別在一個HTML文檔中，Id選擇器會使用一次，而且只應(yīng)該使用一次Id選擇器不能結(jié)合使用，因為Id屬性不允許有以空格分隔的詞列表

Id包含更多含義（作為標(biāo)識）四、基本選擇器文本屬性line-height（行高）text-align（對齊）letter-spacing（字符間距）text-decoration（文本修飾）字體屬性font（縮寫形式）font-weight（粗細）font-size（大?。ゝont-family（字體）Color（字體顏色）

樣式屬性五、高級選擇器CSS支持兩種高級選擇器群選擇器派生選擇器五、高級選擇器群選擇器又稱選擇器的分組形式：當(dāng)幾個選擇器的表現(xiàn)樣式相同，可以共同擁有一個聲明部分，選擇器之間用英文狀態(tài)的逗號“,”分隔作用：不僅可以節(jié)省代碼，也方便代碼維護實際應(yīng)用（見書上示例）五、高級選擇器派生選擇器又稱“后代選擇器”或“上下文選擇器”特征：可以利用元素的父子嵌套關(guān)系，對元素進行樣式控制實際應(yīng)用（見書上示例）子標(biāo)簽、后代標(biāo)簽、父標(biāo)簽可以減少標(biāo)簽的class屬性或id屬性，也可以做到精確控制<div><!--父標(biāo)簽--> <p><!--子標(biāo)簽--> <span></span><!--后代標(biāo)簽--> </p></div>五、高級選擇器派生選擇器只需要給某一塊內(nèi)容最外圍的標(biāo)簽一個class或者id命名，就可以通過class選擇器或者Id選擇器，組合以其子標(biāo)簽名為HTML選擇器，形成派生選擇器。可以減少標(biāo)簽的class屬性或id屬性，也可以做到精確控制<div><!--父標(biāo)簽--> <p><!--子標(biāo)簽--> <span></span><!--后代標(biāo)簽--> </p></div>六、選擇器的優(yōu)先級六、選擇器的優(yōu)先級選擇器和聲明的沖突有三種情況對同一元素所作用的不同聲明會疊加產(chǎn)生效果對同一元素所作用的相同選擇器的相同聲明按最后聲明對同一元素所作用的不同選擇器的相同聲明按選擇器優(yōu)秀法則顯示六、選擇器的優(yōu)先級優(yōu)先級計算法則內(nèi)聯(lián)樣式：選擇器權(quán)重為1000Id選擇器：選擇器權(quán)重為100Class選擇器或偽類：選擇器權(quán)重為10HTML選擇器或偽元素：選擇器權(quán)重為1通配選擇器：選擇器權(quán)重為0派生選擇器：父子選擇器的權(quán)重相加為總權(quán)重群選擇器：無總權(quán)重，各部分權(quán)重按自身類型元素上的樣式按照權(quán)重最大的顯示如果作用在某元素上的選擇器有多個權(quán)重相同，那么該元素的樣式按最后定義的選擇器（就近原則）七、偽類和偽元素樣式控制的特殊要求元素樣式的改變元素的首個字符或首行樣式與其它內(nèi)容不同基本選擇器和高級選擇器無法實現(xiàn)七、偽類和偽元素偽類基于特征對HTML元素進行分類:active被激活的元素:hover鼠標(biāo)懸浮在元素上方:link未被訪問過的鏈接（只<a>標(biāo)簽支持）:visited被訪問過的鏈接（只<a>標(biāo)簽支持）偽元素對HTML元素的特定部分進行樣式控制:first-letter文本的首字母（只能用于塊級元素）:first-line文本的首行（只能用于塊級元素）:before某元素之前插入內(nèi)容:after某元素之后插入內(nèi)容偽元素可以結(jié)合使用本章小結(jié)CSS用于控制網(wǎng)頁樣式，是將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言在網(wǎng)頁中使用CSS有4種方式：內(nèi)聯(lián)樣式表（行內(nèi)樣式表）、內(nèi)嵌樣式表、外鏈樣式表、導(dǎo)入樣式表內(nèi)聯(lián)樣式表只對使用了的標(biāo)簽有用；內(nèi)嵌樣式表對整個網(wǎng)頁都有效；外鏈樣式表對引入它的頁面都有效CSS的語法由以下部分構(gòu)成：選擇器、聲明部分；聲明部分可有多個聲明，聲明由“屬性”和“屬性值”組成，兩者之間用英文狀態(tài)下的冒號分隔CSS支持3種基本選擇器：HTML選擇器、Class選擇器、Id選擇器本章小結(jié)HTML選擇器是以HT

溫馨提示

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

評論

0/150

提交評論