初探HTML之CSS篇(屬性)

CSS(層疊樣式表)

CSS是一種用來表現HTML或XML等檔案樣式的電腦語言。CSS不僅可以靜態修飾網頁，還可以配合各種指令碼語言動態地對網頁哥元素進行格式化。

CSS能夠對網頁中元素位置的排版進行像素精確控制，幾乎支援所有的字型字型大小樣式，擁有對網頁對象和模型樣式編輯的能力。

CSS 尺寸屬性(Dimension)

height 設定元素高度
width 設定元素寬度
max-height 設定元素的最大高度
max-width 設定元素的最大寬度
min-height 設定元素的最小高度
min-width 設定元素的最小寬度

CSS 背景屬性(Background)

background 在一個聲明中設定所有的背景屬性
background-color 設定元素的背景顏色
background-image 設定元素的背景圖片

background-position 設定背景圖片的位置

top 上方

right 右方

left 左方

center 中間

background-repeat 設定背景圖片的重複方式

repeat 全部重複

repeat-x 橫向重複

repeat-y 縱向重複

no-repeat 不重複
background-attachment 背景圖片是否隨著頁面的滾動而滾動

CSS邊框屬性(Border和Outline)

屬性

描述

border 設定所有的邊框屬性

border-bottom 設定下邊框

border-bottom-color 設定下邊框的顏色

border-botton-style 設定下邊框的樣式

border-botton-width 設定下邊框的寬度

border-color 設定四條邊框的顏色

border-left 設定左邊框

border-left-color 設定左邊框的顏色

border-left-style 設定左邊框的樣式

border-left-width 設定左邊框的寬度

border-right- 設定右邊框

border-right-color 設定右邊框的顏色

border-right-style 設定右邊框的樣式

border-right-width 設定右邊框的寬度

border-style 設定四條邊框的樣式

solid 樣式為實線

double 雙實線(寬度為1px 看不見效果)

dottde 點狀線 (在IE6/7下表現為實線)

dashed 虛線(在IE6/7下表現為實線)

border-top 設定上邊框

border-top-color 設定上邊框的顏色

border-top-style 設定上邊框的樣式

border-top-width 設定上邊框的寬度

border-width 設定四條邊框的寬度

outline 設定所有的輪廓屬性

outline-color 設定輪廓的顏色

outline-style 設定輪廓的樣式

outline-width 設定輪廓的寬度

border-bottom-left-radius 定義邊框左下角的形狀

border-bottom-right-radius 定義邊框右下角的形狀

border-top-left-radius 定義邊框左上方的形狀

border-top-right-radius 定義邊框右上方的形狀

border-radius 簡寫屬性，設定所有四個border-*-radius屬性

border-image 簡寫屬性，設定所有border-image-*屬性

border-image-outset 規定邊框映像地區超出邊框的量

border-image-repeat 映像是否應平鋪(repeated)、鋪滿(rounded)或展開(stretched)

border-image-slice 規定映像邊框的向內位移

border-image-width 規定圖片邊框的寬度

border-image-source 規定用作邊框的圖片

box-shadow 向方框添加一個或多個陰影

CSS 字型屬性(Font)

屬性

描述

font 設定所有的字型屬性

font-family 設定文字的字型系列

font-size 設定文字的字型尺寸

font-size-adjust 為元素規定aspect值

font-stretch 收縮或展開當前的字型系列

font-style 設定文字的字型樣式

font-variant 設定文字中英文的開啟檔案

font-weight 設定文字粗細

text-align 設定文字的對齊

center 置中 left 靠左對齊 right 靠右對齊

letter-spacing 設定文字間距

text-decoration設定文字修飾線

none 主要用於去除 a 標籤的底線

underline 底線

overline 上劃線

line-through 刪除線

注意：如果一個子項目放置另一個元素(父元素)內，給父元素設定 text-decoration 會發現子項目的text-decoration無法清除乾淨

解決方案：
1、使用絕對位置 position: ansolute
2、設定浮動 float

text-transform 設定大小寫轉換

uppercase 所有單詞全部大寫

lowercase 所有單詞全部小寫

capitalize 將首字母進行大寫

font-style 設定文字樣式

normal 正常

italic 斜體字

oblique 傾斜的文字

font-variant設定文字中英文的開啟檔案

nomal 正常

small-caos 英文編程大寫，並以小字型大小進行展示

CSS 文字屬性(Text)

屬性

描述

color 設定文本的顏色

direction 規定文本的方向/書寫方向

letter-spacing 設定字元間距

line-height 設定行高

text-align 規定文本的水平對齊

vertical-align 規定文本的垂直對齊

text-decoration 規定添加到文本的裝飾效果

text-indent 規定文本首行的縮排

tex-transform 控制文本的大小寫

unicode-bidi 設定文本方向

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

word-spacing 設定單詞間距

CSS 表格屬性（Table）

屬性

描述

border 設定邊框

border-color 設定邊框顏色

cellspacing 設定表格框線的寬度

cellpadding 設定資料與框線的距離

background-color 設定表格的背景顏色

background-url 設定表格的背景圖片

colspan 橫向合併儲存格

rowspan 縱向合併儲存格

合併儲存格的四部曲

1、確定儲存格從那個儲存格開始合并
2、確定儲存格是縱向合并還是橫向合并 3、確定需要合并幾個儲存格 4、處理多餘的儲存格

CSS列表屬性(List)

屬性

描述

list-style 在一個聲明中設定所有的列表屬性

list-style-image 將映像設定為清單項目標記

list-style-position 設定清單項目標記的置放位置

inside 將列表樣式放入content中

outside 預設，列表樣式不在content中，一般在psdding內

list-style-type 設定清單項目標記的類型

複合寫法

list-style 1、類型 2、位置 3、圖片

清除預設樣式

padding: 0px;

margin:0px;

list-style:none;

CSS 外邊距屬性（Margin）

屬性

描述

margin 在一個聲明中設定所有外邊距屬性

margin-top 設定元素的上外邊距

margin-right 設定元素的右外邊距

margin-bottom 設定元素的下外邊距

margin-left 設定元素的左外邊距

CSS 內邊距屬性（Padding）

屬性

描述

padding 在一個聲明中設定所有內邊距屬性

padding-top 設定元素的上內邊距

padding-right 設定元素的右內邊距

padding-bottom 設定元素的下內邊距

padding-left 設定元素的左內邊距

CSS 定位屬性（Positioning）

屬性

描述

position 規定元素的定位類型

bottom 設定定位元素下外邊距邊界與其包含塊下邊界之間的位移

right 設定定位元素右外邊距邊界與其包含塊右邊界之間的位移

left 設定定位元素左外邊距邊界與其包含塊左邊界之間的位移

top 設定定位元素上外邊距邊界與其包含塊上邊界之間的位移

overflow 規定當內容溢出元素框時發生的事情

cursor 規定要顯示的游標的類型

float 規定框是否應該浮動

display 規定元素應該產生的框的類型

vertical-align 設定元素的垂直對齊

visibility 規定元素是否可見

z-index 設定元素的堆疊順序

CSS 偽類（Pseudo-classes）

屬性

描述

：active 向被啟用的元素添加樣式

：focus 向擁有鍵盤輸入焦點的元素添加樣式

：hover 當滑鼠懸浮在元素上方時，向元素添加樣式

：link 向未被訪問的連結添加樣式

：visited 向已被訪問的連結添加樣式

：lang 向帶有指定lang屬性的元素添加樣式

CSS 為元素（Pseudo elements）

屬性

描述

：first-letter 向文本的第一個字母添加特殊樣式

：first-line 向文本的首行添加特殊樣式

：bofore 在元素之前新增內容

：after 在元素之後新增內容

結束語

簡單不先於複雜，而是在複雜之後