《網(wǎng)頁設(shè)計與制作（活頁式）》 課件 項(xiàng)目3 CSS樣式_第1頁
《網(wǎng)頁設(shè)計與制作（活頁式）》 課件 項(xiàng)目3 CSS樣式_第2頁
《網(wǎng)頁設(shè)計與制作（活頁式）》 課件 項(xiàng)目3 CSS樣式_第3頁
《網(wǎng)頁設(shè)計與制作（活頁式）》 課件 項(xiàng)目3 CSS樣式_第4頁
《網(wǎng)頁設(shè)計與制作（活頁式）》 課件 項(xiàng)目3 CSS樣式_第5頁
已閱讀5頁，還剩50頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

網(wǎng)頁設(shè)計與制作項(xiàng)目三

CSS樣式N

知識目標(biāo)掌握CSS樣式的使用方法掌握CSS語法掌握CSS選擇器的使用3.1.1初識CSS樣式任務(wù)3.1〓CSS基礎(chǔ)知識實(shí)例1使用CSS修飾段落CSS可以給網(wǎng)頁文字設(shè)置不同的字體樣式，即建立一個CSS規(guī)則。如果想改變整個網(wǎng)頁上所有出現(xiàn)的顏色、尺寸、字體，只需要修改一些CSS規(guī)則即可。CSS文件是純文本格式文件。3.1.2HTML和CSS的對比任務(wù)3.1〓CSS基礎(chǔ)知識HTML的缺點(diǎn)維護(hù)困難：修改某個特殊標(biāo)簽格式耗時較長，尤其對整個網(wǎng)站而言，后期修改和維護(hù)成本較高標(biāo)簽不足：HTML本身標(biāo)簽非常少，很多標(biāo)簽都是為網(wǎng)頁內(nèi)容服務(wù)的，而關(guān)于內(nèi)容樣式標(biāo)簽，如文字間距、段落縮進(jìn)，很難在HTML中找到。網(wǎng)頁體積大：由于沒有對各種風(fēng)格樣式進(jìn)行控制，HTML頁面往往體積過大，占用寬度。定位困難：在整體布局頁面時，HTML對各個模塊的位置調(diào)整缺乏靈活，過多的<table>標(biāo)簽將會導(dǎo)致頁面的復(fù)雜和后期維護(hù)的困難。3.1.2HTML和CSS的對比任務(wù)3.1〓CSS基礎(chǔ)知識CSS樣式的優(yōu)點(diǎn)豐富的樣式定義：CSS提供了豐富的文檔樣式外觀，可以設(shè)置文本和背景屬性；允許為任何元素創(chuàng)建邊框，設(shè)置元素邊框與其他元素間的距離；允許隨意改變文本的大寫和小寫方式、修飾方式等效果。易于使用和修改：CSS可以將樣式定義在HTML元素的style屬性中，也可以定義在header部分，還可以寫在一個專門的CSS文件中(即CSS樣式表)，將所有的樣式聲明統(tǒng)一存放，進(jìn)行統(tǒng)一管理。如果要修改樣式，只需在樣式列表中修改。多頁面應(yīng)用：CSS樣式表可以單獨(dú)存放在一個CSS文件中，這樣可以在多個頁面中使用同一個CSS樣式表。CSS樣式表不屬于任何頁面文件，在任何頁面文件中都可以引用，這樣可以實(shí)現(xiàn)多個頁面風(fēng)格的統(tǒng)一。層疊：對一個元素多次設(shè)置同一個樣式，最后一次設(shè)置的屬性值有效。在瀏覽器中看到的將是最后一次設(shè)置的樣式效果。頁面壓縮：

使用CSS可以減少頁面文件體積，加載頁面時可提升速度。3.1.3制作歡迎標(biāo)題任務(wù)3.1〓CSS基礎(chǔ)知識實(shí)例2制作歡迎標(biāo)題3.1.4CSS語法和樣式表分類任務(wù)3.1〓CSS基礎(chǔ)知識1.CSS語法格式CSS語法格式由若干樣式規(guī)則組成，這些樣式規(guī)則可以應(yīng)用到不同的元素或文檔中來定義它們顯示的外觀。每一條樣式規(guī)則都由選擇器（selector）、屬性（property）和屬性值（value）三部分組成。selector有多種形式，既可以是文檔中的HTML標(biāo)簽，如<body><table><p>標(biāo)簽等，也可以是XML文檔中的標(biāo)簽。property是選擇器制定的標(biāo)簽所包含的屬性。value是選擇器的多個屬性，屬性和屬性值為一組，組與組之間需要用分號隔開。

CSS語法格式為：selector{propertyl：valuel；property2：value2；}3.1.4CSS語法和樣式表分類任務(wù)3.1〓CSS基礎(chǔ)知識2.CSS樣式規(guī)則下面給出一條樣式規(guī)則，如p{color：red}。該樣式規(guī)則的選擇器為p，為段落標(biāo)簽<p>提供樣式，color為段落文字的顏色屬性，red為屬性值。此樣式表示標(biāo)簽<p>指定的段落文字為紅色。如果要為段落設(shè)置多種樣式，則可以使用下列語句：p{font-family："隸書"；color：red；font-size：40px；font-weight：bold}3.1.4CSS語法和樣式表分類任務(wù)3.1〓CSS基礎(chǔ)知識3.樣式表分類行內(nèi)樣式表當(dāng)需要對某個特定標(biāo)簽進(jìn)行單獨(dú)設(shè)置時使用行內(nèi)樣式表，應(yīng)用到各個頁面。在所修飾的標(biāo)簽內(nèi)加<style>屬性，如果后續(xù)為多條樣式規(guī)則，多條樣式規(guī)則用分號分開。內(nèi)部樣式表內(nèi)部樣式表與網(wǎng)頁內(nèi)容位于同一個文件中，在<head>標(biāo)簽中的<style>標(biāo)簽中。這種方式便于在同一頁面中修改樣式，但是不能徹底實(shí)現(xiàn)頁面內(nèi)容與樣式的分離，不利于在多頁面間共享復(fù)用代碼。外部樣式表外部樣式表是指CSS代碼單獨(dú)寫在一個或多個CSS文件中，需要時在<head>中通過<link/>標(biāo)簽引用，加載頁面時沒有加載樣式表，需要用到樣式表時才去尋找相應(yīng)的樣式。任務(wù)1.3〓網(wǎng)頁制作工具任務(wù)3.2〓CSS樣式代碼3.2.1CSS常用選擇器1.標(biāo)簽選擇器標(biāo)簽選擇器使用簡單、明確且通用性強(qiáng)，但針對性較差。（1）格式TagName{property：value}其中，TagName表示標(biāo)簽名稱，如<p><h1>等標(biāo)簽；property表示CSS屬性；value表示CSS屬性值。（2）用途通過一個具體標(biāo)簽來命名，可以對文檔中每一個出現(xiàn)該標(biāo)簽的地方應(yīng)用樣式定義。這種做法通常用于設(shè)置整個網(wǎng)站中都會出現(xiàn)的基本樣式。任務(wù)1.3〓網(wǎng)頁制作工具任務(wù)3.2〓CSS樣式代碼3.2.1CSS常用選擇器1.標(biāo)簽選擇器實(shí)例3使用標(biāo)簽選擇器給段落設(shè)置樣式任務(wù)1.3〓網(wǎng)頁制作工具任務(wù)3.2〓CSS樣式代碼3.2.1CSS常用選擇器2.類選擇器通過類選擇器設(shè)置樣式，可以將同一種樣式定義為一個類，在CSS中，類選擇器使用符號“.”開頭。類選擇器有別于ID選擇器，屬性值可以重復(fù)在多個元素中使用。（1）格式

.classValue{property：value}其中，classValue是選擇器的名稱，具體名稱由CSS制定者命名。如果一個標(biāo)簽具有class屬性且class屬性值為classValue，那么該標(biāo)簽的呈現(xiàn)樣式由該選擇器指定。在定義類選擇器時，需要在classValue前面加一個句點(diǎn)“.”表示標(biāo)簽名稱，如<p><h1>等HTML標(biāo)簽；property表示CSS屬性；value表示CSS屬性值。（2）用途

一般情況下，其使用功能及效果的簡要縮寫語法格式為：.rd{color：red}.se{font-size：3px}任務(wù)1.3〓網(wǎng)頁制作工具任務(wù)3.2〓CSS樣式代碼3.2.1

CSS

常用選擇器實(shí)例4使用類選擇器設(shè)置樣式標(biāo)題以紅色字體顯示，大小為22px；段落1以藍(lán)色字體顯示，大小為20px；段落2以紅色字體顯示，大小為22px。任務(wù)1.3〓網(wǎng)頁制作工具任務(wù)3.2〓CSS樣式代碼3.2.1

CSS

常用選擇器3.ID選擇器ID選擇器與類選擇器類似，都是針對特定屬性的屬性值匹配。ID選擇器是使用HTML標(biāo)簽的ID屬性值作為選擇器名，并以“#”開頭進(jìn)行標(biāo)識。ID屬性類似于身份證，是HTML元素的唯一標(biāo)識，頁面內(nèi)不能有重復(fù)的ID標(biāo)識屬性。對應(yīng)的ID選擇器一般用于修飾對應(yīng)ID標(biāo)識的HTML標(biāo)簽內(nèi)容，實(shí)際應(yīng)用中常和<div>標(biāo)簽配合使用，表示修飾對應(yīng)ID標(biāo)識的某個<div>區(qū)塊。（1）格式

#idValue{property：value}其中，c#idValue是選擇器的名稱，可以由CSS定義者自己命名。如果某標(biāo)簽具有ID屬性，并且該屬性值為idValue，那么該標(biāo)簽的呈現(xiàn)樣式可以由該ID選擇器制定。正常情況下，ID屬性值在文檔中具有唯一性。（2）用途

在頁面中具有ID屬性的標(biāo)簽才能夠使用ID選擇器定義樣式，所以與類選擇器相比，使用ID選擇器具有一定的局限性。類選擇器與ID選擇器的主要區(qū)別有：類選擇器可以給任意數(shù)量的標(biāo)簽定義樣式，而ID選擇器在頁面的標(biāo)簽中只能使用一次；ID選擇器比類選擇器具有更高的優(yōu)先級，即當(dāng)ID選擇器與類選擇器發(fā)生沖突時，優(yōu)先使用ID選擇器。任務(wù)1.3〓網(wǎng)頁制作工具任務(wù)3.2〓CSS樣式代碼3.2.1

CSS

常用選擇器實(shí)例5使用ID選擇器設(shè)置樣式標(biāo)題以紅色字體顯示，段落1以紅色字體顯示，段落2以藍(lán)色字體顯示。任務(wù)1.3〓網(wǎng)頁制作工具任務(wù)3.2〓CSS樣式代碼3.2.2CSS選擇器聲明1.集體聲明在一個頁面中，有時不同種類的標(biāo)簽樣式要保持一致。例如，<p>標(biāo)簽和<h1>標(biāo)簽要保持一致，此時可以共同使用類選擇器，還可以使用集體聲明。集體聲明就是在聲明各種CSS選擇器時，風(fēng)格相同的CSS選擇器同時聲明。任務(wù)1.3〓網(wǎng)頁制作工具任務(wù)3.2〓CSS樣式代碼3.2.2CSS選擇器聲明實(shí)例6集體聲明樣式任務(wù)1.3〓網(wǎng)頁制作工具任務(wù)3.2〓CSS樣式代碼3.2.2CSS選擇器聲明2.多重嵌套聲明在CSS控制HTML標(biāo)簽樣式時，可以使用多重嵌套聲明，對指定位置的HTML標(biāo)簽進(jìn)行修飾，表示嵌套的選擇器間用空格隔開。例如，當(dāng)<p>與</p>之間包含<a>和</a>標(biāo)簽時，可以使用多重嵌套聲明。

任務(wù)1.3〓網(wǎng)頁制作工具任務(wù)3.2〓CSS樣式代碼3.2.2

CSS

選擇器聲明實(shí)例7多重嵌套聲明樣式超鏈接顯示為紅色字體，大小為30px，其原因是使用了多重嵌套聲明。當(dāng)<p>與</p>之間包含<a>和</a>標(biāo)簽時，就可以使用嵌套標(biāo)簽進(jìn)行聲明，表示<p>標(biāo)簽下面的<a>標(biāo)簽的CSS屬性樣式。同樣的道理，不僅可以嵌套標(biāo)簽本身，類選擇器和ID選擇器都可以進(jìn)行嵌套。任務(wù)1.3〓網(wǎng)頁制作工具任務(wù)3.2〓CSS樣式代碼3.2.3CSS屬性單位1.CSS顏色單位命名顏色CSS中可以直接用英文單詞命名與之相對應(yīng)的顏色，這種方法的優(yōu)點(diǎn)是簡單、直接、容易掌握。此處預(yù)設(shè)了16種顏色及其衍生色，這16種顏色是CSS規(guī)范推薦的，主流的瀏覽器能夠識別它們。任務(wù)1.3〓網(wǎng)頁制作工具任務(wù)3.2〓CSS樣式代碼3.2.3

CSS

屬性單位1.CSS顏色單位RGB顏色如果要使用十進(jìn)制表示顏色，則需要使用RGB顏色。用十進(jìn)制表示顏色，最大值為255，最小值為0。要使用RGB顏色，必須使用rgb（R，G，B），其中R、G、B分別表示紅、綠、藍(lán)的十進(jìn)制值，通過這3個值的組合便可以形成不同的顏色，例如，rgb（255，0，0）表示紅色，rgb（0，255，0）表示綠色，rgb（0，0，0）表示黑色，rgb（255，255，255）表示白色。RGB設(shè)置方法一般分為兩種：百分比設(shè)置和直接用數(shù)值設(shè)置。例如，為<p>標(biāo)簽設(shè)置顏色，兩種語法格式為：p{color：rgb(123，0，25)}p{color：rgb(45%，0%，25%)}任務(wù)1.3〓網(wǎng)頁制作工具任務(wù)3.2〓CSS樣式代碼3.2.3CSS屬性單位1.CSS顏色單位十六進(jìn)制顏色十六進(jìn)制顏色是常用的定義方式，是由0~9和A~F組成的。十六進(jìn)制顏色的基本語法格式為：

#RRGGBB其中，R表示紅色，G表示綠色，B表示藍(lán)色。而RR、GG、BB最大值為FF，表示十進(jìn)制中的255；最小值為00，表示十進(jìn)制中的0，例如，#FF0000表示紅色，#00FF00表示綠色，#0000FF表示藍(lán)色，#000000表示黑色，#FFFFFF表示白色。其他顏色是通過紅、綠、藍(lán)三種基本顏色組合而成的。任務(wù)1.3〓網(wǎng)頁制作工具任務(wù)3.2〓CSS樣式代碼3.2.3CSS屬性單位2.CSS長度單位絕對單位用于設(shè)定絕對位置，主要有英寸(in)、厘米(cm)、毫米(mm)、磅(pt)和pica(pc)。其中，英寸是國外常用的度量單位；厘米用于設(shè)定距離比較大的頁面元素框；毫米用于設(shè)定比較精確的元素距離和大??；磅一般用于設(shè)定文字的大小。任務(wù)1.3〓網(wǎng)頁制作工具任務(wù)3.2〓CSS樣式代碼3.2.3CSS屬性單位2.CSS長度單位相對單位指在度量時需要參照其他頁面元素的單位值。使用相對單位所度量的實(shí)際距離可能會隨著這些單位值的改變而改變。CSS提供了三種相對單位：em、ex和px。其中px也叫像素，是目前廣泛使用的一種單位。任務(wù)1.3〓網(wǎng)頁制作工具任務(wù)3.2〓CSS樣式代碼3.2.3CSS屬性單位步驟一實(shí)例8制作詩詞欣賞頁面2.CSS長度單位任務(wù)1.3〓網(wǎng)頁制作工具任務(wù)3.2〓CSS樣式代碼3.2.3CSS屬性單位2.CSS長度單位實(shí)例8制作詩詞欣賞頁面步驟二任務(wù)1.3〓網(wǎng)頁制作工具任務(wù)3.2〓CSS樣式代碼3.2.3CSS屬性單位2.CSS長度單位實(shí)例8制作詩詞欣賞頁面步驟三3.3.1設(shè)置字體屬性1.字體任務(wù)3.3〓使用CSS樣式美化文本font-family屬性用于制定文字字體類型，如宋體、黑體、隸書等，即在網(wǎng)頁中展示不同的字體。格式{font-family：name}{font-family：cursive|fantasy|monospace|serif|sans-serif}從語法格式上可以看出，font-family有兩種聲明方式。第一種方式是使用name字體名稱，按優(yōu)先順序排列，以逗號隔開，如果字體名稱包含空格，則應(yīng)使用引號括起，這種聲明方式比較常用；第二種方式是使用所列出的字體序列名稱，如果使用fantasy序列，則將提供默認(rèn)字體序列。font-family屬性值可以是一組值，即一次定義多個字體，當(dāng)瀏覽器讀取字體時，會按照字體排列的先后順序來決定使用哪種字體。若瀏覽器在計算機(jī)上找不到第一種字體，則自動讀取第二種字體；若第二種字體也找不到，則自動讀取第三種字體，依此類推。當(dāng)定義的所有字體都找不到時，會選用計算機(jī)系統(tǒng)的默認(rèn)字體。3.3.1設(shè)置字體屬性1.字體任務(wù)3.3〓使用CSS樣式美化文本實(shí)例9字體設(shè)置3.3.1設(shè)置字體屬性1.字體任務(wù)3.3〓使用CSS樣式美化文本說明在字體顯示時，如果指定了一種特殊字體類型，而在瀏覽器或者操作系統(tǒng)中該類型不能正確獲取，則可以通過font-family屬性預(yù)設(shè)多種字體類型。font-family屬性預(yù)設(shè)字體類型時，每種字體之間使用逗號隔開。當(dāng)前面的字體類型不能正確顯示時，系統(tǒng)將自動選擇后一種字體類型，依此類推。常用的字體樣式3.3.1設(shè)置字體屬性2.字體大小任務(wù)3.3〓使用CSS樣式美化文本格式{font-size：數(shù)值|inherit|xx-small|x-small|small|medium|large|...}從語法格式上可以看出，font-size可以通過數(shù)值來定義字體大小，如font-size：10px表示定義的字體大小為10px，還可以通過medium等參數(shù)定義字體的大小。對于font-size的屬性值，當(dāng)使用絕對值時要注意加上單位，當(dāng)沒有單位時瀏覽器會默認(rèn)以px為單位。這里的取值除使用px以外，還可以使用in(英寸)、cm(厘米)、mm(毫米)、pt(點(diǎn))、pc(皮卡)。另外，字號大小的取值還有一些關(guān)鍵字，分別為xx-small(極小)、x-small(較小)、small(小)、medium(標(biāo)準(zhǔn)大小)、large(大)、x-large(較大)、xx-large(極大)。3.3.1設(shè)置字體屬性2.字體大小任務(wù)3.3〓使用CSS樣式美化文本實(shí)例10字體大小屬性設(shè)置網(wǎng)頁中文字被設(shè)置成不同的大小，其設(shè)置采用了絕對值、關(guān)鍵字和百分比等形式。font-size字體大小為200%時，其比較對象是上一級標(biāo)簽中的10pt。同樣，還可以使用inherit值，直接繼承上一級標(biāo)簽的字體大小。3.3.1設(shè)置字體屬性3.字體風(fēng)格任務(wù)3.3〓使用CSS樣式美化文本CSS通常使用font-style定義字體風(fēng)格，即字體的顯示樣式，如斜體，其語法格式為：

{font-style：normal|italic|oblique|inherit}font-style的屬性值及含義3.3.1設(shè)置字體屬性3.字體風(fēng)格任務(wù)3.3〓使用CSS樣式美化文本實(shí)例11字體風(fēng)格的設(shè)置3.3.1設(shè)置字體屬性4.字體加粗任務(wù)3.3〓使用CSS樣式美化文本通過設(shè)置字體粗細(xì)，可以使文字顯示不同的外觀。CSS中通常使用font-weight定義字體的粗細(xì)程度，其語法格式為：

{font-weight：100-900|bold|bolder|lighter|normal；}font-weight屬性有五個有效值，分別是100~900、bold、bolder、lighter、normal。如果沒有設(shè)置該屬性，則使用默認(rèn)值normal。屬性值設(shè)置為100~900，值越大，加粗的程度就越高。font-weight的主要屬性值及含義3.3.1設(shè)置字體屬性4.字體加粗任務(wù)3.3〓使用CSS樣式美化文本實(shí)例12font-weight屬性設(shè)置3.3.1設(shè)置字體屬性4.字體加粗任務(wù)3.3〓使用CSS樣式美化文本實(shí)例13制作文件通知頁面3.3.1設(shè)置字體屬性4.字體加粗任務(wù)3.3〓使用CSS樣式美化文本實(shí)例13制作文件通知頁面3.3.2設(shè)置段落屬性1.字符間隔任務(wù)3.3〓使用CSS樣式美化文本字符文本之間可以通過letter-spacing進(jìn)行設(shè)置。在一個網(wǎng)頁中，會涉及多個字符文本，設(shè)置文本之間的各字符間隔一致，進(jìn)而保持頁面的整體性，是網(wǎng)頁設(shè)計者必須要考慮的。letter-spacing的語法如下：

letter-spacing：normal|lengthletter-spacing的屬性值及含義3.3.2設(shè)置段落屬性1.字符間隔任務(wù)3.3〓使用CSS樣式美化文本實(shí)例14字符間距設(shè)置通過letter-spacing屬性可定義多個字符間隔。特別注意，當(dāng)設(shè)置的字間距是-5px時，所有文字會壓縮、重疊到一起，無法完整顯示。3.3.2設(shè)置段落屬性2.水平對齊任務(wù)3.3〓使用CSS樣式美化文本一般情況下，居中對齊適用于標(biāo)題類文本，其他對齊方式可以根據(jù)頁面布局來選擇使用。根據(jù)需要，可以設(shè)置多種對齊方式，如水平方向的居中、左對齊、右對齊和兩端對齊等。在CSS中，可以通過text-align屬性進(jìn)行設(shè)置，語法格式為：

text-align：start|end|left|right|center|justify|match-parent|inherittext-align的屬性值及含義3.3.2設(shè)置段落屬性2.水平對齊任務(wù)3.3〓使用CSS樣式美化文本實(shí)例15設(shè)置文本對齊方式text-align屬性只能用于文本塊，不能直接應(yīng)用到圖像標(biāo)簽<img/>。如果要使圖像同文本一樣應(yīng)用對齊方式，那么必須將圖像包含在文本塊中。CSS只能定義兩端對齊方式，并按要求顯示。對于具體的兩端對齊文本如何分配字體空間以實(shí)現(xiàn)文本左右兩端均對齊，CSS并沒有規(guī)定。3.3.2設(shè)置段落屬性3.文本縮進(jìn)任務(wù)3.3〓使用CSS樣式美化文本在普通段落中，通常首行縮進(jìn)兩個字符，用來表示這是一個段落的開始。同樣在網(wǎng)頁的文本編輯中可以通過制定屬性，來控制文本縮進(jìn)。CSS中的text-indent屬性用于設(shè)定文本塊首行縮進(jìn)，語法格式為：

text-indent：length其中，length屬性值表示由百分比數(shù)字或由浮點(diǎn)數(shù)和單位標(biāo)識符組成的長度，允許為負(fù)值。3.3.2設(shè)置段落屬性3.文本縮進(jìn)任務(wù)3.3〓使用CSS樣式美化文本實(shí)例16設(shè)置文本縮進(jìn)text-indent屬性可以定義為兩種縮進(jìn)方式，一種是直接定義縮進(jìn)的長度，另一種是定義縮進(jìn)百分比。如果上級標(biāo)簽定義了text-indent屬性，那么子標(biāo)簽可以繼承其上級標(biāo)簽的縮進(jìn)長度。使用該屬性，HTML5任何標(biāo)簽都能以給定的長度或百分比縮進(jìn)。3.3.2設(shè)置段落屬性4.文本行高任務(wù)3.3〓使用CSS樣式美化文本CSS中通常使用line-height設(shè)置行間距，即行高，語法格式為：line-height：normal|lengthline-height的屬性值及含義3.3.2設(shè)置段落屬性4.文本行高任務(wù)3.3〓使用CSS樣式美化文本實(shí)例17設(shè)置文本行高3.4.1設(shè)置圖片樣式在網(wǎng)頁中放置一張圖片，可以使用<img/>標(biāo)簽。當(dāng)圖片顯示之后，其邊框是否顯示，可以通過<img/>標(biāo)簽中的border屬性來設(shè)定。通過HTML標(biāo)簽設(shè)置圖片邊框，其邊框顯示都是黑色，并且風(fēng)格比較單一，唯一能夠設(shè)定的就是邊框的粗細(xì)，而無法對邊框樣式進(jìn)行設(shè)定。這時可以采用CSS對邊框樣式進(jìn)行美化，語法格式為：

<imgsrc=“圖片位置”border=“值”/>任務(wù)3.4〓使用CSS樣式美化頁面3.4.1設(shè)置圖片樣式任務(wù)3.4〓使用CSS樣式美化頁面實(shí)例18圖像邊框設(shè)置3.4.2設(shè)置背景與邊框任務(wù)3.4〓使用CSS樣式美化頁面1.背景相關(guān)屬性背景顏色background-color屬性用于設(shè)定網(wǎng)頁背景色，它接受任何有效的顏色值，而對于沒有設(shè)定背景色的標(biāo)簽，默認(rèn)背景色為透明，語法格式為：

{background-color：transparent|color}3.4.2設(shè)置背景與邊框任務(wù)3.4〓使用CSS樣式美化頁面1.背景相關(guān)屬性背景圖片網(wǎng)頁背景既可以使用背景色來填充，也可以使用背景圖片來填充。通過CSS屬性可以對背景圖片進(jìn)行精確定位。background-image屬性用于設(shè)定標(biāo)簽的背景圖片。通常情況

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論