第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ù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

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

類(可用于任何標簽)：建一個可以應用于任何標簽的樣式。注意：類名稱必須以句點開頭，可以包含任何字母和數字組合（例如，.myhead1）。如果您沒有輸入開頭的句點，Dreamweaver將自動為您輸入。

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

（設置圖片邊框5，css設置邊框顏色，編輯看效果）列表標簽:li

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

a:link：表示已經鏈接；

a:hover：表示鼠標移上鏈接時；

a:active：表示鏈接激活時；

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

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

相對與屏幕的分辨率,相對長度單位點數（pt）

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

根據顯示的實際尺寸來確定長度。字體高（em）

表示當前文本的尺寸。字體x的高（ex）

表示當前字母“x”的高度；%

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

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

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

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

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

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

過濾器對樣式所控制的對象應用特殊效果。Alpha讓對象呈現漸變半透明效果

Blur讓對象產生風吹模糊的效果BlendTrans網頁或對象的淡入淡出切換效果DropShadow讓對象有一個下落式的陰影Glow在對象的周圍產生光暈而模糊的效果

Chroma讓圖像中的某一顏色變成透明色FlipH讓HTML對象水平轉換FlipV

溫馨提示

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

評論

0/150

提交評論