第三節(jié) div+ css中文字和圖片背景的常用css熟悉詳解

asp老師 · 發(fā)表于 2014-11-29 16:31:24

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

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

x

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

控制背景圖片的CSS屬性有很多，只要與圖片的相關(guān)的，大多都會(huì)用的上。
這里不詳細(xì)說，大家看教程就可以知道了。耐心一點(diǎn)，慢慢認(rèn)真學(xué)，千萬別前面的不想學(xué)，后面的學(xué)不會(huì)，
那么我們來先回憶一下，第二節(jié)課程的內(nèi)容，第二節(jié)課程的代碼如下：

<!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; font-size:24px; background:#9C6;}
body{background:#F30;}
span{color:#00F; font-size:45px;}
</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><span>QQ群226547332</span>
</body>
</html>

復(fù)制代碼

我們熟悉了在css當(dāng)中，如何使用多個(gè)標(biāo)簽，之后同時(shí)也學(xué)會(huì)了如何對(duì)這個(gè)<span></span>標(biāo)簽，通過css的控制來實(shí)習(xí)對(duì)其顏色和大小..屬性的設(shè)定。
好我們來看今天的課程：首先呢！我們?cè)赽ody 標(biāo)簽里面寫幾個(gè)h標(biāo)簽，如果您對(duì)h標(biāo)簽還沒有聽懂的話，可以返回這里看我們HTml的基礎(chǔ)教程！
地址如下：011 在html當(dāng)中 H標(biāo)簽的詳細(xì)應(yīng)用和屬性的講解
好添加的代碼如下;

<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><span>QQ群226547332</span>
<h1>道勤網(wǎng)免費(fèi)學(xué)習(xí)</h1>
<h2>天道酬勤，要學(xué)習(xí)，來道勤！</h2>
<h3>免費(fèi)交流學(xué)習(xí)！</h3>
</body>

復(fù)制代碼

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

下面的幾個(gè)字體就是我們分別用<h1><h2><h3>寫出來的效果

此時(shí)，我們?cè)诜祷氐絚ss中設(shè)置h1 h2 h3的屬性，css代碼如下：

<style type="text/css">
P{color:#F00; font-size:24px; background:#9C6;}
body{background:#F30;}
span{color:#00F; font-size:45px;}
h1{color:#FF0;}
h2{color:#0C3;}
h3{color:#0F3; background:#000;}
</style>

復(fù)制代碼

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

我們給第一個(gè)文字<h1></h1>添加屬性：代碼如下：

h1{color:#FF0; font-family:Verdana, Geneva, sans-serif; font-size:9px; font-weiht:800;}

復(fù)制代碼

那么這句話的意識(shí)是：
color:#FF0; 表示的顏色為#F00font-family:Verdana, Geneva, sans-serif; 表示的是字體為：Verdana, Geneva, sans-serif（這個(gè)是一種字體的類型）
font-size:9px; 將這個(gè)h1內(nèi)的文字變?yōu)?px的大�。�
font-weight:800; 這個(gè)表示的是將這個(gè)h1標(biāo)簽內(nèi)的字體加粗！800大家可以先理解為一個(gè)數(shù)值。
那么這樣效果如下;

那么此時(shí)我們看這個(gè)css當(dāng)中的body的屬性，我們把這個(gè)背景的紅色去掉，給它添加一個(gè)背景圖片：（需要我們事先先把圖片準(zhǔn)備好才可以的）
代碼如下：

body{ background:url(xml.jpg); }

復(fù)制代碼

這個(gè)是我們更改了body的代碼：
css中的全部代碼如下：

<style type="text/css">
P{color:#F00; font-size:24px; background:#9C6;}
body{ background:url(xml.jpg); }
span{color:#00F; font-size:45px;}
h1{color:#FF0; font-family:Verdana, Geneva, sans-serif; font-size:9px; font-weiht:800;}
h2{color:#0C3;}
h3{color:#0F3; background:#000;}
</style>

復(fù)制代碼

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

那么這個(gè)body{background:url(xml.jpg);} 這個(gè)url(這里寫上你圖片的地址就可以的)。這個(gè)就表示圖片的鏈接方式;
如果您對(duì)相對(duì)路徑和絕對(duì)路徑不大清楚的話，可以點(diǎn)擊查看這個(gè)文章：
URI和URL區(qū)別以及相對(duì)路徑和絕對(duì)路徑的區(qū)別

在這里我們看這個(gè)代碼：body{background:url(xml.jpg);} 此時(shí)我們?cè)诶^續(xù)控制他默認(rèn)的圖片是有個(gè)屬性的好看代碼;

body{ background:url(xml.jpg) no-repeat; }

復(fù)制代碼

那么此時(shí)當(dāng)中的圖片則是不重復(fù)的效果，我們看下這個(gè)效果；默認(rèn)的是圖片自己拉伸的

那么這個(gè)no-repeat是可以自己定義的，我們寫為這樣的repeat-x repeat-y分別看下是什么效果
repeat-x這個(gè)表示是讓圖片按照x橫著排練，repeat-y是讓圖片按照y軸豎著排練

那么全部的代碼如下：

<!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; font-size:24px; background:#9C6;}
body{ background:url(xml.jpg) repeat-y; }
span{color:#00F; font-size:45px;}
h1{color:#FF0; font-family:Verdana, Geneva, sans-serif; font-size:9px; font-weiht:800;}
h2{color:#0C3;}
h3{color:#0F3; background:#000;}
</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><span>QQ群226547332</span>
<h1>道勤網(wǎng)免費(fèi)學(xué)習(xí)</h1>
<h2>天道酬勤，要學(xué)習(xí)，來道勤！</h2>
<h3>免費(fèi)交流學(xué)習(xí)！</h3>
</body>
</html>

復(fù)制代碼

一般情況下；用到圖片的話，我們一般選著默認(rèn)就可以了，如果要不重復(fù)就加一個(gè)no-repeat

點(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ù)！