第7部分CSS基礎(chǔ)知識(shí)_第1頁(yè)
第7部分CSS基礎(chǔ)知識(shí)_第2頁(yè)
第7部分CSS基礎(chǔ)知識(shí)_第3頁(yè)
第7部分CSS基礎(chǔ)知識(shí)_第4頁(yè)
第7部分CSS基礎(chǔ)知識(shí)_第5頁(yè)
已閱讀5頁(yè)，還剩13頁(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)介

第7部分CSS基礎(chǔ)知識(shí)7.1樣式表的概念

7.2CSS的特點(diǎn)

7.3CSS的類型

7.4CSS的基本寫法及引入

17.1樣式表的基本概念CSS的全稱為Cascadingstylesheets，是W3C在1996年提出的一個(gè)定義HTML的級(jí)聯(lián)/層疊樣式表，很快就成為一個(gè)被廣泛采納的標(biāo)準(zhǔn)。到1998年，W3C在原有草案的基礎(chǔ)上進(jìn)行了擴(kuò)展，建立了CSS2規(guī)范，它不僅包括了原有的表現(xiàn)形式與標(biāo)準(zhǔn)，還有許多增強(qiáng)功能。元素：指表示文檔格式的一個(gè)模塊，包括一個(gè)開(kāi)始標(biāo)簽、一個(gè)結(jié)束標(biāo)簽和包含在這兩個(gè)標(biāo)簽里的所有內(nèi)容。屬性：在HTML文檔中屬性是指元素某方面的特性。規(guī)則：“屬性:值”對(duì)的集合，用來(lái)控制網(wǎng)頁(yè)元素的顯示方式。27.2CSS的特點(diǎn)簡(jiǎn)化了網(wǎng)頁(yè)格式設(shè)計(jì)，增強(qiáng)了網(wǎng)頁(yè)的可維護(hù)性。加強(qiáng)了網(wǎng)頁(yè)的表現(xiàn)力，更多的效果擴(kuò)展了表現(xiàn)形式。增強(qiáng)了網(wǎng)站格式的一致性，降低網(wǎng)站開(kāi)發(fā)與維護(hù)工作量。允許作者獨(dú)立控制文檔中所有標(biāo)簽的顯示形式。37.3CSS的類型7.3.1CSS的類型7.3.2樣式優(yōu)先權(quán)原則

47.3.1CSS的類型內(nèi)聯(lián)樣式：是給某個(gè)元素設(shè)定具體的樣式規(guī)則。它在元素的開(kāi)始標(biāo)簽內(nèi)寫入具體的樣式規(guī)則(寫法參見(jiàn)下一節(jié))，作用范圍僅限于本元素。文檔級(jí)樣式：是將所有樣式規(guī)則都羅列在HTML文檔的頭部(<head>和</head>之間)，其作用范圍是整個(gè)文檔。外部樣式：是將所有樣式規(guī)則整合成一個(gè)獨(dú)立的文檔(.css文件)，作用范圍是所有引用或鏈接它的HTML文檔。本節(jié)目錄57.3.2樣式優(yōu)先權(quán)原則

當(dāng)多個(gè)樣式表對(duì)某元素的規(guī)則定義發(fā)生沖突時(shí)，瀏覽器會(huì)按如下優(yōu)先權(quán)原則進(jìn)行處理：

若在同一個(gè)類型的樣式表中發(fā)生沖突，那么按最后定義的樣式來(lái)顯示。若在不同類型的樣式表中發(fā)生沖突，那么按照內(nèi)聯(lián)樣式表、文檔級(jí)樣式表、外部樣式表從高到低的優(yōu)先權(quán)順序顯示。本節(jié)目錄67.4CSS的基本寫法及引入

7.4.1規(guī)則的寫法

7.4.1.1基本寫法

7.4.1.2多個(gè)選擇符7.4.1.3規(guī)則的引用7.4.1.4樣式類7.4.2樣式表的引入7.4.2.1內(nèi)聯(lián)樣式表7.4.2.2文檔級(jí)樣式表7.4.2.3外部樣式表77.4.1.1基本寫法

樣式規(guī)則的一般格式：樣式符{屬性1:值1;屬性2:值2;…}一條規(guī)則包括一個(gè)選擇符(樣式符)及其聲明，放在“{}”中的“屬性:值”對(duì)稱之為聲明，各“屬性:值”對(duì)之間用“;”分隔?；緦懛ㄖ械倪x擇符是HTML標(biāo)簽名，如p、body、hr等。如規(guī)則p{color:red;font-size:20pt;}，其中p是選擇符，color:red、font-size:20pt是屬性:值對(duì)，本規(guī)則表示所有<p>標(biāo)簽中的文字顏色為紅色、大小為20磅。本節(jié)目錄87.4.1.2多個(gè)選擇符

對(duì)大量標(biāo)簽作重復(fù)性設(shè)定時(shí)，如將h1~h6的6級(jí)標(biāo)題都設(shè)為紅色時(shí)，可以分條書寫規(guī)則如下： h1{color:red;} h2{color:red;} … h6{color:red;}多個(gè)選擇符的分組寫法：多個(gè)選擇符用逗號(hào)分隔，后跟聲明部分，上面的例子就可以書寫為：

h1,h2,h3,h4,h5,h6{color:red;}

本節(jié)目錄97.4.1.3規(guī)則的引用

對(duì)于已定義了規(guī)則的標(biāo)簽，在HTML文檔的正文部分不需要作任何改動(dòng)，例如，對(duì)于上一小節(jié)的例子，可直接在正文部分添加“<h2>二號(hào)標(biāo)題</h2>”，這和以前的使用沒(méi)有任何區(qū)別。對(duì)于后面介紹的樣式類/ID規(guī)則的引用，只需在標(biāo)簽內(nèi)添加少量語(yǔ)句即可。本節(jié)目錄107.4.1.4樣式類

常規(guī)類選擇符：規(guī)則的選擇符是“標(biāo)簽名.類名”，如p.red{color:red}

定義了一個(gè)p的名叫red的類。在正文中引用時(shí)要在標(biāo)簽中通過(guò)類屬性指定類名(class=類名)，如

<pclass=red>正文內(nèi)容</p>通用類選擇符：規(guī)則的定義和常規(guī)類相似，只是去掉了標(biāo)簽名，比如.red{color:red}。引用時(shí)和常規(guī)類的方法一樣。ID選擇符：規(guī)則的定義是把通用類定義中的“.”改為“#”，如#red{color:red}，引用時(shí)在標(biāo)簽中使用id屬性指定id名，如

<pid=red>正文內(nèi)容</p>

本節(jié)目錄？11問(wèn)題與解答Q1：通用類選擇符、常規(guī)類選擇符、ID選擇符的規(guī)則沖突時(shí)，優(yōu)先權(quán)如何確定？A1：低高Q2：類/ID選擇符、標(biāo)簽選擇符的規(guī)則沖突時(shí)，優(yōu)先權(quán)又如何確定？A2：高低本節(jié)目錄127.4.2.1內(nèi)聯(lián)樣式表

內(nèi)聯(lián)樣式表：在標(biāo)簽中包含style屬性及其值，中間用“=”連接，值是一個(gè)規(guī)則的簡(jiǎn)寫，它省略了規(guī)則的選擇符和“{}”，如：

<h2style="color:red;font-style:italic;">歡迎光臨</h2>本節(jié)目錄137.4.2.2文檔級(jí)樣式表文檔級(jí)樣式表：在網(wǎng)頁(yè)的<head>和</head>之間添加<style>和</style>標(biāo)簽，在<style>標(biāo)簽中指定屬性type=“text/css”，將規(guī)則置于這兩個(gè)標(biāo)簽之間，如：<head><styletype="text/css">h2{color:red;font-style:italic;}</style></head>實(shí)例本節(jié)目錄14實(shí)例<html><head><title></title><styletype="text/css">h2{color:red;font-style:italic;}</style></head><body><h2>歡迎光臨</h2></body></html>本節(jié)目錄15效果圖本節(jié)目錄167.4.2.3外部樣式表外部樣式表的使用鏈接外部樣式表的方法：在文檔的<head>與</head>標(biāo)簽之間使用<link>標(biāo)簽，并指定該標(biāo)簽的rel屬性、type屬性、href屬性的值，如 <linkrel="stylesheet"type="text/css

溫馨提示

  • 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)論