3天0基礎(chǔ)建站課程

[DIV+CSS 教程筆記02] 第七課 div css當(dāng)中組合選擇符的應(yīng)用和原理詳解

[復(fù)制鏈接]

asp老師

226 主題	12 回帖	3260 積分

終身VIP會(huì)員

Rank: 7 Rank: 7 Rank: 7

積分: 3260

發(fā)消息

電梯直達(dá)

樓主

發(fā)表于 2014-11-30 14:58:26 | 只看該作者 |只看大圖回帖獎(jiǎng)勵(lì)

|倒序?yàn)g覽 |閱讀模式

親注冊(cè)登錄道勤網(wǎng)-可以查看更多帖子內(nèi)容哦！（包涵精彩圖片、文字詳情等）請(qǐng)您及時(shí)注冊(cè)登錄-bmrsportswear.com

您需要登錄才可以下載或查看，沒有賬號(hào)？立即注冊(cè)

本帖最后由 asp老師于 2014-11-30 23:02 編輯

上幾節(jié)課我們看了這個(gè)class和id選擇器的用法，那么我們現(xiàn)在來看今天的課程內(nèi)容；我們先新建一個(gè)名稱為07.html的文件，在建立一個(gè)07.css的文件，之后把07.css引入(link href="07.css" rel="stylesheet" type="text/css")我們的07.html當(dāng)中，并且我們?cè)?7.html當(dāng)中，寫上我們的
<h></h>標(biāo)簽；好07.html的代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
< link href="07.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>道勤網(wǎng)</h1>
<h2>道勤網(wǎng)</h2>
<h3>道勤網(wǎng)</h3>
<h4>道勤網(wǎng)</h4>
<h5>道勤網(wǎng)</h5>
</body>
</html>

復(fù)制代碼

那么此時(shí)效果如下：

我們?cè)诘?7.css當(dāng)中定義<h>標(biāo)簽當(dāng)中的屬性；代碼如下

h1{color:#F00; background:#330;}
h2{color:#963; background:#330;}
h3{color:#C0C; background:#330;}
h4{color:#000; background:#330;}
h5{color:#3F0; background:#330;}

復(fù)制代碼

那么效果如下：

如果我們?cè)?7.css當(dāng)中來這樣寫：

h1,h2,h3,h4,h5{color:#3F0; background:#330; font-weight:900;}

復(fù)制代碼

這樣呢就是通過h1,h2,h3,h4,h5{}也可以進(jìn)行一起起到效果，
當(dāng)然也可以把里面的p span等標(biāo)簽進(jìn)行一起組合。

h1,42,p,span,h5{color:#F00;}
span,h1{color:#F00;}

這樣呢，不同的標(biāo)簽就可以通過在07.css當(dāng)中進(jìn)行定義。組合來進(jìn)行起到不一樣的效果，同時(shí)這樣呢，可以加快我們的網(wǎng)頁訪問的速度。

點(diǎn)擊查看其他div+css教程
第一節(jié) div css基本書寫規(guī)則和原理詳細(xì)解答
第二節(jié)在div css當(dāng)中并列標(biāo)簽的應(yīng)用規(guī)則詳解
第三節(jié) div+ css中文字和圖片背景的常用css熟悉詳解
第四節(jié)div+css當(dāng)中的內(nèi)聯(lián)樣式和外聯(lián)的區(qū)別講解
第五節(jié)div+css當(dāng)中 class類別選擇符的應(yīng)用詳解
第六課. DIV +CSS當(dāng)中的 id選擇器的應(yīng)用和匹配原理詳解
第七課 div css當(dāng)中組合選擇符的應(yīng)用和原理詳解
第八課 div css 通配選擇符和包含選擇器的用法技巧
第九課 div css里面常用選擇器的課程總結(jié)
第十課 div css 中css偽類元素的講解和應(yīng)用原理詳解
第十一課 div css當(dāng)中的背景圖片的定位概念

道勤主機(jī)提供365天*24小時(shí)全年全天無休、實(shí)時(shí)在線、零等待的售后技術(shù)支持。竭力為您免費(fèi)處理您在使用道勤主機(jī)過程中所遇到的一切問題! 如果您是道勤主機(jī)用戶，那么您可以通過QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、微信：q792472177免費(fèi)電話、后臺(tái)提交工單這些方式聯(lián)系道勤主機(jī)客服！如果您不是我們的客戶也沒問題，點(diǎn)擊頁面最右邊的企業(yè)QQ在線咨詢圖標(biāo)聯(lián)系我們并購(gòu)買后，我們?yōu)槟赓M(fèi)進(jìn)行無縫搬家服務(wù)，讓您享受網(wǎng)站零訪問延遲的遷移到道勤主機(jī)的服務(wù)！

本內(nèi)容系道勤團(tuán)隊(duì) bmrsportswear.com 客服與技術(shù)人員研究整理的智慧結(jié)晶，轉(zhuǎn)載勿用于商業(yè)用途，并保留本文鏈接，侵權(quán)必究！