css增加代码,h5新增标签、css3新增属性

最新推荐文章于 2024-06-08 00:00:00 发布

weixin_39883286

最新推荐文章于 2024-06-08 00:00:00 发布

阅读量173

点赞数

文章标签： css增加代码

- 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：属性规定列之间的间隔。