CSS3 新特性

原创 青春正当时 教程 css 258阅读 2019-01-24 16:25:46 举报

深入了解 CSS3 新特性

简介

CSS 即层叠样式表(Cascading Stylesheet)。Web 开发中采用 CSS 技术,可以有效地控制页面的布局、字体、颜色、背景和其它效果。只需要一些简单的修改,就可以改变网页的外观和格式。CSS3 是 CSS 的升级版本,这套新标准提供了更加丰富且实用的规范,如:盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等等,目前有很多浏览器已经相继支持这项升级的规范,如:Firefox、Chrome、Safari、Opera 等等。在 Web 开发中采用 CSS3 技术将会显著的美化我们的应用程序,提高用户体验,同时也能极大的提高程序的性能。本文将重点介绍一些比较绚丽且实用 CSS3 新特性。

CSS3 选择器(Selector)

选择器示例示例说明CSS
.class.intro选择所有class="intro"的元素1
#id#firstname选择所有id="firstname"的元素1
**选择所有元素2
elementp选择所有<p>元素1
element,elementdiv,p选择所有<div>元素和<p>元素1
element elementdiv p选择<div>元素内的所有<p>元素1
element>elementdiv>p选择所有父级是 <div> 元素的 <p> 元素2
element+elementdiv+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
:linka:link选择所有未访问链接1
:visiteda:visited选择所有访问过的链接1
:activea:active选择活动链接1
:hovera:hover选择鼠标在链接上面时1
:focusinput:focus选择具有焦点的输入元素2
:first-letterp:first-letter选择每一个<P>元素的第一个字母1
:first-linep:first-line选择每一个<P>元素的第一行1
:first-childp:first-child指定只有当<p>元素是其父级的第一个子级的样式。2
:beforep:before在每个<p>元素之前插入内容2
:afterp:after在每个<p>元素之后插入内容2
:lang(language)p:lang(it)选择一个lang属性的起始值="it"的所有<p>元素2
element1~element2p~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-typep:first-of-type选择每个p元素是其父级的第一个p元素3
:last-of-typep:last-of-type选择每个p元素是其父级的最后一个p元素3
:only-of-typep:only-of-type选择每个p元素是其父级的唯一p元素3
:only-childp: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-childp:last-child选择每个p元素是其父级的最后一个子级。3
:root:root选择文档的根元素3
:emptyp:empty选择每个没有任何子级的p元素(包括文本节点)3
:target#news:target选择当前活动的#news元素(包含该锚名称的点击的URL)3
:enabledinput:enabled选择每一个已启用的输入元素3
:disabledinput:disabled选择每一个禁用的输入元素3
:checkedinput: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 选择器案例

tbody: nth-child(even), nth-child(odd):此处他们分别代表了表格(tbody)下面的偶数行和奇数行(tr),这种样式非常适用于表格,让人能非常清楚的看到表格的行与行之间的差别,让用户易于浏览。

: not(.textinput):这里即表示所有 class 不是“textinput”的节点。

div:first-child:这里表示所有 div 节点下面的第一个直接子节点。

@Font-face 特性

Font-face 可以用来加载字体样式,而且它还能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体。

先来看一个客户端字体简单的案例:

我们可以通过这种方式直接加载字体样式,因为这些字体(arial)已经安装在客户端了。这种写法的作用等同于:

接下来我们看看如何使用服务端字体,即:未在客户端安装的字体样式。

代码中声明的两个服务端字体,其字体源指向“BORDERW0.eot”和“RUNICMT0.eot”文件,并分别冠以“BorderWeb”和“Runic”的字体名称。声明之后,我们就可以在页面中使用了:“ FONT-FAMILY: "BorderWeb" ” 和 “ FONT-FAMILY: "Runic" ”。

这种做法使得我们在开发中如果需要使用一些特殊字体,而又不确定客户端是否已安装时,便可以使用这种方式。

Word-wrap & Text-overflow 样式

Word-wrap

比较上述两段代码,加入了“word-wrap: break-word”,设置或检索当当前行超过指定容器的边界时是否断开转行,文字此时已被打散。

Text-overflow

知道了 word-wrap 的原理,我们再来看看 text-overflow,其实它与 word-wrap 是协同工作的,word-wrap 设置或检索当当前行超过指定容器的边界时是否断开转行,而 text-overflow 则设置或检索当当前行超过指定容器的边界时如何显示,见如下示例:

这里我们均使用“overflow: hidden”,对于“text-overflow”属性,有“clip”和“ellipsis”两种可供选择。

Text-overflow 效果图

这里我们可以看到,ellipsis 的显示方式比较人性化,clip 方式比较传统,我们可以依据需求进行选择。

文本效果

属性描述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

文字渲染(Text-decoration)

CSS3 里面开始支持对文字的更深层次的渲染,我们来看看下面的例子:

这里我们主要以 webkit 内核浏览器为例,Text-decoration 效果图

Text-fill-color: 文字内部填充颜色

Text-stroke-color: 文字边界填充颜色

Text-stroke-width: 文字边界宽度

CSS3 的多列布局(multi-column layout)

CSS3 现在已经可以做简单的布局处理了,这个 CSS3 新特性又一次的减少了我们的 JavaScript 代码量,参考如下代码:

Column-count:表示布局几列。

Column-rule:表示列与列之间的间隔条的样式

Column-gap:表示列于列之间的间隔

多列布局效果图

边框和颜色(color, border)

关于颜色,CSS3 已经提供透明度的支持了:

这里的“rgba”属性中的“a”代表透明度,也就是这里的“0.75”,同时 CSS3 还支持 HSL 颜色声明方式及其透明度:

对于 border,CSS3 提供了圆角的支持:

CSS3 的渐变效果(Gradient)

线性渐变

左上(0% 0%)到右上(0% 100%)即从左到右水平渐变:

这里 linear 表示线性渐变,从左到右,由蓝色(#2A8BBE)到红色(#FE280E)的渐变。效果图如下:

同理,也可以有从上到下,任何颜色间的渐变转换:

还有复杂一点的渐变,如:水平渐变,33% 处为绿色,66% 处为橙色:

这里的“color-stop”为拐点,可见效果图:

径向渐变

接下来我们要介绍径向渐变(radial),这不是从一个点到一个点的渐变,而从一个圆到一个圆的渐变。不是放射渐变而是径向渐变。来看一个例子(目标圆半径为 0):

前面“50,50,50”是起始圆的圆心坐标和半径,“50,50,0”蓝色是目标圆的圆心坐标和半径,“color-stop(0.5,red)”是断点的位置和色彩。这里需要说明一下,和放射由内至外不一样,径向渐变刚好相反,是由外到内的渐变。清单 15 标识的是两个同心圆,外圆半径为 50px,内圆半径为 0,那么就是从黑色到红色再到蓝色的正圆形渐变。下面就是这段代码的效果:

如果我们给目标源一个大于 0 半径,您会看到另外一个效果:

这里我们给目标圆半径为 10,效果图如下:

您可以看到,会有一个半径为 10 的纯蓝的圆在最中间,这就是设置目标圆半径的效果。

现在我再改变一下,不再是同心圆了,内圆圆心向右 20px 偏移。

这里我们给目标圆半径还是 10,但是圆心偏移为“70,50”(起始圆圆心为“50,50”)效果图如下:

想必您明白原理了,我们可以做一个来自顶部的漫射光,类似于开了盏灯:

径向渐变(漫射光) 其效果如下:

CSS3 的阴影(Shadow)和反射(Reflect)效果

首先来说说阴影效果,阴影效果既可用于普通元素,也可用于文字,参考如下代码:

设置很简单,对于文字阴影:表示 X 轴方向阴影向右 5px,Y 轴方向阴影向下 2px, 而阴影模糊半径 6px,颜色为 rgba(64, 64, 64, 0.5)。其中偏移量可以为负值,负值则反方向。元素阴影也类似。参考一下效果图:

接下来我们再来谈谈反射,他看起来像水中的倒影,其设置也很简单,参考如下代码:

设置也很简单,大家主要关注“-webkit-box-reflect: below 10px”,他表示反射在元素下方 10px 的地方,再配上渐变效果,可见效果图如下:

CSS3 的背景效果

CSS3 多出了几种关于背景(background)的属性,我们这里会简单介绍一下:

首先:“Background Clip”,该属确定背景画区,有以下几种可能的属性:

* background-clip: border-box; 背景从 border 开始显示 ;

* background-clip: padding-box; 背景从 padding 开始显示 ;

* background-clip: content-box; 背景显 content 区域开始显示 ;

* background-clip: no-clip; 默认属性,等同于 border-box;

通常情况,我们的背景都是覆盖整个元素的,现在 CSS3 让您可以设置是否一定要这样做。这里您可以设定背景颜色或图片的覆盖范围。

其次:“Background Origin”,用于确定背景的位置,它通常与 background-position 联合使用,您可以从 border、padding、content 来计算 background-position(就像 background-clip)。

* background-origin: border-box; 从 border. 开始计算 background-position;

* background-origin: padding-box; 从 padding. 开始计算 background-position;

* background-origin: content-box; 从 content. 开始计算 background-position;

还有,“Background Size”,常用来调整背景图片的大小,注意别和 clip 弄混,这个主要用于设定图片本身。有以下可能的属性:

* background-size: contain; 缩小图片以适合元素(维持像素长宽比)

* background-size: cover; 扩展元素以填补元素(维持像素长宽比)

* background-size: 100px 100px; 缩小图片至指定的大小 .

* background-size: 50% 100%; 缩小图片至指定的大小,百分比是相对包 含元素的尺寸 .

最后,“Background Break”属性,CSS3 中,元素可以被分成几个独立的盒子(如使内联元素 span 跨越多行),background-break 属性用来控制背景怎样在这些不同的盒子中显示。

* background-break: continuous; 默认值。忽略盒之间的距离(也就是像元 素没有分成多个盒子,依然是一个整体一 样)

* background-break: bounding-box; 把盒之间的距离计算在内;

* background-break: each-box; 为每个盒子单独重绘背景。

这种属性让您可以设定复杂元素的背景属性。

最为重要的一点,CSS3 中支持多背景图片,参考如下代码:

此为同一元素两个背景的案例,其中一个重复显示,一个不重复。参考一下效果图:

CSS3 的盒子模型

盒子模型为开发者提供了一种非常灵活的布局方式,但是支持这一特性的浏览器并不多,目前只有 webkit 内核的新版本 safari 和 chrome 以及 gecko 内核的新版本 firefox。

下面我们来介绍一下他是如何工作的,参考如下代码:

默认情况下,如果“boxcontainer”和“item”两个 class 里面没有特殊属性的话,由于 div 是块状元素,所以他的排列应该是这样的:

下面,我们加入相关 CSS3 盒子模型属性:

注意这里的“display: -webkit-box; display: -moz-box;”,它针对 webkit 和 gecko 浏览器定义了该元素的盒子模型。注意这里的“-webkit-box-orient: horizontal;”,他表示水平排列的盒子模型。此时,我们会看到如下效果:

细心的读者会看到,“盒子”的右侧多出来了很大一块,这是怎么回事呢?让我们再来看一个比较有特点的属性:“flex”, 参考如下代码:

您看到什么区别了没?在第四个“item 元素”那里多了一个“flex”属性,直接来看看效果吧:

第四个“item 元素”填满了整个区域,这就是“flex”属性的作用。如果我们调整一下“box-flex”的属性值,并加入更多的元素,见如下代码:

我们把倒数第二个元素(元素 3)也加上“box-flex”属性,并将其值设为 2,可见其效果图如下:

由此可见,元素 3 和元素 4 按比例“2:1”的方式填充外层“容器”的余下区域,这就是“box-flex”属性的进阶应用。

还有,“box-direction”可以用来翻转这四个盒子的排序,“box-ordinal-group”可以用来改变每个盒子的位置:一个盒子的 box-ordinal-group 属性值越高,就排在越后面。盒子的对方方式可以用“box-align”和“box-pack”来设定。

CSS3 的 Transitions, Transforms 和 Animation

Transitions

先说说 Transition,Transition 有下面些具体属性:

transition-property:用于指定过渡的性质,比如 transition-property:backgrond 就是指 backgound 参与这个过渡

transition-duration:用于指定这个过渡的持续时间

transition-delay:用于制定延迟过渡的时间

transition-timing-function:用于指定过渡类型,有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

可能您觉得摸不着头脑,其实很简单,我们用一个例子说明,参看一下如下代码:

这里他说明的是,这里 id 为“transDiv”的 div,当它的初始“background-color”属性变化时(被 JavaScript 修改),会呈现出一种变化效果,持续时间为 0.3 秒,效果为均匀变换(linear)。如:该 div 的 class 属性由“transStart”改为“transEnd”,其背景会由白(white)渐变到红(red)。

Transform

再来看看 Transform,其实就是指拉伸,压缩,旋转,偏移等等一些图形学里面的基本变换。见如下代码:

“skew”是倾斜,“scale”是缩放,“rotate”是旋转,“translate”是平移。最后需要说明一点,transform 支持综合变换。可见其效果图如下:

现在您应该明白 Transform 的作用了吧。结合我们之前谈到的 Transition,将它们两者结合起来,会产生类似旋转,缩放等等的效果,绝对能令人耳目一新。

Animation

最后,我们来说说 Animation 吧。它可以说开辟了 CSS 的新纪元,让 CSS 脱离了“静止”这一约定俗成的前提。以 webkit 为例,见如下代码:

首先,定义动画的内容,如清单 28 所示,定义动画“anim1”,变化方式为由“透明”(opacity: 0)变到“不透明”(opacity: 1),同时,内部字体大小由“12px”变到“24px”。然后,再来定义 animation 的变化参数,其中,“duration”表示动画持续时间,“iteration-count”表示动画重复次数,direction 表示动画执行完一次后方向的变化方式(如第一次从右向左,第二次则从左向右),最后,“timing-function”表示变化的模式。

其实,CSS3 动画几乎支持所有的 style 变化,可以定义各种各样的动画效果以满足我们用户体验的需要。

这里,我们介绍了 CSS3 的主要的新特性,这些特性在 Chrome 和 Safari 中基本都是支持的,Firefox 支持其中的一部分,IE 和 Opera 支持的较少。读者们可以根据集体情况有选择的使用。

结束语

本文介绍了 Web 开发中关于 CSS3 的一些内容,由浅入深的逐步引出 CSS3 的各种相关属性。基于各个 CSS3 属性的原理,通过实际的源代码介绍各个 CSS3 新特性的特点,使用方式以及使用中需要注意的地方。在每个新特性的代码示例后面,通过示例图,给 Web 开发人员一种比较直观的视觉感受。在 Web2.0 越来越流行的今天,熟练掌握并能很好的运用 CSS3 的一些特性会给我们的项目带来前所未有的用户体验效果。

相关主题


CSS info
:一个介绍 CSS3 相关知识的网站,提供很多 CSS3 的实例和解释,以及 CSS3 与 CSS2 之间的比较。

CSS W3C 标准提供了很多 CSS 的标准和使用指南,有很多经典实例。

基于 CSS3 的下一代 Web 应用开发,第 1 部分:发展历史及新特性”(developerWorks,2011 年 1 月):CSS3 大大简化了编程模型,它不仅是对已有功能的扩展和延伸,而更多的是对 Web UI 设计理念的和方法的革新。本文首先将介绍 CSS 的发展历史,然后讲解了各个版本的功能特点和差异,随后重点讲解了 CSS3 引入的新特性,并给出一些应用实例。

基于 CSS3 的下一代 Web 应用开发,第 2 部分:实现和应用”(developerWorks,2011 年 5 月):本文将继续第 1 部分的内容,为您详细介绍 CSS3 新增的特性和 UI 效果,讲解其在不同浏览器中实现的差别,并结合实例说明如何利用这些特性进行开发。

基于 CSS3 的下一代 Web 应用开发,第 3 部分:在 IE 中的特殊处理”(developerWorks,2011 年 5 月)由于 IE6/7/8 系列浏览器不支持 CSS3 的新特性,使得很多开发人员对这 CSS3 新功能望而却步。本文将详细介绍如何在 IE 中通过自身的语法方式实现 CSS3 的这些新特性,解决跨浏览器编程方面的难题。

提高 web 应用性能之 CSS 性能调优”(developerWorks,2011 年 9 月):本文绍了 Web 开发中关于 CSS 性能方面需要注意的一些细节,以及编写 CSS 代码中需要避免的问题,比如 CSS Expression 的弊端、CSS 缩写以及 CSS 选择器的注意事项等,尽可能让您 Web 应用上的 CSS 代码运行得顺畅。

developerWorks Web development 专区:通过专门关于 Web 技术的文章和教程,扩展您在网站开发方面的技能。

developerWorks Ajax 资源中心:这是有关 Ajax 编程模型信息的一站式中心,包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。

developerWorks Web 2.0 资源中心,这是有关 Web 2.0 相关信息的一站式中心,包括大量 Web 2.0 技术文章、教程、下载和相关技术资源。您还可以通过 Web 2.0 新手入门栏目,迅速了解 Web 2.0 的相关概念。

查看 HTML5 专题,了解更多和 HTML5 相关的知识和动向。

参考:

深入了解 CSS3 新特性

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复