學(xué)習(xí)前端首先要慢慢的了解了html的基本用法，從開始的懵懂，變成了現(xiàn)在的小入門。每天的學(xué)習(xí)屬性不多，但是每個(gè)屬性卻有多個(gè)屬性值，這些天學(xué)習(xí)下來，感覺html的標(biāo)簽多需要記憶和理解標(biāo)簽的用法。總體上感覺不難，只要多記，多練習(xí)。下面給大家分享長沙前端HTML5培訓(xùn)班前端學(xué)習(xí)路線知識(shí)點(diǎn) ：

1、css常用的文本屬性：

css作用：渲染頁面

見過的屬性：

width:

height:

background:

border:

color:

css語法：

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

屬性值：常規(guī)屬性值、法定屬性值

常規(guī)屬性值：300px

法定屬性值：官方提出某一個(gè)單詞，單詞代表某一個(gè)意思。

文本屬性：

a、文本大小的設(shè)置：

font-size:

a: 系統(tǒng)為了統(tǒng)一文本大小，規(guī)定16px文本為默認(rèn)大小。

b: 文本大小在設(shè)置的時(shí)候，一定設(shè)置成偶數(shù)（別低于12px）

c: 文本大小在設(shè)計(jì)圖里面的獲取，量文本的高度即可。

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

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

默認(rèn)情況下：1em == 16px;

em其他應(yīng)用：

line-height(行高)

line-height:2em; （根據(jù)自身font-size的值確定）

在設(shè)計(jì)圖里面行高怎么獲取：從一行的頂端到下面一行的頂端

e: pt 磅 一般用在印刷領(lǐng)域。

9pt == 12px

f: 使用法定字號(hào)：

xx-small == 9px

x-small == 11px

small == 13px

medium == 16px

large == 19px

x-large == 23px

xx-large == 27px

b、設(shè)置文本顏色：

color:

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

十六進(jìn)制顏色值：

0123456789abcdef

#六位或者三位16進(jìn)制數(shù)字。

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

實(shí)現(xiàn):#ffdd00 簡寫 #fd0

ff 代表紅色

dd 代表綠色

00 代表藍(lán)色

rgb模式：

rgb(245,245,245)

c、設(shè)置字體：（ 宋體 ）

為了統(tǒng)一文字間的差異：默認(rèn)字體（微軟雅黑）

font-family:多個(gè)屬性值的時(shí)候是用逗號(hào)隔開

系統(tǒng)能支持的字體：web安全字體。

英文默認(rèn)的字體:Arial。

font-family屬性值是中文需要放在引號(hào)里面，英文字體多個(gè)單 詞，也需要放在引號(hào)里面。

一個(gè)英文字體的單詞，不需要放在引號(hào)里面。

如果存在中英文字體：先寫英文再寫中文字體。

d、設(shè)置文本的加粗 font-weight

屬性值：

bold 加粗

bolder 更粗的（系統(tǒng)顯示的不明顯）

normal 恢復(fù)常規(guī)文本

分成9個(gè)等級：

100

200

300

...

900

100 - 500 常規(guī)狀態(tài)

600 - 900 加粗狀態(tài)

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

屬性值：

normal 恢復(fù)常規(guī)文本

italic 文本傾斜

oblique 文本傾斜

f、line-height: 行高

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

b:當(dāng)單行文本的line-height值 和 容器高保持一致，可使文 本在容器里面上下居中。

g、text-align 文本對齊方式

屬性值：

left

right

center

justify ( 兩端對齊 )

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

屬性值：

none 去掉下劃線

underline 下劃線

overline 上劃線

line-through 刪除線

blink 閃爍（不被支持）

i、首行縮進(jìn) text-indent:

text-indent:2em;

text-indent能接收負(fù)值（懸掛縮進(jìn)）

j、letter-spacing 字符間距

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

2、text-transform:

屬性值：

capitalize 首字母大寫

uppercase 全部大寫

lowercase 全部小寫

3、css列表屬性

控制列表符號(hào)：

list-style-type:

屬性值：circle、square ...

list-style-type:none;

list-style-image:url();

list-style-position: 控制的列表符號(hào)的位置

屬性值：

inside

outside

list-style:none 去掉列表符號(hào)

4、背景屬性

背景屬性：

background 簡寫（復(fù)合式寫法）

背景顏色：

background-color:

背景圖：

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

背景圖的顯示（默認(rèn)）：

特點(diǎn)：背景圖是不占據(jù)空間的，跟隨容器大小變化。

a: 當(dāng)容器大小 大于 背景圖大小 平鋪狀態(tài)

b: 當(dāng)容器大小 等于 背景圖大小 只能顯示一張

c: 當(dāng)容器大小 小于 背景圖大小 只能顯示容器的區(qū)域

背景圖的顯示狀態(tài)：

background-repeat:

屬性值：

no-repeat

repeat

repeat-x

repeat-y

背景圖片的位置：

background-position:

屬性值：（正值往下往右 負(fù)值往左往上）

第一個(gè)值左右距離 第二個(gè)值上下距離

可指定方位值：

left(背景圖左側(cè)貼著容器左側(cè))

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

right top

center center

常用的簡寫形式：

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

擴(kuò)展：

background-attachment:

背景圖的固定：

屬性值 ： fixed、scroll

5、浮動(dòng)

float屬性

浮動(dòng)：

屬性值：

left 左浮動(dòng)

right 右浮動(dòng)

none 不浮動(dòng)

浮動(dòng)的特點(diǎn)：

浮動(dòng)之后 元素是不占據(jù)空間的。

同級元素橫向排列，需要給當(dāng)前所有的同級元素都添加浮動(dòng)。

上一篇

長沙HTML5培訓(xùn)學(xué)什么？HTML5語法規(guī)則怎么學(xué)？

下一篇

長沙java培訓(xùn)班Java程序員使用的框架講解