html5与css3前端学习笔记

一、前端页面开发流程

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

二、CSS 权重

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

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

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

   实例一：

   
   ......
   这是一个 div 元素
   
   

   实例二：

   
   ......
   
       
   
           
   这是一个 h2 标题
       
   
   

 三、CSS3 新增选择器

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

......

    
1
    
2
    
3
    
4
    
5

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 属性 的元素

......
这是一个 div 元素

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 动画

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

CSS3 transform 变换

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

animation 动画

1. @keyframes 定义关键帧动画
2. animation-name 动画名称
3. animation-duration 动画时间
4. animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数)
5. animation-delay 动画延迟
6. animation-iteration-count 动画播放次数 n|infinite
7. animation-direction 动画结束后是否反向还原 normal|alternate
8. animation-play-state 动画状态 paused(停止)|running(运动)
9. animation-fill-mode 动画前后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用)
10. 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 新增标签和新增表单控件

新增语义标签

1. 页面头部、页眉
3. 一篇文章
4. 文章中的章节

音频视频
1、

PC 端兼容 h5 的新标签的方法，在页面中引入以下 js 文件:

新增表单控件 

新增类型：网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索

网址:

 
邮箱:

 
日期:

 
时间:

 
星期:

 
数量: 


范围:

 
电话:

 
颜色:

 
搜索:

新增常用表单控件属性：
1、placeholder 设置文本框默认提示文字
2、autofocus 自动获得焦点
3、autocomplete 联想关键词

八、常用 css 列表