CSS3和Less

一、认识移动端

原生App

直接运行在操作系统中的应用；智能手机、平板等，目前移动设备两大系统平台：
IOS：Object-c (OC)
Android：java

原生APP的优势：

运行流畅，
所有的资源都在安装包里，下载安装一次，永久可用；

劣势：

可移植性差，不能跨平台，IOS的app只能在IOS运行，Android的app只能在Android系统跑；
时效性差，升级与否决定权在用户手里，如果用户不升级，你做的新功能用户永远不会用；

web App

在浏览器中的HTML5的页面时运行、app里面内嵌的webkit内核；
h5的页面如果需要调用摄像头，通讯录、重力感应器… 需要通过浏览器去调用这些功能；

WebApp 的优点

开发效率高
没有平台限制
服务供应商拥有更新主动权

Hybrid App：
原生app中中嵌 webview(类似浏览器的东西)，业务功能使用html+js完成；

移动端是指运行在移动设备浏览器（或webview）中的h5页面；在移动端没有IE浏览器的兼容性问题，可以使用新技术移动端开发需要我们掌握：

html5新特性
css3新特性
移动端的事件、常用库
本地存储localStorage
geolocation
websocket

二、HTML5新增的标签

HTML 超文本标记语言
XHTML: 更加严谨的标记语言，例如双标签必须闭合、单标签必须使用/ 自闭合，行内属性必须小写、属性值必须使用双引号等。。。
XML 可扩展标记语言

HTML5 在HTML4的基础上新增了很多标签

常用的html标记

块级元素：div p h1-h6 ul li ol table form ..
行内：span a label i br
行内块：input img button

h5为了增强标签的语义化，新增了一些标签

header 头
nav 导航
section 块
footer 底部
figure 图片
figcation: 图片描述
article 文章
mark 高亮
audio 音频
video 视频
….

标签语义化有利于SEO

三、认识less

less是什么？

less是CSS预编译语言，类似的还有 sass styluss等；

less和css的区别：

css 是标记语言，不是编程语言，没有类、示例、函数、变量，开发效率低，可复用和可维护性差；
而less等预编译语言就是让css具备面向对象编程思想，有变量、有函数、有作用域，是浏览器不能识别和渲染less代码，需要我们把less代码先编译为正常css后，再交给浏览器进行解析渲染。

使用less

1. 修改link标签的rel属性

把link标签中的rel属性又stylesheet改为stylesheet/less

<link rel="stylesheet/less" href="less文件">

2. 引入编译js的文件

开发环境编译，只需要引入编译less的js文件即可

<script src="less-2.5.3.min.js"></script>

实际项目中我们使用webpack、gulp或者grunt等打包工具中的less编译等功能在打包的时候自动打包并且插入到页面中；

less语法

原来的css：

.box {
    width: 200px;
    height: 200px;
    background: skyblue;
}
.box a {
  color: red;
}

改写成less

.box {
    .centerPos(200, 200);
    width: 200px;
    height: 200px;
    background: skyblue;
    a {
        color: red;
    }
}

1. less中的变量

less 变量：

存储值代表值，以后再用这个值，使用这个变量即可，如果以需要修改，只需要修改这个变量，那么所有用到这个变量的时候只要用到这个就改了；

声明一个变量：

语法： @变量名

@bg-src:"../img/";  /*使用图片资源变迁引入 变量存储，以及拼接*/
@link-color: #000; /* 可以使用 - */
@wid: 200px;
/*使用变量*/
a {
  color: @link-color;
  width: @wid;
  background: url("@{bg-src}1.jpg") no-repeat center;
}

2. less 中的嵌套语法

less中使用嵌套表示层级；html代码如下

<div class="outer">
    <div class="inner">
        <div class="center"><a href="" class="link"></a></div>
    </div>
</div>

less代码

.outer {
    .inner {
        .center {
            a {
            }
        }
    }
}

在less的嵌套语法中使用 &表示花括号外面的选择器后面紧跟着XX

.pub {

.bg { /*.pub .bg 后代选择器*/
}
& > .bg { /*.pub > .bg 子级选择器*/
}
&.bg { /*.pub.bg 交集选择器*/
}
&:hover { /*.pub:hover 使用伪类*/
}

}

less 嵌套会形成作用域

@width: 100px;
/*嵌套语法，& 使用*/
.pub {
    @width: 200px;
    .bg {
        width: @width;  /*.bg最终的width使用的200px*/
    }
}

less 中使用函数

less中可以声明函数

.transition(@property: all, @duration: .5s, @timing-function: linear, @delay: 0s) {
    transition: @arguments;
}
.cc {
    .transition; /*啥也不传时使用默认值*/
    .transition(@duration: 1s); /*只修改duration*/
}

四、css3中新增特性

border-radius

.box {
    border-radius: 50%;
}

box-shadow: h v blur spread color inset;

h 阴影水平偏移值
v 阴影竖直偏移值
blur 模糊尺寸（可选）
spread 阴影尺寸（可选）
color 阴影颜色（可选）
inset 内置阴影（可选）

.box {
  box-shadow: 5px 5px 10px 10px #000;
}

text-shadow: h-shadow v-shadow blur color;

.box {
    text-shadow: 5px 5px 10px #000;
}

background-size: 值如下

100px 100px 具体值
100% 100% 宽高百分比（相对于所在容器）
cover 以合适的比例把图片整个容器覆盖，但是容器不一定漏出整个图片
contain 保证图片纵横比例不变铺满容器的尺寸较小一个方向，另一边根据图片综合比例计算（当一边铺满后，另一边不一定铺满）

background-clip: 值如下

border-box 裁切到边框
padding-box 裁切到padding
content-box 裁切到内容区域
text 只填充文本（需要-webkit）

五、CSS3过渡动画

<div id="box" class="box"></div>

.box {
      background: #00b38a;
      width: 200px;
      height: 200px;
      transition: all .5s linear 0s;
    }
    #box:hover {
      width: 300px;
      height: 300px;
    }

transition属性

transition: all .5s linear 0s;

transition是一个合成属性，有以下属性合成：

transition-property: 要过渡的属性，默认all
transition-duration: 过渡时间
transition-timing-function: 过渡效果，默认linear
transition-delay: 动画延迟时间

六、CSS3变形动画

CSS3的变形动画需要设置transform属性

transform: skew(0, 45deg);

常见的效果有，可以组合使用：

scale: 缩放
translate: 平移
rotate: 旋转
skew: 倾斜

transform-origin: 设置旋转动画的中心点位置；

水平： left center right
竖直：top center bottom*

示例：

#box:hover {
  width: 300px;
  height: 300px;
  transform: scale(2, 0.5);
}
 #box:hover {
  width: 300px;
  height: 300px;
  transform: translate(100px, 100px);
 }
#box:hover {
    width: 300px;
    height: 300px;
    transform:rotate(360deg);
}
#box:hover {
  transform: skew(0, 45deg);
}

七、关键帧动画

CSS3中使用 @keyframes 定义关键帧动画，使用animation属性调用；

html代码：

<div class="box" id="box"></div>

CSS定义关键帧动画：

@keyframes shake {
    0% {
        transform: rotate(45deg);
    }
    25% {
        transform: rotate(-0deg);
    }
    50% {
        transform: rotate(-45deg);
    }
    75% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

调用关键帧动画：

.box {
    width: 120px;
    height: 300px;
    background: url(clock.png) no-repeat;
    margin: 20px auto;
    transform-origin: center top; /*设置旋转元素的基点位置*/
    animation: shake 2s linear 0s infinite; /*调用关键帧动画*/
}

animation属性详解：
animation是一个合成属性，由以下属性合成：

animation-name: 运动轨迹名称 @keyframes 定义一个轨迹名称
animation-duration: 运动轨迹运动时间
animation-timing-function: 运动效果 (linear ease-in ease-out..)
animation-delay: 延迟时间
animation-iteration-count: 动画执行次数，默认1，infinite 无数次

原生 JavaScript 教程

26.CSS3和Less