課件css層疊表配套資源_第1頁
課件css層疊表配套資源_第2頁
課件css層疊表配套資源_第3頁
課件css層疊表配套資源_第4頁
課件css層疊表配套資源_第5頁
已閱讀5頁，還剩14頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

CSS

層疊樣式表什么是CSSCSS的版本CSS的特點(diǎn)CSS的三種使用方式什么是CSS？CSS指的就是層疊樣式表。

(CascadingStyleSheets)它的作用是用來定義我們的瀏覽器如何顯示html元素它的存在是為了解決內(nèi)容與表現(xiàn)分離的問題外部樣式表可以極大提高工作效率外部樣式表通常存儲(chǔ)在CSS文件中多個(gè)樣式定義可層疊為一CSS的使用方式外聯(lián)樣式內(nèi)聯(lián)樣式內(nèi)部樣式頁面調(diào)用外部后綴名為.css的樣式表文件在<head>標(biāo)簽中創(chuàng)建css樣式內(nèi)容在開始標(biāo)簽的style屬性中直接寫css樣式（不推薦）外聯(lián)樣式單獨(dú)創(chuàng)建后綴名為.css的樣式表文件。在頁面的<head>標(biāo)簽中使用<link>標(biāo)簽導(dǎo)入這個(gè)樣式表文件。<head><linkhref=“style.css"rel="stylesheet"type="text/css"/></head>內(nèi)聯(lián)樣式在<head>標(biāo)簽中直接創(chuàng)建css樣式。<head>

<styletype="text/css”>

<--css樣式內(nèi)容-->

</style></head>內(nèi)部樣式直接在開始標(biāo)簽中的style屬性里寫css樣式。<pstyle=“color:#ff0000;">

這里是段落</p>CSS基礎(chǔ)語法選擇符{}屬性：值；屬性：值；屬性：值；……外聯(lián)樣式和內(nèi)聯(lián)樣式都是這樣的寫法。CSS基礎(chǔ)語法內(nèi)部樣式直接在網(wǎng)頁元素的開始標(biāo)簽的style屬性中添加<pstyle=“屬性：值；屬性：值；….">

這里是段落</p>實(shí)際代碼講解CSS選擇符CSS中的選擇符分為三種：元素選擇符類選擇符id選擇符元素選擇符元素選擇符就是指頁面的元素，當(dāng)我們使用元素選擇符來設(shè)置css屬性的時(shí)候，整個(gè)網(wǎng)頁中的該元素都會(huì)變成所設(shè)置的樣式。p{color:#ff0000;font-weight:bold;}p是段落{ 內(nèi)容顏色：紅色； 字體粗細(xì)：加粗；}這樣的設(shè)置會(huì)讓整個(gè)網(wǎng)頁中的所有p元素都具有該樣式。類選擇符類選擇符所創(chuàng)建的樣式，只有通過網(wǎng)頁元素的class屬性調(diào)用，才能對(duì)該元素起作用。.red_b{color:#ff0000;font-weight:bold;}<pclass=“red_b”>這里是段落</p>類選擇符的起名沒有過多限制，但是應(yīng)該注意兩點(diǎn)，第一是避免使用網(wǎng)頁元素的名稱，第二是要具有一定的含義。id選擇符id選擇符創(chuàng)建的css樣式，它無法通過class屬性調(diào)用，它只對(duì)網(wǎng)頁中具有相同id的元素起作用#red_b{color:#ff0000;font-weight:bold;}<pid=“red_b”>這里是段落</p>實(shí)際代碼講解CSS特點(diǎn)在一個(gè)網(wǎng)頁中，可以同時(shí)使用三種樣式的CSS（外聯(lián)樣式，內(nèi)聯(lián)樣式，內(nèi)部樣式）。CSS具有層疊的特點(diǎn)，也就意味著它具有優(yōu)先級(jí)的概念，當(dāng)一個(gè)屬性擁有多個(gè)樣式的時(shí)候，它會(huì)按照優(yōu)先級(jí)的順序，在保持原有樣式的基礎(chǔ)上，再將新的樣式賦予它。CSS特點(diǎn)CSS具有繼承性當(dāng)最外層的父標(biāo)簽調(diào)用或設(shè)置了某些屬性的時(shí)候，父標(biāo)簽中的所有子標(biāo)簽都會(huì)具有相同的樣式。即：子標(biāo)簽繼承父標(biāo)簽的樣式。CSS優(yōu)先級(jí)使用方式優(yōu)先級(jí)選擇符優(yōu)先級(jí)外聯(lián)樣式1級(jí)根據(jù)選擇符優(yōu)先級(jí)內(nèi)聯(lián)樣式2級(jí)在原有基礎(chǔ)上根據(jù)選擇符覆蓋上新樣式元素選擇符1級(jí)賦予網(wǎng)頁類選擇符2級(jí)在原有基礎(chǔ)上賦予Id選擇符3級(jí)在原有基礎(chǔ)上再賦予最后執(zhí)行內(nèi)部樣式（style中的設(shè)置）。CSS高級(jí)派生選擇符（基本只用于元素選擇符）當(dāng)頁面多個(gè)元素都會(huì)用到同一種css設(shè)置的時(shí)候，我們可以將多個(gè)元素放在一起，中間用逗號(hào)（，）隔開。body,div,p,table,span{ font-size:12px; color:#000000;}CSS高級(jí)派生子級(jí)（多用于類選擇符或元素選擇符）設(shè)置了調(diào)用了這個(gè)類的里面的子級(jí)元素.to

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(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)論