Style對象
Style對象代表一個單獨的樣式聲明。
訪問Style對象
Style對象可以訪問從文檔的頭部部分中,或者從特定的HTML element(s) 。
訪問樣式object(s)從文件頭部分:
訪問指定的元素的樣式對象:
創建一個樣式對象
您可以創建一個<style>使用元素document. createElement() document. createElement()方法:
您還可以設置一個現有元素的樣式屬性:
風格對象屬性
的"CSS"列表示在這種CSS版本的屬性被定義(CSS1, CSS2, or CSS3)
屬性 | 描述 | CSS |
---|---|---|
alignContent | 設置或返回一個靈活的容器內的線之間的比對時,項目不使用所有可用空間 | 3 |
alignItems | 設置或返回一個靈活的容器內的物品的排列 | 3 |
alignSelf | 設置或返回的柔性容器內選擇的項目的對準 | 3 |
animation | 速記屬性以下所有動畫屬性,除了animationPlayState財產 | 3 |
animationDelay | 設置或返回時,動畫將開始 | 3 |
animationDirection | 設置或返回動畫是否應在交替週期反向播放 | 3 |
animationDuration | 設置或返回多少秒或毫秒的動畫需要如何完成一個週期 | 3 |
animationFillMode | 由動畫正在執行的時間之外應用什麼值設置或返回 | 3 |
animationIterationCount | 設置或返回動畫應該播放的次數 | 3 |
animationName | 設置或返回@keyframes動畫名 | 3 |
animationTimingFunction | 設置或返回動畫的速度曲線 | 3 |
animationPlayState | 設置或返回動畫是否正在運行或暫停 | 3 |
background | 設置或在一個聲明中返回所有的背景屬性 | 1 |
backgroundAttachment | 設置或返回背景圖像是否固定或隨頁面滾動 | 1 |
backgroundColor | 設置或返回一個元素的背景色 | 1 |
backgroundImage | 設置或返回背景圖像一個元素 | 1 |
backgroundPosition | 設置或返回背景圖像的開始位置 | 1 |
backgroundRepeat | 設置或返回如何重複(tile)背景圖像 | 1 |
backgroundClip | 設置或返回背景的繪畫面積 | 3 |
backgroundOrigin | 設置或返回背景圖像的定位區域 | 3 |
backgroundSize | 設置或獲取對象的背景圖像的大小 | 3 |
backfaceVisibility | 設置或返回時,不要對著屏幕的元素是否應該可見 | 3 |
border | 設置或返回邊框寬度,將borderStyle和BORDERCOLOR在一個聲明中 | 1 |
borderBottom | 在一個聲明中設置或返回所有borderBottom *屬性 | 1 |
borderBottomColor | 設置或返回底部邊框的顏色。 | 1 |
borderBottomLeftRadius | 設置或返回左下角邊框的形狀 | 3 |
borderBottomRightRadius | 設置或返回右下角的邊框的形狀 | 3 |
borderBottomStyle | 設置或返回底部邊框的樣式。 | 1 |
borderBottomWidth | 設置或返回底部邊框的寬度 | 1 |
borderCollapse | 設置或返回是否表格邊框應該合併為一個邊界,或不 | 2 |
borderColor | 設置或返回元素邊框的顏色(最多可以有四個值) | 1 |
borderImage | 速記屬性設置或返回所有borderImage *屬性 | 3 |
borderImageOutset | 設置或返回由邊框圖像區域超出邊框箱量 | 3 |
borderImageRepeat | 設置或返回圖像邊框是否應該被重複,圓形或拉長 | 3 |
borderImageSlice | 設置或返回圖像邊界向內偏移 | 3 |
borderImageSource | 設置或返回圖像用作邊界 | 3 |
borderImageWidth | 設置或返回圖像邊框的寬度 | 3 |
borderLeft | 設置或在一個聲明中返回所有borderLeft *屬性 | 1 |
borderLeftColor | 設置或返回左邊框的顏色 | 1 |
borderLeftStyle | 設置或返回左邊框的樣式。 | 1 |
borderLeftWidth | 設置或返回左邊框的寬度 | 1 |
borderRadius | 速記屬性設置或返回所有四個邊框*半徑特性 | 3 |
borderRight | 在一個聲明中設置或返回所有borderRight *屬性 | 1 |
borderRightColor | 設置或返回右邊框的顏色 | 1 |
borderRightStyle | 設置或返回右邊框的樣式 | 1 |
borderRightWidth | 設置或返回右邊框的寬度 | 1 |
borderSpacing | 設置或表返回細胞之間的空間 | 2 |
borderStyle | 設置或返回元素邊框的樣式(最多可以有四個值) | 1 |
borderTop | 在一個聲明中設置或返回所有borderTop *屬性 | 1 |
borderTopColor | 設置或返回頂部邊框的顏色。 | 1 |
borderTopLeftRadius | 設置或返回左上角邊框的形狀 | 3 |
borderTopRightRadius | 設置或返回右上角的邊界的形狀 | 3 |
borderTopStyle | 設置或返回頂部邊框的樣式。 | 1 |
borderTopWidth | 設置或返回頂部邊框的寬度 | 1 |
borderWidth | 設置或返回元素邊框的寬度(最多可以有四個值) | 1 |
bottom | 設置或返回定位元素的底部位置 | 2 |
boxDecorationBreak | 設置或返回元素的背景和邊框在分頁符的行為,或者,對於在線元件,在斷行。 | 3 |
boxShadow | 附加一個或多個下拉陰影框 | 3 |
boxSizing | 允許您定義某些元素以某種方式,以適應區域 | 3 |
captionSide | 設置或返回表格標題的位置 | 2 |
clear | 設置或返回元件相對於到漂浮物的位置 | 1 |
clip | 設置或返回其中定位元件的一部分是可見的 | 2 |
color | 設置或返回文本的顏色 | 1 |
columnCount | 設置或返回元素應該分為列數 | 3 |
columnFill | 設置或返回如何填充列 | 3 |
columnGap | 設置或返回列之間的差距 | 3 |
columnRule | 速記屬性設置或返回所有columnRule *屬性 | 3 |
columnRuleColor | 設置或返回列之間的規則的顏色 | 3 |
columnRuleStyle | 設置或返回列之間的規則的風格 | 3 |
columnRuleWidth | 設置或返回列之間的規則的寬度 | 3 |
columns | 速記屬性設置或返回columnWidth時和信息columnCount | 3 |
columnSpan | 設置或返回元素應該有多少列跨跨度 | 3 |
columnWidth | 設置或返回列的寬度 | 3 |
content | 使用與:before和:after偽元素,插入生成的內容 | 2 |
counterIncrement | 增加一個或多個計數器 | 2 |
counterReset | 創建或重置一個或多個計數器 | 2 |
cursor | 設置或返回光標的類型,以顯示鼠標指針 | 2 |
direction | 設置或返回文本的方向 | 2 |
display | 設置或返回元素的顯示類型 | 1 |
emptyCells | 設置或返回是否顯示空單元格邊框和背景,或不 | 2 |
filter | 設置或返回圖像過濾器(visual effects, like blur and saturation) | 3 |
flex | 設置或返回的項目相對靜止的長度, | 3 |
flexBasis | 設置或返回的柔性物品的初始長度 | 3 |
flexDirection | 設置或返回的靈活的項目的方向 | 3 |
flexFlow | 速記屬性為flexDirection和flexWrap性質 | 3 |
flexGrow | 設置或返回的項目多少相對於其他成長 | 3 |
flexShrink | 設置或返回該項目將如何收縮相對於靜止 | 3 |
flexWrap | 設置或返回的靈活的項目是否應自動換行或不 | 3 |
cssFloat | 設置或返回元素的水平對齊 | 1 |
font | 設置或返回fontStyle,fontVariant,fontWeight設置,fontSize的,lineHeight是,並且fontFamily在一個聲明中 | 1 |
fontFamily | 設置或返回字體系列的文本 | 1 |
fontSize | 設置或返回文本的字體大小 | 1 |
fontStyle | 設置或返回字體的風格是否正常,斜體或斜 | 1 |
fontVariant | 字體是否應顯示在小型大寫字母設置或返回 | 1 |
fontWeight | 設置或返回字體的氣魄 | 1 |
fontSizeAdjust | 當字體回退時保持文本的可讀性 | 3 |
fontStretch | 從字體的家庭選擇一個正常的,凝結,或擴展的臉 | 3 |
hangingPunctuation | 指定一個標點符號是否可被放置的行外箱 | 3 |
height | 設置或返回元件的高度 | 1 |
hyphens | 設置如何分割單詞以改善段落佈局 | 3 |
icon | 提供了作者與一個標誌性等同於style元素的能力 | 3 |
imageOrientation | 指定在向右或順時針方向的旋轉,用戶代理適用於圖像 | 3 |
justifyContent | 設置或返回時,項目不使用所有可用的空間,靈活的容器內的項目之間的比對。 | 3 |
left | 設置或返回定位元素的左側位置 | 2 |
letterSpacing | 設置或返回字符之間的空間在文本 | 1 |
lineHeight | 設置或返回文本行之間的距離 | 1 |
listStyle | 設置或返回listStyleImage,listStylePosition和listStyleType在一個聲明中 | 1 |
listStyleImage | 設置或返回圖像為列表項標記 | 1 |
listStylePosition | 設置或返回列表項標記的位置 | 1 |
listStyleType | 設置或返回列表項標記類型 | 1 |
margin | 設置或返回元件的邊緣(can have up to four values) | 1 |
marginBottom | 設置或返回一個元素的下邊距 | 1 |
marginLeft | 設置或返回元素的左邊距 | 1 |
marginRight | 設置或返回元素的右邊緣 | 1 |
marginTop | 設置或返回一個元件的頂緣 | 1 |
maxHeight | 設置或返回元素的最大高度 | 2 |
maxWidth | 設置或返回元素的最大寬度 | 2 |
minHeight | 設置或返回元素的最小高度 | 2 |
minWidth | 設置或返回元素的最小寬度 | 2 |
navDown | 設置或返回在何處使用箭頭向下導航鍵時導航 | 3 |
navIndex | 設置或返回跳位順序的元素 | 3 |
navLeft | 設置或返回在何處使用左箭頭導航鍵導航時 | 3 |
navRight | 設置或返回在何處使用箭頭,右導航鍵時導航 | 3 |
navUp | 設置或返回在何處使用箭頭向上導航鍵時導航 | 3 |
opacity | 設置或獲取對象的不透明度級別的元素 | 3 |
order | 設置或返回的靈活的項目相對於其餘部分的順序, | 3 |
orphans | 設置或當一個頁面的斷裂元件內部發生返回該必須在頁面的底部留下一個元素的最小行數 | 2 |
outline | 設置或在一個聲明中返回所有的輪廓屬性 | 2 |
outlineColor | 設置或返回輪廓的顏色圍繞一個元素 | 2 |
outlineOffset | 偏移輪廓,並提請其境外邊緣 | 3 |
outlineStyle | 設置或返回輪廓的風格元素周圍 | 2 |
outlineWidth | 設置或返回輪廓的寬度圍繞元件 | 2 |
overflow | 設置或返回如何處理的內容呈現的元素外箱 | 2 |
overflowX | 指定如何處理內容的左/右邊緣,如果它溢出的元素內容區 | 3 |
overflowY | 指定如何處理內容的頂部/底部邊緣,如果它溢出的元素內容區 | 3 |
padding | 設置或返回元件的填充(can have up to four values) | 1 |
paddingBottom | 設置或返回元件的底部填充 | 1 |
paddingLeft | 設置或返回元件的左填充 | 1 |
paddingRight | 設置或返回元素的右填充 | 1 |
paddingTop | 設置或返回元素的頂部填充 | 1 |
pageBreakAfter | 設置或元素之後返回分頁行為 | 2 |
pageBreakBefore | 設置或元素之前返回分頁行為 | 2 |
pageBreakInside | 設置或返回元素內分頁行為 | 2 |
perspective | 設置或返回上被視為如何3D元素的視角 | 3 |
perspectiveOrigin | 設置或返回3D元素的底部位置 | 3 |
position | 設置或返回用於一個元件定位方法的類型(static, relative, absolute or fixed) | 2 |
quotes | 設置或返回引號的嵌入式報價類型 | 2 |
resize | 設置或返回的元素是否是由用戶調整大小 | 3 |
right | 設置或返回定位元素的正確的位置 | 2 |
tableLayout | 設置或返回奠定了表格單元格,行和列的方式 | 2 |
tabSize | 設置或返回製表字符的長度 | 3 |
textAlign | 設置或返回文本的水平對齊方式 | 1 |
textAlignLast | 設置或返回時如何的text-align是塊或強制斷行前行權的最後一行對齊"justify" | 3 |
textDecoration | 設置或返回文本的裝飾 | 1 |
textDecorationColor | 設置或返回文本裝飾的顏色 | 3 |
textDecorationLine | 設置或返回行的類型在文本裝飾 | 3 |
textDecorationStyle | 設置或返回線條的樣式文本裝飾 | 3 |
textIndent | 設置或返回文本的第一行的縮進 | 1 |
textJustify | 設置或返回使用的正當理由方法時的text-align是"justify" | 3 |
textOverflow | 當文本溢出包含的元素設置或返回時發生什麼 | 3 |
textShadow | 設置或返回文本的陰影效果 | 3 |
textTransform | 設置或返回文本的大小寫 | 1 |
top | 設置或返回定位元素的頂部位置 | 2 |
transform | 適用的2D或3D變換到元件 | 3 |
transformOrigin | 設置或返回變換元件的位置 | 3 |
transformStyle | 設置或返回如何嵌套的元素呈現在3D空間 | 3 |
transition | 速記屬性設置或返回四個轉變性質 | 3 |
transitionProperty | 設置或返回CSS屬性的過渡效果是 | 3 |
transitionDuration | 設置或返回過渡效果多少秒或毫秒需要完成 | 3 |
transitionTimingFunction | 設置或返回的過渡效果的速度曲線 | 3 |
transitionDelay | 設置或返回時,過渡效果將開始 | 3 |
unicodeBidi | 設置或返回文本是否應被重寫,支持多國語言在同一個文檔中 | 2 |
verticalAlign | 設置或返回中的一個元素的內容的垂直取向 | 1 |
visibility | 設置或返回元素是否應該可見 | 2 |
whiteSpace | 設置或返回如何處理製表符,換行符和空白文本 | 1 |
width | 設置或返回元件的寬度 | 1 |
wordBreak | 設置或返回行非CJK腳本打破規則 | 3 |
wordSpacing | 設置或返回字間距文本 | 1 |
wordWrap | 允許長,不易破損的話被打破,並換到下一行 | 3 |
widows | 設置或返回的最小行數必須在頁面的頂部是可見的元素 | 2 |
zIndex | 設置或返回定位元素的堆疊順序 | 2 |
相關頁面
HTML教程: HTML CSS
CSS教程: CSS教程
HTML參考: HTML <style>標籤
CSS參考: CSS屬性