html5与css3前端学习笔记

一、前端页面开发流程

创建页面项目目录使用Photoshop对效果图切图，切出网页制作中需要的小图片将装饰类图像合并，制作成雪碧图结合Photoshop和代码编辑器，参照效果图，进行html和css代码书写，制作页面

二、CSS权重

CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用，权重相同的，后写的样式会覆盖前面写的样式。

权重的等级：可以把样式的应用方式分为几个等级，按照等级来计算权重

!important，加在样式属性值后，权重值为 10000内联样式，如：style=””，权重值为1000ID选择器，如：#content，权重值为100类，伪类和属性选择器，如： content、:hover 权重值为10标签选择器和伪元素选择器，如：div、p、:before 权重值为1通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0实例 实例一：

......

实例二：

......

 三、CSS3新增选择器

1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素

......

2、E:first-child：匹配元素类型为E且是父元素的第一个子元素 3、E:last-child：匹配元素类型为E且是父元素的最后一个子元素 4、E > F：E元素下面第一层子集 5、E ~ F：E元素后面的兄弟元素 6、E + F：紧挨着的后面的兄弟元素

属性选择器： 1、E[attr] 含有attr属性的元素

......

2、E[attr='ok'] 含有attr属性的元素且它的值为“ok” 3、E[attr^='ok'] 含有attr属性的元素且它的值的开头含有“ok” 4、E[attr$='ok'] 含有attr属性的元素且它的值的结尾含有“ok” 5、E[attr*='ok'] 含有attr属性的元素且它的值中含有“ok”

 四、CSS3圆角、raba

CSS3圆角：设置某一个角的圆角，比如

设置左上角的圆角：border-top-left-radius:30px 60px;同时分别设置四个角： border-radius:30px 60px 120px 150px;设置四个圆角相同：border-radius:50%;

rgba（新的颜色值表示法）

1、盒子透明度表示法：

.box{

opacity:0.1;

/* 兼容IE */

filter:alpha(opacity=10);

}

2、rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度

五、CSS3 transition动画、transform变换、animation动画

CSS3 transition动画

transition-property：设置过渡的属性，比如：width height background-colortransition-duration：设置过渡的时间，比如：1s 500mstransition-timing-function：设置过渡的运动方式，常用有 linear(匀速)|ease(缓冲运动)transition-delay：设置动画的延迟transition: property duration timing-function delay 同时设置四个属性

CSS3 transform变换

translate(x,y) 设置盒子位移scale(x,y) 设置盒子缩放rotate(deg) 设置盒子旋转skew(x-angle,y-angle) 设置盒子斜切perspective 设置透视距离transform-style flat | preserve-3d 设置盒子是否按3d空间显示translateX、translateY、translateZ 设置三维移动rotateX、rotateY、rotateZ 设置三维旋转scaleX、scaleY、scaleZ 设置三维缩放tranform-origin 设置变形的中心点backface-visibility 设置盒子背面是否可见

animation动画

@keyframes 定义关键帧动画animation-name 动画名称animation-duration 动画时间animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数)animation-delay 动画延迟animation-iteration-count 动画播放次数 n|infiniteanimation-direction 动画结束后是否反向还原 normal|alternateanimation-play-state 动画状态 paused(停止)|running(运动)animation-fill-mode 动画前后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用)animation:name duration timing-function delay iteration-count direction;同时设置多个属性

六、CSS3 浏览器前缀

浏览器样式前缀：为了让CSS3样式兼容，需要将某些样式加上浏览器前缀

-ms- 兼容IE浏览器-moz- 兼容firefox-o- 兼容opera-webkit- 兼容chrome 和 safari

比如：

div

{

-ms-transform: rotate(30deg);

-webkit-transform: rotate(30deg);

-o-transform: rotate(30deg);

-moz-transform: rotate(30deg);

transform: rotate(30deg);

}

自动添加浏览器前缀：目前的状况是，有些CSS3属性需要加前缀，有些不需要加，有些只需要加一部分，这些加前缀的工作可以交给插件来完成，比如安装： autoprefixer，可以在Sublime text中通过package control 安装 autoprefixer

七、HTML5新增标签和新增表单控件

新增语义标签