Web前端開發(fā) 課件 第6章 CSS基礎_第1頁
Web前端開發(fā) 課件 第6章 CSS基礎_第2頁
Web前端開發(fā) 課件 第6章 CSS基礎_第3頁
Web前端開發(fā) 課件 第6章 CSS基礎_第4頁
Web前端開發(fā) 課件 第6章 CSS基礎_第5頁
已閱讀5頁，還剩19頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第6章CSS基礎主講教師：朱鐵櫻《Web前端開發(fā)》

思維導圖6.1CSS概述隨著網(wǎng)頁制作技術的不斷發(fā)展，陳舊的CSS特性和標準已經(jīng)無法滿足現(xiàn)今的交互設計需求，開發(fā)者往往需要更多的字體選擇、更方便的樣式效果、更絢麗的圖形動畫。CSS3的出現(xiàn)，在不需要改變原有設計結(jié)構(gòu)的情況下，增加了許多新特性，極大地滿足了開發(fā)者的需求。

6.1CSS概述代碼繁瑣格式的一致性差可維護性差網(wǎng)頁現(xiàn)實效果缺乏動態(tài)性與交互性HTML標記的不足之處不利于代碼的閱讀維護困難

6.1CSS概述CSS提供了豐富的樣式font:屬性值;字體屬性顏色屬性背景屬性浮動屬性邊框?qū)傩詂olor:屬性值;background:屬性值;float:屬性值;border:屬性值;CSS通常稱為CSS樣式或樣式表，主要用于設置HTML頁面中的文本內(nèi)容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。

6.1CSS概述

6.1CSS概述1996年CSS1定義了網(wǎng)頁的基本屬性：字體、顏色、補白、基礎選擇器等1998年在CSS1的基礎上添加了高級功能：浮動和定位、部分高級選擇器2004年修改CSS2中的錯誤，增加一些擴展內(nèi)容發(fā)布時間是一個時間段，還沒定稿。各主流瀏覽器已經(jīng)支持其中的絕大部分特性。遵循模塊化開發(fā)CSS1CSS2CSS2.1CSS3CSS發(fā)展史

6.1CSS概述由于各瀏覽器廠商對CSS3各屬性的支持程度不一樣，因此在標準尚未明確的情況下，會用廠商的前綴加以區(qū)分，通常把這些加上私有前綴的屬性稱之為“私有屬性”。各主流瀏覽器都定義了自己的私有屬性，以便讓用戶更好的體驗CSS的新特性。私有前綴相關瀏覽器-msIE瀏覽器-webkitChrome瀏覽器、Safari（蘋果）-mozFirefox瀏覽器-oOpera瀏覽器推薦寫法：把帶前綴的寫在前面，最后再寫一個不帶私有前綴的。

6.1CSS概述由于功能的加強，CSS3能夠用更少的圖片或腳本制作圖形化網(wǎng)站。在進行網(wǎng)頁設計時，減少標簽的嵌套和圖片的使用數(shù)量，網(wǎng)頁頁面加載也會更快。CSS3的新功能幫我們摒棄了冗余的代碼結(jié)構(gòu)，遠離很多JavaScript腳本或者Flash代碼。網(wǎng)頁設計者不再需要花大把時間去寫腳本，極大的節(jié)約了開發(fā)成本。節(jié)約成本提高性能CSS3優(yōu)勢如今大多數(shù)網(wǎng)頁都是遵循Web標準開發(fā)的，即用HTML編寫網(wǎng)頁結(jié)構(gòu)和內(nèi)容，而相關版面布局、文本或圖片的顯示樣式都使用CSS控制。6.2結(jié)構(gòu)與表現(xiàn)分離結(jié)構(gòu)與表現(xiàn)相分離是指在網(wǎng)頁設計中，HTML標簽只用于搭建網(wǎng)頁的基本結(jié)構(gòu)，不使用標簽屬性設置顯示樣式，所有的樣式交由CSS來設置。HTML身體CSS衣服6.3CSS語法基礎選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}屬性和屬性值以“鍵值對”的形式出現(xiàn)，用英文“:”連接，多個“鍵值對”之間用英文“;”進行區(qū)分。選擇器屬性屬性值屬性屬性值屬性屬性值聲明聲明聲明CSS樣式規(guī)則的結(jié)構(gòu)示意圖

6.3CSS語法基礎CSS樣式中的選擇器嚴格區(qū)分大小寫，屬性和值不區(qū)分大小寫，按照書寫習慣一般將“選擇器、屬性和值”都采用小寫的方式。多個屬性之間必須用英文狀態(tài)下的分號隔開，最后一個屬性后的分號可以省略，但是為了便于增加新樣式最好保留。

6.3CSS語法基礎如果屬性的值由多個單詞組成且中間包含空格，則必須為這個屬性值加上英文狀態(tài)下的引號。在CSS代碼中空格是不被解析的，花括號以及分號前后的空格可有可無。呈現(xiàn)效果一樣代碼塊1：代碼塊2：可讀性更高代碼塊3：

6.4CSS注釋CSS注釋使用"/*"和"*/"符號表示注釋，符號之間的內(nèi)容不會被瀏覽器解析，主要用于對程序進行補充說明，CSS注釋有多行注釋和單行注釋兩種，都必須以/*開始、以*/結(jié)束，中間加入注釋內(nèi)容。

6.5在網(wǎng)頁中嵌入CSS行內(nèi)式也稱為內(nèi)聯(lián)樣式，是通過標記的style屬性來設置元素的樣式，其基本語法格式如下:行內(nèi)式內(nèi)嵌式鏈入式<標記名style="屬性1:屬性值1;屬性2:屬性值2;>

內(nèi)容

</標記名>內(nèi)嵌式是將CSS代碼集中寫在HTML文檔的<head>頭部標記中，并且用<style>標簽定義，其基本語法格式如下:<head><styletype="text/css">

選擇器{屬性1:屬性值1;屬性2:屬性值2;}</style></head>行內(nèi)式內(nèi)嵌式鏈入式

6.5在網(wǎng)頁中嵌入CSS鏈入式是將所有的樣式放在一個或多個以.css為擴展名的外部樣式表文件中，通過<link/>標記將外部樣式表文件鏈接到HTML文檔中，其基本語法格式如下:<head><linkhref="CSS文件的路徑"

type="text/css"rel="stylesheet"/></head>

6.5在網(wǎng)頁中嵌入CSS行內(nèi)式內(nèi)嵌式鏈入式

6.6CSS三大特性CSS是層疊式樣式表的簡稱，層疊性和繼承性是其基本特征。所謂層疊性是指多種CSS樣式的疊加。相同選擇器設置相同的樣式會覆蓋另一種沖突樣式。層疊性原則：樣式?jīng)_突，遵循就近原則樣式不沖突，不會層疊

6.6CSS三大特性所謂繼承性是指書寫CSS樣式表時，子標簽會繼承父標簽的某些樣式。htmlheadstyletitlebodyh1h1ppppemememimg

6.6CSS三大特性當使用

p元素作為選擇器編寫一個字體相關的樣式規(guī)則時，規(guī)則將應用于文檔中所有的段落和這些段落包含的內(nèi)聯(lián)文本。與字體相關的屬性不能應用于圖像。htmlheadstyletitlebodyh1h1ppppemememimg

6.6CSS三大特性以下屬性不具有繼承性邊框?qū)傩詢?nèi)/外邊距屬性背景屬性定位屬性布局屬性元素寬高屬性01、文字控制屬性基本都可以繼承；02、標題文本h不會繼承父級的文字大小，因為自身有默認字號樣式；03、超鏈接a標簽不能繼承父級元素的顏色color，因為自身有顏色屬性；04、應用于具體元素的任何屬性將覆蓋該屬性的繼承值。

6.6CSS三大特性定義CSS樣式時，使用兩個或更多規(guī)則在同一元素上，就會產(chǎn)生優(yōu)先級。選擇器相同，則執(zhí)行層疊性選擇器不同，則根據(jù)選擇器權(quán)重執(zhí)行定義一個!important命令，該命令被賦予最大的優(yōu)先級，大于一切。綜述：?行內(nèi)樣式>內(nèi)嵌樣式>外部鏈入樣式>瀏覽器默認樣式?!important>內(nèi)聯(lián)>ID>偽類|類|屬性>

溫馨提示

  • 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

提交評論