码迷,mamicode.com
首页 > Web开发 > 详细

h5新增标签、css3新增属性

时间:2018-03-12 20:52:49      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:html5   css3   

- h5新增的标签

新增元素说明
video表示一段视频并提供播放的用户界面
audio表示音频
canvas表示位图区域
source为video和audio提供数据源
track为video和audio指定字母
svg定义矢量图
code代码段
figure和文档有关的图例
figcaption图例的说明
main
time日期和时间值
mark高亮的引用文字
datalist提供给其他控件的预定义选项
keygen秘钥对生成器控件
output计算值
progress进度条
menu菜单
embed嵌入的外部资源
menuitem用户可点击的菜单项
menu菜单
template
section
nav
aside
article
footer
header

- css3 
css3被划分为模块,最重要的几个模块包括:选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面

  • 选择器

  • 框模型

  • 背景和边框 
    border-radius、box-shadow、border-image、 
    background-size:规定背景图片的尺寸 
    background-origin:规定背景图片的定位区域 
    background-clip:规定背景的绘制区域

  • 文本效果(常用) 
    text-shadow:设置文字阴影 
    word-wrap:强制换行 
    word-break 
    css3提出@font-face规则,规则中定义了font-family、font-weight、font-style、font-stretch、src、unicode-range

  • 2/3D转换 
    transform:向元素应用2/3D转换 
    transition:过渡

  • 动画

  • @keyframes规则: 
    animation、animation-name、animation-duration等

  • 用户界面(常用) 
    box-sizing、resize 
    css3新增伪类 
    :nth-child() 
    :nth-last-child() 
    :only-child 
    :last-child 
    :nth-of-type() 
    :only-of-type() 
    :empty 
    :target 这个伪类允许我们选择基于URL的元素,如果这个元素有一个识别器(比如跟着一个#),那么:target会对使用这个ID识别器的元素增加样式。 
    :enabled 
    :disabled 
    :checked 
    :not

1.CSS3边框:

  • border-radius:CSS3圆角边框。在 CSS2 中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片,在 CSS3 中,创建圆角是非常容易的,在 CSS3 中,border-radius 属性用于创建圆角。border:2px solid;

  • box-shadow:CSS3边框阴影。在 CSS3 中,box-shadow 用于向方框添加阴影。box-shadow:10px 10px 5px #888888;

  • border-image:CSS3边框图片。通过 CSS3 的 border-image 属性,您可以使用图片来创建边框。border-image:url(border.png) 30 30 round;

  2.CSS3背景:

  • background-size: 属性规定背景图片的尺寸。在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。

  • background-origin :属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。

  3.CSS3文字效果:

  • text-shadow:在 CSS3 中,text-shadow 可向文本应用阴影。text-shadow:5px 5px 5px #FFFFFF;

  • word-wrap :单词太长的话就可能无法超出某个区域,允许对长单词进行拆分,并换行到下一行:p{word-wrap:break-word;}

  4.CSS3 2D转换:

  transform:通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。

  • translate():元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数:transform:translate(50px,100px);值 translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。

  • rotate():元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。transform:rotate(30deg);值 rotate(30deg) 把元素顺时针旋转 30 度。

  • scale():元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数:transform:scale(2,4);值 scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。

  • skew():元素转动给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:transform:skew(30deg,20deg);值 skew(30deg,20deg) 围绕 X 轴把元素转动 30 度,围绕 Y 轴转动 20 度。

  • matrix() :

    matrix() 方法把所有 2D 转换方法组合在一起。

    matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。

  5.CSS3 3D转换:

  • rotateX():元素围绕其 X 轴以给定的度数进行旋转。transform:rotateX(120deg);

  • rotateY():元素围绕其 Y 轴以给定的度数进行旋转。transform:rotateY(120deg);

  6.CSS3 过渡:当元素从一种样式变换为另一种样式时为元素添加效果。

  7.CSS3动画:通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

  8.CSS3多列:

  • column-count:属性规定元素应该被分隔的列数。

  • column-gap:属性规定列之间的间隔。

  • column-rule :属性设置列之间的宽度、样式和颜色规则。

  9.CSS3用户界面:

  • resize:属性规定是否可由用户调整元素尺寸。

  • box-sizing:属性允许您以确切的方式定义适应某个区域的具体内容。

  • outline-offset :属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。


h5新增标签、css3新增属性

标签:html5   css3   

原文地址:http://blog.51cto.com/13507333/2085705

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!