01 div+css 教程系列第一節(jié) div css基本書寫規(guī)則和原理詳細(xì)解答

asp老師 · 發(fā)表于 2014-11-29 12:57:12

親注冊(cè)登錄道勤網(wǎng)-可以查看更多帖子內(nèi)容哦�。ò蕡D片、文字詳情等）請(qǐng)您及時(shí)注冊(cè)登錄-bmrsportswear.com

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

x

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

大家好，我們以前看過了html的基本知識(shí)之后呢，現(xiàn)在我們一起來看div+css教程！
div+css首先它是一個(gè)設(shè)計(jì)標(biāo)準(zhǔn)，是網(wǎng)頁的布局方法。
div+css的優(yōu)點(diǎn)是：實(shí)現(xiàn)網(wǎng)頁內(nèi)容與表現(xiàn)分享，是目前來說，最流行的網(wǎng)頁布局形式。
那么div+css的基本書寫規(guī)則和原理又是什么呢？

1 . 好，我們來看這段代碼：

<body>
大家好，<p style="color:#F00;">現(xiàn)在我們一起來學(xué)習(xí)這個(gè)div+css系列教程-道勤網(wǎng)</p>本節(jié)視頻由道勤網(wǎng) 提供,全部免費(fèi)建站視頻教程請(qǐng)登錄道勤網(wǎng)!bmrsportswear.com .請(qǐng)關(guān)注本節(jié)課discuz視頻教程!為各位新手站長提供學(xué)習(xí)交流的互助平臺(tái),還可以學(xué)到網(wǎng)站推廣的知識(shí),如:seo等!實(shí)實(shí)在在的為新手站長包括空間域名的購買指導(dǎo),到程序的使用,及網(wǎng)站建設(shè),網(wǎng)站優(yōu)化,網(wǎng)站維護(hù)等全方位服務(wù),是道勤網(wǎng)努力的方向!QQ群226547332
</body>

復(fù)制代碼

那么它的效果如下：

這個(gè)在 <p style="color:#F00;">現(xiàn)在我們一起來學(xué)習(xí)這個(gè)div+css系列教程-道勤網(wǎng)</p>，這里表示：斷開同時(shí)也表示在這里用紅色寫出;
2. 好，我們繼續(xù)來看這段代碼，我們把這段文字，加入多個(gè)<p></p>標(biāo)簽; 代碼如下：

<body>
大家好，<p style="color:#F00;">現(xiàn)在我們一起來學(xué)習(xí)這個(gè)div+css系列教程-道勤網(wǎng)</p>本節(jié)視頻由道勤網(wǎng) 提供,全部免費(fèi)建站視頻教程請(qǐng)登錄道勤網(wǎng)!bmrsportswear.com .請(qǐng)關(guān)注本節(jié)課discuz視頻教程!<p>為各位新手站長提供學(xué)習(xí)交流的互助平臺(tái),還可以學(xué)到網(wǎng)站推廣的<p>知識(shí),如:SEO等!實(shí)實(shí)在在的為新手站長包括空間域名的購買指導(dǎo),到程序的使用,及網(wǎng)站建設(shè),網(wǎng)站優(yōu)化,網(wǎng)站維護(hù)等全方位服務(wù),是道勤網(wǎng)努力的方向!<p>QQ群226547332
</body>

復(fù)制代碼

效果如下：

3.好，那么安裝我們以前學(xué)過的html知識(shí)的話，我們想要把這里的每一個(gè)段落字體的顏色都變?yōu)榧t色，我們需要對(duì)每一個(gè)<p></p>標(biāo)簽進(jìn)行<style="color:#FF0;">進(jìn)行設(shè)置，才可以實(shí)習(xí)這一功能！但是這樣太麻煩了，而且非常繁瑣，所以我們現(xiàn)在引入CSS的寫法
css一般寫在<head>這里</head>；如下：
代碼是這樣的：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style type="text/css">
</style>
</head>

復(fù)制代碼

4.好我們現(xiàn)在在這里

<style type="text/css">
</style>

復(fù)制代碼

里面來控制我們的<p></p>標(biāo)簽的內(nèi)容

5.好代碼如下：這個(gè)是css的代碼

<style type="text/css">
P{color:#F00;}
</style>

復(fù)制代碼

下面是完整的代碼：

<!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>
<style type="text/css">
P{color:#F00;}
</style>
</head>
<body>
大家好，<p style="color:#F00;">現(xiàn)在我們一起來學(xué)習(xí)這個(gè)div+css系列教程-道勤網(wǎng)</p><p>本節(jié)視頻由道勤網(wǎng) 提供,全部免費(fèi)建站視頻教程請(qǐng)登錄道勤網(wǎng)!bmrsportswear.com .請(qǐng)關(guān)注本節(jié)課discuz視頻教程!<p>為各位新手站長提供學(xué)習(xí)交流的互助平臺(tái),還可以學(xué)到網(wǎng)站推廣的<p>知識(shí),如:SEO等!實(shí)實(shí)在在的為新手站長包括空間域名的購買指導(dǎo),到程序的使用,及網(wǎng)站建設(shè),網(wǎng)站優(yōu)化,網(wǎng)站維護(hù)等全方位服務(wù),是道勤網(wǎng)努力的方向!<p>QQ群226547332
</body>
</html>

復(fù)制代碼

圖示：

那么效果就是右面的效果，我們直接通過控制在css里面的p{color:#F00;} 來實(shí)現(xiàn)了控制下面的所有P標(biāo)簽的內(nèi)容顏色。是不是非常方便。這樣我們打開網(wǎng)頁的速度也非常的快速。比直接用Html進(jìn)行修改是不是方便了很多呢。嘿嘿，

點(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)系我們并購買后，我們?yōu)槟赓M(fèi)進(jìn)行無縫搬家服務(wù)，讓您享受網(wǎng)站零訪問延遲的遷移到道勤主機(jī)的服務(wù)！