網(wǎng)頁設(shè)計與制作課件 第9章 css3中的屬性設(shè)置_第1頁
網(wǎng)頁設(shè)計與制作課件 第9章 css3中的屬性設(shè)置_第2頁
網(wǎng)頁設(shè)計與制作課件 第9章 css3中的屬性設(shè)置_第3頁
網(wǎng)頁設(shè)計與制作課件 第9章 css3中的屬性設(shè)置_第4頁
網(wǎng)頁設(shè)計與制作課件 第9章 css3中的屬性設(shè)置_第5頁
已閱讀5頁，還剩23頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

CSS3中的屬性設(shè)置PowerPointdesignCONTNETScontents目錄CSS中的字體以及文本控制01CSS中的顏色及背景控制02CSS中的方框的控制屬性03CSS中的分類屬性04CSS中的字體以及文本控制Part01（1）打開Dreamweaver，單擊“代碼”按鈕，進(jìn)入“代碼”視圖，在<head></head>標(biāo)記之間添加代碼。（2）在<body></body>標(biāo)記之間添加代碼，表示在網(wǎng)頁中輸入文字。（3）保存文件，瀏覽網(wǎng)頁。課堂案例——指定文字字體與添加下劃線字體屬性是最基本的屬性，網(wǎng)頁制作中經(jīng)常都會使用到，它主要包括以下這些屬性。font-family:字體名稱font-style:特殊樣式屬性值text-transform:大小寫屬性值font-size:字號屬性值text-decoration:下劃線屬性值字體屬性word-spacingword-spacing表示單詞間距。間隔距離的屬性值為point、em、pixels、in、cm、mm、pc、ex、normal等。letter-spacingletter-spacing表示字母間距，字母間距是指英文字母之間的距離。字母間距的屬性值與單詞間距相同，分別為points、em、pixels、in、cm、mm、pc、ex、normalline-heightline-height表示行距，行距是指上下兩行基準(zhǔn)線之間的垂直距離。一般來說，英文五線格練習(xí)本從上往下數(shù)的第3條橫線就是計算機(jī)所認(rèn)為的該行的基準(zhǔn)線。text-aligntext-align表示文本水平對齊，該屬性可以控制文本的水平對齊，而且并不僅僅指文字內(nèi)容，也包括設(shè)置圖片、影像資料的對齊方式。vertical-alignvertical-align表示文本垂直對齊。文本的垂直對齊應(yīng)當(dāng)是相對于文本母體的位置而言，不是指文本在網(wǎng)頁里垂直對齊。例如表格的單元格里有一段文本，那么對這段文本設(shè)置垂直居中就是針對單元格來衡量的，也就是說文本將在單元格的正中顯示，而不是整個網(wǎng)頁的正中。text-indenttext-indent是表示文本的縮進(jìn)，主要用于中文版式的首行縮進(jìn)，或是為大段的引用文本和備注做成縮進(jìn)的格式。文本屬性CSS中的顏色及背景控制Part02步驟01：打開Dreamweaver，單擊“代碼”按鈕，進(jìn)入“代碼”視圖，在<head></head>標(biāo)記之間添加代碼。步驟02：繼續(xù)添加代碼，表示將名稱為bjtx的jpg圖像設(shè)置為網(wǎng)頁背景。步驟03：保存文件，按“F12”鍵瀏覽網(wǎng)頁。課堂案例——設(shè)置網(wǎng)頁背景圖像顏色屬性允許網(wǎng)頁制作者指定一個元素的顏色，在查看單位時可以知道顏色值的描述，基本語法如下。color:顏色參數(shù)值顏色取值范圍可以用RGB值表示，也可以使用16進(jìn)制數(shù)字色標(biāo)值表示或者以默認(rèn)顏色的英文名稱表示。以默認(rèn)顏色的英文名稱表示無疑是最為方便的，但由于預(yù)定義的顏色種類太少，所以更多的網(wǎng)頁設(shè)計者會用RGB方式或16進(jìn)制的數(shù)字色標(biāo)值。RGB方式可以用數(shù)字的形式精確地表示顏色，也是很多圖像制作軟件（比如Photoshop）默認(rèn)使用的規(guī)范。對顏色屬性的控制在HTML當(dāng)中，要為某個對象加上背景色只有1種方式，即先做1個表格，在表格中設(shè)置完背景色，再把對象放進(jìn)單元格中。這樣做比較麻煩，不但代碼較多，而且表格的大小和定位也有些麻煩。而用CSS則可以輕松地解決這些問題，且對象的范圍廣，可以是1段文字，也可以只是1個單詞或1個字母。其基本語法如下。background-color:參數(shù)值屬性值同顏色屬性取值相同，可以用RGB值表示，也可以使用16進(jìn)制數(shù)字色標(biāo)值表示，或者以默認(rèn)顏色的英文名稱表示，其默認(rèn)值為transparent（透明）。對背景顏色的控制對背景圖像的控制的基本語法如下。background-image:url（URL）URL就是背景圖像的存放路徑。如果用none來代替背景圖像的存放路徑，則不顯示圖像。用該屬性來設(shè)置一個元素的背景圖像，其代碼如下。body{background-image:url(/images/foo.gif)}p{background-image:url(/bg.png)}對背景圖像的控制背景圖像重復(fù)控制的是背景圖像是否平鋪。當(dāng)屬性值為no-repeat時，不重復(fù)平鋪背景圖像；當(dāng)屬性值為repeat-x時，使圖像只在水平方向上平鋪；當(dāng)屬性值為repeat-y時，使圖像只在垂直方向上平鋪。也就是說，結(jié)合背景定位的控制，可以在網(wǎng)頁上的某處單獨顯示一幅背景圖像，基本語法如下。background-repeat:屬性值如果不指定背景圖像重復(fù)的屬性值，瀏覽器默認(rèn)的是背景圖像向水平、垂直兩個方向上同時平鋪。對于背景圖像重復(fù)的控制背景圖像固定控制背景圖像是否隨網(wǎng)頁的滾動而滾動。如果不設(shè)置背景圖像固定屬性，瀏覽器默認(rèn)背景圖像隨網(wǎng)頁的滾動而滾動，基本語法如下。background-attachment:屬性值當(dāng)屬性值為fixed時，網(wǎng)頁滾動時背景圖片相對于瀏覽器的窗口固定不動；當(dāng)屬性值為scroll時，網(wǎng)頁滾動時背景圖片相對于瀏覽器的窗口一起滾動。背景圖像固定控制背景定位用于控制背景圖片在網(wǎng)頁中的顯示位置，基本語法如下。background-position:屬性值 top：相對前景對象頂對齊； bottom：相對前景對象底對齊； left：相對前景對象左對齊； right：相對前景對象右對齊； center：相對前景對象中心對齊。背景定位

CSS中的方框的控制屬性Part03CSS樣式表規(guī)定了一個容器（BOX），它將要儲存一個對象的所有可操作的樣式，包括了對象本身、邊框空白、對象邊框、對象間隙4個方面，它們之間的關(guān)系如圖所示。邊框空白如圖所示，邊框空白位于BOX模型的最外層，包括4項屬性?？瞻椎木嚯x可以用帶長度單位的數(shù)字表示。如果使用上述屬性的簡化方式margin，可以在其后連續(xù)加上4個帶長度單位的數(shù)字，設(shè)置元素相應(yīng)邊與框邊緣之間的相對或絕對距離，有效單位為mm、cm、in、pixels、pt、pica、ex和em。以父元素寬度的百分比設(shè)置邊界尺寸或是auto（自動），這個設(shè)置取瀏覽器的默認(rèn)邊界，分別表示margin-top、margin-right、margin-bottom、margin-left，每個數(shù)字中間要用空格分隔。將代碼保存，使用瀏覽器打開。

位于邊框空白和對象間隙之間，包括了7項屬性，格式分別如下。

border-top：頂邊框?qū)挾取?/p>

border-right：右邊框?qū)挾取?/p>

border-bottom：底邊框?qū)挾取?/p>

border-left：左邊框?qū)挾取?/p>

border-width：所有邊框?qū)挾取?/p>

border-color：邊框顏色。

border-style：邊框樣式參數(shù)。其中border-width可以一次性設(shè)置所有的邊框?qū)挾?。用border-color同時設(shè)置4條邊框的顏色時，可以連續(xù)寫上4種顏色并用空格分隔，連續(xù)設(shè)置的邊框都是按border-top、border-right、border-bottom、border-left的順序。Border-style相對別的屬性而言稍稍復(fù)雜些，因為它還包括了多個邊框樣式的參數(shù)。

none：無邊框。

dotted：邊框為點線。

dashed：邊框為長短線。

solid：邊框為實線。

double：邊框為雙線。

groove：根據(jù)color屬性顯示不同效果的3D邊框。

ridge：根據(jù)color屬性顯示不同效果的3D邊框。

inset：根據(jù)color屬性顯示不同效果的3D邊框。

outset：根據(jù)color屬性顯示不同效果的3D邊框。對象邊框

CSS中的分類屬性Part04顯示控制樣式的基本語法如下。display:屬性值屬性值為block（默認(rèn)）時，是在對象前后都換行；為inline時，是在對象前后都不換行；為list-item時，是在對象前后都換行且增加了項目符號；none表示無顯示。顯示控制樣式空白屬性決定如何處理元素內(nèi)的空格，空白控制樣式的基本語法如下。white-space:屬性值屬性值為normal時，把多個空格替換為1個來顯示；屬性值為pre時，按輸入顯示空格；屬性值為nowrap時，禁止換行。但要注意的是，write-space也是一個塊級屬性?？瞻卓刂茦邮皆诹斜眄椙懊娴捻椖烤幪柕幕菊Z法如下。list-style-type:屬性值其屬性值如下。 none：無強(qiáng)調(diào)符。 disc：碟形強(qiáng)調(diào)符（實心圓）。 circle：圓形強(qiáng)調(diào)符（空心圓）。 square：方形強(qiáng)調(diào)符（實心）。 decimal：十進(jìn)制數(shù)強(qiáng)調(diào)符。 lower-roman：小寫羅馬字強(qiáng)調(diào)符。 upper-roman：大寫羅馬字強(qiáng)調(diào)符。 lower-alpha：小寫字母強(qiáng)調(diào)符。 upper-alpha：大寫字母強(qiáng)調(diào)符。列表項前的項目編號控制在列表項前加入圖像的基本語法如下。list-style-image:屬性值其屬性值為url時，加入圖像的url地址；屬性值為none時，不加入圖像，例如以下代碼。UL.check{list-style-image:url（/LI-markers/checkmark.gif）}ULLI.x{list-style-image:url（x.png）}在列表項前加入圖像（1）打開Dreamweaver，單擊“代碼”按鈕，進(jìn)入“代碼”視圖，在<head></head>標(biāo)記之間添加代碼。（2）在<body></body>之間添加代碼。（3）保存文件，按“F12”鍵瀏覽網(wǎng)頁。課堂案例——設(shè)置網(wǎng)頁目錄目錄樣式位置目錄樣式位置的基本語法如下。list-style-position:屬性值用于設(shè)置強(qiáng)調(diào)符的縮排或伸排，這個屬性可以讓強(qiáng)調(diào)符突出于清單以外或與清單項目對齊。目錄樣式位置屬性可以取值inside（內(nèi)部）縮排，將強(qiáng)調(diào)符與清單項目內(nèi)容左邊界對齊；或者取值outside（外部）伸排，強(qiáng)調(diào)符突出到清單項目內(nèi)容左邊界以外。其中outside是默認(rèn)值。整個屬性決定關(guān)于目錄項的標(biāo)記應(yīng)放在哪里。如果使用inside值，換行會移到標(biāo)記下，而不是縮進(jìn)。其應(yīng)用例子如下。Outsiderendering:*Listitem1secondlineoflistitemInsiderendering:*Listitem1secondlineoflistitem目錄樣式位置目錄樣式屬性是目錄樣式類型、目錄樣式位置和目錄樣式圖像屬性的縮寫，將所有目錄樣式屬性放在一條語句中，其基本語法如下。list-style:屬性值其屬性值為“目錄樣式類型”、“目錄樣式位置”或url。例如以下代碼。LI.square{list-style:squareinside}UL.plain{list-style:none}UL.check{list-style:url(/LI-markers/checkmark.gif)circle}OL{list-style:upper-alpha}OLOL{list-style:lower-romaninside}目錄樣式當(dāng)把鼠標(biāo)光標(biāo)移動到不同的地方時，或當(dāng)鼠標(biāo)光標(biāo)需要執(zhí)行不同的功能時，當(dāng)系統(tǒng)處于不同的狀態(tài)時，都會使光標(biāo)的形狀發(fā)生改變。我們也可以用CSS來改變鼠標(biāo)的屬性，就是當(dāng)鼠標(biāo)移動到不同的元素對象上面時，讓光標(biāo)以不同的形狀、圖案顯示。在CSS當(dāng)中，這種樣式是通過cursor屬性來實現(xiàn)的。將代碼保存并用瀏覽器打開，效果如圖控制鼠標(biāo)光標(biāo)屬性制作提示第1步：打開Dreamweave

溫馨提示

  • 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

提交評論