網(wǎng)頁制作案例教程HTML5+CSS3 課件 項(xiàng)目3 CSS基礎(chǔ)_第1頁
網(wǎng)頁制作案例教程HTML5+CSS3 課件 項(xiàng)目3 CSS基礎(chǔ)_第2頁
網(wǎng)頁制作案例教程HTML5+CSS3 課件 項(xiàng)目3 CSS基礎(chǔ)_第3頁
網(wǎng)頁制作案例教程HTML5+CSS3 課件 項(xiàng)目3 CSS基礎(chǔ)_第4頁
網(wǎng)頁制作案例教程HTML5+CSS3 課件 項(xiàng)目3 CSS基礎(chǔ)_第5頁
已閱讀5頁，還剩34頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

HTML5CSS3項(xiàng)目3CSS基礎(chǔ)網(wǎng)頁制作案例教程（HTML5+CSS3）教學(xué)目標(biāo)了解理解掌握熟悉2理解CSS樣式規(guī)則，能定義簡單樣式。3熟悉CSS基本選擇器，會使用選擇器。知道選擇器的優(yōu)先級。會在網(wǎng)頁中引入CSS。4了解CSS的發(fā)展歷史以及主流瀏覽器的支持情況。11CSS簡介2使用CSS3CSS基礎(chǔ)選擇器4制作“藥王-孫思邈”頁面任務(wù)分解5CSS的優(yōu)先級、繼承與層疊PART0101CSS簡介CSS簡介CSSbody{background-color:blue;}p{font-size:14px;color:blue；}例CSS(CascadingStyleSheets)，譯為“層疊樣式表”，用來描述如何顯示HTML元素（布局、大小、顏色、間距、邊框、背景…）。CSS基礎(chǔ)CSS簡介CSS11996年12月W3C發(fā)布了第一個(gè)有關(guān)樣式的標(biāo)準(zhǔn)CSS1。1985年5月，CSS2正式推出，這個(gè)版本開始使用樣式表結(jié)構(gòu)。CSS2CSS2.1CSS32004年2月，CSS2.1正式推出。于1999年開始制訂，2001年5月23日W3C完成了CSS3的工作草案。CSS基礎(chǔ)CSS標(biāo)準(zhǔn)的發(fā)展歷程CSS簡介CSS3CSS3是CSS的升級版本。CSS演進(jìn)的一個(gè)主要變化就是W3C決定將CSS3分成一系列模塊（選擇器模塊、媒體查詢模塊、文本模塊、字體模塊、基本盒子模型模塊…）。CSS3中新增了許多選擇器和屬性。CSS3中文手冊/css3/CSS基礎(chǔ)PART0202CSS樣式規(guī)則CSS樣式規(guī)則CSS

樣式規(guī)則基本語法格式選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}選擇器用于指定CSS樣式作用的HTML元素花括號內(nèi)是對該元素設(shè)置的具體樣式。其中，屬性和屬性值以“鍵值對”的形式出現(xiàn)，用英文“:”連接，多個(gè)“鍵值對”之間用英文“;”進(jìn)行區(qū)分。p{font-size:14px;color:blue；}例CSS基礎(chǔ)CSS樣式規(guī)則按照書寫習(xí)慣一般將“選擇器、屬性和值”都采用小寫的方式。多個(gè)屬性之間必須用分號隔開，最后一個(gè)屬性后的分號可以省略，但是為了便于增加新樣式最好保留。如果屬性的值由多個(gè)單詞組成且中間包含空格，則必須為這個(gè)屬性值加上引號。p{

font-family:"microsoftyahei";font-size:14px;color:blue；}例CSS基礎(chǔ)CSS引入方式CSS引入方式行內(nèi)式內(nèi)嵌式鏈接式CSS基礎(chǔ)CSS引入樣式行內(nèi)式行內(nèi)式也稱為內(nèi)聯(lián)樣式，通過標(biāo)記style屬性來設(shè)置元素的樣式。語法格式<標(biāo)記名style="屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;">內(nèi)容</標(biāo)記名><pstyle="color:blue;font-size:25px;font-weight:bolder">正文標(biāo)題</p>例CSS基礎(chǔ)CSS引入樣式CSS基礎(chǔ)<pstyle="color:#ff0000;font-size:20px;text-decoration:underline">正文標(biāo)題1</p><pstyle="color:rgb(0,0,0);font-size:initial">正文標(biāo)題2</p><pstyle="color:blue;font-size:25px;font-weight:bolder">正文標(biāo)題3</p>demo1動(dòng)手

實(shí)踐CSS引入樣式內(nèi)嵌式內(nèi)嵌式是將CSS代碼集中寫在HTML文檔的<head>頭部標(biāo)記中，并且用<style>標(biāo)記定義。語法格式<styletype="text/css">選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}</style><styletype="text/css">img{ margin:020px; }p{ color:#ccc;}</style>例CSS基礎(chǔ)CSS引入樣式CSS基礎(chǔ)CSS引入樣式鏈接式鏈接式是將所有的樣式放在一個(gè)或多個(gè)以.css為擴(kuò)展名的外部樣式表文件中，通過<link/>標(biāo)記將外部樣式表文件鏈接到HTML文檔中。語法格式<linkhref="CSS文件的路徑"type="text/css"rel="stylesheet"/>CSS基礎(chǔ)CSS引入樣式CSS基礎(chǔ)PART0303CSS基礎(chǔ)選擇器CSS基礎(chǔ)選擇器基礎(chǔ)選擇器標(biāo)記選擇器類選擇器id選擇器通配

選擇器CSS基礎(chǔ)標(biāo)記選擇器又稱元素選擇器，用HTML標(biāo)記名稱作為選擇器，根據(jù)標(biāo)記名稱來選擇HTML元素。語法格式標(biāo)記名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}CSS基礎(chǔ)選擇器標(biāo)記選擇器img{ margin:020px; }p{ color:#ccc;}例CSS基礎(chǔ)類選擇器使用“.”（英文點(diǎn)號）進(jìn)行標(biāo)識，后面緊跟類名。HTML標(biāo)記套用類樣式時(shí)，需要使用class=“類名”。語法格式.類名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}CSS基礎(chǔ)選擇器類選擇器.menu{ font-size:16px; text-align:center;} <divclass=“menu”>…….</div>例CSS基礎(chǔ)id選擇器使用“#”進(jìn)行標(biāo)識，后面緊跟id名。HTML標(biāo)記套用id樣式時(shí)，需要使用id=“id名”。語法格式#id名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}CSS基礎(chǔ)選擇器id選擇器#header{ width:1200px; margin:0auto;} <divid=“header”>…….</div例CSS基礎(chǔ)通配符選擇器用“*”號表示，它是所有選擇器中作用范圍最廣的，能匹配頁面中所有的元素。語法格式*{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}CSS基礎(chǔ)選擇器通配選擇器*{ margin:0; padding:0; }例CSS基礎(chǔ)后代選擇匹配屬于指定元素后代的所有元素，其標(biāo)識是中間有一個(gè)空格，把外層標(biāo)記寫在前面，內(nèi)層標(biāo)記寫在后面，中間用空格分隔。當(dāng)標(biāo)記發(fā)生嵌套時(shí)，內(nèi)層標(biāo)記就成為外層標(biāo)記的后代。CSS基礎(chǔ)選擇器后代選擇器#headera{ color：#666666； }#nava{ color：#0000ff； }例CSS基礎(chǔ)并集選擇器是各個(gè)選擇器通過逗號連接而成的。若某些選擇器定義的樣式完全或部分相同，可利用并集選擇器為它們定義相同的樣式。CSS基礎(chǔ)選擇器并集選擇器#header，#footer{ width：1200px； margin:0auto; }例CSS基礎(chǔ)PART0404制作“藥王-孫思邈”頁面制作“藥王-孫思邈”頁面CSS基礎(chǔ)標(biāo)題4標(biāo)題5段落標(biāo)題3段落水平線圖像我們古代有很多偉大的人物，他們不計(jì)個(gè)人得失，一輩子默默奉獻(xiàn)，以造福民眾為己任，把自己的一生奉獻(xiàn)給人民。是我們學(xué)習(xí)的榜樣，下面我們制作“藥王-孫思邈”網(wǎng)頁，介紹一位這樣古代醫(yī)學(xué)家。PART0505CSS的層疊性、繼承性與優(yōu)先級層疊性是指多種CSS樣式的疊加。就是對一個(gè)元素多次設(shè)置同一個(gè)樣式。CSS的優(yōu)先級、繼承與層疊層疊性例樣式有沖突，要看樣式的級別。級別高的優(yōu)先顯示。CSS基礎(chǔ)CSS的優(yōu)先級、繼承與層疊優(yōu)先級基本選擇器的優(yōu)先級從低到高排序?yàn)椋簶?biāo)記樣式<類別（class）樣式<ID樣式<行內(nèi)樣式<!important。例CSS基礎(chǔ)權(quán)重分為不同的等級第一等級：行內(nèi)樣式，權(quán)值為1000；第二等級：ID選擇器，權(quán)值為100；第三等級：calss|偽類選擇器|屬性選擇器，權(quán)值10；第四等級：標(biāo)簽|偽對象選擇器，權(quán)值1；一個(gè)復(fù)雜的選擇器的權(quán)重需要計(jì)算，如選擇器ul#navli.activea，它的權(quán)重為1+100+1+10+1=113除此之外，還有一些特殊情況：繼承樣式的權(quán)重為0。權(quán)重相同時(shí)，CSS遵循就近原則。CSS定義了一個(gè)!important命令，該命令被賦予最大的優(yōu)先級。CSS的優(yōu)先級、繼承與層疊優(yōu)先級基本選擇器的優(yōu)先級從低到高排序?yàn)椋涸兀?biāo)記）樣式<類別（class）樣式<ID樣式<行內(nèi)樣式<!important。例CSS基礎(chǔ)CSS的優(yōu)先級、繼承與層疊優(yōu)先級基本選擇器的優(yōu)先級從低到高排序?yàn)椋涸兀?biāo)記）樣式<類別（class）樣式<ID樣式<行內(nèi)樣式<!important。例CSS基礎(chǔ)CSS的優(yōu)先級、繼承與層疊優(yōu)先級基本選擇器的優(yōu)先級從低到高排序?yàn)椋涸兀?biāo)記）樣式<類別（class）樣式<ID樣式<行內(nèi)樣式<!important。例CSS基礎(chǔ)CSS的優(yōu)先級、繼承與層疊優(yōu)先級第一等級：代表行內(nèi)樣式，如style=""，權(quán)值為1000；第二等級：代表ID選擇器，如#id="",權(quán)值為100；第三等級：代表calss|偽類|屬性選擇器，如.class|:hover,:link,:target|[type],權(quán)值10；第四等級：代表標(biāo)簽|偽元素選擇器，如p|::after,::before,::fist-inline,::selection,權(quán)值1；第一等級選擇器*個(gè)數(shù)，第二等級選擇器*個(gè)數(shù)，第三等級選擇器*個(gè)數(shù)，第四等級選擇器*個(gè)數(shù)；例CSS基礎(chǔ)CSS的優(yōu)先級、繼承與層疊優(yōu)先級繼承樣式的權(quán)重為0。行內(nèi)樣式優(yōu)先。權(quán)重相同時(shí)，CSS遵循就近原則。CSS定義了一個(gè)!important命令，該命令被賦予最大的優(yōu)先級。一些特殊情況：CSS基礎(chǔ)繼承性是指被包在內(nèi)部的標(biāo)記將擁有外部標(biāo)記的樣式，即子元素可以繼承父元素的屬性。CSS的優(yōu)先級、繼承與層疊繼承性不可繼承的屬性：display、border、padding、margin、background、height、width、overflow、position、left、right、top、bottom

溫馨提示

  • 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)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論