您的位置: 首页  >  文章  >  h5新增标签、css3新增属性

h5新增标签、css3新增属性

分类: 文章 • 2022-09-03 11:30:15

- h6新增的标签

新增元素 说明
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 ：属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。


相关推荐