CSS自訂樣式

標籤：tom   邊框   定義   使用者   置中   border   排列   作用   特性   

CSS自訂樣式1. 自訂字型

先將字型檔放到web伺服器上，需要時自動下載到使用者電腦上

屬性：@font-face例： @font-face{        font-family:myFont;        src:url("自訂字型路徑");    }p{font-family:myFont;}

注意：一次只能引入一種字型，引入多種字型需要寫多個@font-face。

2. sprite雪碧圖

CSS雪碧，即CSS Sprite，是將小表徵圖和背景合成到一張圖片上，利用CSS背景定位來顯示需要顯示的圖片部分。使用CSS的background和background-position屬性渲染。圖片是在CSS中定位，不是<img>標籤。

CSS優先順序和權重值1. 優先順序：即層疊順序2. 權重值

權重值	a	b	c	d
內嵌樣式	1	0	0	0
ID選取器	0	1	0	0
類、偽類、屬性	0	0	1	0
元素選取器	0	0	0	1

通用選取器(*),子選取器(>)和兄弟選取器(+，~)權重值均為0000

!important可以使其他選取器均失效寫法：{color:red!important}

CSS盒模型1.1 一個獨立盒子的內部結構

1.內容： 2.padding：內邊距 3.border:邊框 4:margin:外邊框

1.1.1 padding外邊距

元素邊框與元素內容之間的空白地區（同border用法類似，沒有負值，負值不起作用）

padding-top       上padding-right     右padding-bottom    下padding-left      左

1.1.2 margin外邊距（同padding用法類似，值可以為負）

margin的置中屬性：margin:o auto;  可以讓區塊層級元素水平置中，需設定寬度

1.1.3 border邊框

透明邊框：  border-color:transparent

1.1.4 兩種盒模型的區別

W3C標準盒子模型：元素空間高度：content+padding+border+marginIE盒子模型：元素空間高度：content+margin

1.2 多個盒子之間的相互關係1.2.1 DOM樹1.2.2 常規流布局，即文檔流。1.2.3浮動

屬性：float:left,right,none,inherit說明：left,right常用；inherit表示從父元素繼承浮動屬性的值

浮動的特性：
1.會造成父級元素高度的崩塌（前提父級元素沒有設定高度）；父級元素崩塌後，後面的元素自動排文到上面去，但是文字不會（即不會被浮動的塊元素覆蓋），文字會自動環繞在四周。
2.對兄弟元素的位置影響

1.2.4 清除浮動

1 overflow:hidden2 清除浮動 clear 屬性（both,left,right,none）3 :after{    content:"";    display:block;    clear：both;   }

說明：第二種是先在父元素裡設定一個新標籤，再給新添加的標籤設定一個樣式。

CSS自訂樣式