CSS3新特性
CSS3 选择器
选择器 | 示例 | 示例说明 | CSS |
---|---|---|---|
. class | .intro | 选择所有class="intro"的元素 | 1 |
# id | #firstname | 选择所有id="firstname"的元素 | 1 |
* | * | 选择所有元素 | 2 |
element | p | 选择所有<p>元素 | 1 |
element,element | div,p | 选择所有<div>元素和<p>元素 | 1 |
element element | div p | 选择<div>元素内的所有<p>元素 | 1 |
element > element | div>p | 选择所有父级是 <div> 元素的 <p> 元素 | 2 |
element + element | div+p | 选择所有紧接着<div>元素之后的<p>元素 | 2 |
[ attribute ] | [target] | 选择所有带有target属性元素 | 2 |
[ attribute = value ] | [target=-blank] | 选择所有使用target="-blank"的元素 | 2 |
[ attribute ~= value ] | [title~=flower] | 选择标题属性包含单词"flower"的所有元素 | 2 |
[ attribute |= language ] | [lang|=en] | 选择一个lang属性的起始值="EN"的所有元素 | 2 |
:link | a:link | 选择所有未访问链接 | 1 |
:visited | a:visited | 选择所有访问过的链接 | 1 |
:active | a:active | 选择活动链接 | 1 |
:hover | a:hover | 选择鼠标在链接上面时 | 1 |
:focus | input:focus | 选择具有焦点的输入元素 | 2 |
:first-letter | p:first-letter | 选择每一个<P>元素的第一个字母 | 1 |
:first-line | p:first-line | 选择每一个<P>元素的第一行 | 1 |
:first-child | p:first-child | 指定只有当<p>元素是其父级的第一个子级的样式。 | 2 |
:before | p:before | 在每个<p>元素之前插入内容 | 2 |
:after | p:after | 在每个<p>元素之后插入内容 | 2 |
:lang( language ) | p:lang(it) | 选择一个lang属性的起始值="it"的所有<p>元素 | 2 |
element1 ~ element2 | p~ul | 选择p元素之后的每一个ul元素 | 3 |
[ attribute ^= value ] | a[src^="https"] | 选择每一个src属性的值以"https"开头的元素 | 3 |
[ attribute $= value ] | a[src$=".pdf"] | 选择每一个src属性的值以".pdf"结尾的元素 | 3 |
[ attribute *= value ] | a[src*="44lan"] | 选择每一个src属性的值包含子字符串"44lan"的元素 | 3 |
:first-of-type | p:first-of-type | 选择每个p元素是其父级的第一个p元素 | 3 |
:last-of-type | p:last-of-type | 选择每个p元素是其父级的最后一个p元素 | 3 |
:only-of-type | p:only-of-type | 选择每个p元素是其父级的唯一p元素 | 3 |
:only-child | p:only-child | 选择每个p元素是其父级的唯一子元素 | 3 |
:nth-child( n ) | p:nth-child(2) | 选择每个p元素是其父级的第二个子元素 | 3 |
:nth-last-child( n ) | p:nth-last-child(2) | 选择每个p元素的是其父级的第二个子元素,从最后一个子项计数 | 3 |
:nth-of-type( n ) | p:nth-of-type(2) | 选择每个p元素是其父级的第二个p元素 | 3 |
:nth-last-of-type( n ) | p:nth-last-of-type(2) | 选择每个p元素的是其父级的第二个p元素,从最后一个子项计数 | 3 |
:last-child | p:last-child | 选择每个p元素是其父级的最后一个子级。 | 3 |
:root | :root | 选择文档的根元素 | 3 |
:empty | p:empty | 选择每个没有任何子级的p元素(包括文本节点) | 3 |
:target | #news:target | 选择当前活动的#news元素(包含该锚名称的点击的URL) | 3 |
:enabled | input:enabled | 选择每一个已启用的输入元素 | 3 |
:disabled | input:disabled | 选择每一个禁用的输入元素 | 3 |
:checked | input:checked | 选择每个选中的输入元素 | 3 |
:not( selector ) | :not(p) | 选择每个并非p元素的元素 | 3 |
::selection | ::selection | 匹配元素中被用户选中或处于高亮状态的部分 | 3 |
:out-of-range | :out-of-range | 匹配值在指定区间之外的input元素 | 3 |
:in-range | :in-range | 匹配值在指定区间之内的input元素 | 3 |
:read-write | :read-write | 用于匹配可读及可写的元素 | 3 |
:read-only | :read-only | 用于匹配设置 "readonly"(只读) 属性的元素 | 3 |
:optional | :optional | 用于匹配可选的输入元素 | 3 |
:required | :required | 用于匹配设置了 "required" 属性的元素 | 3 |
:valid | :valid | 用于匹配输入值为合法的元素 | 3 |
:invalid | :invalid | 用于匹配输入值为非法的元素 |
CSS3 边框(Borders)
用 CSS3 ,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序
属性 | 说明 | CSS |
---|---|---|
border-image | 设置所有边框图像的速记属性。 | 3 |
border-radius | 一个用于设置所有四个边框- *-半径属性的速记属性 | 3 |
box-shadow | 附加一个或多个下拉框的阴影 | 3 |
div{
border:2px solid;
border-radius:25px;
box-shadow: 10px 10px 5px #888888;
border-image:url(border.png) 30 30 round;
}复制代码
CSS3 背景
CSS3中包含几个新的背景属性,提供更大背景元素控制。
顺序 | 描述 | CSS |
---|---|---|
background-clip | 规定背景的绘制区域。 | 3 |
background-origin | 规定背景图片的定位区域。 | 3 |
background-size | 规定背景图片的尺寸。 | 3 |
div{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
background-origin:content-box;
}
多背景
body{
background-image:url(img_flwr.gif),url(img_tree.gif);
}复制代码
CSS3 渐变
CSS3 定义了两种类型的渐变(gradients):
- 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
-
background: linear-gradient(direction, color-stop1, color-stop2, ...);复制代码
- 径向渐变(Radial Gradients)- 由它们的中心定义
-
background: radial-gradient(center, shape size, start-color, ..., last-color);复制代码
CSS3 文本效果
属性 | 描述 | CSS |
---|---|---|
hanging-punctuation | 规定标点字符是否位于线框之外。 | 3 |
punctuation-trim | 规定是否对标点字符进行修剪。 | 3 |
text-align-last | 设置如何对齐最后一行或紧挨着强制换行符之前的行。 | 3 |
text-emphasis | 向元素的文本应用重点标记以及重点标记的前景色。 | 3 |
text-justify | 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 | 3 |
text-outline | 规定文本的轮廓。 | 3 |
text-overflow | 规定当文本溢出包含元素时发生的事情。 | 3 |
text-shadow | 向文本添加阴影。 | 3 |
text-wrap | 规定文本的换行规则。 | 3 |
word-break | 规定非中日韩文本的换行规则。 | 3 |
word-wrap | 允许对长的不可分割的单词进行分割并换行到下一行。 | 3 |
CSS3 字体
以前CSS3的版本,网页设计师不得不使用用户计算机上已经安装的字体。使用CSS3,网页设计师可以使用他/她喜欢的任何字体。当你发现您要使用的字体文件时,只需简单的将字体文件包含在网站中,它会自动下载给需要的用户。您所选择的字体在新的CSS3版本有关于@font-face规则描述。您"自己的"的字体是在 CSS3 @font-face 规则中定义的。
<style>@font-face{font-family: myFirstFont;src: url(sansation_light.woff);}div{font-family:myFirstFont;}</style>复制代码
CSS3 转换和变形
2D新转换属性
以下列出了所有的转换属性:
Property | 描述 | CSS |
---|---|---|
transform | 适用于2D或3D转换的元素 | 3 |
transform-origin | 允许您更改转化元素位置 |
2D 转换方法
函数 | 描述 |
---|---|
matrix( n , n , n , n , n , n ) | 定义 2D 转换,使用六个值的矩阵。 |
translate( x , y ) | 定义 2D 转换,沿着 X 和 Y 轴移动元素。 |
translateX( n ) | 定义 2D 转换,沿着 X 轴移动元素。 |
translateY( n ) | 定义 2D 转换,沿着 Y 轴移动元素。 |
scale( x , y ) | 定义 2D 缩放转换,改变元素的宽度和高度。 |
scaleX( n ) | 定义 2D 缩放转换,改变元素的宽度。 |
scaleY( n ) | 定义 2D 缩放转换,改变元素的高度。 |
rotate( angle ) | 定义 2D 旋转,在参数中规定角度。 |
skew( x-angle , y-angle ) | 定义 2D 倾斜转换,沿着 X 和 Y 轴。 |
skewX( angle ) | 定义 2D 倾斜转换,沿着 X 轴。 |
skewY( angle ) | 定义 2D 倾斜转换,沿着 Y 轴。 |
3D转换属性
下表列出了所有的转换属性:
属性 | 描述 | CSS |
---|---|---|
transform | 向元素应用 2D 或 3D 转换。 | 3 |
transform-origin | 允许你改变被转换元素的位置。 | 3 |
transform-style | 规定被嵌套元素如何在 3D 空间中显示。 | 3 |
perspective | 规定 3D 元素的透视效果。 | 3 |
perspective-origin | 规定 3D 元素的底部位置。 | 3 |
backface-visibility | 定义元素在不面对屏幕时是否可见。 | 3 |
3D 转换方法
函数 | 描述 |
---|---|
matrix3d(
n
,
n
,
n
,
n
,
n
,
n
,
n , n , n , n , n , n , n , n , n , n ) |
定义 3D 转换,使用 16 个值的 4x4 矩阵。 |
translate3d( x , y , z ) | 定义 3D 转化。 |
translateX( x ) | 定义 3D 转化,仅使用用于 X 轴的值。 |
translateY( y ) | 定义 3D 转化,仅使用用于 Y 轴的值。 |
translateZ( z ) | 定义 3D 转化,仅使用用于 Z 轴的值。 |
scale3d( x , y , z ) | 定义 3D 缩放转换。 |
scaleX( x ) | 定义 3D 缩放转换,通过给定一个 X 轴的值。 |
scaleY( y ) | 定义 3D 缩放转换,通过给定一个 Y 轴的值。 |
scaleZ( z ) | 定义 3D 缩放转换,通过给定一个 Z 轴的值。 |
rotate3d( x , y , z , angle ) | 定义 3D 旋转。 |
rotateX( angle ) | 定义沿 X 轴的 3D 旋转。 |
rotateY( angle ) | 定义沿 Y 轴的 3D 旋转。 |
rotateZ( angle ) | 定义沿 Z 轴的 3D 旋转。 |
perspective( n ) | 定义 3D 转换元素的透视视图。 |
CSS3 过渡
过渡属性
下表列出了所有的过渡属性:
属性 | 描述 | CSS |
---|---|---|
transition | 简写属性,用于在一个属性中设置四个过渡属性。 | 3 |
transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3 |
transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
div{transition-property: width;transition-duration: 1s;transition-timing-function: linear;transition-delay: 2s;/* Safari */-webkit-transition-property:width;-webkit-transition-duration:1s;-webkit-transition-timing-function:linear;-webkit-transition-delay:2s;}复制代码
CSS3 动画
要创建CSS3动画,你需要了解@keyframes规则。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
实例
当动画为 25% 及 50% 时改变背景色,然后当动画 100% 完成时再次改变:
@keyframes myfirst{0% {background: red;}25% {background: yellow;}50% {background: blue;}100% {background: green;}}复制代码
下面的表格列出了 @keyframes 规则和所有动画属性:
属性 | 描述 | CSS |
---|---|---|
@keyframes | 规定动画。 | 3 |
animation | 所有动画属性的简写属性,除了 animation-play-state 属性。 | 3 |
animation-name | 规定 @keyframes 动画的名称。 | 3 |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 | 3 |
animation-delay | 规定动画何时开始。默认是 0。 | 3 |
animation-iteration-count | 规定动画被播放的次数。默认是 1。 | 3 |
animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 | 3 |
animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 | 3 |
div{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}复制代码
CSS3 多列
下表列出了所有 CSS3 的多列属性:
属性 | 描述 |
---|---|
column-count | 指定元素应该被分割的列数。 |
column-fill | 指定如何填充列 |
column-gap | 指定列与列之间的间隙 |
column-rule | 所有 column-rule-* 属性的简写 |
column-rule-color | 指定两列间边框的颜色 |
column-rule-style | 指定两列间边框的样式 |
column-rule-width | 指定两列间边框的厚度 |
column-span | 指定元素要跨越多少列 |
column-width | 指定列的宽度 |
columns | 设置 column-width 和 column-count 的简写 |
CSS3 盒模型
在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框,主要包括以下用户界面属性:
- resize:none | both | horizontal | vertical | inherit
- box-sizing: content-box | border-box | inherit
- outline:outline-color outline-style outline-width outine-offset
resize属性指定一个元素是否应该由用户去调整大小。
box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。
outline-offset 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。
CSS3伸缩布局盒模型(弹性盒)
CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
下表列出了在弹性盒子中常用到的属性:
属性 | 描述 |
---|---|
display | 指定 HTML 元素盒子类型。 |
flex-direction | 指定了弹性容器中子元素的排列方式 |
justify-content | 设置弹性盒子元素在主轴(横轴)方向上的对齐方式。 |
align-items | 设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式。 |
flex-wrap | 设置弹性盒子的子元素超出父容器时是否换行。 |
align-content | 修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,而是设置行对齐 |
flex-flow | flex-direction 和 flex-wrap 的简写 |
order | 设置弹性盒子的子元素排列顺序。 |
align-self | 在弹性子元素上使用。覆盖容器的 align-items 属性。 |
flex | 设置弹性盒子的子元素如何分配空间。 |
CSS3 多媒体查询
从 CSS 版本 2 开始,就可以通过媒体类型在 CSS 中获得媒体支持。如果您曾经使用过打印样式表,那么您可能已经使用过媒体类型。清单 1 展示了一个示例。
清单 1. 使用媒体类型
<link rel="stylesheet" type="text/css" href="site.css" media="screen" /><link rel="stylesheet" type="text/css" href="print.css" media="print" />复制代码
@media all and (min-width: 800px) { ... }复制代码
-
@media all
是媒体类型,也就是说,将此 CSS 应用于所有媒体类型。
-
(min-width:800px)
是包含媒体查询的表达式,如果浏览器的最小宽度为 800 像素,则会告诉浏览器只运用下列 CSS。
清单 3.
and
条件
@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }复制代码
or
关键词
@media (min-width:800px) or (orientation:portrait) { ... }复制代码
not
@media (not min-width:800px) { ... }复制代码
HTML5 的新特性:
为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储,网络工作者,等
(一) 语义标签
语义化标签使得页面的内容结构化,见名知义
标签 | 描述 |
<hrader></header> | 定义了文档的头部区域 |
<footer></footer> | 定义了文档的尾部区域 |
<nav></nav> | 定义文档的导航 |
<section></section> | 定义文档中的节(section、区段) |
<article></article> | 定义页面独立的内容区域 |
<aside></aside> | 定义页面的侧边栏内容 |
<detailes></detailes> | 用于描述文档或文档某个部分的细节 |
<summary></summary> | 标签包含 details 元素的标题 |
<dialog></dialog> | 定义对话框,比如提示框 |
(二)增强型表单
HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。
输入类型 |
描述 |
color |
主要用于选取颜色 |
date |
从一个日期选择器选择一个日期 |
datetime |
选择一个日期(UTC 时间) |
datetime-local |
选择一个日期和时间 (无时区) |
|
包含 e-mail 地址的输入域 |
month |
选择一个月份 |
number |
数值的输入域 |
range |
一定范围内数字值的输入域 |
search |
用于搜索域 |
tel |
定义输入电话号码字段 |
time |
选择一个时间 |
url |
URL 地址的输入域 |
week |
选择周和年 |
HTML5 也新增以下表单元素
表单元素 | 描述 |
<datalist> |
元素规定输入域的选项列表 使用 <input> 元素的 list 属性与 <datalist> 元素的 id 绑定 |
<keygen> |
提供一种验证用户的可靠方法 标签规定用于表单的密钥对生成器字段。 |
<output> |
用于不同类型的输出 比如计算或脚本输出 |
HTML5 新增的表单属性
-
placehoder 属性,简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示,在用户输入后消失。
-
required 属性,是一个 boolean 属性。要求填写的输入域不能为空
-
pattern 属性,描述了一个正则表达式用于验证<input> 元素的值。
-
min 和 max 属性,设置元素最小值与最大值。
-
step 属性,为输入域规定合法的数字间隔。
-
height 和 width 属性,用于 image 类型的 <input> 标签的图像高度和宽度。
-
autofocus 属性,是一个 boolean 属性。规定在页面加载时,域自动地获得焦点。
- multiple 属性 ,是一个 boolean 属性。规定<input> 元素中可选择多个值。
(三)视频和音频
-
HTML5 提供了播放音频文件的标准,即使用 <audio> 元素
12345
<audio controls>
<source src=
"horse.ogg"
type=
"audio/ogg"
>
<source src=
"horse.mp3"
type=
"audio/mpeg"
>
您的浏览器不支持 audio 元素。
</audio>
control 属性供添加播放、暂停和音量控件。
在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。
<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件,浏览器将使用第一个支持的音频文件
目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg
-
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
12345
<video width=
"320"
height=
"240"
controls>
<source src=
"movie.mp4"
type=
"video/mp4"
>
<source src=
"movie.ogg"
type=
"video/ogg"
>
您的浏览器不支持Video标签。
</video>
control 提供了 播放、暂停和音量控件来控制视频。也可以使用dom操作来控制视频的播放暂停,如 play() 和 pause() 方法。
同时 video 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度,所需的视频空间会在页面加载时保留。如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时保留特定的空间,页面就会根据原始视频的大小而改变。
与 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
video 元素支持多个source 元素. 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式( MP4, WebM, 和 Ogg)
(四)Canvas绘图
标签只是图形容器,必须使用脚本来绘制图形。
Canvas - 图形
-
创建一个画布,一个画布在网页中是一个矩形框,通过 <canvas> 元素来绘制。默认情况下 元素没有边框和内容。
1
<canvas id=
"myCanvas"
width=
"200"
height=
"100"
style=
"border:1px solid #000000;"
></canvas>
标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小,使用 style 属性来添加边框。你可以在HTML页面中使用多个 <canvas> 元素
-
使用Javascript来绘制图像,canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成
123456
<script>
var
c=document.getElementById(
"myCanvas"
);
var
ctx=c.getContext(
"2d"
);