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

下載本文檔

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

文檔簡(jiǎn)介

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

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

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

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

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

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

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

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

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

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

CSS樣式添加方法4（4）導(dǎo)入外部樣式

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

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

id選擇器案例4

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

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

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

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

CSS優(yōu)先級(jí)1

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

CSS對(duì)應(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樣式的疊加，當(dāng)疊加數(shù)量相同時(shí)，通過(guò)層疊（后者覆蓋前者）的樣式。例如，當(dāng)使用內(nèi)嵌式CSS樣式表定義<h2>標(biāo)記為文本居中，鏈入式定義<h2>標(biāo)記顏色為紅色，那么段落文本將顯示為紅色并居中，

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論