好程序員web前端分享CSS屬性組成及做用

好程序員web前端分享CSS屬性組成及做用

學習目標

• 一、css屬性和屬性值的定義
• 二、css文本屬性
• 三、css列表屬性
• 四、css背景屬性
• 五、css邊框屬性
• 六、css浮動屬性

1、css屬性和屬性值的定義

屬性：屬性是指定選擇符所具備的屬性，它是css的核心，css2共有150多個屬性

屬性值：屬性值包括法定屬性值及常見的數值加單位，如25px，或顏色值等。

2、CSS文本屬性

一、文本大小：{font-size:12px;}單位還能夠是em，是父級元素的font-size的倍數；/系統默認的字號大小爲16px

說明：

1） 屬性值爲數值型時，必須給屬性值加單位，屬性值爲0時除外。

2）單位還能夠是pt，9pt=12px;

3）爲了減少系統間的字體顯示差別，IE Netscape Mozilla的瀏覽器製做商於1999年召開會議，共同肯定16px/ppi爲標準字體大小默認值,即1em.默認狀況下，1em=16px,0.75em=12px; rem

 

二、文本字體：{font-family:字體1，字體2，字體3；}

說明：

瀏覽器首先會尋找字體一、如存在就使用改字體來顯示內容，如在字體1不存在的狀況下，則會尋找字體2，如字體2也不存在，按字體3顯示內容，若是字體3 也不存在；則按系統默認字體顯示； 
當字體是中文字體時，需加雙引號；
當英文字體由多個單詞組成時，需加雙引號如（「Times New Roman」）
當英文字體只有一個單詞組成是不加雙引號；如：（Arial）；
Windows中文版本操做系統下，中文默認字體爲宋體或者新宋體，英文字體默認爲Arial.

三、文本顏色：{color:顏色值;}red/#f00/rgb(255,0,0)

說明：

用十六進制(是計算機中數據的一種表示方法)表示顏色值：
0 1 2 3 4 5 6 7 8 9
0 1 2 3 4 5 6 7 8 9 A B C D E F
顏色模式：光色模式
R G B
FF 00 00
顏色值的縮寫：
當表示三原色的三組數字同時相同時，能夠縮寫爲三位;
當用十六進制表示顏色值時，須要在顏色值前加「#」
# fa 00 00

RGB表示方式：color:rgb(255,0,0);

四、文字加粗font-weight:bolder(更粗的)/bold（加粗）/normal（常規）/100—900;

說明：

在css規範中，把字體的粗細分爲9個等級，分別爲100——900，其中100對應最輕的字體變形，而900對應最重的字體變形，

 

五、文本傾斜：font-style：italic/oblique/normal（取消傾斜，常規顯示）;

說明：

italic和oblique都是傾斜的文字, 但區別在於Italic是指斜體字，而Oblique是傾斜的文字，對於沒有斜體的字體應該使用Oblique屬性值來實現傾斜的文字效果.

六、水平對齊方式{text-align:left左/right右/center居中/justify兩端對齊(在部分瀏覽器中，對於中文不起做用);} 只針對文本或圖片

七、垂直對齊方式 {vertical-align:top上/bottom下/middle居中/baseline基線（某些特定的元素類型起做用）;}

 

八、文字行高 {line-height:normal/value;}line-height:20px; line-height:2em; (當行高的單位省略時，默認爲em)

說明：

當單行文本的行高等於容器高時，可實現單行文本在容器中垂直方向居中對齊；
當單行文本的行高小於容器高時，可實現單行文本在容器中垂直中齊以上；
當單行文本的行高大於容器高時，可實現單行文本在容器中垂直中齊如下（IE6及如下版本存在瀏覽器兼容問題） 

• •  
  •  
  • 九、文本修飾 text-decoration:none/underline/overline/line-through

說明：

none:沒有修飾
underline:添加下劃線
overline:添加上劃線
line-through:添加刪除線

• •  
  • 十、首行縮進：{text-indent:value;}

說明：

1）text-indent能夠取負值；

2）text-indent屬性只對第一行起做用。

• • 十一、檢索英文字母大小寫{text-transform:none無轉換/capitalize首字母大寫/uppercase全都大寫/lowercase全都小寫;}。
  • 十二、字間距{letter-spacing:value;}控制英文字母或漢字的字距。
  • 1三、詞間距{word-spacing:value;}控制英文單詞詞距。
  •  
  •  
  • 擴展：1四、文本流控制{layout-flow:horizontal/vertical-ideographic;}

說明：

1）horizontal:自左向右

2）vertical-ideographic:自上而下

• • 1五、文字屬性簡寫：font:bolder italic 12px/1.5em "宋體";     簡寫時，字體和字號是必備font屬性的簡寫：字號，行高，字體 說明:font的屬性值應按如下次序書寫(各個屬性之間用空格隔開) 順序: font-style font-weight font-size / line-height font-family
  • (1)簡寫時 , font-size和line-height只能經過斜槓/組成一個值，不能分開寫。
  • (2) 這種簡寫法只有在同時指定font-size和font-family屬性時才一塊兒做用,若是你沒有設定font-weight , font-style , 他們會使用缺省值。

3、CSS列表屬性

• • 一、定義列表符號樣式

list-style-type：disc(實心圓)/circle(空心圓)/square(實心方塊)/none(去掉列表符號)；

• • 二、使用圖片做爲列表符號

list-style-image：url(所使用圖片的路徑及全稱)；

• • 三、定義列表符號的位置

list-style-position:outside(外邊)/inside(裏邊)；

list-style:none;去掉列表符號

4、邊框的屬性和屬性值

border:邊框寬度 邊框風格 邊框顏色;

例如：border:5px solid #ff0000

邊框寬度：border-width:

邊框顏色：border-color:

邊框樣式：border-style:solid(實線)/dashed(虛線)dotted(點劃線)double(雙線)none(去掉邊框);

可單獨設置一方向邊框，

border-bottom:邊框寬度 邊框風格 邊框顏色;      底邊框

border-left:邊框寬度 邊框風格 邊框顏色;             左邊框

border-right:邊框寬度 邊框風格 邊框顏色;          右邊框

border-top:邊框寬度 邊框風格 邊框顏色;           上邊框

 

5、CSS背景屬性

一、背景顏色 {background-color:顏色值;}

二、背景圖片的設置 background-image：url(背景圖片的路徑及全稱）；

三、背景圖片平鋪屬{background-repeat:no-repeat不平鋪/repeat平鋪/repeat-x  X軸平鋪/repeat-y   Y軸平鋪 }

四、背景圖的位置{background-position:left/center/right/數值      top/center/bottom/數值;}

 

水平方向上的對齊方式（left/center/right）或值 
垂直方向上的對齊方式(top/center/bottom)或值 
background-position:值1 值2; 
兩個值 ：第一個值表示水平位置的值，第二個值：表示垂直的位置。 
當兩個值都是center的時候寫一個值就能夠表明的是水平位置和垂直位置 ；

當元素小背景圖大的時候，想顯示右下方的背景圖，經過負值來調整背景圖的位置；

五、背景圖的固定{background-attachment:fixed固定/scroll滾動;}

fixed 固定，不隨內容一塊滾動，根據可視窗口固定位置；
scroll:隨內容一塊滾動。
網頁上經常使用的圖片格式
1）jpg :有損壓縮格式，靠損失圖片自己的質量來減少圖片的體積，適用於顏色豐富的圖像;(像素點組成的，像素點越多會越清晰 )
2）gif：無損壓縮格式，支持透明，支持動畫，適用於顏色數量較少的圖像;
3）png:無損壓縮格式，支持透明，不支持動畫，(是fireworks的 源文件格式)，適用於顏色數量較少的圖像; 

6、CSS浮動屬性

語法：float:none/left/right;
浮動的目的：就是讓豎着的元素橫着顯示

一個元素設置float：left/right;時，元素會脫離文檔流（半脫離），不佔空間；
有三個取值：
left:元素向左浮動
right:元素向右浮動
none:默認值，不浮動。

 

清除浮動能夠理解爲打破橫向排列。

清除浮動的屬性是clear，語法：

clear : none | left | right | both

none：默認值。容許兩邊均可以有浮動對象

left：清除左浮動/不容許左邊有浮動對象

right  :  清除右浮動/不容許右邊有浮動對象

both  :  清除兩端浮動/不容許有浮動對象

有一點是要記住的那就是

對於CSS的清除浮動(clear)，必定要牢記：這個規則只能影響使用清除的元素自己，不能影響其餘元素