css3新增属性基础

新的标签 一些新的表单 和表单属性

这些新特性都有兼容性问题 基本都是 ie9 版本

1
以前布局我们都是用 div 做的 div 对于我们搜索引擎来说是么样语义的；

头部标签header
导航标签nav
article内容标签article
section定义文档某个区域
aside侧边栏标签
footer尾部标签

1 这些语义化标准主要是针对搜素引擎的
2 这些标签页面中可以使用多次
3 在 ie9 中 ，需要把这些元素转化为块级元素
4 其实 我们移动端更喜欢使用这些标签
5 html5 还增加了很多其他的标签，我们后面在慢慢学

1.2 HTML5 新增的多媒体标签

1 音频：
2 视频 controls 播放控件。

不再使用 Flash
1 视频 尽量放 mp4

属性 值
autoplay autoplay 自动播放 谷歌浏览器把这个给警用了 解决 muted
controls controls 向用户显示播放控件
width px 宽
height px 高
loop loop 循环播放
preload auto 规定是否预加载视频 如果有了 autoplay 就忽略该属性
none
src url 视频的 URL 地址
poster imgurl 加载等待的画面图片
muted muted 静音播放

2 音频： 尽量 mp3 格式

autoplay autoplay 自动播放
controls controls 音频控件
loop loop 循环播放
src url 音频的 url 地址

input 类型

type=“email”
url
date 日期
time 时间
month 月
week 周
number 数字
tel 电话
search 搜索
color 颜色选择表单

重点记住三个 number tel search 这三个

新增的表单属性

required required 表单内容必须不为空。必填
placeholder 提示文本 表单的提示信息。
autofocus autofocus 自动聚焦属性
autocomplete off/on 第一次输入被提交过 下一次不需要。 默认就是打开的
multiple multiple 可多选文件提交

                                           css新增

也是有兼容性问题 ie9 支持 移动端好于我们的 pc 端

新增的选择器
1 属性选择器
根本元素特定的属性选择元素
1 不借助类或者 id 来选择
E[att]{} 选择元素
E[att=“val”]{} 选择属性的一个值。
E[att^=“val”] 开头
E[att$=“val”] 结尾
E[att*=“val”] 任意的意思
注意 类选择器 属性选择器 伪类选择器 权重都是 10

2 结构伪类选择器
主要根据我们的文档结构来选择元素，常用于根据父级选择器里面的子元素。

E:first-child 父元素第一个子元素
E:last-child 父元素最后一个子元素
E:nth-child(n) 父元素第 n 个子元素。
n 可以是数字，关键字和公式

n 如果是数字，就是选择第 n 个子元素，里面数字从 0 开始 依次增加。

n 可以是关键字 ：even 偶数，odd 奇数。

公式
2n 偶数
2n+1 奇数
5n
n+5 从第五个开始
-n+5 前 5 个

E:first-of-type 指定类型第一的第 n 个
E:last-of-type 指定类型最后一个的第 n 个
E:nth-of-type 指定类型 E 的第 n 个

注意：nth——child 对父元素里面的所有孩子排序选择（序号是固定的）先找到第 n 个孩子，然后看看是否和 e 匹配。
nth-of-type 指定的。

3 伪元素选择器 属于行内元素
可用 css 来创建一个标签元素，而不需要 html 标签，从而简化 HTML 结构

::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容

注意 before 和 after 通过 css 创建一个元素

新创建的这个元素在文档中是找不到的，所以我们称为伪元素

语法 element::before{}; 属于行内元素

before 和 after 必须有我们 content 属性

before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素

伪元素选择器和标签选择器一样，权重为 1；

伪元素清除浮动

             css3盒子模型

css3 可以通过 box-sizing 来指定我们盒子模型 有两个值，content-box，border-box，这样我们计算盒子
大小的方式就发生了改变。

默认 content-box 盒子上的宽=padding+boder+width4
box-sizing：border-box 盒子大小 width

这个属性可以使我们的盒子不会撑大我们的盒子了

css 的其他特性
1 图片变模糊

css3 滤镜 filter
filter：函数() 例如 filter:blur(5px) 数值越大越模糊

2 计算盒子宽度 width:calc 函数

width：calc（100%-80px）
括号里面可以使用 + -* /来计算

                  css过渡  重点

过渡动画 一个状态慢慢过渡另一个状态 动感十足

transition:要过渡的属性 花费时间 运动曲线 何时开始

1 属性 想要变化的 css 属性 宽度 和高度 背景颜色 内外边距 都可以 ,如果想要所有的属性都变化
过渡,写一个 all 就可以

2 花费时间 单位是秒 比如 0.5s

3 运动曲线 :默认是 ease
4 何时开始:单位是秒 可以设置延迟触发的时间 默认是 0s。
后俩可以省略

口诀 谁做过渡给谁加。

                             什么是 web 服务器

我们写的网站，目前是放在自己电脑上的，只能自己访问

如果很多人想要访问的 我们可以放到服务器上，这样可以多人访问我们的网站

服务器 （我们也会称为主机）是提供计算服务的设备，它也是一台计算器，在网络环境下，根据服务器提供的服务类型不同，服务器分为文件服务器，数据库服务器，应用程序服务器，web 服务器。

web 服务器里面
分为本地服务器和远程服务器
本地服务器

我们可以把自己电脑配置为本地服务器，这样同一个局域网的同学可以访问你的网站了。

远程服务器 是通常别的公司为我们提高的一台电脑

将自己的网站上传到远程服务器

一个免费的服务器 http://free.3v.do/
1 去免费空间网站注册账号
2 记录下主机名 用户名 密码 域名
3 利用 cutftp 软件把网站上传到远程服务器。

                      **

css3的2d转换

**

转换 transform 是 css 中具有颠覆性的特种之一，可以实现元素的位移，旋转，缩放
转换理解为变形

移动：translate
旋转 rotate
缩放 scale

1 移动

可以改变元素中的位置，类似一定位

语法
transform:translate(x,y);
或者
tansform:translatex(n);
transform:translatey(n);
最大优点 不会影响其他元素的位置。
我们 tranlate 里面参数是可以用百分号的 移动到距离是盒子自身的高度或者宽度来对比的。

tranlate(-50%,-50%) 盒子向上走自己高度一半，往左走宽度的一半。 实现水平和垂直居中 定位配合我们这个做。

对行内标签没有效果的。

2 旋转 rotate
语法
transform:rotate(度数);

重点

rotate 里面跟的度数单位是 deg
角度为正时，顺时针，负时，逆时针
默认旋转的中心点是元素的中心点。

2D 转换的中心点 transform——origin

语法 transform-origin: x y;

注意 后面的参数是 x 和 y 用空格隔开
x y 默认转换的中心点是元素的中心点
还可以给 xy 设置 像素或者 方位名词

2D 转换之缩放

可以放大或者缩小 只要给元素添加上这个属性能控制他放大或者缩小

语法 tranfrom： scale(x,y)

最大优势: 可以设置转换中心点 默认是中心点缩放 不影响其他的盒子。

综合写法

transform:translate() rotate() scale()…等
是有顺序的

css动画

动画也叫 animation 是 css3 中颠覆性的特征之一 可通过设置多个节点来精确控制一个或者一组动画
，常用实现复杂的动画效果

相比过渡 动画课时实现更多的变化，更多的控制，练习自动播放等。

使用步骤
1 先定义动画
2 在使用（调用）动画
1 先用我们的 keyframes 定义动画(类似定义类选择器)
@keyframes 动画名称{
0%{}
100%{}

}
3+2 使用动画
animation-name：；
animation-duration：持续时间；

0%是动画的开始 100%是动画的完成 这样的规则就是动画序列
在@keyframes 中规定某项 css 样式，就能创建由当前样式逐步改为新样式点动画效果
动画是使元素从一种样式逐步变化为另一种样式点效果，你可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或者关键字 from 和 to 等于 0%和 100%。

动画常见的属性

规定动画的速度曲线
animation-timing-funtion 默认叫 ease linear 匀速

曲线细节
ease-in 低速开始
ease-out 低速结束
steps（） 指定时间函数间隔的数量 分级部完成的动画

何时开始
annimation-delay
播放次数
animation-iteration-count 无线循环有 infinite
规定动画是否逆向播放
animation-direction 默认是 normal 想要反方向的的 alternate

规定动画结束后状态
animation-fill-mode 默认是 backwords 返回其实状态 forwords 停留在结束状态

规定动画是否正在运行或停留
animation-play-state 默认是 running 还有 paused

简写

animation： 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束;

CSS 3D 转换

有什么特点呢
近大远小
物体后面的这当看不见的
三维坐标系
x 轴 水平向右
y 轴 垂直向下
z 轴 垂直屏幕 向外是正值 外里走是负的

最常用的 3d 位移和 3d 旋转
3d 位移 translate3d（x,y,z）
3d 旋转 rotate3d（x,y,z）
透视 ：perspective
3d 呈现 transfrom-style

3d 移动

多了 2d 移动到方向
语法
transform:transalte3d(x,y,z);
x
y
z
括号里面的 x,y,z 不能省略 如果没有就写 0；

透视 ：perspective

在 2d 平面产生<近大远小>视觉立体 但是只是效果二维的

如果想要在网页中是产生 3d 效果需要透视 （理解成 3d 物体在 2d 平面内）
模拟人类的视觉位置，可认为安排一只眼睛去看
透视我们也称为视距;视距就是人的眼睛到屏幕的距离；
距离视觉点越近的电脑成像越大，越远成像越小； 近大远小。
透视的单位是像素

透视写在被观察元素的父盒子上面的

d 就是视距 视距就还是一个距离人的眼睛到屏幕的距离
z 就是 z 轴 物体距离屏幕的距离，z 轴越大 我们看到的物体就越大。

3d 旋转 rotate3d

在三维空间沿着 x y z 旋转 或者自定义轴旋转

语法 transform: rotate3d(x,y,z,deg);
沿着自定义轴旋转
xyz 是表示旋转轴的矢量，是标示是否希望沿着该轴旋转，最后一个标示旋转的角度

rotateX（）
左手法则

左手的大拇指指向 x 轴正方向

其余手指的弯曲方向就是该元素沿着 x 轴旋转的方向

rotatey（）
左手法则

左手的大拇指指向 y 轴正方向

其余手指的弯曲方向就是该元素沿着 y 轴旋转的方向

rotatez（）

                 3D 呈现 transform-style

1. 就是控制子元素是否开启三维立体环境
2. falt 子元素不开启 3d 立体空间，默认
3. preserve-3d 子元素开启立体空间
4. 代码写给父级，但是阴影影响的是子盒子
5. 这个属性很重要，后面必用

3D 呈现 transform-style

1. 就是控制子元素是否开启三维立体环境
2. falt 子元素不开启 3d 立体空间，默认
3. preserve-3d 子元素开启立体空间
4. 代码写给父级，但是阴影影响的是子盒子
5. 这个属性很重要，后面必用

浏览器的私有前缀

1. 为了兼容老版本 新版本不用加

-moz-：firefox 浏览器
-ms- 代表 ie 浏览器
-webkit- safari chrome
-0- opera

2. 提倡写法