常用樣式屬性

上傳人：伊*** IP屬地：上海上傳時(shí)間：2022-03-11 格式：DOCX 頁(yè)數(shù)：15 大?。?8.96KB 積分：12 舉報(bào) 版權(quán)申訴

已閱讀5頁(yè)，還剩10頁(yè)未讀，繼續(xù)免費(fèi)閱讀

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

文檔簡(jiǎn)介

1、網(wǎng)頁(yè)布局常用樣式屬性一、 PositionPosition有以下幾個(gè)值：static，relative，absolute，fixed。Static：靜態(tài)定位。如果你沒(méi)有設(shè)置position屬性，那么缺省就是static。top，left，bottom，right等屬性，在static的情況下是無(wú)效的，要使用這些屬性，必須把position設(shè)置為其他三個(gè)值之一。Relative：相對(duì)定位。元素將按照靜態(tài)定位時(shí)的位置進(jìn)行調(diào)整，在靜態(tài)定位中分配給元素的空間仍然會(huì)分配給它，它兩邊的元素不會(huì)向它靠近來(lái)填充那個(gè)空間，但它們也不會(huì)從元素的新位置被擠走。Absolute：絕對(duì)定位。元素將按照包含它的元素的位置

2、進(jìn)行調(diào)整，比如它嵌套在另一個(gè)絕對(duì)定位的元素中，那么就相對(duì)于那個(gè)元素定位。Fixed：固定定位。元素將被設(shè)置在瀏覽器上一個(gè)固定位置上，不會(huì)隨其他元素滾動(dòng)。形象點(diǎn)說(shuō)，上下拉動(dòng)滾動(dòng)條的時(shí)候，fixed的元素在屏幕上的位置不變。需要注意的是IE6并不支持此屬性。注意：很多網(wǎng)頁(yè)都是居中的，這樣，當(dāng)對(duì)元素進(jìn)行絕對(duì)定位的時(shí)候，在不同的分辨率下顯示會(huì)有偏差，這時(shí)，我們可以通過(guò)類似下面的方法來(lái)處理：<div style="position: relative;"><div style="position: absolute; top: 10px; left: 10

3、px;"></div></div><div style="position: Fixed; top: 10px; left: 10px;"></div></div> /元素位置固定瀏覽器位置不變二、 Floatfloat 是 css 的定位屬性, fload屬性有四個(gè)可用的值：Left 和Right 分別浮動(dòng)元素到各自的方向，None （默認(rèn)的）使元素不浮動(dòng)，Inherit 將會(huì)從父級(jí)元素獲取float值。Float的用處float 屬性定義元素在哪個(gè)方向浮動(dòng)。以往這個(gè)屬性總應(yīng)用于圖像，使文本圍繞

4、在圖像周圍，不過(guò)在 CSS 中，任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論它本身是何種元素。浮動(dòng)非替換元素要指定一個(gè)明確的寬度；否則，它們會(huì)盡可能地窄。注釋: 假如在一行之上只有極少的空間可供浮動(dòng)元素，那么這個(gè)元素會(huì)跳至下一行，這個(gè)過(guò)程會(huì)持續(xù)到某一行擁有足夠的空間為止。除了簡(jiǎn)單的在圖片周圍包圍文字，浮動(dòng)可用于創(chuàng)建全部網(wǎng)頁(yè)布局。參考地址：ml三、 margin(外邊距) 定義margin 屬性是用于在一個(gè)聲明中設(shè)置四個(gè)外邊距的所有屬性的簡(jiǎn)寫屬性。注釋：允許使用負(fù)值。繼承性：No說(shuō)明這個(gè)簡(jiǎn)寫屬性設(shè)置一個(gè)元素所有外邊距的寬度，或者設(shè)置各邊上外邊距的寬度。塊級(jí)元素的垂直相鄰?fù)膺吘鄷?huì)合并，而行

5、內(nèi)元素實(shí)際上不占上下外邊距。行內(nèi)元素的的左右外邊距不會(huì)合并。同樣地，浮動(dòng)元素的外邊距也不會(huì)合并。允許指定負(fù)的外邊距值，不過(guò)使用時(shí)要小心。例子四個(gè)邊距均為10px：h1 margin: 10px頂邊距和底邊距為10px，左邊距和右邊距是父元素寬度的2%：h1 margin: 10px 2%頂邊距為10px，左邊距和右邊距是父元素寬度的2%，底邊距是-10px：h1 margin: 10px 2% -10px頂邊距為10px，右邊距是父元素寬度的2%，底邊距是-10px，而左邊距由瀏覽器設(shè)置：h1 margin: 10px 2% -10px auto可能的值設(shè)置針對(duì)邊距的屬性。margin-top

6、 margin-right margin-bottom margin-left 值可以是：百分比（基于父對(duì)象總高度或?qū)挾鹊陌俜直龋?長(zhǎng)度值（定義一個(gè)固定的邊距） auto（瀏覽器設(shè)定的值）。默認(rèn)值：未定義。例子：<html><head><style type="text/css">p.margin margin: 2cm 4cm 3cm 4cm</style></head><body><p>這個(gè)段落沒(méi)有指定外邊距。</p><p class="margin&quo

7、t;>這個(gè)段落帶有指定的外邊距。這個(gè)段落帶有指定的外邊距。這個(gè)段落帶有指定的外邊距。這個(gè)段落帶有指定的外邊距。這個(gè)段落帶有指定的外邊距。</p><p>這個(gè)段落沒(méi)有指定外邊距。</p></body></html>四、 padding(內(nèi)邊距)CSS中定義了一個(gè)盒式模型，關(guān)于這個(gè)網(wǎng)上有很多文章。主要有margin（外邊距），border（邊框），padding（內(nèi)邊距）這三個(gè)名詞，用來(lái)設(shè)置這個(gè)盒子的空隙。W3C定義的盒式模型定義的width和height是指內(nèi)容實(shí)體的，而不包括margin，border和padding，而傳統(tǒng)的盒式

8、模型則不同，他的width是包括border和padding，可以看下圖幫助理解。五、 border(邊框) border（邊框） border-left border-right border-bottom border-topborder-style: dotted;(點(diǎn)線) dashed;(虛線) solid; double;(雙線) groove;(槽線) ridge;(脊?fàn)? inset;(凹陷) outset;border-width:; 邊框?qū)挾萣order-color:#;六、 left top right bottom這四個(gè)屬性是設(shè)置一個(gè)偏移量，對(duì)于特定容器的一個(gè)偏移。top

9、是指元素的頂邊相對(duì)于容器的頂邊的偏移，right是元素的右邊相對(duì)于容器的右邊的便宜，但方向是從右到左。正因?yàn)橛蟹较颍赃@四個(gè)屬性也可以設(shè)置為負(fù)值，是向反方向偏移。也可以設(shè)置百分比，這個(gè)值是相對(duì)于容器計(jì)算出來(lái)的，比如top:50%，就是容器的height*50%。這四個(gè)屬性必須與position共同使用，不然就沒(méi)有效果，position值為static時(shí)這四個(gè)屬性也是無(wú)效的。position還存在其他三個(gè)值absolute，relative，fixed，fixed和absolute類似，所以最大的區(qū)別還是absolute和relative。absolute是相對(duì)于根容器偏移，而relativ

10、e是相對(duì)于父級(jí)容器偏移。偏移值指的是容器的內(nèi)容實(shí)體到元素外邊距的距離，就算說(shuō)topleft定義的盒子左上角的坐標(biāo)是margin-top和margin-left的交點(diǎn)，當(dāng)然這個(gè)坐標(biāo)是相對(duì)于容器來(lái)說(shuō)的，傳統(tǒng)模型也是如此。七、（block）文字和字體相關(guān)字間距l(xiāng)etter-spacing: normal; 數(shù)值對(duì)劉text-align: justify;(兩端對(duì)齊) left;(左對(duì)齊) right;(右對(duì)齊) center;(居中)縮進(jìn)text-indent: 數(shù)值px;垂直對(duì)齊vertical-align: baseline;(基線) sub;(下標(biāo)) super;(下標(biāo)) top; tex

11、t-top; middle; bottom; text-bottom;詞間距word-spacing: normal; 數(shù)值空格white-space: pre;(保留) nowrap;(不換行)顯示display:block;(塊) inline;(內(nèi)嵌) list-item;(列表項(xiàng)) run-in;(追加部分) compact;(緊湊) marker;(標(biāo)記) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-

12、column; table-cell; table-caption;(表格標(biāo)題)類型list-style-type: disc;(圓點(diǎn)) circle;(圓圈) square;(方塊) decimal;(數(shù)字) lower-roman;(小羅碼數(shù)字) upper-roman; lower-alpha; upper-alpha;位置list-style-position: outside;(外) inside;圖像list-style-image: url(.);定位屬性： (Position)Position: absolute; relative; static;v

13、isibility: inherit; visible; hidden;overflow: visible; hidden; scroll; auto;clip: rect(12px,auto,12px,auto) (裁切)八、 box（方框）width:; height:; float:; clear:both; margin:; padding:; 順序：上右下左九、 (font)字體屬性大小 font-size: x-large;(特大) xx-small;(極小) 一般中文用不到，只要用數(shù)值就可以，單位：PX、PD樣式 font-style: o

14、blique;(偏斜體) italic;(斜體) normal;(正常)行高 line-height: normal;(正常) 單位：PX、PD、EM粗細(xì) font-weight: bold;(粗體) lighter;(細(xì)體) normal;(正常)變體 font-variant: small-caps;(小型大寫字母) normal;(正常)大小寫 text-transform: capitalize;(首字母大寫) uppercase;(大寫) lowercase;(小寫) none;(無(wú))修飾 text-decoration: underline;(下劃線) overline;(上劃線)

15、 line-through;(刪除線) blink;(閃爍)常用字體： (font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana十、 (background)背景屬性色彩background-color: #FFFFFF;圖片background-image: url();重復(fù)background-repeat: no-repeat;滾動(dòng)background-attachmen

16、t: fixed;(固定) scroll;(滾動(dòng))位置background-position: left(水平) top(垂直);簡(jiǎn)寫方法 background:#000 url(.) repeat fixed left top;其他常用樣式一 CSS文字屬性：color : #999999; /*文字顏色*/font-family : 宋體,sans-serif; /*文字字體*/ font-size : 9pt; /*文字大小*/ font-style:itelic; /*文字斜體*/ font-variant:small-caps; /*小字體*/ letter-spacing : 1p

17、t; /*字間距離*/ line-height : 200%; /*設(shè)置行高*/ font-weight:bold; /*文字粗體*/ vertical-align:sub; /*下標(biāo)字*/ vertical-align:super; /*上標(biāo)字*/ text-decoration:line-through; /*加刪除線*/ text-decoration: overline; /*加頂線*/ text-decoration:underline; /*加下劃線*/ text-decoration:none; /*刪除鏈接下劃線*/ text-transform : capitalize; /

18、*首字大寫*/ text-transform : uppercase; /*英文大寫*/ text-transform : lowercase; /*英文小寫*/ text-align:right; /*文字右對(duì)齊*/ text-align:left; /*文字左對(duì)齊*/ text-align:center; /*文字居中對(duì)齊*/ text-align:justify; /*文字分散對(duì)齊*/ vertical-align屬性vertical-align:top; /*垂直向上對(duì)齊*/ vertical-align:bottom; /*垂直向下對(duì)齊*/ vertical-a

19、lign:middle; /*垂直居中對(duì)齊*/ vertical-align:text-top; /*文字垂直向上對(duì)齊*/ vertical-align:text-bottom; /*文字垂直向下對(duì)齊*/ 二、CSS邊框空白padding-top:10px; /*上邊框留空白*/ padding-right:10px; /*右邊框留空白*/ padding-bottom:10px; /*下邊框留空白*/ padding-left:10px; /*左邊框留空白三、CSS符號(hào)屬性：list-style-type:none; /*不編號(hào)*/ list-style-type:decimal

20、; /*阿拉伯?dāng)?shù)字*/ list-style-type:lower-roman; /*小寫羅馬數(shù)字*/ list-style-type:upper-roman; /*大寫羅馬數(shù)字*/ list-style-type:lower-alpha; /*小寫英文字母*/ list-style-type:upper-alpha; /*大寫英文字母*/ list-style-type:disc; /*實(shí)心圓形符號(hào)*/ list-style-type:circle; /*空心圓形符號(hào)*/ list-style-type:square; /*實(shí)心方形符號(hào)*/ list-style-image:url(/dot

21、.gif); /*圖片式符號(hào)*/ list-style-; /*凸排*/ list-style-; /*縮進(jìn)*/ 四、CSS背景樣式：background-color:#F5E2EC; /*背景顏色*/ background:transparent; /*透視背景*/ background-image : url(/image/bg.gif); /*背景圖片*/ background-attachment : fixed; /*浮水印固定背景*/ background-repeat : repeat; /*重復(fù)排列-網(wǎng)頁(yè)默認(rèn)*/ background-repeat : n

22、o-repeat; /*不重復(fù)排列*/ background-repeat : repeat-x; /*在x軸重復(fù)排列*/ background-repeat : repeat-y; /*在y軸重復(fù)排列*/ 指定背景位置background- 90%; /*背景圖片x與y軸的位置*/ background-; /*向上對(duì)齊*/ background-; /*向下對(duì)齊*/ background-; /*向左對(duì)齊*/ background-; /*向右對(duì)齊*/ background-; /*居中對(duì)齊*/ 五、CSS連接屬性：a /*所有超鏈接*/ a:link /*超鏈接文字格式*/ &

23、#160;a:visited /*瀏覽過(guò)的鏈接文字格式*/ a:active /*按下鏈接的格式*/ a:hover /*鼠標(biāo)轉(zhuǎn)到鏈接*/ 鼠標(biāo)光標(biāo)樣式：鏈接手指 CURSOR: hand 十字體 cursor:crosshair 箭頭朝下 cursor:s-resize 十字箭頭 cursor:move 箭頭朝右 cursor:move 加一問(wèn)號(hào) cursor:help 箭頭朝左 cursor:w-resize 箭頭朝上 cursor:n-resize 箭頭朝右上 cursor:ne-resize 箭頭朝左上 cursor:nw-resize 文字I型 cursor:text 箭頭斜右下 c

24、ursor:se-resize 箭頭斜左下 cursor:sw-resize 漏斗 cursor:wait 光標(biāo)圖案(IE6) p cursor:url("光標(biāo)文件名.cur"),text; 六、CSS框線一覽表：border-top : 1px solid #6699cc; /*上框線*/ border-bottom : 1px solid #6699cc; /*下框線*/ border-left : 1px solid #6699cc; /*左框線*/ border-right : 1px solid #6699cc; /*

25、右框線*/ 以上是建議書寫方式,但也可以使用常規(guī)的方式如下:border-top-color : #369 /*設(shè)置上框線top顏色*/ border-top-width :1px /*設(shè)置上框線top寬度*/ border-top-style : solid/*設(shè)置上框線top樣式*/ 其他框線樣式solid /*實(shí)線框*/ dotted /*虛線框*/ double /*雙線框*/ groove /*立體內(nèi)凸框*/ ridge /*立體浮雕框*/ inset /*凹框*/ outset /*凸框*/ 七、CSS表單運(yùn)用：文字方塊按鈕復(fù)選框&

26、#160; 選擇鈕多行文字方塊下拉式菜單選項(xiàng)1選項(xiàng)2 八、CSS邊界樣式：margin-top:10px; /*上邊界*/ margin-right:10px; /*右邊界值*/ margin-bottom:10px; /*下邊界值*/ margin-left:10px; /*左邊界值*/ 字體樣式(Font Style) 序號(hào) 中文說(shuō)明標(biāo)記語(yǔ)法 1 字體樣式 font:font-style font-variant font-weight font-size font-family 2 字體類型 f

31、uper 6 書寫方式 writing-mode:lr-tb|tb-rl 背景樣式序號(hào) 中文說(shuō)明標(biāo)記語(yǔ)法 1 背景顏色 background-color:數(shù)值 2 背景圖片 background-image: url(URL)|none 3 背景重復(fù) background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y 4 背景固定 background-attachment:fixed|scroll 5 背景定位 background- 6 背影樣式 background:背景顏色|背景圖象|背景重復(fù)|背景附件|背景位置框架樣式(Box Style) 序號(hào) 中文說(shuō)明標(biāo)記語(yǔ)法 1 邊界留白 margin:margin-top margin-right margin-bottom margin-left 2 補(bǔ)白 padding:padding-top padding-right padding-bottom padding-left 3 邊框?qū)挾?border-width:borde

人人文庫(kù)> 全部分類> 教育資料 > 課件下載

溫馨提示

1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
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ì)用戶上傳內(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ì)自己和他人造成任何形式的傷害或損失。

常用樣式屬性

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

常用樣式屬性

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

相關(guān)文檔