前言
I am a slow walker,but I never walk backwards.
CSS(層疊樣式表)
- CSS是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態(tài)修飾網(wǎng)頁卡睦，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁哥元素進行格式化诈嘿。
- CSS能夠?qū)W(wǎng)頁中元素位置的排版進行像素精確控制双仍，幾乎支持所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。
CSS 尺寸屬性(Dimension)
height 設(shè)置元素高度
width 設(shè)置元素寬度
max-height 設(shè)置元素的最大高度
max-width 設(shè)置元素的最大寬度
min-height 設(shè)置元素的最小高度
min-width 設(shè)置元素的最小寬度
CSS 背景屬性(Background)
background 在一個聲明中設(shè)置所有的背景屬性
background-color 設(shè)置元素的背景顏色
background-image 設(shè)置元素的背景圖片
-
background-position 設(shè)置背景圖片的位置
-
top 上方
-
right 右方
-
left 左方
-
center 中間
-
background-repeat 設(shè)置背景圖片的重復(fù)方式
-
repeat 全部重復(fù)
-
repeat-x 橫向重復(fù)
-
repeat-y 縱向重復(fù)
-
no-repeat 不重復(fù)
background-attachment 背景圖片是否隨著頁面的滾動而滾動
CSS邊框?qū)傩?Border和Outline)
| 屬性 |
描述 |
| border |
設(shè)置所有的邊框?qū)傩?/td>
|
| border-bottom |
設(shè)置下邊框 |
| border-bottom-color |
設(shè)置下邊框的顏色 |
| border-botton-style |
設(shè)置下邊框的樣式 |
| border-botton-width |
設(shè)置下邊框的寬度 |
| border-color |
設(shè)置四條邊框的顏色 |
| border-left |
設(shè)置左邊框 |
| border-left-color |
設(shè)置左邊框的顏色 |
| border-left-style |
設(shè)置左邊框的樣式 |
| border-left-width |
設(shè)置左邊框的寬度 |
| border-right- |
設(shè)置右邊框 |
| border-right-color |
設(shè)置右邊框的顏色 |
| border-right-style |
設(shè)置右邊框的樣式 |
| border-right-width |
設(shè)置右邊框的寬度 |
| border-style |
設(shè)置四條邊框的樣式 |
| solid |
樣式為實線 |
| double |
雙實線(寬度為1px 看不見效果) |
| dottde |
點狀線 (在IE6/7下表現(xiàn)為實線) |
| dashed |
虛線(在IE6/7下表現(xiàn)為實線) |
| border-top |
設(shè)置上邊框 |
| border-top-color |
設(shè)置上邊框的顏色 |
| border-top-style |
設(shè)置上邊框的樣式 |
| border-top-width |
設(shè)置上邊框的寬度 |
| border-width |
設(shè)置四條邊框的寬度 |
| outline |
設(shè)置所有的輪廓屬性 |
| outline-color |
設(shè)置輪廓的顏色 |
| outline-style |
設(shè)置輪廓的樣式 |
| outline-width |
設(shè)置輪廓的寬度 |
| border-bottom-left-radius |
定義邊框左下角的形狀 |
| border-bottom-right-radius |
定義邊框右下角的形狀 |
| border-top-left-radius |
定義邊框左上角的形狀 |
| border-top-right-radius |
定義邊框右上角的形狀 |
| border-radius |
簡寫屬性按灶，設(shè)置所有四個border-*-radius屬性 |
| border-image |
簡寫屬性检访，設(shè)置所有border-image-*屬性 |
| border-image-outset |
規(guī)定邊框圖像區(qū)域超出邊框的量 |
| border-image-repeat |
圖像是否應(yīng)平鋪(repeated)始鱼、鋪滿(rounded)或拉伸(stretched) |
| border-image-slice |
規(guī)定圖像邊框的向內(nèi)偏移 |
| border-image-width |
規(guī)定圖片邊框的寬度 |
| border-image-source |
規(guī)定用作邊框的圖片 |
| box-shadow |
向方框添加一個或多個陰影 |
CSS 字體屬性(Font)
| 屬性 |
描述 |
| font |
設(shè)置所有的字體屬性 |
| font-family |
設(shè)置文字的字體系列 |
| font-size |
設(shè)置文字的字體尺寸 |
| font-size-adjust |
為元素規(guī)定aspect值 |
| font-stretch |
收縮或拉伸當前的字體系列 |
| font-style |
設(shè)置文字的字體樣式 |
| font-variant |
設(shè)置文字中英文的打開方式 |
| font-weight |
設(shè)置文字粗細 |
-
text-align 設(shè)置文字的對齊方式
-
center 居中 left 左對齊 right 右對齊
-
letter-spacing 設(shè)置文字間距
-
text-decoration設(shè)置文字修飾線
-
none 主要用于去除 a 標簽的下劃線
-
underline 下劃線
-
overline 上劃線
-
line-through 刪除線
注意：如果一個子元素放置另一個元素(父元素)內(nèi)，給父元素設(shè)置 text-decoration 會發(fā)現(xiàn)子元素的text-decoration無法清除干凈
- 解決方案：
1脆贵、使用絕對定位 position: ansolute
2医清、設(shè)置浮動 float
-
text-transform 設(shè)置大小寫轉(zhuǎn)換
-
uppercase 所有單詞全部大寫
-
lowercase 所有單詞全部小寫
-
capitalize 將首字母進行大寫
-
font-style 設(shè)置文字樣式
-
normal 正常
-
italic 斜體字
-
oblique 傾斜的文字
-
font-variant設(shè)置文字中英文的打開方式
-
nomal 正常
-
small-caos 英文編程大寫，并以小字號進行展示
CSS 文本屬性(Text)
| 屬性 |
描述 |
| color |
設(shè)置文本的顏色 |
| direction |
規(guī)定文本的方向/書寫方向 |
| letter-spacing |
設(shè)置字符間距 |
| line-height |
設(shè)置行高 |
| text-align |
規(guī)定文本的水平對齊方式 |
| vertical-align |
規(guī)定文本的垂直對齊方式 |
| text-decoration |
規(guī)定添加到文本的裝飾效果 |
| text-indent |
規(guī)定文本首行的縮進 |
| tex-transform |
控制文本的大小寫 |
| unicode-bidi |
設(shè)置文本方向 |
| white-space |
規(guī)定如何處理元素中的空白 |
| word-spacing |
設(shè)置單詞間距 |
CSS 表格屬性（Table）
| 屬性 |
描述 |
| border |
設(shè)置邊框 |
| border-color |
設(shè)置邊框顏色 |
| cellspacing |
設(shè)置表格框線的寬度 |
| cellpadding |
設(shè)置數(shù)據(jù)與框線的距離 |
| background-color |
設(shè)置表格的背景顏色 |
| background-url |
設(shè)置表格的背景圖片 |
| colspan |
橫向合并單元格 |
| rowspan |
縱向合并單元格 |
合并單元格的四部曲
1卖氨、確定單元格從那個單元格開始合并
2会烙、確定單元格是縱向合并還是橫向合并
3、確定需要合并幾個單元格
4筒捺、處理多余的單元格
CSS列表屬性(List)
| 屬性 |
描述 |
| list-style |
在一個聲明中設(shè)置所有的列表屬性 |
| list-style-image |
將圖像設(shè)置為列表項標記 |
| list-style-position |
設(shè)置列表項標記的放置位置 |
| inside |
將列表樣式放入content中 |
| outside |
默認柏腻，列表樣式不在content中，一般在psdding內(nèi) |
| list-style-type |
設(shè)置列表項標記的類型 |
- 復(fù)合寫法
-
list-style 1系吭、類型 2五嫂、位置 3、圖片
- 清除默認樣式
padding: 0px;margin:0px;list-style:none;
CSS 外邊距屬性（Margin）
| 屬性 |
描述 |
| margin |
在一個聲明中設(shè)置所有外邊距屬性 |
| margin-top |
設(shè)置元素的上外邊距 |
| margin-right |
設(shè)置元素的右外邊距 |
| margin-bottom |
設(shè)置元素的下外邊距 |
| margin-left |
設(shè)置元素的左外邊距 |
CSS 內(nèi)邊距屬性（Padding）
| 屬性 |
描述 |
| padding |
在一個聲明中設(shè)置所有內(nèi)邊距屬性 |
| padding-top |
設(shè)置元素的上內(nèi)邊距 |
| padding-right |
設(shè)置元素的右內(nèi)邊距 |
| padding-bottom |
設(shè)置元素的下內(nèi)邊距 |
| padding-left |
設(shè)置元素的左內(nèi)邊距 |
CSS 定位屬性（Positioning）
| 屬性 |
描述 |
| position |
規(guī)定元素的定位類型 |
| bottom |
設(shè)置定位元素下外邊距邊界與其包含塊下邊界之間的偏移 |
| right |
設(shè)置定位元素右外邊距邊界與其包含塊右邊界之間的偏移 |
| left |
設(shè)置定位元素左外邊距邊界與其包含塊左邊界之間的偏移 |
| top |
設(shè)置定位元素上外邊距邊界與其包含塊上邊界之間的偏移 |
| overflow |
規(guī)定當內(nèi)容溢出元素框時發(fā)生的事情 |
| cursor |
規(guī)定要顯示的光標的類型 |
| float |
規(guī)定框是否應(yīng)該浮動 |
| display |
規(guī)定元素應(yīng)該生成的框的類型 |
| vertical-align |
設(shè)置元素的垂直對齊方式 |
| visibility |
規(guī)定元素是否可見 |
| z-index |
設(shè)置元素的堆疊順序 |
CSS 偽類（Pseudo-classes）
| 屬性 |
描述 |
| ：active |
向被激活的元素添加樣式 |
| ：focus |
向擁有鍵盤輸入焦點的元素添加樣式 |
| ：hover |
當鼠標懸浮在元素上方時，向元素添加樣式 |
| ：link |
向未被訪問的鏈接添加樣式 |
| ：visited |
向已被訪問的鏈接添加樣式 |
| ：lang |
向帶有指定lang屬性的元素添加樣式 |
CSS 為元素（Pseudo elements）
| 屬性 |
描述 |
| ：first-letter |
向文本的第一個字母添加特殊樣式 |
| ：first-line |
向文本的首行添加特殊樣式 |
| ：bofore |
在元素之前添加內(nèi)容 |
| ：after |
在元素之后添加內(nèi)容 |
結(jié)束語
簡單不先于復(fù)雜沃缘，而是在復(fù)雜之后
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
