千鋒前端HTML5學員筆記，前端學習路線知識點

學習前端首先要慢慢的瞭解了html的基本用法，從開始的懵懂，變成了如今的小入門。天天的學習屬性很少，可是每一個屬性卻有多個屬性值，這些天學習下來，感受html的標籤多須要記憶和理解標籤的用法。整體上感受不難，只要多記，多練習。下面給你們分享前端學習路線知識點：

一、css經常使用的文本屬性：

css做用：渲染頁面

見過的屬性：

width:

height:

background:

border:

color:

css語法：

選擇符{屬性：屬性值；}

屬性值：常規屬性值、法定屬性值

常規屬性值：300px

法定屬性值：官方提出某一個單詞，單詞表明某一個意思。

文本屬性：

a、文本大小的設置：

font-size:

a: 系統爲了統一文本大小，規定16px文本爲默認大小。

b: 文本大小在設置的時候，必定設置成偶數（別低於12px）

c: 文本大小在設計圖裏面的獲取，量文本的高度便可。

d: em 相對大小，根據父元素font-size的值而定。

例如：父元素font-size:20px; 1em == 20px;

默認狀況下：1em == 16px;

em其餘應用：

line-height(行高)

line-height:2em; （根據自身font-size的值肯定）

在設計圖裏面行高怎麼獲取：從一行的頂端到下面一行的頂端

e: pt 磅 通常用在印刷領域。

9pt == 12px

f: 使用法定字號：

xx-small == 9px

x-small == 11px

small == 13px

medium == 16px

large == 19px

x-large == 23px

xx-large == 27px

b、設置文本顏色：

color:

顏色值：red green blue ......

十六進制顏色值：

0123456789abcdef

#六位或者三位16進制數字。

0帶表最暗的顏色 f表明最亮的顏色。

實現:#ffdd00 簡寫 #fd0

ff 表明紅色

dd 表明綠色

00 表明藍色

rgb模式：

rgb(245,245,245)

c、設置字體：（ 宋體 ）

爲了統一文字間的差別：默認字體（微軟雅黑）

font-family:多個屬性值的時候是用逗號隔開

系統能支持的字體：web安全字體。

英文默認的字體:Arial。

font-family屬性值是中文須要放在引號裏面，英文字體多個單 詞，也須要放在引號裏面。

一個英文字體的單詞，不須要放在引號裏面。

若是存在中英文字體：先寫英文再寫中文字體。

d、設置文本的加粗 font-weight

屬性值：

bold 加粗

bolder 更粗的（系統顯示的不明顯）

normal 恢復常規文本

分紅9個等級：

100

200

300

...

900

100 - 500 常規狀態

600 - 900 加粗狀態

e、控制文本的傾斜 font-style:

屬性值：

normal 恢復常規文本

italic 文本傾斜

oblique 文本傾斜

f、line-height: 行高

a:再設計圖上量取行高:(地一行的開始第二行的頂端)

b:當單行文本的line-height值 和 容器高保持一致，可以使文 本在容器裏面上下居中。

g、text-align 文本對齊方式

屬性值：

left

right

center

justify ( 兩端對齊 )

h、文本修飾屬性 text-decoration:

屬性值：

none 去掉下劃線

underline 下劃線

overline 上劃線

line-through 刪除線

blink 閃爍（不被支持）

i、首行縮進 text-indent:

text-indent:2em;

text-indent能接收負值（懸掛縮進）

j、letter-spacing 字符間距

k、word-spacing 單詞與單詞間距

二、text-transform:

屬性值：

capitalize 首字母大寫

uppercase 所有大寫

lowercase 所有小寫

三、css列表屬性

控制列表符號：

list-style-type:

屬性值：circle、square ...

list-style-type:none;

list-style-image:url();

list-style-position: 控制的列表符號的位置

屬性值：

inside

outside

list-style:none 去掉列表符號

四、背景屬性

背景屬性：

background 簡寫（複合式寫法）

背景顏色：

background-color:

背景圖：

background-image:url('圖片路徑');

背景圖的顯示（默認）：

特色：背景圖是不佔據空間的，跟隨容器大小變化。

a: 當容器大小 大於 背景圖大小 平鋪狀態

b: 當容器大小 等於 背景圖大小 只能顯示一張

c: 當容器大小 小於 背景圖大小 只能顯示容器的區域

背景圖的顯示狀態：

background-repeat:

屬性值：

no-repeat

repeat

repeat-x

repeat-y

背景圖片的位置：

background-position:

屬性值：（正值往下往右 負值往左往上）

第一個值左右距離 第二個值上下距離

可指定方位值：

left(背景圖左側貼着容器左側)

bottom（背景圖貼着容器底部）

right top

center center

經常使用的簡寫形式：

background:背景顏色 url(背景圖) no-repeat center;

擴展：

background-attachment:

背景圖的固定：

屬性值 ： fixed、scroll

五、浮動

float屬性

浮動：

屬性值：

left 左浮動

right 右浮動

none 不浮動

浮動的特色：

浮動以後 元素是不佔據空間的。

同級元素橫向排列，須要給當前全部的同級元素都添加浮動。