常用CSS屬性總結

2021-07-25 01:31:53 字數 4824 閱讀 7712

屬性

描述可能值

background

在乙個宣告中設定所有背景屬性

background-attachment

設定背景影象是否隨著頁面的其餘部分滾動

scroll(預設值);fixed;inherit

background-color

設定元素背景色

yellow;#00ff00;rgb(255, 0, 255)

background-image

設定元素背景影象

none(預設值);url(『1.jpg』);inherit

background-position

設定背景影象開始的位置

top left;x% y%;xpos ypos;

background-repeat

設定背景影象如何重複顯示

repeat(預設值);repeat-x;repeat-y;no-repeat;inherit

background-clip

規定背景的繪製區域

border-box(預設值);padding-box;content-box

background-origin

規定背景相對什麼來定位

padding-box(預設值);border-box;content-box

background-size

設定背景的尺寸

100px;50%;cover;contain 注:

background-attachment:

background-clip:

background-origin: 屬性

描述可能值

border

在乙個宣告中設定所有的邊框屬性

medium double red

border-color

設定四條邊框的顏色

red;#ff0000;rgb(255, 0, 0)

border-style

設定四條邊框的樣式

none(預設值);hidden;dotted;dashed;solid

border-width

設定四條邊框的寬度

medium(預設值);thin, thick, 50px, inherit

border-image

在乙個宣告中設定邊框影象屬性

none 100% 1 0 stretch(預設值)

border-radius

設定邊框四個圓角屬性

2em 4em, 50% 50%

border-shadow

設定邊框陰影

h-shadow, v-shadow

border-top

在乙個宣告中設定所有的上邊框屬性

medium double red

border-top-color

設定上邊框的顏色

red;#ff0000;rgb(255, 0, 0)

border-top-style

設定上邊框的樣式

none(預設值);hidden;dotted;dashed;solid

border-top-width

設定上邊框的寬度

medium(預設值);thin, thick, 50px, inherit 注:

border-image:在乙個宣告中設定邊框影象屬性,可以按順序設定如下屬性:

border-image-repeat:設定邊框是平鋪repeated,鋪滿rounded或拉伸strechedborder-width:

border-radius: 屬性

描述可能值

color

設定文字的顏色

red, rgb(255, 0, 0), #fff000

direction

設定文字的方向

ltr(預設), rtl, inherit

letter-spacing

設定字元間距

normal(預設), 4px, inherit

line-height

設定行高

normal(預設), 4px, inherit

text-align

設定文字水平對齊方式

left, right, center, justify, inherit

text-decoration

設定文字的裝飾效果

none, overline, underline, blink

text-indent

設定文字塊首行的縮排

10px, 10%, ecah-line

text-shadow

設定文字的陰影效果

h-shadow, v-shadow

text-transform

控制文字的大小寫

uppercase, lowercase, captitalize

white-spacing

規定如何處理元素中的空白

normal, nowrap, pre-line, pre, pre-wrap

word-spacing

設定單詞間距

normal, 10px, inherit

text-justify

規定text-align為justify時的對其方法

auto, none, inter-word

word-break

設定文字的換行規則

normal, break-all, keep-all

word-wrap

允許對唱的不可分割的單詞進行分割並換行到下一行

normal, break-word 注:

word-wrap 屬性

描述可能值

font

在乙個宣告中設定字型屬性

italic bold 12px/20px arial,sans-serif;

font-family

規定字型系列

times new roman等

font-size

設定字型的尺寸

6px, 20%, inherit, smaller, larger

font-weight

設定字型的粗細

normal, bold, bolder, lighter, 100

font-style

設定字型的樣式

normal, italic, oblique, inherit 屬性

描述可能值

margin

在乙個宣告中設定所有外邊距

1-4個值

margin-bottom

設定元素的下外邊距

auto, 10px, 5%, inherit

margin-top

設定元素的上外邊距

auto, 10px, 5%, inherit

margin-left

設定元素的左外邊距

auto, 10px, 5%, inherit

margin-right

設定元素的右外邊距

auto, 10px, 5%, inherit 屬性

描述可能值

padding

在乙個宣告中設定所有內邊距

1-4個值

padding-bottom

設定元素的下內邊距

auto, 10px, 5%, inherit

padding-top

設定元素的上內邊距

auto, 10px, 5%, inherit

padding-left

設定元素的左內邊距

auto, 10px, 5%, inherit

padding-right

設定元素的右內邊距

auto, 10px, 5%, inherit 屬性

描述可能值

height

設定元素的高度

auto, 10px, 5%, inherit

width

設定元素的寬度

auto, 10px, 5%, inherit

max-width

設定元素最大寬度

auto, 10px, 5%, inherit

min-width

設定元素最小寬度

auto, 10px, 5%, inherit

max-height

設定元素最大高度

auto, 10px, 5%, inherit

min-height

設定元素最小高度

auto, 10px, 5%, inherit 屬性

描述可能值

clear

規定元素的哪一側不允許其他浮動元素

none, left, right, both

float

規定元素的浮動方式

none, left, right

cursor

規定顯示的游標形狀

auto, pointer, help

position

規定元素的定位型別

absolute, fixed, relative, static, inherit

display

規定元素的顯示型別

none, block, inline, inline-block, table…

visibility

規定元素是否可見

visible, hidden

vertical-align

設定元素垂直對齊

top, middle, bottom, baseline…

css參考手冊

CSS常用屬性總結

1,首行縮排 text indent 2em 1em font szie 大小 em是相對字型大小高度的 2,文字裝飾 text decoration line through 3,行級元素 內容決定元素所佔位置 inline 不可以通過css改變寬高 比如 span strong em a del...

CSS常用屬性總結

1 display 設定元素是否以及如何顯示 block 是塊級元素的預設值 塊級元素預設情況下獨佔一行 塊級元素可以設定寬高 inline 是行內元素的預設值 多個行內元素可以處在同一行 行內元素不可以設定寬高 inline block 既具備塊級元素特徵也具備行內元素特徵 none 隱藏元素 2...

css常用樣式屬性總結

在css樣式表中,常用樣式屬性 文字屬性 說 明 font size 字型大小 font family 字型型別 font style 字型樣式 color 設定或檢索文字的顏色 text align 文字對齊 背景屬性 說 明 background color 設定背景顏色 background ...