版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
《網(wǎng)頁(yè)設(shè)計(jì)與制作教程》作者：孟顯勇北京理工大學(xué)出版社第七章CSS基礎(chǔ)目前主流網(wǎng)頁(yè)設(shè)計(jì)技術(shù)是使用HTML語(yǔ)言的標(biāo)簽定義頁(yè)面結(jié)構(gòu)，使用CSS樣式表定義頁(yè)面的布局和樣式。早期HTML語(yǔ)言通過(guò)增加大量定義格式的標(biāo)簽和屬性，來(lái)實(shí)現(xiàn)樣式和格式的定義，這樣使代碼變得越來(lái)越復(fù)雜，但效果并不理想。例如，將文本轉(zhuǎn)換成圖像，或過(guò)多的使用表格實(shí)現(xiàn)排版。因此，HTML語(yǔ)言將原來(lái)大量的格式定義的工作都交由CSS樣式表來(lái)處理，因?yàn)?，CSS可以實(shí)現(xiàn)豐富的樣式定義和精確的頁(yè)面對(duì)象排版。7.1CSS簡(jiǎn)介CSS（CascadingStyleSheets）稱(chēng)為層疊樣式表單，CSS按代碼的位置可以分為三種：內(nèi)聯(lián)樣式表、內(nèi)部樣式表、外部樣式表。CSS主要對(duì)布局、字體、顏色、背景等頁(yè)面元素的樣式實(shí)現(xiàn)更加精確的控制。通過(guò)修改CSS樣式文件，就可以實(shí)現(xiàn)整個(gè)站點(diǎn)內(nèi)引用此格式的頁(yè)面的樣式同時(shí)更新，即實(shí)現(xiàn)頁(yè)面格式的集中控制和管理。CSS具有很好的瀏覽器和平臺(tái)兼容性。使用CSS可以實(shí)現(xiàn)精確的樣式定義，并且樣式定義代碼簡(jiǎn)練，執(zhí)行效率高。
HTML語(yǔ)言和CSS樣式結(jié)合可以使頁(yè)面結(jié)構(gòu)和格式定義分離，HTML語(yǔ)言定義頁(yè)面結(jié)構(gòu)和內(nèi)容，CSS來(lái)定義頁(yè)面的格式。7.1.1CSS分類(lèi)內(nèi)聯(lián)樣式表
內(nèi)聯(lián)樣式表是由標(biāo)簽的style屬性定義的樣式，HTML絕大多數(shù)標(biāo)簽都具有style屬性，通過(guò)style屬性可以對(duì)網(wǎng)頁(yè)對(duì)象的格式進(jìn)行定義。內(nèi)聯(lián)樣式定義的格式只對(duì)此標(biāo)簽修飾對(duì)象有效。例如，代碼段：<Bstyle=“color:#FF0000;font-size:18px”>標(biāo)簽style屬性定義樣式</B>，對(duì)<B>標(biāo)簽的style屬性進(jìn)行定義，設(shè)置文字顏色為紅色，字體大小為18px。
7.1.1CSS分類(lèi)內(nèi)部樣式表
內(nèi)部樣式表是使用<STYLE>標(biāo)簽在文檔頭部分的<HEAD></HEAD>標(biāo)簽中對(duì)格式進(jìn)行定義，內(nèi)部樣式表定義的樣式可以被本頁(yè)面的標(biāo)簽引用。程序【例7-1】在<STYLE>標(biāo)簽中定義<H1>和<P>標(biāo)簽的樣式，頁(yè)面中所有<H1>和<P>標(biāo)簽都可以引用定義的樣式，<H1>標(biāo)簽修飾的文字顯示紅色、宋體，<P>標(biāo)簽修飾的文字顯示綠色、字體大小為18px。7.1.1CSS分類(lèi)內(nèi)部樣式表<HTML>
<HEAD>
<STYLE>
H1{color:#FF0000;font-family:"宋體"}
P{color:#00FF00;font-size:18px}
</STYLE>
</HEAD>
<BODY>
<H1>標(biāo)題樣式定義</H1>
<P>分段樣式定義</P>
</BODY>
</HTML>7.1.1CSS分類(lèi)外部樣式表
外部樣式表是將樣式定義代碼單獨(dú)放到一個(gè)獨(dú)立的文件中，使用樣式定義的頁(yè)面都可以引用此樣式定義文件，樣式文件的擴(kuò)展名為.css。當(dāng)樣式定義的文件內(nèi)容發(fā)生改變時(shí)所有引用頁(yè)面都會(huì)自動(dòng)更新，實(shí)現(xiàn)集中樣式定義和控制。7.1.1CSS分類(lèi)外部樣式表定義獨(dú)立的外部樣式表style.css，程序（style.css）代碼如下：
p.redp{color:#FF0000;font-size:18px}
p.greenp{color:#00FF00;font-size:16px}
7.1.1CSS分類(lèi)外部樣式表引用頁(yè)面程序（ch7-2.html）代碼如下：
<html>
<head>
<title>CSS樣式定義</title>
<linkhref="style.css"rel="stylesheet"type="text/css">
</head>
<body>
<pclass="greenp">定義段落文字為綠色，16px</p>
<pclass="redp">定義段落文字為紅色，18px</p>
</body>
</html>7.1.2CSS基本語(yǔ)法CSS是定義頁(yè)面格式的標(biāo)準(zhǔn)，具有嚴(yán)格的語(yǔ)法規(guī)范，CSS語(yǔ)法主要由三部分組成：選擇器、屬性和屬性值。CSS語(yǔ)法如下：
語(yǔ)法：selector{property:value;property:value;}
選擇器{屬性：屬性值;屬性：屬性值}
7.1.2CSS基本語(yǔ)法選擇器選擇器就是想要對(duì)其樣式定義的HTML標(biāo)簽，對(duì)HTML標(biāo)簽樣式定義后，頁(yè)面內(nèi)引用該標(biāo)簽的格式都會(huì)按照樣式表定義的樣式顯示效果。7.1.2CSS基本語(yǔ)法屬性和屬性值
CSS的屬性定義的是標(biāo)簽的屬性，例如，字體顏色，字體大小，頁(yè)邊空白等。例如，定義選擇器body的字體、大小和顏色，屬性font-family定義字體；屬性font-size定義大??；屬性color定義文本顏色。屬性與屬性值用冒號(hào)隔開(kāi)，當(dāng)定義多個(gè)屬性和屬性值時(shí)，用分號(hào)隔開(kāi)每個(gè)屬性。定義屬性代碼段如下：
body{
font-family:"宋體";
font-size:20px;
color:#FF0000;
}
7.1.3選擇器分類(lèi)組合方式
CSS支持將相同屬性和屬性值賦給多個(gè)選擇器，選擇器與選擇器之間用逗號(hào)隔開(kāi)，多個(gè)選擇器具有相同的樣式定義。例如，如下代碼段：
body,p,h1
{
font-family:“宋體”;
font-size:18px
}
組合方式定義的選擇器樣式相同，在網(wǎng)頁(yè)中<BODY>標(biāo)簽、<P>標(biāo)簽和<H1>標(biāo)簽樣式相同，代替默認(rèn)的標(biāo)簽格式，字體均為宋體，字體大小均為18px。7.1.3選擇器分類(lèi)CLASS選擇器
CSS使用CLASS選擇器可以實(shí)現(xiàn)同一HTML標(biāo)簽定義不同樣式，同一樣式可以被不同HTML標(biāo)簽引用。例如，可以定義多個(gè)<H1>標(biāo)簽樣式，一種是文字居中對(duì)齊樣式，一種是文字居左對(duì)齊樣式，標(biāo)簽<H1>的樣式可以定義為：
h1.center{text-align:center}
h1.left{text-align:left}
其中，center和left為class名稱(chēng)。在HTML代碼中要引用上述格式定義，需要標(biāo)簽<H1>設(shè)置class屬性引用樣式，如下代碼段：
<h1class="center">標(biāo)題居中顯示</h1>
<h1class="left">標(biāo)題居左顯示</h1>7.1.3選擇器分類(lèi)CLASS選擇器可以設(shè)置成通用樣式，即不指定具體的HTML標(biāo)簽。格式為：“.選擇器名稱(chēng){屬性：屬性值;}”，例如，定義一個(gè)CLASS選擇器，代碼段如下：
．green{color:#00FF00}
這類(lèi)CLASS樣式具有通用性，可以被多種HTML標(biāo)簽所引用，例如，green選擇器可以被<H1>、<B>和<td>等多種標(biāo)簽引用，代碼段如下：
<h1class="green">標(biāo)題文字為綠色</h1>
<bclass="green">加粗文字為綠色</b>7.1.3選擇器分類(lèi)ID選擇器
CSS使用ID選擇器定義頁(yè)面某一對(duì)象的樣式，ID選擇器定義具有唯一性，即指向頁(yè)面唯一一個(gè)頁(yè)面對(duì)象，ID選擇器的定義格式為：“#選擇器名稱(chēng){屬性：屬性值;}”，定義ID選擇器代碼段如下：
#blue{color:#0000FF}
ID選擇器具有唯一性，只有ID號(hào)與ID選擇器名稱(chēng)相同的HTML標(biāo)簽才可以引用此樣式，例如，blue選擇器可以被ID號(hào)為blue的標(biāo)簽引用，代碼段如下：
<h1id="blue">標(biāo)題文字為藍(lán)色</h1>
在頁(yè)面中只有<H1>的ID號(hào)為blue時(shí)才能引用ID選擇器“#blue”，其實(shí)質(zhì)是給ID號(hào)為blue的對(duì)象設(shè)置樣式，樣式名為blue7.1.3選擇器分類(lèi)CLASS和ID選擇器的區(qū)別
雖然CLASS和ID選擇器都可以實(shí)現(xiàn)樣式的定義，但它們之間存在著較大區(qū)別，ID選擇器在頁(yè)面內(nèi)只能用一次，定義頁(yè)面上唯一一個(gè)對(duì)象的樣式，具有唯一性。而CLASS選擇器可以在一個(gè)頁(yè)面內(nèi)引用多次，CLASS定義的樣式可以應(yīng)用于多種HTML標(biāo)簽。雖然在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，在一個(gè)網(wǎng)頁(yè)中多個(gè)對(duì)象引用同一個(gè)ID選擇器不會(huì)出錯(cuò)，但當(dāng)使用Javascript或Vbscript通過(guò)ID號(hào)來(lái)調(diào)用上述對(duì)象時(shí)將出現(xiàn)錯(cuò)誤。ID選擇器主要應(yīng)用于頁(yè)面布局的樣式定義，布局的對(duì)象在頁(yè)面只定義一次，例如，頁(yè)眉，主體或頁(yè)腳。CLASS選擇器主要應(yīng)用于頁(yè)面文字的排版。7.1.4CSS偽類(lèi)CSS偽類(lèi)是一種特殊的類(lèi)選擇器，其主要功能是指在不同狀態(tài)下定義不同的網(wǎng)頁(yè)效果。
偽類(lèi)定義樣式
偽類(lèi)的語(yǔ)法結(jié)構(gòu)是：
Selector:pseudo-class
{property:
value}
選擇器：偽類(lèi){屬性：屬性值}7.1.4CSS偽類(lèi)偽類(lèi)與類(lèi)不同，偽類(lèi)的名稱(chēng)在CSS中已經(jīng)定義，偽類(lèi)名稱(chēng)不能隨意創(chuàng)建，偽類(lèi)名稱(chēng)是對(duì)頁(yè)面對(duì)象狀態(tài)的描述，實(shí)質(zhì)上偽類(lèi)是選擇器在某個(gè)特殊狀態(tài)下的樣式定義。例如，超級(jí)鏈接有四種狀態(tài)，包括link，visited，active，hover，定義超級(jí)鏈接的偽類(lèi)如下：
a:link{color:#0000FF}/*未訪(fǎng)問(wèn)的鏈接*/
a:hover{color:#00FF00}/*鼠標(biāo)指向鏈接*/
a:active{color:#FFFF00}/*鼠標(biāo)激活鏈接*/
a:visited{color:#FF0000}/*已訪(fǎng)問(wèn)的鏈接*/7.1.4CSS偽類(lèi)上述代碼定義了超級(jí)鏈接的四個(gè)狀態(tài)樣式，當(dāng)鏈接未訪(fǎng)問(wèn)時(shí)顯示藍(lán)色，當(dāng)鼠標(biāo)指向鏈接時(shí)顯示綠色，當(dāng)鼠標(biāo)點(diǎn)擊激活鏈接時(shí)顯示黃色，當(dāng)鏈接訪(fǎng)問(wèn)之后顯示紅色。另外，層疊樣式表單的樣式是有層次和順序的，如果不能出現(xiàn)上述效果需要檢查定義順序，依次為a:link，a:visited，a:hover，a:actived，如果將visited放到最后將不會(huì)出現(xiàn)上述效果，因?yàn)関isited的優(yōu)先級(jí)高于hover，執(zhí)行后面visited將忽略前面的低優(yōu)先級(jí)的hover。7.1.4CSS偽類(lèi)偽類(lèi)和選擇符混用
CSS可以將偽類(lèi)和類(lèi)組合起來(lái)實(shí)現(xiàn)多個(gè)狀態(tài)樣式的定義，可以實(shí)現(xiàn)在同一頁(yè)面中制作不同的超級(jí)鏈接效果，類(lèi)選擇器和偽類(lèi)可以混合使用，格式如下：
selector.class:pseudo-class
{property:value}
選擇器﹒類(lèi)：偽類(lèi){屬性：屬性值}7.1.4CSS偽類(lèi)定義兩種偽類(lèi)，類(lèi)名分別為blue和blueline，樣式定義如下：
a.blue:link{color:#0000FF}/*未訪(fǎng)問(wèn)鏈接藍(lán)色有下劃線(xiàn)*/
a.blue:visited{color:#FF0000}/*已訪(fǎng)問(wèn)鏈接紅色有下劃線(xiàn)*/
a.blueline:link{color:#0000FF;text-decoration:none}/*未訪(fǎng)問(wèn)鏈接無(wú)下劃線(xiàn)*/
a.blueline:visited{color:#FF0000;text-decoration:none}/*已訪(fǎng)問(wèn)鏈接無(wú)下劃線(xiàn)*/
定義兩個(gè)鏈接，分別使用上述不同樣式定義，引用上述樣式的代碼段如下：
<aclass="blue"href="introduct.html">公司簡(jiǎn)介</a>
<aclass="blueline"href="product.html">產(chǎn)品簡(jiǎn)介</a>
7.1.5創(chuàng)建CSS文件一般網(wǎng)頁(yè)設(shè)計(jì)通常使用外部樣式表的方式，將樣式定義獨(dú)立放到CSS文件中，整個(gè)站點(diǎn)的頁(yè)面調(diào)用樣式表，實(shí)現(xiàn)整個(gè)站點(diǎn)統(tǒng)一樣式?？梢允褂肈reamweaver設(shè)計(jì)制作CSS樣式表，選擇菜單欄的【新建】→【新建文檔對(duì)話(huà)框】，類(lèi)別選擇【CSS樣式表】，創(chuàng)建所選樣式表。7.2CSS屬性CSS樣式屬性主要包括字體屬性、文本屬性、顏色背景屬性、邊框?qū)傩?、容器屬性、分?lèi)屬性和鼠標(biāo)屬性等。7.2.1CSS結(jié)構(gòu)模式CSS結(jié)構(gòu)具有明顯的層次特征，在一個(gè)CSS布局模塊內(nèi)，由外到內(nèi)可以分為頁(yè)邊距、邊框、間隙、頁(yè)面對(duì)象，其中間隙是頁(yè)面對(duì)象外邊界與邊框之間的距離，頁(yè)面對(duì)象是指網(wǎng)頁(yè)中文字、圖像、視頻等。圖7-2CSS結(jié)構(gòu)7.2.1CSS結(jié)構(gòu)模式CSS邊距屬性(margin)是指頁(yè)面對(duì)象外邊框與其它頁(yè)面元素外邊框之間的距離，即相鄰兩個(gè)頁(yè)面對(duì)象外邊框之間距離。用來(lái)設(shè)置一個(gè)元素所占空間的邊緣到相鄰元素之間的距離?？梢杂胏m,mm,in,pt,
pc為單位。CSS邊框?qū)傩?border)是指頁(yè)面對(duì)象外邊框線(xiàn)的寬度，一般以像素為單位。CSS間隙屬性(padding)是指頁(yè)面對(duì)象的外邊緣與邊框線(xiàn)之間的距離，一般單位為像素。
CSS背景屬性是指邊框線(xiàn)以?xún)?nèi)的背景顏色或圖像。7.2.2字體屬性CSS字體屬性和屬性功能見(jiàn)表7-1所示。
7.2.3文本屬性CSS文本屬性和屬性功能見(jiàn)表7-2所示。
表7-1字體屬性和功能屬性功能屬性值font-family字體名稱(chēng)“宋體”、"TimesNewRoman"等f(wàn)ont-size字體大小18pt、18px、80%等color字體顏色RGB值font-style字體樣式normal,italicfont-weight字體濃淡bold、lighter、normal或數(shù)值font-variant字體變量Normal、small-capsfont字體屬性包含字體顏色、大小、樣式等表7-2文本屬性和功能屬性功能屬性值text-align文本對(duì)齊Left、right、center、justify(兩端對(duì)齊)text-decoration文本修飾None、underline、overline、line-throughtext-indent文本縮進(jìn)可以用cm,mm,in,pt,
pc，em,ex,px百分比line-height行高可以用cm,mm,in,pt,
pc，em,ex,px百分比letter-spacing字符間距可以用cm,mm,in,pt,
pc，em,ex,px7.2.4背景屬性CSS背景屬性和屬性功能見(jiàn)表7-3所示。
表7-3背景屬性和功能屬性功能屬性值background-color背景顏色RGB值background-image背景圖像URLbackground-repeat背景重復(fù)repeat-x背景圖片橫向重復(fù)、repeat-y背景圖片豎向重復(fù)、no-repeat背景圖片不重復(fù)background-attachment背景依附與background-image屬性結(jié)合使用，決定圖片是隨內(nèi)容滾動(dòng)，還是固定不動(dòng)。background-position背景位置與background-image屬性結(jié)合使用，用于圖片定位。background背景包括：background-color,background-image,background-repeat,backgroundattachment,background-position。7.2.5邊距屬性CSS定義邊距屬性和屬性功能如表7-4所示。
表7-4邊距屬性和功能屬性功能屬性值margin-left左邊距可以用cm,mm,in,pt,
pc,px百分比margin-right右邊距可以用cm,mm,in,pt,
pc,px百分比margin-top上邊距可以用cm,mm,in,pt,
pc,px百分比margin-bottom下邊距可以用cm,mm,in,pt,
pc,px百分比margin邊距可以用cm,mm,in,pt,
pc,px百分比7.2.6邊框?qū)傩訡SS定義邊框?qū)傩院蛯傩怨δ苋绫?-5所示。
表7-5邊框?qū)傩院凸δ軐傩怨δ軐傩灾礲order-style邊框風(fēng)格None、dotted、dashed、solid、double、groove、ridge、inset、outsetborder-width邊框?qū)挾萴edium、thin、thick長(zhǎng)度單位cm,mm,in,pt,
pc，em,ex,
pxborder邊框包含：border-width,border-style和border-color7.3CSS定位CSS可以實(shí)現(xiàn)頁(yè)面對(duì)象的定位和浮動(dòng)，CSS對(duì)頁(yè)面對(duì)象的定位是指頁(yè)面元素相對(duì)于父元素、其它元素或?yàn)g覽器窗口的位置。CSS有三種基本的定位機(jī)制：普通文檔流、浮動(dòng)和絕對(duì)定位。普通文檔流機(jī)制是指頁(yè)面中元素的位置由元素在HTML代碼中的位置決定，即按照元素先后順序來(lái)排定位置，是CSS的默認(rèn)定位機(jī)制。7.3CSS定位一、普通文檔流
HTML頁(yè)面中包含多種對(duì)象，每個(gè)對(duì)象為一個(gè)獨(dú)立的塊，整個(gè)頁(yè)面由相對(duì)獨(dú)立的塊元素構(gòu)成。普通文檔流定位中，塊元素的位置由元素在HTML頁(yè)面中的位置決定。塊元素從上到下依次顯示，塊與塊之間用頁(yè)邊距margin定義。7.3CSS定位二、定位
相對(duì)定位relative
相對(duì)定位是在普通文檔流定位基礎(chǔ)上，以原來(lái)在文檔流中的位置為起點(diǎn)進(jìn)行定位。移動(dòng)后頁(yè)面元素所占區(qū)域包括文檔流定位區(qū)域和移動(dòng)后區(qū)域。例如，#remove{top:20px;left:20px;position:relative;}，此樣式定義的頁(yè)面元素左邊距為20像素，上邊距為20像素。7.3CSS定位絕對(duì)定位absolute
CSS具有明顯的層次結(jié)構(gòu)，絕對(duì)定位就是相對(duì)已經(jīng)定位的最近祖先元素進(jìn)行定位的方式，如果沒(méi)有祖先元素，絕對(duì)定位相對(duì)于頁(yè)面畫(huà)布或HTML頁(yè)面定位。絕對(duì)定位不受普通文檔流的限制，可以在頁(yè)面上四個(gè)方向上移動(dòng)，移動(dòng)過(guò)程中可能覆蓋其它底層頁(yè)面元素，可以通過(guò)改變Z-Iindex屬性來(lái)控制頁(yè)面塊元素的疊放次序。7.3CSS定位固定定位fixed
固定定位是指頁(yè)面的塊元素相對(duì)于瀏覽器窗口定位，其余的特點(diǎn)與絕對(duì)定位相似。7.3CSS定位默認(rèn)定位static
position的默認(rèn)值，一般不設(shè)置position屬性時(shí)，會(huì)按照正常的文檔流進(jìn)行定位。7.3CSS定位三、浮動(dòng)
浮動(dòng)元素的邊框可以實(shí)現(xiàn)左右移動(dòng)，當(dāng)元素的外邊框遇到其它元素外邊框時(shí)停止浮動(dòng)。浮動(dòng)元素的外邊框不受普通文檔流的約束。7.4Position屬性CSS使用position屬性實(shí)現(xiàn)定位，position的四個(gè)屬性值分別是：relative，absolute，fixed，static。7.4.1相對(duì)定位relative相對(duì)定位是相對(duì)于文檔流的位置進(jìn)行移位的定位方式。例如，定義inner_1的position屬性為relative時(shí)，產(chǎn)生的移位效果如圖7-3所示，inner_2的position屬性沒(méi)有定義，其位置不會(huì)因?yàn)閕nner_1的位置改變而改變，但其部分位置會(huì)被inner_1的對(duì)象覆蓋。圖7-3相對(duì)定位7.4.2絕對(duì)定位absolute絕對(duì)定位是指頁(yè)面對(duì)象相對(duì)于最近外層對(duì)象或父對(duì)象進(jìn)行定位。絕對(duì)定位根據(jù)外層對(duì)象定位分兩種情況：
當(dāng)inner_1的外層對(duì)象external設(shè)置了position屬性，并且position的屬性值為absolute或者relative時(shí)，此時(shí)inner_1相對(duì)于外層對(duì)象external進(jìn)行定位，即inner_1移動(dòng)的參照物是外層對(duì)象。如果external設(shè)定了margin，border，padding等屬性，inner_1將以external的padding開(kāi)始的位置作為定位起點(diǎn)，即padding的左上角作為定位起點(diǎn)。7.4.3固定定位fixed
可以將CSS固定定位看作是一種特殊的absolute定位，即fixed定位是以body作為定位參照物，即以瀏覽器的窗口為起始點(diǎn)進(jìn)行定位。程序【例7-5】實(shí)現(xiàn)CSS屬性position的固定定位，如圖7-5所示，是在Opera瀏覽器中測(cè)試的效果。7.5Float屬性CSS通過(guò)float屬性來(lái)定義頁(yè)面對(duì)象的浮動(dòng)效果，網(wǎng)頁(yè)中的浮動(dòng)對(duì)象與周?chē)淖窒鄬?duì)獨(dú)立，文字可以圍繞浮動(dòng)對(duì)象顯示。浮動(dòng)對(duì)象仍然是文檔流的一部分，與position屬性的相對(duì)定位類(lèi)似。float屬性主要屬性值包括：none表示對(duì)象不浮動(dòng)，left表示對(duì)象浮動(dòng)到左邊，right表示對(duì)象浮動(dòng)到右邊。7.5Float屬性用float屬性定義的頁(yè)面對(duì)象，浮動(dòng)范圍會(huì)隨著瀏覽器的大小和分辨率的變化而改變，而用position屬性定義的對(duì)象不會(huì)隨瀏覽器大小變化，因此，float屬性布局比position布局更為靈活一些，div布局主要使用float屬性實(shí)現(xiàn)。7.5Float屬性CSS中將頁(yè)面標(biāo)簽分為塊級(jí)元素和行級(jí)元素，塊級(jí)元素可以顯示在頁(yè)面的任何位置，以塊為單位，行級(jí)元素受行的約束，顯示在一行中，多個(gè)行級(jí)元素可以顯示在一行中。例如，常用標(biāo)簽<P>、<DIV>、<H1>屬于塊級(jí)標(biāo)簽，常用標(biāo)簽<A>、<BR>、<IMG>屬于行級(jí)標(biāo)簽。7.5Float屬性塊級(jí)元素總是從新的一行開(kāi)始，大小和邊距都可以調(diào)整，默認(rèn)寬度是占其父級(jí)對(duì)象的100%，也可以約束寬度。行級(jí)元素和塊級(jí)元素可以相互轉(zhuǎn)換，如果需要一個(gè)行級(jí)元素從新行開(kāi)始，可以將其轉(zhuǎn)換為塊級(jí)元素，即設(shè)置display=block；如果希望塊級(jí)元素與其它元素顯示在一行中，可以將其轉(zhuǎn)換為行級(jí)元素，即設(shè)置display=inline。7.5Float屬性CSS樣式表中float屬性可以對(duì)行級(jí)標(biāo)簽的位置屬性
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 拓展人脈圈課程設(shè)計(jì)
- 鋁產(chǎn)業(yè)的并購(gòu)與整合趨勢(shì)
- 旋轉(zhuǎn)舞臺(tái)設(shè)計(jì)課程設(shè)計(jì)
- 土地權(quán)屬界線(xiàn)劃分技術(shù)報(bào)告
- 青少年心理健康教育的有效策略與實(shí)踐路徑
- 浸潤(rùn)耕讀文化的策略及實(shí)施路徑
- 古法造紙實(shí)踐課程設(shè)計(jì)
- 幼兒游戲理論課程設(shè)計(jì)
- 電子商務(wù)平臺(tái)客戶(hù)服務(wù)質(zhì)量提升研究匯報(bào)
- 小腳丫FPGA課程設(shè)計(jì)
- 商務(wù)服務(wù)機(jī)器人技術(shù)現(xiàn)狀與未來(lái)發(fā)展趨勢(shì)研究
- 工業(yè)物聯(lián)網(wǎng)（IIoT）行業(yè)發(fā)展全景調(diào)研與投資趨勢(shì)預(yù)測(cè)研究報(bào)告
- 金融數(shù)據(jù)分析-以Python為工具 課件 一、金融數(shù)據(jù)分析概覽
- 佛山市、三水區(qū)2022-2023學(xué)年七年級(jí)上學(xué)期期末地理試題【帶答案】
- 2024屆湖北高三元月調(diào)考數(shù)學(xué)試卷含答案
- DL∕T 1476-2023電力安全工器具預(yù)防性試驗(yàn)規(guī)程
- 西方園林史智慧樹(shù)知到期末考試答案章節(jié)答案2024年內(nèi)蒙古農(nóng)業(yè)大學(xué)
- 學(xué)年上學(xué)期期末職業(yè)高中高二年級(jí)數(shù)學(xué)練習(xí)試卷2
- 工程部設(shè)計(jì)部崗位職責(zé)
- 華為MA5800配置及調(diào)試手冊(cè)
- 學(xué)校后備干部培養(yǎng)選拔實(shí)施方案
評(píng)論
0/150
提交評(píng)論