第9課創(chuàng)建層疊樣式css(1+)_第1頁
第9課創(chuàng)建層疊樣式css(1+)_第2頁
第9課創(chuàng)建層疊樣式css(1+)_第3頁
第9課創(chuàng)建層疊樣式css(1+)_第4頁
第9課創(chuàng)建層疊樣式css(1+)_第5頁
已閱讀5頁，還剩35頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第9課創(chuàng)建層疊樣式問題導(dǎo)入:如何使文本有合適的行間距?CSS（CascadingStyleSheets）樣式用來一次對(duì)若干個(gè)文檔所有的樣式進(jìn)行控制。同時(shí)鏈接多個(gè)文檔

CSS樣式有所更新之后，所有應(yīng)用了該樣式表的文檔都會(huì)被自動(dòng)更新。創(chuàng)建CSS樣式方法在“CSS樣式”面板（“窗口”>“CSS樣式”）中，單擊面板右下角區(qū)域中的“新建CSS樣式”按鈕(+)。方法2.“文本”>“CSS樣式”>“新建CSS樣式”。

類(可用于任何標(biāo)簽)：建一個(gè)可以應(yīng)用于任何標(biāo)簽的樣式。注意：類名稱必須以句點(diǎn)開頭，可以包含任何字母和數(shù)字組合（例如，.myhead1）。如果您沒有輸入開頭的句點(diǎn)，Dreamweaver將自動(dòng)為您輸入。

示例創(chuàng)建自定義樣式：.mystyle僅對(duì)該文檔設(shè)置顏色等選擇文字,右鍵選擇樣式標(biāo)簽(重定義特定標(biāo)簽的外觀)：對(duì)指定的HTML標(biāo)簽的設(shè)置樣式圖象標(biāo)簽:img

（設(shè)置圖片邊框5，css設(shè)置邊框顏色，編輯看效果）列表標(biāo)簽:li

（加下劃線修飾，和指定列表類型看效果）<body>標(biāo)簽是網(wǎng)頁的主體應(yīng)用于body類型12像素效果：不會(huì)隨瀏覽器字體大小設(shè)置改變高級(jí)(ID、上下文選擇器)：對(duì)特定的標(biāo)簽組合，或者包含有指定屬性的所有標(biāo)簽進(jìn)行格式定義。包括說明：<a>是指有鏈接的文字

a:link：表示已經(jīng)鏈接；

a:hover：表示鼠標(biāo)移上鏈接時(shí)；

a:active：表示鏈接激活時(shí)；

a:visited：表示己點(diǎn)擊過的鏈接。和頁面屬性的功能完全一樣。新建樣式表文件：將此樣式保存成一個(gè)文件，可供其他文件調(diào)用僅對(duì)該文檔：只能將此樣式應(yīng)用于本文件效果：樣式變則都變化。新建網(wǎng)頁test1.htm新建css文件yanse.css保存樣式.yanse運(yùn)用到文本中3.新建網(wǎng)頁test2.htm選中文本附加樣式文件yanse.css4.編輯樣式看結(jié)果.類型設(shè)置變量可以將小寫字母轉(zhuǎn)換成大寫字母行高：這項(xiàng)設(shè)置在網(wǎng)頁制作種很常用?！罢！?，讓計(jì)算機(jī)自動(dòng)調(diào)整行高注意：?jiǎn)挝粦?yīng)該和文字的單位一致，行高的數(shù)值是包括字號(hào)數(shù)值在內(nèi)的。例如，文字設(shè)置為12pt，一倍行距，則行高應(yīng)該為24pt。

百分比的值相對(duì)于字體的大小而定.像素（px）

相對(duì)與屏幕的分辨率,相對(duì)長(zhǎng)度單位點(diǎn)數(shù)（pt）

1點(diǎn)=1/72英寸絕對(duì)長(zhǎng)度單位帕(pc)=12點(diǎn)英寸（in）、厘米（cm）和毫米（mm）

根據(jù)顯示的實(shí)際尺寸來確定長(zhǎng)度。字體高（em）

表示當(dāng)前文本的尺寸。字體x的高（ex）

表示當(dāng)前字母“x”的高度；%

是以當(dāng)前文本的百分比定義尺寸。修飾向文本中添加下劃線、上劃線或刪除線，或使文本閃爍。鏈接的默認(rèn)設(shè)置是“下劃線”。將鏈接設(shè)置設(shè)為無時(shí)，可以通過定義一個(gè)特殊的類刪除鏈接中的下劃線。粗細(xì)對(duì)字體應(yīng)用特定或相對(duì)的粗體量?！罢！钡扔?00；“粗體”等于700。大小寫將每個(gè)單詞的首字母大寫或?qū)⑽谋驹O(shè)置為全部大寫或小寫。顏色設(shè)置文本顏色。示例輸入二行字母附加樣式,看變化..leixing背景設(shè)置背景圖像是否重復(fù)及重復(fù)方式。背景圖像固定或隨內(nèi)容一起滾動(dòng)背景圖像相對(duì)于應(yīng)用樣式的元素的垂直位置背景圖像相對(duì)于應(yīng)用樣式的元素的水平位置。.beijing應(yīng)用于body標(biāo)簽附件設(shè)置為固定/滾動(dòng)

區(qū)塊設(shè)置設(shè)置單詞與單詞之間的距離。設(shè)置各個(gè)字母之間的距離。指定元素相對(duì)于其父級(jí)元素在垂直方向上的對(duì)齊方式。指定文本在應(yīng)用該樣式元素中的對(duì)齊方式。設(shè)置第一行的縮進(jìn)距離。設(shè)置處理空格的方式。選擇區(qū)塊中要顯示的格式。單詞間距設(shè)置單詞的間距。設(shè)置特定的值，選擇“值”，然后輸入數(shù)值。在第二個(gè)菜單中，選擇度量單位。字母間距增加或減小字母或字符的間距。減少字符間距，指定一個(gè)負(fù)值（例如-4）示例：Idon’tknow(通過瀏覽器看結(jié)果)Idon’tknow。垂直對(duì)齊方式指定應(yīng)用它的元素的垂直對(duì)齊方式對(duì)圖片應(yīng)用則和文本的垂直對(duì)齊可變文本對(duì)齊設(shè)置元素中的文本對(duì)齊方式。文本縮進(jìn)指定第一行文本縮進(jìn)的程度。實(shí)現(xiàn)中文文字的首行縮進(jìn)。首先填入具體的數(shù)值，然后選擇單位。文字的縮進(jìn)和字號(hào)要保持統(tǒng)一。如字號(hào)為12px，像創(chuàng)建兩個(gè)中文字的縮進(jìn)效果，文字縮進(jìn)就應(yīng)該為18px。

空格確定如何處理元素中的空白?！罢！笔湛s空白；“保留”保留所有空白，包括由空格鍵、Tab鍵、Enter鍵創(chuàng)建的空格；“不換行”指定僅當(dāng)遇到br標(biāo)簽時(shí)文本才換行。顯示制定是否以及如何顯示元素。選擇“無”則關(guān)閉元素的顯示。在實(shí)際控制中很少使用。方框設(shè)置設(shè)置方框本身的寬度和高度。設(shè)置層不允許在應(yīng)用樣式元素的某個(gè)側(cè)邊設(shè)置應(yīng)用樣式元素的內(nèi)容和元素的邊框之間的空白大小。設(shè)置應(yīng)用樣式的元素邊界和其他元素之間的空白大小。實(shí)際就是文字等對(duì)象的環(huán)繞效果寬和高設(shè)置對(duì)象的寬度和高度。浮動(dòng)：文字等對(duì)象的環(huán)繞效果。選擇“右對(duì)齊”、對(duì)象居右。文字等內(nèi)容從另外一側(cè)環(huán)繞對(duì)象。選擇“左對(duì)齊”。對(duì)象居左，文字等內(nèi)容從另一側(cè)環(huán)繞?！盁o”取消環(huán)繞效果。清除：清除設(shè)置的浮動(dòng)效果．

填充指定內(nèi)容與邊框之間的間距（如果沒有邊框，則為邊距)。邊界指定邊框與另一個(gè)元素之間的間距。邊框設(shè)置設(shè)置元素邊框的粗細(xì)。設(shè)置邊框的樣式外觀。取消“全部相同”復(fù)選框的選取可以分別進(jìn)行設(shè)置。設(shè)置元素邊框的顏色?！斑吙颉笨梢远x元素(圖片等)周圍的邊框的設(shè)置（如寬度、顏色和樣式）。示例分析:.biankuang給圖片加邊框后設(shè)定樣式,寬度和顏色指定其填充(與邊框之間的間距)指定其邊界值(指定邊框與另一個(gè)元素之間的間距)列表設(shè)置建.mystyle對(duì)列表施加樣式。設(shè)置瀏覽器如何定位層。設(shè)置層的堆疊順序，值較高的層顯示在值較低的層的上面。設(shè)置當(dāng)層的內(nèi)容超出層的大小時(shí)其內(nèi)容的放置位置。定義層的可見部分。指定層的寬度和高度。指定層在頁面中的位置。設(shè)置層的初始顯示條件。定位設(shè)置（已經(jīng)屬性面板化）“定位”項(xiàng):是對(duì)層的設(shè)置，但是因?yàn)镈W提供了可視化的層制作功能，所以此項(xiàng)設(shè)置在實(shí)際操作中幾乎不會(huì)使用。

類型確定瀏覽器應(yīng)如何來定位層絕對(duì)使用“定位”框中輸入的坐標(biāo)（相對(duì)于頁面左上角）來放置層。相對(duì)使用“定位”框中輸入的坐標(biāo)（相對(duì)于對(duì)象在文檔的文本中的位置）來放置層。靜態(tài)將層放在它在文本中的位置。顯示確定層的初始顯示條件。默認(rèn)情況下大多數(shù)瀏覽器都繼承父級(jí)的值繼承繼承層父級(jí)的可見性屬性。如果層沒有父級(jí)，則它將是可見的。可見顯示該層的內(nèi)容。隱藏隱藏這些層的內(nèi)容。Z軸確定層的堆疊順序。 編號(hào)較高的層顯示在編號(hào)較低的層的上面。溢出確定在層的內(nèi)容超出它的大小時(shí)將發(fā)生的情況。可見增加層的大小，使它的所有內(nèi)容均可見。層向右下方擴(kuò)展。隱藏保持層的大小并剪輯任何超出的內(nèi)容。不提供任何滾動(dòng)條。滾動(dòng)在層中添加滾動(dòng)條，不論內(nèi)容是否超出層的大小。自動(dòng)使?jié)L動(dòng)條僅在層的內(nèi)容超出它的邊界時(shí)才出現(xiàn)。定位指定層的位置。剪輯定義層的可見部分。擴(kuò)展設(shè)置設(shè)置在打印頁面時(shí)強(qiáng)制分頁的位置。在“之前”和“之后”下拉列表框中，可以分別設(shè)置分頁前和分頁后的位置?？蛇x擇當(dāng)鼠標(biāo)光標(biāo)位于樣式所控制對(duì)象上時(shí)光標(biāo)的形狀?？梢赃x擇樣式所控制對(duì)象的特殊效果，也就是層疊樣式濾鏡效果。分頁通過樣式來為網(wǎng)頁添加分頁符號(hào)。允許用戶指定在某元素前或后進(jìn)行分頁。分頁的概念是打印網(wǎng)頁的內(nèi)容時(shí)在某指定的位置停止，然后將接下來的內(nèi)容繼續(xù)打印在下一頁紙上。

光標(biāo)改變鼠標(biāo)形狀，鼠標(biāo)放置于被此項(xiàng)設(shè)置修飾的區(qū)域上的時(shí)，形狀會(huì)發(fā)生改變。Hand（手）、crosshair（交叉十字）、text（文本選擇符號(hào)）、wait（Windows的沙漏形狀）、default（默認(rèn)的鼠標(biāo)形狀）、help（帶問號(hào)的鼠標(biāo)）、e-resize（向東的箭頭）、ne-resize（指向東北方的箭頭）、n-resize（向北的箭頭）、nw-resize（指向西北的箭頭）、w-resize（向西的箭頭）、sw-resize（向西南的箭頭）、s-resize（向南的箭頭）、se-resize（向東南的箭頭）、auto（正常鼠標(biāo)）。

過濾器對(duì)樣式所控制的對(duì)象應(yīng)用特殊效果。Alpha讓對(duì)象呈現(xiàn)漸變半透明效果

Blur讓對(duì)象產(chǎn)生風(fēng)吹模糊的效果BlendTrans網(wǎng)頁或?qū)ο蟮牡氲銮袚Q效果DropShadow讓對(duì)象有一個(gè)下落式的陰影Glow在對(duì)象的周圍產(chǎn)生光暈而模糊的效果

Chroma讓圖像中的某一顏色變成透明色FlipH讓HTML對(duì)象水平轉(zhuǎn)換FlipV

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論