9  透明属性 元素透明也是我们常用的样式,在CSS2中使用滤镜属性opacity实现透明效果.现在有了CSS3的rgba属性,就不用这么麻烦了,当然这也得要浏览器支持才行.通常我们定义颜色都是用十六进制表示.例如,background:#000000,表示背景色为黑色.当然也可以用RGB三原色值表示,例如,background:rgb(0,0,0),也表示背景色为黑色.RGBA只是在RGB的基础上增加了一个A,这个A表示透明度.而且这个属性不会被子元素继承下去,可以在定义颜色的属性时使用.应用…

通过CSS选择器找到元素,就要使用CSS属性给找到的元素设置样式.尽管现在的浏览器已经支持了众多的CSS3属性,但作为初学者,最应该关注的就是一些“主流”的属性,如border-radius.box-shadow.transform等.它们有良好的文档.极佳的测试效果并且经常用到,将成为你设计网站的得力助手.学习CSS3的属性就要先从主流的属性开始,其他属性则可通过CSS3手册获得帮助.具体实例展示,读者可以在下一章大量学习.本节主要学习CSS3属性的用法及兼容性. 1  使用CSS3属性前的准…

CSS3规范中对背景这一部分,新加入了一些有用的功能,如可以设置多个背景图片.可以指定背景大小.设置背景渐变等功能.CSS3规范中定义的背景属性新增了background-clip.background-origin.background-size,这三个属性描述如表1: 表1  CSS3新增背景属性 1  多背景 CSS3允许设置多个背景图片,每个背景用逗号隔开,每个背景图片占一层,层的上下显示按照在CSS中写的顺序来定,最先写的背景在最上层. 多背景的格式如下: background: ur…

渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果上来看,与设计并无任何差异.事实上这种方法是比较麻烦的,因为首先需要设计师进行设计,然后进行切图,在通过样式应用到页面中.另外,在实际应用中可扩展性差,还直接影响页面性能.值得庆幸的是,W3C组织将渐变设计收入到CSS3标准中,让广大的前端设计师直接受益,可以直接通过CSS3的渐变属性制作类似渐变图…

在Web制作中,有些时候需要实现一些倒影的效果.在传统网页中,我们只能使用photoshop事先将倒影设计好,然后导入到网页中,这样不但耗费资源,也阻碍了开发效率.而CSS新增了Reflections板块,CSS Reflections允许设计倒影,目前,CSS Reflections仅获得webkit引擎的支持,我们只能够在Chrome和Safari浏览器中测试.CSS3的box-reflect属性,使我们可以对图片.文字等进行倒影设计,具体语法: box-reflect: none | <d…

对于设计人员和开发人员来说,CSS一直是web设计过程中重要的一部分.网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式.随着CSS3的出现以及越来越多的浏览器对它的支持,设计师们有了更多的选择.CSS3可以让网页增添了不少的动画元素,让我们的网页变得更加生动有趣,并且易于交互.本章利用CSS3的样式属性来制作出丰富多彩的网页.在本章中,我们为CSS3的样式属性作一个介绍,列出该属性的属性及用法.使用该样式属性制作一些小案例来对网页样式进行设置.让读者可以更加直…

小结 在互联网上,图像和链接则是通过URL唯一确定信息资源的位置.URL分为绝对URL和相对URL.通过使用<img />标记在浏览器中显示一张图像.超文本具有的链接能力,可层层链接相关文件,这种具有超链接能力的操作,称为超链接.链接文档中的特定位置也称为锚点,定义锚点和超链接都使用<a>标记.图像地图是带有可点击区域的图像,每个区域是一个相关的超级链接.video和audio这两个HTML5新增加的元素,它们分别用来处理视频与音频数据,使得多媒体播放再也不需要安装插件了. 习题…

7  多列布局属性 通过CSS3,开发人员能够创建多列来对文本进行布局.在CSS2时代,对于多列布局的设计,大多采用浮动布局和绝对定位布局两种方式.浮动布局比较灵活,但是需要编写大量的附加样式代码,而且在网页缩放等操作下容易发生错位,影响网页整体效果.绝对定位方式要精确到标签的位置,但固定标签位置的方式无法满足标签的自适应能力,也影响文档流的联动.CSS3新增了columns属性,即多列自动布局功能,利用该功能可以自动将内容按指定的列数排列(例如,columns: 250px 3,250px表示…

5 用户界面属性 在CSS3中,新的用户界面特性包括重设元素尺寸.盒尺寸及轮廓等.本小节着重介绍一下resize属性,只有Firefox 4和Safari 3浏览器支持此属性.resize属性可用于重定义textarea的大小,可能的值包括如下几种. Ø none:UserAgent没有提供尺寸调整机制,用户不能调节元素的尺寸. Ø both:UserAgent提供了双向尺寸调整机制,用户可以调节元素的宽度和高度. Ø horizontal:UserAgent提供了单向水平尺寸调整机制,用户可以…

3  背景属性 在CSS3中提供了多个背景属性,这里只介绍两个比较常用的属性,其他属性可以从手册中获取帮助.在CSS3中,通过background-image或者background属性可以为一个容器设置多张背景图片,也就是说可以把不同的背景图片放到一个块元素中.多张背景图片的URL之间使用逗号隔开即可.如果有多张背景图片,而其他属性只有一个,那么所有背景图片都应用该属性值.代码如下所示: 背景图片大小调整也是CSS3提供的一个新特性,它使得开发人员可以随心所欲地控制背景图片的尺寸大小.在CSS…

6  鼠标光标属性 在网页中默认的鼠标指针只有两种,一种是最普通的箭头,另一种是当移动到链接上时出现的“小手”.但现在越来越多的网页都使用了CSS鼠标指针技术,当将鼠标移动到链接上时,可以看到多种不同的效果.CSS可以通过cursor属性实现鼠标形状的改变,其属性可以是默认的鼠标形状default.小手形状hand.指示某对象可被移动move.交叉十字crosshair.文本选择器号text.Windows的沙漏形状wait.带有问号的鼠标help及各个方向的箭头属性值.例句如下: p {cur…

5  边框属性 边框属性用于设置一个元素的边框风格.边框宽度.边框颜色,可以一起设置4条边的边框,也可对上边框.右边框.下边框和左边框单独设置.分别介绍如下. a．边框风格属性 可以通过边框风格属性border-style设定上.下.左.右边框的风格,该属性用于设置一个元素边框的样式,而且必须用于指定可见的边框.可以使用1-4个关键字,如果4个值都给出了,则它们分别应用于上.右.下和左边框的样式.如果给出一个值,它将被运用到各边上.如果给出了两个或三个值,则省略了的值与对边相等.也可以分别使用b…

3  背景属性 大多数HTML元素都允许控制背景,包括背景颜色.背景图像.背景重复.背景附件.背景位置等属性.常见的控制背景属性.值及描述如表2所示. 表2  CSS中常见的控制背景的属性 除了使用表6-2中提供的背景属性控制HTML元素的背景样式,也可以将其简化为使用一行代码解决.通过背景类中的background属性实现,语法格式如下所示: background:  <背景颜色> || <背景图像> || <背景重复> || <背景附件> || <…

CSS中的样式属性比较多,经常使用的属性可以分为这么几类:字体.文本.背景.位置.边框.列表,以及其他一些样式属性.每个类中的属性都可以单独使用:如果同一个类中多个属性一起使用,还可以将它们整合为一行解决. 1  字体属性 通过字体属性可以设置字体的族科,改变字体的大小和风格,也可以调整字体加粗,以及让字体变形等.修饰字体的所有属性.值及描述如表6-1所示. 表1  CSS中修饰字体的属性 分别使用表1中字体类的每个样式属性,指定HTML的段落元素p中的字体为bold(粗体).italic(斜体…

CSS综合实例 在Web页面中经常使用栏目显示分类内容.本例将使用HTML和CSS结合编写一个分类栏目模型,用于演示前面介绍的CSS应用.通过使用独立的文件定义样式表,并在HTML文档中使用link标记与其链接,使HTML代码和CSS代码完全分离.在HTML文档中只负责输出栏目的内容,而栏目的样式则完全由CSS控制.创建一个名为list.html的HTML文档文件,代码如下所示: 在上面的HTML文件中输出一个分类栏目,包括栏目标题.栏目内容区块及内容列表等.但没有定义栏目的显示格式,而是链接一…

小结 CSS3对于开发者来说,给web应用带来了更多的可能性,极大提高了开发效率.CSS3在选择器上的支持可谓是丰富多彩,使得我们能够灵活的控制样式,而不必为元素进行规范化的命名.CSS3支持的动画类型更加的丰富了,主要有transform(变换).transition(过渡)和animation(动画).不仅在类型上更加多样,还可以对特定的属性设置transition,所以在以后面对更多的脚本开发者,会更加的方便简单.对于CSS3的特性,圆角.文本阴影.盒模型阴影和渐变是网页制作更加便捷与网页…

本章小结 CSS3新增了许多属性,CSS3样式新增了一种颜色模式rgba用来制作透明色,比CSS的颜色模式多了一个透明度的设置.文字的CSS3特效有文字阴影.文字描边.文字排版和文字省略等.另外,CSS3增加了弹性盒模型,我们可以为盒模型增加阴影和倒影.CSS3的分栏布局让WEB开发人员轻松的让文本呈现多列显示.传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,仅需要通过设置border-radius属性即可.通过CSS3,我们能够创建圆…

CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation.前面已经介绍过Transform和Transition了,这里我们来学习Animation动画.通过CSS3,我们能够创建动画,可以在许多网页中取代动画图片.flash动画以及JavaScript. 1  关键帧keyframes 如需在CSS3中创建动画,我们需要先学习@keyframes规则.前面所提到transition制作的过渡效果,包括了初始属性和最终属性,一个开始执行动作时间和一个延…

5  3D旋转 在三维变形中,我们可以让元素在任何轴旋转.为此,CSS3新增了三个旋转函数:rotateX().rotateY()和rotateZ().使用rotateX()函数允许一个元素围绕X轴旋转:使用rotateY()函数允许一个元素围绕Y轴旋转:使用rotateZ()函数允许一个元素围绕Z轴旋转: rotateX()函数指定一个元素围绕X轴旋转,旋转的量被定义为指定的角度:如果值为正值,元素围绕X轴顺时针旋转:反之,如果值为负值,元素围绕X轴逆时针旋转.其基本语法如下:  rotate…

3  perspective-origin景深基点 perspective-origin景深基点属性时3D变形中另一个重要属性,主要用来决定perspective属性的源点角度.它实际上设置了X轴和Y轴位置,在该位置观看者好像在观看该元素的子元素. perspective-origin属性的使用语法如下: perspective-origin: tx ty; 该属性的默认值为“50%  50%”,可以设置一个值,也可以设置两个长度值.其取值及描述如表3 表3 perspective-origin…

3D变换较2D变换多了一下的转换属性,3D转换属性及描述如表1: 表1  3D转换属性 3D的转换方法如表2: 表2  3D转换方法     1  transform-style transform-style经常被用来做三维空间坐标系中的图形变换,下面我们就来看看CSS3中设置3D变形的transform-style属性详解.transform-style指定嵌套元素如何在3D空间中呈现.主要有两个属性:flat和perserve-3d. transform-style属性的使用语法如下: t…

3  scale() 方法 通过scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X轴)和高度(Y轴)参数.缩放scale()函数让元素根据中心原点对对象进行缩放.默认值是1,因此0.01到0.99之间的任何值,使一个元素缩小:而任何大于或等于1.01的值,让元素显得更大.缩放scale()和translate()函数的语法非常相似,它可以接受一个值,也可以同时接受两个值,如果只有一个值时,其第二个值默认与第一个值相等.例如:scale(1,1)元素不会有任何变化,而scale(2,…

通过CSS3转换,能够对元素进行移动.缩放.转动.拉长或拉伸.它如何工作?转换是使元素改变形状.尺寸和位置的一种效果.CSS3转换包括2D转换和3D转换,本小结我们来了解2D变换的转换方法. 转换属性包含transform和transform-origin,它们的介绍如表1: 表1  转换属性 其中,transform有五种方法,它们的方法介绍如表2: 表2  transform方法 1  translate()方法 通过translate() 位移函数,元素从其当前位置移动,根据给定的left…

CSS3的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值. transition属性是一个简写属性,用于设置四个过渡属性,这四个过渡属性的描述如表1-21: 表1-21  transition过渡属性及描述 transition最简单的用法 下面,我们为一个div设置初始宽度为200px,背景颜色为“red”色并增加“transition: 2s”.当鼠标移入到这个div后,…

CSS遮罩提供一种基于像素级别的,可以控制元素透明度的能力,类似于png24位或png32位中的alpha透明通道的效果.遮罩有三个属性可以设置,分别是mask-image.mask-position.mask-repeat. 首先我们需要一个合适的遮罩图片.在ps里操作很简单,制作步骤如下: 1．打开你想要作为遮罩的透明png24的图片 2．选择图层菜单,然后图层样式最后是颜色叠加 3.在颜色叠加对话框里面改变颜色值为白色 4.点击ok关闭对话框 5.选择文件菜单,保存为web,替换旧的图片…

4  径向渐变 CSS3径向渐变是圆形或椭圆形渐变.颜色不再沿着一条直线轴变化,而是从一个起点朝所有方向混合.但相对线性渐变要比径向渐变复杂的多. 径向渐变的格式如下: radial-gradient([<起点>]? [<形状> || <大小>,]? <点>,<点>…) 径向渐变的参数描述如表1: 表1  CSS3径向渐变参数描述 5  径向渐变实例 虽然径向渐变要比线性渐变更为复杂,只要了解了其基本语法以及相关属性参数的作用,并不需要花太多的时…

通过CSS3,我们能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框.并且不需使用设计软件,比如photoshop. 1  边框图片border-image border-image为边框应用图片,顾名思义就是为图片应用背景图片.它和我们常用的background属性比较相似,但是又比背景图片复杂一些.例如: background: url(“image.jpg”) 10px 20px no-repeat;       border-image属性是一个简写属性,用于设置以下属性,具体描述如表…

传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,只需要border-radius属性,支持浏览器IE 9.Opera 10.5.Safari 5.Chrome 4和Firefox 4. 1  border-radius属性 CSS3圆角只需设置一个属性:border-radius(含义是"边框半径").为这个属性提供一个值,就能同时设置四个圆角的半径.所有合法的CSS度量值都可以使用:em.px.百分比等等.比如,下面是一个d…

CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充.这种新语法能够让WEB开发人员轻松的让文本呈现多列显示.我们知道,当一行文字太长时,读者读起来就比较费劲,有可能读错行或读串行:人们的视点从文本的一端移到另一端.然后换到下一行的行首,如果眼球移动浮动过大,他们的注意力就会减退,容易读不下去.所以,为了最大效率的使用大屏幕显示器,页面设计中需要限制文本的宽度,让文本按多列呈现,就像报纸上的新闻排版一样.但是在CSS3的多列布局(columns)语法功…

CSS3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局.弹性盒模型看起来很不错,Gecko和WebKit对该模型都有一些尝试性的测试.在这些属性之前加上-moz和-webkit即可使用该属性.也即是说,firefox.safari.chrome可以使用这些特性.该模型对我们解决网页设计中一些常见的问题非常方便,如:表单布局.垂直居中.视觉上分离html流,等等.为了方…