《Web前端開發(fā)基礎(chǔ)》課件-3 文字頁面的制作_第1頁
《Web前端開發(fā)基礎(chǔ)》課件-3 文字頁面的制作_第2頁
《Web前端開發(fā)基礎(chǔ)》課件-3 文字頁面的制作_第3頁
《Web前端開發(fā)基礎(chǔ)》課件-3 文字頁面的制作_第4頁
《Web前端開發(fā)基礎(chǔ)》課件-3 文字頁面的制作_第5頁
已閱讀5頁，還剩35頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

《WEB前端》課程任務(wù)：文字頁面的制作CSS樣式添加任務(wù)效果展示1前次課任務(wù)：步驟一：內(nèi)容添加本次課任務(wù)：步驟二：頁面美化第一部分Knowledge支撐知識

CSS簡介1CSS層疊樣式表(英文全稱：CascadingStyleSheets)是一種用來表現(xiàn)HTML（標準通用標記語言的一個應(yīng)用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS是能夠真正做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計語言。

CSS樣式表功能2靈活控制頁面中文字的字體、顏色、大小、間距、風格及位置；圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式;隨意設(shè)置一個文本塊的行高、縮進，并可以為其加入三維效果的邊框；更方便定位網(wǎng)頁中的任何元素設(shè)置不同的背景顏色和背景圖片；精確控制網(wǎng)頁中各元素的位置；可以給頁面中的元素設(shè)置各種過濾器，從而產(chǎn)生諸如陰影、模糊、透明等效果，而這些效果只有在一些圖像處理軟件中才能實現(xiàn)；可以與腳本語言相結(jié)合，是網(wǎng)頁中的元素產(chǎn)生各種動態(tài)效果。

CSS樣式定義語法3CSS樣式設(shè)置規(guī)則由選擇器、屬性和值三部分組成?；菊Z法：選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}選擇器是用來指明選取的網(wǎng)頁元素，聲明則用于定義樣式屬性及屬性值，創(chuàng)建第一個CSS樣式3HTML文件是CSS的載體，HTML元素通過CSS來表現(xiàn)，所以首先要創(chuàng)建HTML文件，代碼如下所示。在html文件中的<head>標記中添加如下CSS代碼。

CSS樣式添加方法4（1）行內(nèi)式行內(nèi)式也稱為內(nèi)聯(lián)樣式，是通過標記的style屬性來設(shè)置元素的樣式，基本語法：<標記名稱style="屬性1:屬性值1;屬性2：屬性值2…">該語法中style是標記的屬性，實際上任何HTML標記都擁有style屬性，用來設(shè)置行內(nèi)式。適用于指定網(wǎng)頁中的某一元素的樣式，一般用于測試用途，效果僅可以控制該標簽。

CSS樣式添加方法4（2）內(nèi)嵌式

內(nèi)嵌式是嵌入到HTML文件的<head>標簽中，用<style>標記說明所要定義的樣式，用<style>標簽的type屬性來進行CSS語法定義，為了防止不支持CSS的瀏覽器將<style>標簽內(nèi)的CSS樣式當成普通字符顯示在網(wǎng)頁上，需要用<!--和-->將CSS樣式括起來，適用于指定當前網(wǎng)頁中的元素的樣式。

CSS樣式添加方法4（3）鏈入式

鏈入式是將所有的樣式放在一個或多個以.css為擴展名的外部樣式表文件中，通過<link/>標記將外部樣式表文件鏈接到HTML文檔中，其基本語法格式如下：<head><linkhref="CSS文件的路徑"type="text/css"rel="stylesheet"/></head>該語法中，<link/>標記需要放在<head>頭部標記中，并且必須指定<link/>標記的三個屬性，具體如下：href：定義所鏈接外部樣式表文件的URL，可以是相對路徑，也可以是絕對路徑。type：定義所鏈接文檔的類型，在這里需要指定為“text/css”，表示鏈接的外部文件為CSS樣式表。rel：定義當前文檔與被鏈接文檔之間的關(guān)系，在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個樣式表文件。

CSS樣式添加方法4（3）鏈入式首先創(chuàng)建一個后綴為css的文本文件，并將其保存到一個合適的路徑，設(shè)置的路徑為”案例/”，即當前路徑的案例子目錄中，文件名為first..css.

CSS樣式添加方法4（4）導入外部樣式

基本語法：語法解釋：用import語句輸入樣式表，import語句后的“;”是必需的，是內(nèi)嵌式及鏈接式的結(jié)合應(yīng)用，但相對于鏈接式而言，樣式會導入到當前文件中，增加當前文件的大小，不常用?！禬EB前端》課程文字頁面的制作CSS基礎(chǔ)選擇器任務(wù)效果展示1第一部分Knowledge支撐知識基本CSS選擇器2在CSS中，執(zhí)行這一任務(wù)的樣式規(guī)則部分被稱為選擇器。在CSS中的基礎(chǔ)選擇器有標記選擇器、類選擇器、id選擇器、通配符選擇器、標簽指定式選擇器、后代選擇器和并集選擇器，對它們的具體解釋如下。CSS樣式設(shè)置規(guī)則由選擇器、屬性和值三部分組成。基本語法：選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}｛｝表示符號內(nèi)的一組樣式是對指定對象設(shè)置的

標記選擇器3（1）標記選擇器標記選擇器是指用HTML標記名稱作為選擇器，按標記名稱分類，為頁面中某一類標記指定統(tǒng)一的CSS樣式。其基本語法格式如下：例如：上述CSS樣式代碼用于設(shè)置HTML頁面中所有的段落文本——字體大小為12像素、顏色為紅色、字體為“微軟雅黑”。標記名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}p{font-size:12px;color:red;font-family:"微軟雅黑";}類選擇器4（2）類選擇器類選擇器使用“.”（英文點號）進行標識，后面緊跟類名，其基本語法格式如下：該語法中，類名即為HTML元素的class屬性值，大多數(shù)HTML元素都可以定義class屬性。類選擇器最大的優(yōu)勢是可以為元素對象定義單獨或相同的樣式。定義了一個類選擇器title1，用來定義字體的大?。?title1{font-size:12px;)在頁面中使用定義的樣式:<h2class=“title1”>學校網(wǎng)站開發(fā)</h2>注意:類名不能以數(shù)字開頭。CSS的類名只能包含字母和數(shù)字。.類名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}類選擇器案例4Iid選擇器4（3）id選擇器id選擇器使用“#”進行標識，后面緊跟id名，其基本語法格式如下：該語法中，id名即為HTML元素的id屬性值，大多數(shù)HTML元素都可以定義id屬性，元素的id值是唯一的，只能對應(yīng)于文檔中某一個具體的元素。#id名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}

id選擇器案例4

CSS樣式添加方法4（3）鏈入式首先創(chuàng)建一個后綴為css的文本文件，并將其保存到一個合適的路徑，設(shè)置的路徑為”案例/”，即當前路徑的案例子目錄中，文件名為first..css.I通用配符選擇器4（3）通用配符選擇器通用選擇符是一種特殊的選擇符，用‘*’定義頁面所有元素的樣式，自動給能匹配頁面中所有的元素使用樣式，通用選擇符格式其基本語法格式如下：*{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}語法說明：其中*代表所有的網(wǎng)頁元素。應(yīng)用舉例說明。I通用配符選擇器案例4《WEB前端》課程CSS高級特性第一部分Knowledge支撐知識思考6思考網(wǎng)頁制作時，對同一元素，應(yīng)用不同的背景，會出現(xiàn)什么情況?結(jié)論:定義CSS樣式時，經(jīng)常出現(xiàn)兩個或更多規(guī)則應(yīng)用在同一元素上，這時就會出現(xiàn)優(yōu)先級的問題。

CSS樣式優(yōu)先級5

如果這上面的四種方式中的兩種用于同一個頁面后，就會出現(xiàn)優(yōu)先級的問題，四種樣式的優(yōu)先級別是(從高至低)：導入樣式行內(nèi)樣式內(nèi)嵌樣式鏈入樣式

CSS優(yōu)先級案例5

CSS優(yōu)先級1

選擇器的權(quán)重1CSS選擇器的權(quán)重是一個用來確定選擇器優(yōu)先級的值，它決定了當多個選擇器應(yīng)用于同一個元素時，哪個選擇器的樣式規(guī)則被應(yīng)用。CSS選擇器權(quán)重可以按照以下規(guī)則進行計算：1.行內(nèi)樣式的權(quán)重為1000。內(nèi)聯(lián)樣式是直接在元素的`style`屬性中定義的樣式規(guī)則。2.ID選擇器的權(quán)重為100。ID選擇器使用`#`表示，例如`#myElement`。3.類選擇器、屬性選擇器和偽類選擇器的權(quán)重為10。類選擇器使用`.`表示，屬性選擇器使用`[]`表示，偽類選擇器使用`:`表示。4.標簽選擇器和偽元素選擇器的權(quán)重為1。標簽選擇器是直接使用HTML標簽名稱表示的選擇器，例如<div>、<p>、<a>。偽元素選擇器使用，例如::before、::after。當多個選擇器應(yīng)用于同一個元素時，CSS引擎會將選擇器的權(quán)重進行比較，優(yōu)先應(yīng)用權(quán)重較高的樣式規(guī)則。具有相同權(quán)重的選擇器，后定義的樣式規(guī)則將覆蓋先定義的樣式規(guī)則。

CSS對應(yīng)的權(quán)重值5 pstrong{color:black;}/*權(quán)重為:1+1*/ strong.sun{color:blue;}/*權(quán)重為:1+10*/ .fatherstrong{color:gray;}/*權(quán)重為:10+1*/ p.fatherstrong{color:pink;}/*權(quán)重為:1+10+1*/ p.father.sun{color:orange;}/*權(quán)重為:1+10+10*/ #headerstrong{color:green;}/*權(quán)重為:100+1*/ #headerstrong.sun{color:red;}/*權(quán)重為:100+1+10*/注意5注意:繼承樣式的權(quán)重為0。

CSS層疊性5層疊性所謂層疊性是指多種CSS樣式的疊加，當疊加數(shù)量相同時，通過層疊（后者覆蓋前者）的樣式。例如，當使用內(nèi)嵌式CSS樣式表定義<h2>標記為文本居中，鏈入式定義<h2>標記顏色為紅色，那么段落文本將顯示為紅色并居中，

溫馨提示

  • 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)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論