CSS基本知識點

基本樣式以及使用：

Css單位：

1、元素定位的屬性值：

1. Position：一個比較基礎的屬性。

用法：XML元素名{position:[absolute | relative | static ]}

Absolute：在一段文字中定義一個全新的容器，當XML元素的position值定義為absolute時，百偶是整個xml包含的部分將作為一個矩形容器來看待。該矩形容器獨立於原始位置，一額度利於其他視窗。

Relative：該屬性修飾的元素相對於文檔中的原始位置而進行的位移量。採用相對定位的元素本身就為其子項目提供定位的依據。它將按照xml文檔中的定義的順序跟在前面的元素後面，依次向下排。

Static：position的預設值，一個採用這種方式定位的元素不能被定為或二次定為，也不能為其子項目提供定位的一句。他將按照xml文檔中定義的順序，跟在前面的元素後面，依次向下排。

1. Top、left、width、heigh

用法：XML元素{屬性:屬性值}

屬性值形式：數值、百分比、自動。Top、left表示該元素所在位置的左上方的座標位置。如果此時position是absolute，則表示此座標的位置是以瀏覽器視窗好額上一級元素的左上方為原點的。如果為relative，則表示以原始位置的左上方的原點來定義自己的位置，如果為static，則二者均不起作用。Width與height表示元素的寬度與高度。

2、長度值

1） 絕對長度單位：pc(pica) 12point pt(point) 1/72inch mm(millimeter)

cm(centimeter) in(inch)

2） 相對長度單位：px(pixe1) 代表螢幕上的一點 ex 表示字型中字母x的高度

em 表示字型的高度的單位

3） 百分比長度單位：一個比較特殊的單位，百分比的值是相應屬性占該元素的元素的百分率。

3、顏色值

1）十六進位：#336699（格式） r-g-b

2） RGB：RGB的每個數值術語（0，255）

3） 顏色名稱：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red ,silver, teal, white, yellow

4、URL值：background-image list-style-image list-style

 

文本顯示的方式：就是在XML文檔中該文本是否顯示，如果顯示，則以什麼樣式顯示。

文法：XML元素{display:屬性值}

屬性值：

1. block：表示文本在頁面中定義一個矩形地區，以塊的形式顯示出來。塊的大小以來與文本中字元的數量與大小。其位置預設是靠左對齊。
2. line：表示文本在頁面中以行的形式顯示。以他作為屬性值的元素字啊前後不會出現換行，只會在當前的行內加入新的內容和延伸，如果當前行顯示不下，則會軟斷行到下一行顯示。
3. list-item：表示文本在頁面中以列表的形式顯示出來。他和block顯示的方式差不多，只不過文本的前面出現一個項目符號。列表的項目符號的預設面板是disc（實心圓）。用來設定項目符號屬性是list-style-type。值：
   disc（實心圓）circle（空心圓）square（方塊）decimal（十進位數）lower-roman(小寫羅馬數字) upper-roman（大寫羅馬數字）lower-alpha（小寫英文字母）upperalpha（大寫英文字母）
4. none 表述文本在頁面中什麼也不顯示

標記名稱#ID

 

字型顯示方式：

1. font-family 用來設定一種字型的類型。實際上就是字型的名稱。如果字型中有空格，則屬性值需要用雙引號括起來。
2. font-style：用來設定字型的風格。Normal、italic、oblique（另一種斜體形式）
3. font-variant：用來是指將正常文字縮小一半後大寫顯示。屬性值：normal、small-caps
4. font-weight：用來設定字型的對比和亮度。Normal、bold、bolder、lighter、100、200、300、……、900.其中900是最粗的字。
5. font-size：設定字型的代銷。單位：pt(磅)。
6. font

注意：如果子標記不指定文本的字型，則會繼承副標記的字型屬性以及屬性值。

 

文本控制：

1）text-align left right center justify（由左及靠右對齊）

2）text-indent 主要用來定義該元素的第一行的文本縮排量，單位px或pt。主要用於區塊層級元素

3）text-transform：主要用來控制字母的大小寫轉換。屬性值：uppercase、lowercase、capitalize、none

4）text-decoration 主要用來設定一些相關的特性，增加一些有趣的修飾。屬性值：none、underline、overline、line-through、blink(閃爍)

5）vertical-align 主要用來設定文本的垂直對齊。屬性值：baseline、sub、super、top、text-top、Middle、bottom、text-bottom。文法：XML元素{vertical:關鍵字、百分比}或者XML元素{vertical-align:關鍵字、百分比}

6）line-height：用來設定文本之間的行距。文法：XML元素{ line-height:數值 }

7）letter-spacing 控制字元之間的間隔。文法：XML元素{ letter-spacing:數值 }

 

邊框方式：

1. border-style：設定文本使之具有文字框。屬性：none、dotted（虛線）、dash（短線組成的虛線）、solid、double、groove（3D溝槽狀邊框）、ridge(3D脊狀邊框)、insert（3D內嵌邊框）、outset（3D外嵌邊框）
2. border-top-with：文法：XML元素{ border-top-with:數值 }
3. border-right-with：文法：XML元素{ border-right-with:數值 }
4. border-left-with：文法：XML元素{ border-left-with:數值 }
5. border-bottom-with：文法：XML元素{ border-bottom-with:數值 }
6. border-right：文法：XML元素{ border-right:數值 }
7. border-bottom：文法：XML元素{ border-bottom:數值 }
8. border-left：文法：XML元素{ border-left:數值 }
9. border-color：設定邊框的顏色。文法：XML元素{ border-color:顏色 }，顏色可設定一個、兩個（上下、左右）、四個

 

邊緣樣式：單位是像素

1. margin-top：文法：XML元素{ margin-top:數值 }
2. margin-right：文法：XML元素{ margin-right:數值 }
3. margin-bottom：文法：XML元素{ margin-bottom:數值 }
4. margin-left：文法：XML元素{ margin-left :數值 }

 

顏色好而背景樣式：

1. 前景色彩：color
2. 背景色：

• Background-color：關鍵字：transparent（透明）或者顏色值
• Background-image：文法：XML元素{ Background-image :URL("index.gif") }
• Background-repeat：主要用來設定顯示圖片的大小小於提供背景的範圍時候，該圖片是怎樣覆蓋背景。關鍵字：repeat、repeat-x、repeat-y、no-repeat。
• Background-attachment：用來決定背景映像是否雖文本一起滾動。關鍵字：scroll、fixed。
• Background-position：用來確定北京映像相對於前景內容的位置。文法：XML元素{ Background-position:數值 | 百分比 | 關鍵字 }。關鍵字：top、bottom、center、left、right

 

設定滑鼠：

文法：XML元素{ cursor :關鍵字 }。關鍵字：auto、help、wait、text、hand、move、default、ne-resize、nw-resize

 

層疊方式：文法：XML元素{ z-index 整數 或者 auto }整數值越大，越接近頂層。越小，越接近底層。