操作css樣式

css樣式之屬性操作

一、文字屬性

1.text-align:cnter 文字居中

2.line heigth 垂直居中：行高，和高度對應

4.text-decoration:none 去掉超連結下劃線

5.要是給a標籤修改顏色的時候，就定到a標籤上，用繼承有

時候是搞不定的因為繼承的級別是很低的，如果a標籤設定

了樣式，是不會繼承父親的

6.首行縮排：text-indent:30px

7.font-style:oblique 或者italic…(設定字型的樣式為斜體)

二.字型屬性(type)

font-family(使用什麼字型)

font-style(字型的樣式，是否斜體)：normal/italic/oblique

font-variant(字型大小寫)：normal/small-caps

font-weight(字型的粗細)：normal/bold/bolder/lithter

font-size(字型的大小)：absolute-size/relative-size/length/percentage

三、背景屬性

1.background-color:背景顏色

2.background-image:url(『11.jpg』); 背景鏈結

3.background-repeat:repeat-x; x軸平鋪

4.background-repeat:no-repeat; 不重複

5.background-position:400px 200px 調整背景的位置（距左。距右）

6.background-position: center:center; 背景居中

簡寫：background: url(『11.jpg』) no-repeat center;

四.塊屬性(block)

邊距屬性：

margin-top(設定頂邊距)

margin-right(設定右邊距)

margin-bottom(設定底邊距)

margin-left(設定左邊距)填充距屬性：

padding-top設定頂端真充距)

padding-right設定頂端真充距)

padding-bottom設定頂端真充距)

padding-left設定頂端真充距)

列表屬性

去掉列表前面的標誌：ul li

去掉列表前面的空格：ul

上面兩行也可寫成下面一行

去掉盒子上面的間隙：*

五.邊框屬性(border)

border-top-width(頂端邊框寬度)
border-right-width(右端邊框寬度)
border-bottom-width(底端邊框寬度)
border-left-width(d左邊框寬度)
border-width(一次定義邊框寬度)
border-color(設定邊框顏色)
border-style(設定邊框樣式)
border-top(一次定義頂端各種屬性)
border-right(一次定義右端各種屬性)
border-bottom(一次定義底端各種屬性)
border-left(一次定義左端各種屬性)

**混排：

width(定義寬度屬性)

height(定義高度屬性)

float(文字環繞在乙個元素的四周)

clear(定義某一邊是否有環繞)

六.display屬性

display屬性

1.將塊級標籤設定成內聯標籤：disply：inline;

2.將內聯標籤設定成塊級標籤：disply：block;

3.內聯塊級標籤：像塊級一樣可設長寬，也可像內聯一樣在一行顯示：

display:inline-block;

4.display:none; 吧不想讓使用者看到的給隱藏了（很重要的乙個屬性

）5.visibility :hiddon；也是隱藏

**注意與visibility:hidden的區別：

visibility:hidden：可以隱藏某個元素，但隱藏的元素仍需占用與未

隱藏之前一樣的空間。也就是說，該元素雖然被隱藏

了，但仍

然會影響布局。

display:none：可以隱藏某個元素，且隱藏的元素不會占用任何空

間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間

也會從頁面布局中消失

專案符號和編號(list)

display(定義是否顯示)

white-space(怎樣處理空白部分)：normal/pre/nowrap

list-style-type(在列表前加專案符號)disc(圓點)/circle(圈)/square（方形）

/decimal（阿拉伯數字） /lower-roman(小寫羅馬數字 )/upper-roman(大寫羅馬數

字)/lower-alpha(小寫英文本母)/upper-alpha(大寫英文本母)/nore

list-style-tyle(在列表前加圖案):/none

list-style-position(決定列表項中第二行的起邕位置)

list-style(一次性定義所有屬性)

七、定位（positioning）即層屬性

type：設定物件的定位方式。

有三種方式：absolute（絕對定位）、relative（相對定位）、static

（無特殊定位）。相對應的

visibility：設定物件定位層的最初顯示狀態。有三種狀態：inherit（繼承父層的顯示屬性）、 visible（物件可視）、hidden隱藏物件。相對應的 css屬性是」visibility」。 z-index：設定物件的層疊順序。編號較大的層會顯示在編號較小的層上邊。變數值可以是正值也可以是負值。相對應的 css屬性是」z-index」。 overflow：設定如果層的內容超出了層的大小時如何處理。有四種處理方式：visible，增加

層的大小，從而將層的所有內容顯示出來；hidden，保持層的大小不變，將超出層的內容剪裁掉；scroll，總是顯示滾動；auto，只有在內容超出層的邊界時才顯示滾動條。相對應的

css屬性是」overflow」。 placement：設定物件定位層的位置和大小。可以分別設定 lef（t左

邊定位）、top（頂部定位）、width（寬）、height（高）。相對應的 css屬性分別是」left;top;

width;height」。clip：定義定位層的可視區域。區域外的部分為不可視區，為透明的。可

以理解為在定位層上放乙個矩形遮罩的效果。相對應的 css屬性是」clip」。

八、擴充套件（extensions）

pagebreak：在列印的時候強迫在樣式控制的物件前後換頁。 before：設定物件前出現的頁分割符。設定為 always時，始終在物件之前插入頁分割符。相對應的 css屬性是」page- break -before」。

after：設定物件後出現的頁分割符。設定為 always時，始終在物件之後插入頁分割符。相

對應的 css屬性是」』>。

操作css樣式

操作css樣式

JavaScript操作css樣式

CSS樣式基本操作

操作css樣式

操作css樣式

JavaScript操作css樣式

CSS樣式基本操作

相關推薦