css文字相關的屬性

浮動

邊框

背景

列表

CSS屬性

屬性：屬性是指定選擇符所具有的屬性，它是css的核心，css2共有150多個屬性
屬性值：屬性值包括法定屬性值及常見的數值加單位，如25px，或顏色值等。

文字屬性

1:文字大小 font-size

說明：
	1） 屬性值為數值型時，必須給屬性值加單位，屬性值為0時除外。
	2）單位還可以是pt，9pt=12px;
	3）為了減小系統間的字型顯示差異，IE Netscape Mozilla的瀏覽器製作商於1999年召開會議，共同確定16px/ppi為標準字型大小預設值,即1em.預設情況下，1em=16px,0.75em=12px;
	4）使用絕對大小關鍵字
         xx-small =9px
         x-small =11px
         small =13px
         medium =16px
         large =19px
         x-large =23px
         xx-large =27px
 

2:文字顏色 color

說明：

用十六進位制(是計算機中資料的一種表示方法)表示顏色值：
	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

3:文字型別 font-family:字型1，字型2，字型3......

說明：
	瀏覽器首先會尋找字型1、如存在就使用改字型來顯示內容，如在字型1不存在的情況下，則會尋找字型2，如字型2也不存在，按字型3顯示內容，如果字型3 也不存在；則按系統預設字型顯示；
	當字型是中文字型時，需加雙引號；
	當英文字型中有空格時，需加雙引號如（“Times New Roman”）
	當英文字型只有一個單片語成是不加雙引號；如：（Arial）；
	Windows中文版本作業系統下，中文預設字型為宋體或者新宋體，英文字型預設為Arial.
 

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

說明：

在css規範中，把字型的粗細分為9個等級，分別為100——900，其中100對應最輕的字型變形，而900對應最重的字型變形，
100-400 一般 500常規字型 600-900加粗字型

5:font-style：italic/oblique/normal（取消傾斜，常規顯示）;

說明：

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

7:文字行高 {line-height:normal/value;}

說明：
當單行文字的行高等於容器高時，可實現單行文字在容器中垂直方向居中對齊；
當單行文字的行高小於容器高時，可實現單行文字在容器中垂直中齊以上；
當單行文字的行高大於容器高時，可實現單行文字在容器中垂直中齊以下（IE6及以下版本存在瀏覽器相容問題）
*文字屬性簡寫：font:12px/24px "宋體";
font屬性的簡寫：字號，行高，字型
font-size:12px; line-height:24px; font-family:”宋體”；
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 , 他們會使用預設值（預設值）。

8：水平對齊方式

text-align:left/right/center/justify（兩端對齊中文不起作用）

9:文字修飾

text-decoration:
說明：
	none:沒有修飾
	underline:新增下劃線
	overline:新增上劃線
	line-through:新增刪除線

10:首行縮排

1）text-indent可以取負值；
2）text-indent屬性只對第一行起作用。

11:字間距、詞間距

字間距{letter-spacing:value;}控制英文字母或漢字的字距。

詞間距{word-spacing:value;}控制英文單詞詞距。

12:檢索或設定物件中的文字的大小寫(只對英文起作用)

{text-transform:none/capitalize/uppercase/lowercase} 
capitalize:首字母大寫;uppercase:全部大寫;lowercase:全部小寫 


font-variant：屬性設定小型大寫字母的字型顯示，意味著所有的小寫字母均會被轉換為大寫，但是所有使用小型大寫字型的字母與其餘文字相比，其字型尺寸更小
font-variant:small-caps瀏覽器會顯示小型大寫字母的字型
normal：預設值。瀏覽器顯示一個標準的字型
例：把段落設定為小型大寫字母字型：
p.small {font-variant: small-caps}
<p class="small">This is a paragraph</p>

13:垂直對齊方式

{vertical-align:top/bottom/middle;}
說明：圖文排列中常用；此屬性無法單獨使用，需要支援的條件； 只會對inline-block元素型別起作用；

列表屬性

1、定義列表符號樣式

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

2、使用圖片作為列表符號

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

3、定義列表符號的位置

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

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

邊框屬性

border:邊框寬度 邊框風格 邊框顏色;
	例如：border:5px solid #ff0000


邊框：border,網頁中很多修飾性線條都是由邊框來實現的。
邊框寬度：border-width:
邊框顏色：border-color:
邊框樣式：border-style:solid(實線)/dashed(虛線)dotted(點劃線)double(雙線) none(沒有線)可單獨設定一方向邊框，



可單獨設定一方向邊框，
    border-bottom:邊框寬度 邊框風格 邊框顏色;  底邊框
    border-left:邊框寬度 邊框風格 邊框顏色;   左邊框
    border-right:邊框寬度 邊框風格 邊框顏色;  右邊框
    border-top:邊框寬度 邊框風格 邊框顏色;   上邊框

背景屬性

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

• 2、背景圖片的設定 background-image：url(背景圖片的路徑及全稱)；背景圖片的顯示原則
  1）容器尺寸等於圖片尺寸，背景圖片正好顯示在容器中
  2）容器尺寸大於圖片尺寸，背景圖片將預設平鋪，直至鋪滿元素；
  3）容器尺寸小於圖片尺寸，只顯示元素範圍以內的背景圖。
  網頁上有兩種圖片形式：插入圖片、背景圖；
  插入圖片：屬於網頁內容，也就是結構。
  背景圖：屬於網頁的表現，背景圖上可以顯示文字、插入圖片、表格等。

• 3、背景圖片平鋪屬性{background-repeat:no-repeat/repeat/repeat-x/repeat-y }

• 4、背景圖的位置 性{background-position:left/center/right/數值 top/center/bottom/數值;}水平方向上的對齊方式（left/center/right）或值
  垂直方向上的對齊方式(top/center/bottom)或值
  background-position:值1 值2;
  兩個值 ：第一個值表示水平位置的值，第二個值：表示垂直的位置。
  當兩個值都是center的時候寫一個值就可以代表的是水平位置和垂直位置
  說明：向左方向，向上方向是負值
  背景屬性的縮寫語法：
  background:屬性值1 屬性值2 屬性值3；
  背景縮寫：background:url（背景圖片的路徑及全稱） no-repeat center top #f00；

  網頁上常用的圖片格式（壓縮圖片）
  1)jpg :有失真壓縮格式，靠損失圖片本身的質量來減小圖片的體積，適用於顏色豐富的影象;(畫素點組成的，畫素點越多會越清晰 )如果網頁中
  2）gif：有失真壓縮格式，靠損失圖片的色彩數量來減小圖片的體積，支援透明，支援動畫，適用於顏色數量較少的影象;
  3)png:有失真壓縮格式，損失圖片的色彩數量來減小圖片的體積，支援透明，不支援動畫，是fireworks的 原始檔格式，適用於顏色數量較少的影象;

• 5、背景圖的固定 性{{background-attachment:scroll(滾動)/fixed(固定);}fixed 固定，不隨內容一塊滾動；
  scroll:隨內容一塊滾動。

浮動

語法：float:none/left/right;

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

浮動框是脫離了普通的文件流

常見的浮動現象：

清除浮動屬性

語法：{clear： ;}

屬性值：none： 允許兩邊都可以有浮動物件

both： 清除元素兩邊浮動

left： 清除元素左邊浮動

right: 清除元素右邊浮動

清除浮動方法

1，在想清除的浮動元素後面新增一個空元素，並給這個空元素新增一個樣式屬性，clear: both;

高度自適應詳細說明

2，通過：after為父容器新增一個後置偽元素，並通過display: block;轉換成塊元素，在設定clear: both;以達到清楚子元素浮動的效果*/

/overflow:hidden，控制元素內容移除，可以將溢位元素內容隱藏。/

.clearfix:after{ content: "."; display: block; clear: both; font-size: 1px;/將文字設定到最小，為了解決一些老版本瀏覽器文字預設高度的問題/ height: 0px; overflow:hidden;visibility:hidden;}

什麼情況下需要清浮動

最外面的盒子給了固定的高所以沒清除浮動，如果最外面的盒子不給高，出現高度塌陷，需要清除浮動

css屬性繼承

不可繼承的：display、margin、border、padding、background、height、min-height、max- height、、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align

所有元素可繼承：visibility和cursor。
內聯元素可繼承：letter-spacing、word-spacing、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform。
塊狀元素可繼承：text-indent和text-align
列表元素可繼承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可繼承：border-collapse。