第四節(jié)div+css當(dāng)中的內(nèi)聯(lián)樣式和外聯(lián)的區(qū)別講解

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

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

您需要登錄才可以下載或查看，沒有賬號？立即注冊

x

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

內(nèi)聯(lián)是inner join是兩個(gè)表在連接的條件下,所有的字段相同才顯示。
外聯(lián)包括左聯(lián)，顯示左表所有內(nèi)容,右表有就顯示,沒有就顯示null，
右聯(lián)和左聯(lián)相反。

內(nèi)聯(lián)就是在當(dāng)前頁面用<style type="text/css">..........</style> 來進(jìn)行控制的樣式，那么我們把這個(gè)統(tǒng)稱為內(nèi)聯(lián)。
代碼如下：

<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>

復(fù)制代碼

這個(gè)就是內(nèi)聯(lián)inner的css。
那么我們看了內(nèi)聯(lián)，現(xiàn)在來看一下什么是外聯(lián)。
外聯(lián)也是寫在<title></title>之后，<style></style>之前的，那么代碼如下;

<title>無標(biāo)題文檔</title>
<link href="" rel="stylesheet" type="text/css" />
</head>

復(fù)制代碼

<link href="" rel="stylesheet" type="text/css" /> 這個(gè)就表示外聯(lián)，此時(shí)呢，需要我們新建一個(gè)名稱為01.css的文件；直接在01.css里面把如下內(nèi)聯(lián)樣式，全部寫上去，不需要加<style type="text/css"> </style>

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;}

復(fù)制代碼

那么我們來看這個(gè)用外聯(lián)樣式css之后的完整的代碼：

<!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="" rel="stylesheet" type="text/css" />
</head>
<body>
大家好，<p style="color:#F00;">現(xiàn)在我們一起來學(xué)習(xí)這個(gè)div+css系列教程-道勤網(wǎng)</p><p>本節(jié)視頻由道勤網(wǎng) 提供,全部免費(fèi)建站視頻教程請登錄道勤網(wǎng)!bmrsportswear.com .請關(guān)注本節(jié)課discuz視頻教程!<p>為各位新手站長提供學(xué)習(xí)交流的互助平臺(tái),還可以學(xué)到網(wǎng)站推廣的<p>知識,如: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ù)制代碼

此時(shí)我們保存一下，看一下效果，大家可以看到這個(gè)外聯(lián)的01.css沒有發(fā)生任何的作用。

之后我們在這個(gè)源代碼里面加入這個(gè)01.css，代碼如下：

<link href="01.css" rel="stylesheet" type="text/css" />

復(fù)制代碼

之后呢，我們保存下就可以看到，我們在01.css文件里面定義的css，就發(fā)揮了作用。效果如下：

那么大家現(xiàn)在就可以看到了，我們用了那么多的內(nèi)聯(lián)的css樣式來控制的效果，只要通過我們外聯(lián)的css文件，一下就可以解決了，這樣是不是非常的方便我們進(jìn)行后期的開發(fā)和制作呢！好那么我們來總結(jié)下這個(gè)內(nèi)聯(lián)和外聯(lián)樣式的書寫方式：

內(nèi)聯(lián)css樣式是：
<style type="text/css">
</style>

外聯(lián)css樣式是：
<link href="01.css" rel="stylesheet" type="text/css"/>

那么這個(gè)就是書寫的方式，我們可以把內(nèi)聯(lián)中的樣式，直接寫到新建的css文件中，然后用外聯(lián)直接
<link href="001.css" rel=“stylesheet” type="text/css"/>這樣就很方便我們進(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ù)！