css那些事兒（1）css簡寫

1.顏色縮寫

css4中顏色表現方式：

• 十六進制 #RRGGBB 如#FF00FF
• RGB函數值的形式 RGB(x,x,x) 其中x能夠爲0-255之間的整數，如RGB(123,0,23)，也能夠是0%-100%之間，但必須是整數，如RGB(%1,20%,0%)
• 顏色名稱 如red
• 用戶系統色盤值 如background、windowtext等

只有十六進制才能夠進行縮寫，還必須是#FF00EE這種每一個顏色是兩個相同數字組成的顏色值才能夠縮寫成#F0E的形式

2.單位值省略

數值爲0時，什麼形式的單位均可以省略 如width:0px;能夠寫成width:0;

3.內外補丁的簡寫

內補丁（padding），外補丁（margin）。

內外補丁有四個屬性：padding-top,padding-right, padding-left, padding-bottom 以及 margin-top……

能夠把四個屬性簡寫成一個padding或margin便可。

根據上右下左的順時針方向可羅列如下四種簡寫方式

• property:value1; 全部邊都是一個值value1
• property:value1 value2; top和bottom值是value1，right和left值是value2
• property:value1 value2 value3; top值是value1，right和left值是value2，bottom值是value3
• property:value1 value2 value3 value4; top值是value1，right值是value2，bottom值是value3，left值是value4

總的來講，根據上右下左的順時針方向來對應值，沒有的則跟對邊的值同樣，對邊也沒有的，則全部的都是一個值

4.邊框的縮寫

邊框屬性（boder）包括邊框大小（boder-width），邊框樣式（boder-style），邊框顏色（boder-color）三個屬性組成。

邊框有四個方向的屬性，即boder-top，boder-right，boder-bottom，boder-left，能夠在boder-width、boder-style、boder-color中體現

1 div{
2     border-width:1px;/*定義邊框4個方向的大小都爲1px*/
3     border-style:solid dashed double;/*定義上邊框爲實線，左右邊框爲虛線，下邊框爲雙線邊框*/
4     border-color: #F00 #000;/*定義上下邊框爲紅色，左右邊框爲黑色*/
5 }

 

四個方向的屬性跟上面內外補丁的規則一致。

5.背景的縮寫

1 body{
2     background-color:red;/*定義背景圖片*/
3     background-image:url(background.gif);/*定義背景圖片*/
4     background-repeat:no-repeat;/*背景圖片無平鋪*/
5     background-attachment:fixed;/*將背景圖片固定，不隨頁面滾動而滾動*/
6     background-position:0,0;/*定義背景圖片的位置，必須先定義背景圖片才生效*/
7 }

縮寫

background:background-color||background-image||background-repeat||background-attachmetn||background-position

不給值時，背景相關屬性的默認值：

1     background-color:transparent;
2     background-image:none;
3     background-repeat:repeat;
4     background-attachment:scroll;
5     background-position:0%,0%;

View Code

6.字體的簡寫

1 body{
2     font-style:italic;/*定義字體爲斜體，默認值（normal）*/
3     font-variant:small-caps;/*定義字體爲小型的大寫字母，針對英文，默認值（normal）*/
4     font-weight:bold;/*將文字加粗，默認值（normal）*/
5     font-size:12px;/*定義字體大小爲12px，默認值（medium）*/
6     line-height:140%;/*定義文字行高爲140%，默認值（normal）*/
7     font-family:"Lucida Grande",sans-serif;/*定義字體名稱，默認值（Times New Roman）*/
8 }

縮寫

font:font-style||font-variant||font-weight||font-size||line-height||font-family

跟背景屬性簡寫不一樣的是文字大小及行高之間並非以空格隔開，而以斜槓隔開。另外font-size和font-family是必不可少的。

7.表的縮寫

有序表（ol），無序表（ul）。一般必不可少的是list-style複合屬性。

1 li{
2     list-style-type:square;/*將列表的預設標記定義爲實心方塊，默認值（disc）*/
3     list-style-position: inside;/*列表項目標記放置在文本之內，且環繞文本根據標記對齊，默認值（outside）*/
4     list-style-image:url(image.gif);/*覆蓋預設標記用image.gif圖片替代，默認值（none）*/
5 }