千锋前端HTML5学员笔记,前端学习路线知识点

学习前端首先要慢慢的了解了html的基本用法,从开始的懵懂,变成了现在的小入门。每天的学习属性不多,但是每个属性却有多个属性值,这些天学习下来,感觉html的标签多需要记忆和理解标签的用法。总体上感觉不难,只要多记,多练习。下面给大家分享前端学习路线知识点:

1、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 单词与单词间距

2、text-transform:

属性值:

capitalize 首字母大写

uppercase 全部大写

lowercase 全部小写

3、css列表属性

控制列表符号:

list-style-type:

属性值:circle、square ...

list-style-type:none;

list-style-image:url();

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

属性值:

inside

outside

list-style:none 去掉列表符号

4、背景属性

背景属性:

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

5、浮动

float属性

浮动:

属性值:

left 左浮动

right 右浮动

none 不浮动

浮动的特点:

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

同级元素横向排列,需要给当前所有的同级元素都添加浮动。

猜你喜欢

转载自blog.51cto.com/14679712/2470124
今日推荐