css3新增了哪些特性,css3和html5新特性
H5和css3的新特性
? ? 例如? ? ?input?type="month" 可以选择年月日
例如??input?type="text"?placeholder="请输入"?
显示在input输入框 默认显示的文字?
例如 鼠标滑动事件
实例
canvas id="myCanvas" width="200" height="100"style="border:1px solid #000000;"/canvas
????video?src=""/video
????audio?src=""/audio
用法一样 例如
????????//?设置本地存储
????????localStorage.setItem("lastname",?"Smith");
????????//?获取本地存储
????????document.getElementById("result").innerHTML?=?localStorage.getItem("lastname");
draggable属性是html5的全局属性，是html5支持拖放操作的方式之一，用来表示元素是否可以被拖放,draggable有三个值，true表示可以拖放，false表示不可以被拖放，auto表示使用浏览器的默认值
在h5中，如果想拖拽元素，就必须为元素添加draggable="true"。图片和超链接默认就可以拖拽
div?draggable="true"123/div
:last-child /* 选择元素最后一个孩子 */
:first-child /* 选择元素第一个孩子 */
:nth-child(1) /* 按照第几个孩子给它设置样式 */
:nth-child(even) /* 按照偶数 */
:nth-child(odd)? /* 按照奇数 */
:disabled /* 选择每个禁用的E元素 */
:checked /* 选择每个被选中的E元素 */
:not(selector) /* 选择非 selector 元素的每个元素 */
::selection /* 选择被用户选取的元素部分 */
伪类元素选择器
:last-child /* 选择元素最后一个孩子 */
:first-child /* 选择元素第一个孩子 */
:nth-child(1) /* 按照第几个孩子给它设置样式 */
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
background-size：规定背景图片的尺寸（cover：填充；100% 100%：拉伸）
background-origin：规定背景图片的定位区域
对于 background-origin 属性，有如下属性
背景图片可以放置于 content-box、padding-box 或 border-box 区域
border-radius：圆角
box-shadow / text-shadow：阴影
border-image：边框图片
2D/3D 转换
2D 转换（transform）
translate()：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。 transform: translate(50px, 100px);
rotate()：元素顺时针旋转给定的角度。若为负值，元素将逆时针旋转。transform: rotate(30deg);
scale()：元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数，也可以一个值（宽高）。transform: scale(2,4);
skew()：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。transform: skew(30deg, 20deg);
matrix()： 把所有 2D 转换方法组合在一起，需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。transform:matrix(0.866,0.5,-0.5,0.866,0,0);
3D 转换
rotateX()：元素围绕其 X 轴以给定的度数进行旋转。transform: rotateX(120deg);
rotateY()：元素围绕其 Y 轴以给定的度数进行旋转。transform: rotateY(130deg);
perspective：规定 3D 元素的透视效果
transition-property ：执行动画对应的属性，例如 color，background 等，可以使用 all 来指定所有的属性。
transition-duration：过渡动画的一个持续时间。
transition-timing-function：在延续时间段，动画变化的速率，常见的有：ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
transition-delay：延迟多久后开始动画
先定义 @keyframes 规则（0%，100% | from，to）
然后定义 animation，以下参数可直接写在 animation 后面
animation-name: 定义动画名称
animation-duration: 指定元素播放动画所持续的时间长
animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(,?,?,?)： 指元素根据时间的推进来改变属性值的变换速率，即动画的播放方式
animation-delay: 指定元素动画开始时间
animation-iteration-count: infinite | number：指定元素播放动画的循环次数
animation-direction: normal | alternate： 指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为 normal 时，动画的每次循环都是向前播放；另一个值是 alternate，规定动画在下一周期逆向地播放（来去播放）
animation-play-state: running | paused ：控制元素动画的播放状态
实例
???div{
????????????width:?200px;
????????????height:?100px;
????????????background:?pink;
????????????animation:?move?1s?linear?;
????????}
????????@keyframes?move?{
????????????0%{
????????????????width:?0;
????????????}
????????????100%{
????????????????width:?500px;
????????????}
????????}
通过CSS3，能够创建多个列来对文本进行布局
column-count: 规定元素应该被分隔的列数
column-gap: 规定列之间的间隔
column-rule: 设置列之间的宽度、样式和颜色规则
resize
box-sizing
outline-offset
resize 属性规定是否可由用户调整元素尺寸。如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll
div {?
?resize: both;/* none|both|horizontal|vertical; */ overflow: auto;
}
box-sizing 属性可设置的值有 content-box、border-box 和 inherit
content-box 是W3C的标准盒模型，元素宽度 = 内容宽度 + padding + border：意思是 padding 和 border 会增加元素的宽度，以至于实际上的 width 大于原始设定的 width
border-box 是ie的怪异盒模型，元素宽度 = 设定的宽度，已经将 padding 和 border 包括进去了，比如有时候在元素基础上添加内距 padding 或 border 会将布局撑破，但是使用 border-box 就可以轻松完成
inherit：规定应从父元素继承 box-sizing 属性的值
outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓
div?{
????????display:?flex;
????????flex-direction:?row;
????????/*弹性盒方向：主轴方向X轴??*/
????????flex-direction:?column;
????????/*?弹性盒方向：主轴Y轴方向?*/
????????flex-direction:?row-reverse;
????????/*?弹性盒方向：主轴方向X轴?倒叙?*/
????????flex-direction:?column-reverse;
????????/*?弹性盒方向：主轴Y轴方向?倒叙*/
????????flex-wrap:?nowrap;
????????/*?弹性盒换行：不换行?默认的?*/
????????flex-wrap:?wrap;
????????/*?弹性盒换行：换行?*/
????????/*设置主轴方向子元素排列顺序*/
????????justify-content:?flex-start;
????????/*?从左到右排列?默认的?*/
????????justify-content:?flex-end;
????????/*?从尾部开始排列?不影响子元素排列顺序?*/
????????justify-content:?center;
????????/*?从主轴居中对齐?*/
????????justify-content:?space-around;
????????/*?平分主轴剩余空间?*/
????????justify-content:?space-between;
????????/*?两边对齐，中间评分剩余空间?*/
????????justify-content:?space-evenly;
????????/*?间距相同?*/
????}
CSS 兼容内核
-moz-：代表FireFox浏览器私有属性
-ms-：代表IE浏览器私有属性
-webkit-：代表safari、chrome浏览器私有属性
-o-：代表opera浏览器私有属性
CSS-03-三大特性+盒子模型
CSS 有 非常重要的 三个特性：层叠性、继承性、优先级。
相同选择器 给设置 相同的样式，此时一个样式就会 覆盖（层叠） 另一个冲突的样式。
层叠主要解决样式冲突的问题 。
层叠性原则：
CSS中的继承：子标签会继承父标签的某些样式，如 文本颜色 和 字号。
简单理解：子承父业。
当同一个元素指定多个选择器，就会有优先级的产生。
优先级注意点：
权重叠加 ：如果是复合选择器，则会有权重叠加，需要计算权重。
练习：
页面布局要学习三大核心： 盒子模型, 浮动 和 定位 .
学习好盒子模型能非常好的帮助我们布局页面.
网页布局过程：
网页布局的核心本质： u 就是利用 CSS 摆盒子 /u。
所谓 盒子模型 ：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：u边框/u、u外边距/u、u内边距/u、和 u实际内容/u
border可以设置元素的边框。边框有三部分组成： 边框宽度(粗细)、 边框样式 、 边框颜色
语法：
CSS 边框属性允许你指定一个元素边框的 样式 和 颜色 。
语法
边框样式 border-style 可以设置如下值：
边框简写：
边框分开写法：
课堂要求：请给一个 200*200 的盒子，设置上边框为红色，其余边框为蓝色（提示：一定注意边框的层叠性）
border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
语法：
边框会额外增加盒子的实际大小。因此我们有两种方案解决:
padding 属性用于设置内边距，即 边框与内容 之间的距离。
padding 属性（简写属性）可以有一到四个值。
以上 4 种情况，我们实际开发都会遇到。
内边距会影响盒子实际大小
当我们给盒子指定 padding 值之后，发生了 2 件事情：
也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
解决方案：
u如果保证盒子跟效果图大小保持一致/u，则 让 width/height 减去多出来的内边距大小 即可。
padding内边距可以撑开盒子,我们可以做非常巧妙的运用.
因为每个导航栏里面的字数不一样多,我们可以不用给每个盒子宽度了,直接给padding最合适。
相关取值:
padding内边距可以撑开盒子, 有时候,也会让我们去修改宽度。
现实开发时候，小米侧边栏，文字距离左侧的距离不能用text-indent调整，这样不精确，实际开发的做法是：给padding值，这样更加精确
如果盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小.
margin 属性用于设置外边距，即控制盒子和盒子之间的距离。
margin 简写方式代表的意义跟 padding 完全一致。
外边距可以让 块级 盒子 水平居中 ，但是必须满足两个条件：
① 盒子必须指定了宽度（width）。
② 盒子 左右的外边距 都设置为 auto 。auto----自动
常见的写法，以下三种都可以：
注意： 以上方法是让块级元素水平居中， 行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。
使用 margin 定义块元素的 垂直外边距 时，可能会出现外边距的合并。
主要有两种情况:
1. 相邻块元素垂直外边距的合并
2. 嵌套块元素垂直外边距的塌陷
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有 上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的 较大者这种现象被称为 相邻块元素垂直外边距的合并 。
解决方案：
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：
① 可以为父元素定义上边框。
② 可以为父元素定义上内边距。
③ 可以为父元素添加 overflow:hidden。
还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题，后面再总结。
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。
注意： 行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距(因为设置了也不起作用)。但是转换为块级和行内块元素就可以了。
因为网页美工大部分效果图都是利用 PS（Photoshop） 来做的，所以以后我们大部分切图工作都是在 PS 里面完成。
因为网页美工大部分效果图都是利用 PS（Photoshop） 来做的，所以以后我们大部分切图工作都是在 PS 里面完成。
总结
标签都是有语义的, 合理的地方用合理的标签。比如产品标题 就用 h, 大量文字段落就用p
类名就是给每个盒子起了一个名字,可以更好的找到这个盒子, 选取盒子更容易,后期维护也方便。
大部分情况两个可以混用，两者各有优缺点，但是根据实际情况，总是有更简单的方法实现。
布局有很多种实现方式，同学们可以开始先模仿我的写法，然后再做出自己的风格。
最后同学们一定多运用辅助工具,比如屏幕画笔,ps等等
去掉 li 前面的 项目符号（小圆点）
语法：
圆角边框、盒子阴影、文字阴影
（重点记住前两个，文字阴影做了解）
在 CSS3 中，新增了 圆角边框 样式，这样我们的盒子就可以变圆角了。
border-radius 属性用于设置元素的外边框圆角。
语法：
radius 半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果
CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。
语法：
注意 ：
在 CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本。
语法：
css3新特性有哪些
CSS3 新特性
包括
CSS3 选择器（Selector）
@Font-face 特性、
Word-wrap Text-overflow 样式
Text-decoration
多列布局（multi-column layout）
边框和颜色，颜色支持透明度（color, border）
渐变效果（Gradient）
阴影（Shadow）和反射（Reflect）效果
盒子模型
Transitions, Transforms 和 Animation
比如：@Font-face 特性
@font-face {
font-family: BorderWeb;
src:url(BORDERW0.eot);
}
@font-face {
font-family: Runic;
src:url(RUNICMT0.eot);
}
.border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" }
.event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }
更多参考：
CSS3都有哪些新特性呢？
第 1 选择器
第 2 RGBA和透明度
第 3 多栏布局
第 4 多背景图
第 5 Word Wrap
第 6 文字阴影
第 7 @font-face属性
第 8 圆角(边框半径)
第 9 边框图片
第 10 盒阴影
第 11 盒子大小
第 12 媒体查询
第 13 语音
扩展资料:
工作原理
CSS3原理同CSS，是在网页中自定义样式表的选择符，然后在网页中大量引用这些选择符[29]。
新增特性中transform的原理较为特殊，虽然使用位移函数translate()、缩放函数scale()、旋转函数rotate()和倾斜函数skew()可以简单地实现变形，但是变形中的矩阵函数都可以使用matrix()函数来代替。
新增特性
CSS3的新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。
参考资料:百度百科-css3
css3的新特性都有哪些
CSS3新特性
1. animation：动画
2. transition：动画速度
3. transform：变形
4. 伪元素
5. 边框
border-radius 圆角边框
box-shadow ?盒子阴影
border-image 边框背景123
背景
background-size 背景大小
background-origin 背景的起始点
background-clip ?背景的覆盖范围
background-image ?设置背景图片1234
文本
text-shadow 文本阴影
text-wrap ? 文本换行
@font-face ?设置字体
CSS3新特性
1、 [class~=flower]
选择 title 属性包含单词 "flower" 的所有元素。
2、 [class|=box]
选择 lang 属性值以 "box" 开头的所有元素。
3、 :focus
选择获得焦点的 input 元素。
4、 p::first-letter
选择每个 p 元素的首字母。
5、 p:first-child
选择属于父元素的第一个子元素的每个 p 元素。
6、 ::after ---- ::before
在每个 p 元素的内容之前插入内容。-----在每个 p 元素的内容之后插入内容。
7、 a[class^=red]
选择其 class 属性值以 "red" 开头的每个 a 元素。
8、.box2 [class$=red]
选择其 class 属性以 "red" 结尾的所有 .box 2元素。
9、 a[src*="abc"]
选择其 src 属性中包含 "abc" 子串的每个 a 元素。
10、.box3 h1:first-of-type
11、 tr:nth-child(2n+1)
选择属于其父元素的基数子元素的每个 p 元素。
12、 :disabled
选择每个禁用的 input 元素
chrome/safari : -webkit-
FF: -moz-
ie: -ms-
Opera: -o-
!!!!!!如何处理私有前缀：autoprefixer插件
1、 使用图标字体的原理
（1） 引入字体文件 *.ttf或其它
（2）在html文件中：定义字体
@font-face{
font-family: 'mzd';
src:'字体文件的地址'
}
(3)使用字体
.box {
font-family: 'mzd'
}
2、使用时的两种方案
（1）阿里巴巴图标字体
（2）font-awesome: 图标字体库
1、animation动画的使用方法
（1）先定义动画规则
（2）使用动画规则
2、animation的属性