第2章CSS選擇器與相關(guān)特性_第1頁
第2章CSS選擇器與相關(guān)特性_第2頁
第2章CSS選擇器與相關(guān)特性_第3頁
第2章CSS選擇器與相關(guān)特性_第4頁
第2章CSS選擇器與相關(guān)特性_第5頁
已閱讀5頁，還剩47頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

CSS網(wǎng)頁設(shè)計標(biāo)準(zhǔn)教程第1部分CSS核心原理

第2章CSS選擇器與相關(guān)特性

構(gòu)造CSS規(guī)則2.1基本CSS選擇器2.2在HTML中使用CSS的方法2.3復(fù)合選擇器2.4CSS的繼承特性2.5

通過上一章的學(xué)習(xí)，了解了在網(wǎng)頁設(shè)計中引入CSS的意義。引入CSS的核心目的就是實現(xiàn)網(wǎng)頁結(jié)構(gòu)內(nèi)容和表現(xiàn)形式的分離，將原來由HTML語言所承擔(dān)的一些與結(jié)構(gòu)無關(guān)的功能剝離出來，改由CSS來完成。

本章介紹CSS是如何工作的。重點介紹CSS的“選擇器”這一核心概念，以及相關(guān)的兩個特性——“繼承”和“層疊”。2.1構(gòu)造CSS規(guī)則

在具體介紹CSS之前，先思考一個生活中的問題。

張飛{

身高:185cm;

體重:105kg;

性別:男;

性格:暴躁;

民族:漢族;}

這個表實際上是由3個要素組成的，即姓名、屬性和屬性值。

CSS的作用就是設(shè)置網(wǎng)頁的各個組成部分的表現(xiàn)形式。因此，如果把上面的表格換成描述網(wǎng)頁上一個標(biāo)題的屬性表，可以設(shè)想應(yīng)該大致如下：

2級標(biāo)題{

字體:宋體;

大小:15像素;

顏色:紅色;

裝飾:下劃線}

再進(jìn)一步，如果把上面的表格用英語寫出來：h2{font-family:宋體;font-size:15px;color:red;text-decoration:underline;}

CSS的思想就是首先指定對什么“對象”進(jìn)行設(shè)置，然后指定對該對象的哪個方面的“屬性”進(jìn)行設(shè)置，最后給出該設(shè)置的“值”。因此，概括來說，CSS就是由3個基本部分——“對象”、“屬性”和“值”組成的。2.2基本CSS選擇器

在CSS的3個組成部分中，“對象”是很重要的，它指定了對哪些網(wǎng)頁元素進(jìn)行設(shè)置，因此，它有一個專門的名稱——選擇器（selector）。2.2.1標(biāo)記選擇器

<style>h1{color:red;font-size:25px;}</style>

圖2.1CSS標(biāo)記選擇器2.2.2類別選擇器

圖2.2類別選擇器

<html><head><title>class選擇器</title><styletype="text/css">.red{

color:red; /*紅色*/font-size:18px; /*文字大小*/}

.green{

color:green; /*綠色*/font-size:20px;/*文字大小*/}</style></head>

<body><pclass="red">class選擇器1</p><pclass="green">class選擇器2</p><h3class="green">h3同樣適用</h3></body></html>2.2.3ID選擇器

圖2.6ID選擇器

<html><head><title>ID選擇器</title><styletype="text/css">#bold{

font-weight:bold; /*粗體*/}#green{font-size:30px;/*字體大小*/color:#009900; /*顏色*/}

</style></head><body><pid="blod">ID選擇器1</p><pid="green">ID選擇器2</p><pid="green">ID選擇器3</p><pid="boldgreen">ID選擇器4</p></body></html>2.3在HTML中使用CSS的方法

2.3.1行內(nèi)式<html><head><title>頁面標(biāo)題</title></head><body>

<pstyle="color:#FF0000;font-size:20px;text-decoration:underline;">正文內(nèi)容1</p><pstyle="color:#000000;font-style:italic;">正文內(nèi)容2</p><pstyle="color:#FF00FF;font-size:25px;font-weight:bold;">正文內(nèi)容3</p></body></html>2.3.2內(nèi)嵌式

<html><head><title>頁面標(biāo)題</title><styletype="text/css">p{

color:#0000FF;text-decoration:underline;font-weight:bold;font-size:25px;}

</style></head><body><p>這是第1行正文內(nèi)容……</p><p>這是第2行正文內(nèi)容……</p><p>這是第3行正文內(nèi)容……</p></body></html>2.3.3鏈接式

<html><head><title>頁面標(biāo)題</title><linkhref="02-08.css"type="text/css"rel="stylesheet"></head><body>

<h2>CSS標(biāo)題</h2><p>這是正文內(nèi)容……</p><h2>CSS標(biāo)題</h2><p>這是正文內(nèi)容……</p></body></html>

h2{color:#0000FF;}p{color:#FF0000;text-decoration:underline;font-weight:bold;font-size:15px;}2.3.4導(dǎo)入式

@importurl(sheet1.css);@importurl("sheet1.css");@importurl('sheet1.css');@importsheet1.css;@import"sheet1.css";@import'sheet1.css';2.4復(fù)合選擇器

2.4.1交集選擇器

圖2.13標(biāo)記類別選擇器

圖2.14交集選擇器示意圖

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><title>選擇器.class</title><styletype="text/css">

p{ /*標(biāo)記選擇器*/

color:blue;}p.special{ /*標(biāo)記.類別選擇器*/

color:red; /*紅色*/}.special{ /*類別選擇器*/

color:green;}

</style></head><body><p>普通段落文本（藍(lán)色）</p><h3>普通標(biāo)題文本（黑色）</h3><pclass="special">指定了.special類別的段落文本（紅色）</p><h3class="special">指定了.special類別的標(biāo)題文本（綠色）</h3></body></html>2.4.2并集選擇器

圖2.16并集選擇器示意圖

<html><head><title>并集選擇器</title><styletype="text/css">h1,h2,h3,h4,h5,p{ /*并集選擇器*/

color:purple; /*文字顏色*/font-size:15px; /*字體大小*/}

h2.special,.special,#one{ /*集體聲明*/text-decoration:underline;/*下畫線*/}</style></head><body>

<h1>示例文字h1</h1><h2class="special">示例文字h2</h2><h3>示例文字h3</h3><h4>示例文字h4</h4><h5>示例文字h5</h5><p>示例文字p1</p><pclass="special">示例文字p2</p><pid="one">示例文字p3</p></body></html>2.4.3后代選擇器

<p>這是最外層的文字，<span>這是中間層的文字，<b>這是最內(nèi)層的文字，</b></span></p>

最外層是<p>標(biāo)記，里面嵌套了<span>標(biāo)記，<span>標(biāo)記中又嵌套了<b>標(biāo)記，則稱<span>是<p>的子元素，<b>是<span>的子元素。

<html><head><title>后代選擇器</title><styletype="text/css">pspan{ /*嵌套聲明*/

color:red; /*顏色*/}

span{

color:blue; /*顏色*/}</style></head><body><p>嵌套使<span>用CSS（紅色）</span>標(biāo)記的方法</p>

嵌套之外的<span>標(biāo)記（藍(lán)色）</span>不生效</body></html>

后代選擇器的使用非常廣泛，不僅標(biāo)記選擇器可以以這種方式組合，類別選擇器和ID選擇器都可以進(jìn)行嵌套。下面是一些典型的代碼：

.speciali{color:red;} /*使用了屬性spe

溫馨提示

  • 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)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論