當前位置:蘿卜系統下載站 > 網頁設計教程 > 詳細頁面

CSS語法手冊 文本填充 邊框 邊界與位置屬性

CSS語法手冊 文本填充 邊框 邊界與位置屬性

更新時間:2020-12-23 文章作者:未知 信息來源:網絡 閱讀次數:

網站建設是指使用標識語言(markup language),通過一系列設計、建模、和執行的過程將電子格式的信息通過互聯網傳輸,最終以圖形用戶界面(GUI)的形式被用戶所瀏覽。簡單來說,網頁設計的目的就是產生網站。簡單的信息如文字,圖片(GIF,JPEG,PNG)和表格,都可以通過使超文件標示語言、可擴展超文本標記語言等標示語言放置到網站頁面上。
一、框填充屬性1、padding-bottom
padding-left
padding-top
padding-right功能:毎個容器都有邊框,這些屬性設置邊框與框內元素間的距離。
數值:
長度 - 設置相對或絕對值。在數字后指定度量單位如下:mm, cm, in, pt, px, pc, ex, em。em 和 ex 設置產生相對于父字體的字體尺寸。
百分比 - 以父元素的百分比設置邊框。
說明:填充值不能使用負值,但可以是小數。
例子2、padding功能:是個簡寫屬性,用于設置上,下,左,右各個方向邊框和內容元素的間距。
數值:同前。
說明:用單一值可以讓毎邊等距填充;如果用兩個值,則第一個值用于上下填充,第二個值用于左右填充;如果用三個值,則賦于上邊填充,左右填充和下邊填充;如果用四個值,則分別用于上,右,下,左填充?梢曰旌蠑抵殿愋。
例子二、框邊框屬性1、border-top
border-bottom
border-right
border-left功能:這四個屬性都是簡寫屬性,分別設置上,下,右,左的邊框屬性。缺省情況下,邊框沒有樣式設置。
數值:共有三個邊框屬性
border-width: 取值為 thin, medium, thick或指定長度。
border-style: 設置用于修飾邊框的底紋?梢栽O置下列樣式:none, dotted,doshed, solid, double, groove, ridge, inset, outset。
border-color: 設置邊框顏色。
例子2、border-top-width
border-bottom-width
border-right=width
border-left-width 功能:分別設置各個邊框的厚度。
數值:
thin - 細邊框。
medium - 中等線寬。
thick - 粗線。
長度 - 用相對或絕對單位設置邊框寬度。
例子3、border-width功能:簡寫屬性,可同時設置四個邊框的寬度。
數值:
thin - 細邊框。
medium - 中等線寬。
thick - 粗線。
長度 - 用相對或絕對單位設置邊框寬度。
說明:見 padding 說明。
例子:邊框屬性4、border-color功能:簡寫屬性,設置四個邊框的顏色值。
數值:可以用顏色名或RGB值。如果指定單個顏色,則四個邊框都顯示為這個顏色;如果指定兩個顏色,則順序為上下,左右;如果指定三種顏色,則順序為上,左右,下;如果指定四種顏色,則順序為上,右,下,左。
說明:顏色名如下
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.
對于RGB值,可用三種方法指定
#rrggbb; rgb(r,g,b); rgb(r%,g%,b%)
例子:邊框顏色5、border-style功能:用于顯示邊框和指定邊框樣式。
數值:
none - 不顯示邊框,為缺省值
dotted - 點線
dashed - 虛線
solid - 實線
double - 雙線
groove - 3D陷入線
ridge - 3D山脊狀線
inset - 使頁面有沉入感
outset - 使頁面有浮出感
說明:并非所有瀏覽器都能顯示ridge, inset, outset 之類的樣式,有些瀏覽器將所有邊框都繪制成實線。
Example1Example26、border功能:簡寫屬性,設置所有邊框屬性。
數值:
border-width - 取值 thin, medium, thick 或指定長度。
border-style - 取值 none, dotted, dashed, solid, double, groove, ridge, inset, outset
border-color - 可用顏色名或RGB值。
說明:與其它簡寫屬性不同的是,每個設置只能取一個值,這個屬性均勻作用于框的各邊。
例子:This Is A Example 三、框邊界屬性1、margin-bottom
margin-left
margin-right
margin-top功能:這四個屬性用來設置元素與其相鄰元素間的距離,可以用長度或相對于其父文本的寬度的百分比來定義,也可以自動處理。
數值:
長度 - 設置元素相應邊與框邊緣之間的相對或絕對距離,有效單位為:mm, cm, in, px, pt, pica,ex, em ...
百分比 - 以父元素寬度的百分比設置邊界尺寸。
auto - 自動,這個設置取瀏覽器的缺省邊界。
例子2、margin功能:簡寫屬性,用于設置元素的所有邊界。這是用于描述元素的內容的邊緣到框邊緣的距離的。這個區總是透明的,可以看到下面的頁面背景。
數值:
長度 - 同前
百分比 - 以父元素寬度的百分比設置邊界尺寸。
auto - 自動,這個設置取瀏覽器的缺省邊界。
例子四、框位置屬性1、height功能:設置元素高度,瀏覽器按照這個高度調整圖形。
數值:
長度 - mm, cm, px, pt, .....
auto - 自動。2、width功能:設置元素寬度,瀏覽器按照這個寬度調整圖形。
數值:
長度 - mm, cm, in, px, pt, ......
百分比 - 將圖形尺寸設置為父元素寬度的百分比。
auto - 自動調整3、float功能:用于在普通元素流布置規則以外放上元素。
數值:
none - 無改動。
left - 將其它元素內容放到浮動元素右邊。
right - 將其它元素內容放到浮動元素左邊。4、clear功能:用于允許或禁止指定元素旁邊放置其它元素(通常是線上圖形).
數值:
none - 無限制。
left - 將元素放在左邊浮動元素下面
right - 將元素放在右邊浮動元素下面
both - 元素兩邊都不允許放置浮動元素大多數人在上網的時候,都會瀏覽網頁提供給我們的信息。

溫馨提示:喜歡本站的話,請收藏一下本站!

本類教程下載

系統下載排行

亚洲嫩草影院久久精品