CSS 與 DIV 簡(jiǎn)介
1、認(rèn)識(shí)CSS - TOP
CSS是英文單詞Cascading Style Sheets縮寫(xiě),翻譯為“樣式表”,我們又稱(chēng)“CSS樣式表”。通俗講CSS是控制網(wǎng)頁(yè)中內(nèi)容的顏色、字體、文字大小、寬度、邊框、背景、浮動(dòng)等樣式來(lái)實(shí)現(xiàn)各式各樣、花樣百出的網(wǎng)頁(yè)樣式的統(tǒng)稱(chēng)(CSS手冊(cè)了解更多控制樣式屬性)。如大學(xué)是什么,大學(xué)里有計(jì)算機(jī)、教師、物理、化學(xué)、英語(yǔ)等專(zhuān)業(yè)系、院組成了一所大學(xué),這就是大學(xué)。
2、CSS原理 - TOP
認(rèn)識(shí)了CSS原理,相當(dāng)于我們找到CSS下手學(xué)習(xí)入口,進(jìn)入CSS世界。
轉(zhuǎn)入正題,CSS原理模型例子:我們知道使用對(duì)講機(jī)雙方要通話(huà),必須要在一定距離內(nèi)(對(duì)講機(jī)信號(hào)覆蓋區(qū)),CSS一樣,CSS要生效必須引入要正確(推薦style 和 link,內(nèi)嵌CSS代碼和引入CSS文件2種方式引入嵌入CSS);對(duì)講機(jī)雙方除了在信號(hào)范圍內(nèi)才能通話(huà),還有最重要的就是雙方頻道頻率(調(diào)頻頻率)要相同,CSS也是這樣,要想CSS生效就需要在CSS代碼的CSS選擇器命名和HTML中class值或id的值的引用的CSS選擇器命名相同。這樣CSS選擇器命名與html應(yīng)用CSS類(lèi)(class)值名相同后,這個(gè)CSS選擇器里寫(xiě)不同樣式屬性,html對(duì)應(yīng)部分網(wǎng)頁(yè)內(nèi)容樣式就跟著你在CSS選擇器里設(shè)置不同CSS屬性樣式而變化。
HTML與CSS本身是一個(gè)整體缺一不可,CSS代碼表達(dá)的樣式要實(shí)現(xiàn)就需要html中使用class或ID的值與CSS選擇器的命名的名稱(chēng)相同。
DIVCSS5例子-style html中內(nèi)嵌CSS代碼法: - TOP
CSS代碼(代碼是放入html的head開(kāi)始與結(jié)束標(biāo)簽內(nèi)):
<style type="text/css">
.yangshi{ color:#F00;}/* 定義內(nèi)容為紅色 */
#abc{ color:#0F0;}/* 定義內(nèi)容為綠色 */
</style>
對(duì)應(yīng)在html調(diào)用(此代碼是放入body區(qū)內(nèi)):
<div class="yangshi">我是紅色</div>
<div id="abc">我是綠色</div>
CSS原理與CSS實(shí)例說(shuō)明: - TOP
1、css屬性選擇器與html中DIV標(biāo)簽內(nèi)使用CLASS或ID引入CSS的命名的名稱(chēng)要相同。(如上例,CSS中.yangshi{...}對(duì)應(yīng)HTML<div class="yangshi"></div>)
2、CSS代碼寫(xiě)到什么地方(上例:使用style在html中內(nèi)嵌CSS代碼,當(dāng)然可以使用LINK外部引入CSS文件)
3、CSS屬性選擇器命名自己可以取,而CSS樣式屬性是固定的,如寬度對(duì)應(yīng)width
注意“yangshi”與"abc",對(duì)應(yīng)到HTML里一個(gè)用class一個(gè)用ID,我們就需要認(rèn)識(shí)CLASS與ID區(qū)別與CLASS ID用法。
從CSS原理我們主要是學(xué)習(xí)CSS與HTML關(guān)系,
2 什么是DIV+CSS,DIV CSS是什么?
簡(jiǎn)單地說(shuō)DIV+CSS(DIV CSS)被稱(chēng)為“WEB標(biāo)準(zhǔn)”中常用術(shù)語(yǔ)之一。首先認(rèn)識(shí)DIV是用于搭建html網(wǎng)頁(yè)結(jié)構(gòu)(框架)標(biāo)簽,像<b>、<h1>、<span>等html標(biāo)簽一樣,再認(rèn)識(shí)CSS是用于創(chuàng)建網(wǎng)頁(yè)表現(xiàn)(樣式/美化)樣式表統(tǒng)稱(chēng),通過(guò)css來(lái)設(shè)置div標(biāo)簽樣式,這一切常常我們稱(chēng)之為div+css。
posted on 2012-05-11 15:44 ** 閱讀(257) 評(píng)論(0) 編輯 收藏