千锋前端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 不浮动

浮动的特色：

浮动以后 元素是不占据空间的。

同级元素横向排列，须要给当前全部的同级元素都添加浮动。