CSS自定義樣式

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+margin
IE盒子模型：
元素空間高度：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:hidden
2 清除浮動 clear 屬性（both,left,right,none）
3 :after{
    content:"";
    display:block;
    clear：both;
   }

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