css經常使用的屬性方法 上篇

本身是從java後臺自學轉前端的，因此平時一些簡單的css+html就不寫了，列出的都是新手經常使用的一些屬性，會持續更新，大神勿噴，留給新手作個參考！

尤爲是跟我同樣自學前端的。

 

 

背景關聯

background-attachment 屬性body { background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat; }

 

CSS 背景屬性

屬性	描述
background	簡寫屬性，做用是將背景屬性設置在一個聲明中。
background-attachment	背景圖像是否固定或者隨着頁面的其他部分滾動。
background-color	設置元素的背景顏色。
background-image	把圖像設置爲背景。
background-position	設置背景圖像的起始位置。
background-repeat

 

縮進文本

text-indent 屬性禁止文本換行：

p

{

white-space: nowrap

}

字間隔

word-spacing 屬性p.spread {word-spacing: 30px;} p.tight {word-spacing: -0.5em;} <p class="spread"> This is a paragraph. The spaces between words will be increased. </p> <p class="tight"> This is a paragraph. The spaces between words will be decreased. </p>

 

 

 

CSS列表

CSS 列表屬性(list)

屬性	描述
list-style	簡寫屬性。用於把全部用於列表的屬性設置於一個聲明中。
list-style-image	將圖象設置爲列表項標誌。
list-style-position	設置列表中列表項標誌的位置。
list-style-type	設置列表項標誌的類型。

 

，可使用屬性  list-style-type

值	描述
none	無標記。
disc	默認。標記是實心圓。
circle	標記是空心圓。
square	標記是實心方塊。
decimal	標記是數字。
decimal-leading-zero	0開頭的數字標記。(01, 02, 03, 等。)
lower-roman	小寫羅馬數字(i, ii, iii, iv, v, 等。)
upper-roman	大寫羅馬數字(I, II, III, IV, V, 等。)
lower-alpha	小寫英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	大寫英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek	小寫希臘字母(alpha, beta, gamma, 等。)
lower-latin	小寫拉丁字母(a, b, c, d, e, 等。)
upper-latin	大寫拉丁字母(A, B, C, D, E, 等。)
hebrew	傳統的希伯來編號方式
armenian	傳統的亞美尼亞編號方式
georgian	傳統的喬治亞編號方式(an, ban, gan, 等。)
cjk-ideographic	簡單的表意數字
hiragana	標記是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana	標記是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha	標記是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha	標記是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

 

 

 

一、border

若是須要把倆條重複的邊框顯示爲單條邊框就使用table { border-collapse:collapse; } table,th, td { border: 1px solid black; }

 

CSS Table 屬性

屬性	描述
border-collapse	設置是否把表格邊框合併爲單一的邊框。
border-spacing	設置分隔單元格邊框的距離。
caption-side	設置表格標題的位置。
empty-cells	設置是否顯示錶格中的空單元格。
table-layout	設置顯示單元、行和列的算法。

 

CSS 邊框屬性

屬性	描述	CSS
outline	在一個聲明中設置全部的輪廓屬性。	2
outline-color	設置輪廓的顏色。	2
outline-style	設置輪廓的樣式。	2
outline-width	設置輪廓的寬度。	2

 

 

屬性	描述
position	把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。
top	定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
right	定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。
bottom	定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。
left	定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。
overflow	設置當元素的內容溢出其區域時發生的事情。
clip	設置元素的形狀。元素被剪入這個形狀之中，而後顯示出來。
vertical-align	設置元素的垂直對齊方式。
z-index

 

static

relative

absolute

fixed

提示：

overflow: scroll；不管框內是否放的下內容都會出現一種滾動機制；

 

設置元素形狀：

clip:rect(0px 50px 200px 0px)；

 

 

重疊：z-index

 

 

 

CSS 選擇器參考手冊

選擇器	描述
[attribute]	用於選取帶有指定屬性的元素。
[attribute=value]	用於選取帶有指定屬性和值的元素。
[attribute~=value]	用於選取屬性值中包含指定詞彙的元素。
[attribute|=value]	用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。
[attribute^=value]	匹配屬性值以指定值開頭的每一個元素。
[attribute$=value]	匹配屬性值以指定值結尾的每一個元素。
[attribute*=value]	匹配屬性值中包含指定值的每一個元素。

爲了將同時有 href 和 title 屬性的 HTML 超連接的文本設置爲紅色，能夠這樣寫：

a[href][title] {color:red;}

 

 

根據具體屬性值選擇

例子 1

 

屬性	描述	CSS
:active	向被激活的元素添加樣式。	1
:focus	向擁有鍵盤輸入焦點的元素添加樣式。	2
:hover	當鼠標懸浮在元素上方時，向元素添加樣式。	1
:link	向未被訪問的連接添加樣式。	1
:visited	向已被訪問的連接添加樣式。	1
:first-child	向元素的第一個子元素添加樣式。	2
:lang	向帶有指定 lang 屬性的元素添加樣式。	2

 

註釋：註釋：