HTML+CSS+JavaScript网页客户端程序设计 (15)
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
属性继承到子节点上。换句话说，很难实现背景颜色透明而文 字不透明的效果。直到RGBA颜色的出现这一切成为现实。
15.1 概要介绍
实现这样的效果非常简单，设置颜色的时候使用标准的rgba()单 位即可，例如rgba(255,0,0,0.4)，这样就出现了一个红色同时拥 有Alpha透明为0.4的颜色。经过测试Firefox3.0、Safari3.2和 Opera10都支持了rgba单位。
15.2 使用CSS3能做什么
15.2.1 模块与模块化结构
在CSS中，并没有采用总体结构，而是采用了分工协作的 模块化结构，这些模块如表15-1所示。
CSS2：1998年5月，CSS2正式推出，在这个版本中开始使 用样式表结构。
CSS2.1：2004年2月，CSS2.1正式推出。它在CSS2的基础上 略微做了改动，删除了许多诸如text-shadow等不被浏览器 所支持的属性。
现在所使用的CSS基本上是在1998年推出的CSS2的基础上 发展而来的，10年前在internet刚开始普及的时候，就能够 使用样式表来对网页进行效果的统一编辑，但10年间没有 很大变化，直到2010推出的CSS3。
（7）在文字效果方面，可用text-shadow属性文字投影，可能是 因为MAC OSX的Safari浏览器开始支持投影才特意增加的，
15.1 概要介绍
text—overflow属性，当文字溢出时，用“…”提示。包括 ellipsis、clip、ellipsis-word、inherit，前两个CSS2就有了，目 前还是部分支持，但有趣的是IE6居然也支持。ellipsis-word可 以省略掉最后一个单词，对中文意义不大，inherit可以继承父 级元素。
主要内容
➢ CSS3新特性介绍。 ➢ CSS3模块化分类介绍。 ➢ CSS3在项目中的应用。
15.1 概要介绍
15.1.1 CSS3新特性
CSS3语言开发是朝着模块化发展的。CSS3将完全向后兼容 ，所以没有必要修改现在的设计来让它们继续运作。网络 浏览器也还将继续支持CSS2。CSS3主要的影响是将可以使 用新的可用的选择器和属性，这些会允许实现新的设计效 果（譬如动态和渐变），而且可以很简单地设计出现在的 设计效果（比如说使用分栏）。CSS3包括以下多种新特性 。
（8）在颜色应用方面，可用HSL colors属性，除了支持RGB颜 色外，还支持HSL（色相、饱和度、亮度）。以前一般都是做 图的时候用HSL色谱，但这样一来会包括更多的颜色。H用度表 示，S和L用百分比表示，比如hsl（0,100%,50%）；可用HSLA colors属性，加了个不透明度（Apacity），用0到1之间的数来表 示，比如hsla（0,100%,50%,0.2）；可用opacity属性，直接控制 不透明度，用0到1之间的数来表示；可用RGBA colors属性，和 HSLA colors类似，加了个不透明度。一直以来，浏览器的透明 一直无法实现单纯的颜色透明，每次使用Alpha后就会把透明的
15.1 概要介绍
（5）在边框设置方面，可用border-color属性设置颜色并产生 渐变效果，可用border-image控制边框图象，border-cornerimage控制边框边角的图象，border-radius能产生类似圆角矩形 的效果。
（6）在背景设置方面，可用background-origin属性决定背景在 盒模型中的初始位置，提供了3个值，border、padding和 content，分别表示控制背景起始于左上角的边框、始于左上角 的留白、始于左上角的内容；用background-clip属性决定边框 是否覆盖住背景（默认不覆盖），提供了两个值，border和 padding，分别表示会、不会覆盖住背景；用background-size属 性可以指定背景大小，以像素或百分比显示，当指定为百分比 时，大小会由所在区域的宽度、高度，以及background-origin 的位置决定；用multiple backgrounds属性决定多重背景图像， 可以把不同背景图像只放到一个块元素里。
（1）以往对网页上的文字加特效只能用filter这个属性，在 CSS3中专门制订了一个加文字特效的属性，而且不止加阴 影这种效果。对应属性：font-effect。
（2）可用属性border-radius定义圆角表格，如图15-1所示
15.1 概要介绍
（3）丰富了对链接下划线的样式，HTML4的下划线都是直线 ，而HTML5有波浪线、点线、虚线等等，更可对下划线的颜色 和位置进行任意改变（还有对应顶线和中横线的样式，效果与 下划线类似）。对应属性：text-underline-style，textunderline-color，text-underline-mode，text-underline-position （4）文字下点几个点或打个圈以示重点，这在某些特定网页上 很有用。对应属性：font-emphasize-style和font-emphasizeposition。
[att^=val]：表示开始字符是val的att属性。
[att*=val]：表示包含至少有一个val的att属性。
15.1 概要介绍
15.1.2 CSS3的历史
CSS1：1996年12月，CSS1正式推出，在这个版本中，已经 包含了font的相关属性、颜色与背景的相关属性、box的相 关属性等。
（9）在用户界面方面，可用resize属性，可以由用户自己调整 div的大小，有hor源自文库zontal（水平）、vertical（垂直）或者both （同时），或者同时调整。如果再加上max-width或min-width 的话还可以防止破坏布局。
（10）在选择器方面，CSS3增加了更多的CSS选择器，可以实现 更简单但是更强大的功能，如nth-child()等，而Attribute selectors属性选择器中，在属性中可以加入通配符，包括^,$,* ，如：
15.1 概要介绍
实现这样的效果非常简单，设置颜色的时候使用标准的rgba()单 位即可，例如rgba(255,0,0,0.4)，这样就出现了一个红色同时拥 有Alpha透明为0.4的颜色。经过测试Firefox3.0、Safari3.2和 Opera10都支持了rgba单位。
15.2 使用CSS3能做什么
15.2.1 模块与模块化结构
在CSS中，并没有采用总体结构，而是采用了分工协作的 模块化结构，这些模块如表15-1所示。
CSS2：1998年5月，CSS2正式推出，在这个版本中开始使 用样式表结构。
CSS2.1：2004年2月，CSS2.1正式推出。它在CSS2的基础上 略微做了改动，删除了许多诸如text-shadow等不被浏览器 所支持的属性。
现在所使用的CSS基本上是在1998年推出的CSS2的基础上 发展而来的，10年前在internet刚开始普及的时候，就能够 使用样式表来对网页进行效果的统一编辑，但10年间没有 很大变化，直到2010推出的CSS3。
（7）在文字效果方面，可用text-shadow属性文字投影，可能是 因为MAC OSX的Safari浏览器开始支持投影才特意增加的，
15.1 概要介绍
text—overflow属性，当文字溢出时，用“…”提示。包括 ellipsis、clip、ellipsis-word、inherit，前两个CSS2就有了，目 前还是部分支持，但有趣的是IE6居然也支持。ellipsis-word可 以省略掉最后一个单词，对中文意义不大，inherit可以继承父 级元素。
主要内容
➢ CSS3新特性介绍。 ➢ CSS3模块化分类介绍。 ➢ CSS3在项目中的应用。
15.1 概要介绍
15.1.1 CSS3新特性
CSS3语言开发是朝着模块化发展的。CSS3将完全向后兼容 ，所以没有必要修改现在的设计来让它们继续运作。网络 浏览器也还将继续支持CSS2。CSS3主要的影响是将可以使 用新的可用的选择器和属性，这些会允许实现新的设计效 果（譬如动态和渐变），而且可以很简单地设计出现在的 设计效果（比如说使用分栏）。CSS3包括以下多种新特性 。
（8）在颜色应用方面，可用HSL colors属性，除了支持RGB颜 色外，还支持HSL（色相、饱和度、亮度）。以前一般都是做 图的时候用HSL色谱，但这样一来会包括更多的颜色。H用度表 示，S和L用百分比表示，比如hsl（0,100%,50%）；可用HSLA colors属性，加了个不透明度（Apacity），用0到1之间的数来表 示，比如hsla（0,100%,50%,0.2）；可用opacity属性，直接控制 不透明度，用0到1之间的数来表示；可用RGBA colors属性，和 HSLA colors类似，加了个不透明度。一直以来，浏览器的透明 一直无法实现单纯的颜色透明，每次使用Alpha后就会把透明的
15.1 概要介绍
（5）在边框设置方面，可用border-color属性设置颜色并产生 渐变效果，可用border-image控制边框图象，border-cornerimage控制边框边角的图象，border-radius能产生类似圆角矩形 的效果。
（6）在背景设置方面，可用background-origin属性决定背景在 盒模型中的初始位置，提供了3个值，border、padding和 content，分别表示控制背景起始于左上角的边框、始于左上角 的留白、始于左上角的内容；用background-clip属性决定边框 是否覆盖住背景（默认不覆盖），提供了两个值，border和 padding，分别表示会、不会覆盖住背景；用background-size属 性可以指定背景大小，以像素或百分比显示，当指定为百分比 时，大小会由所在区域的宽度、高度，以及background-origin 的位置决定；用multiple backgrounds属性决定多重背景图像， 可以把不同背景图像只放到一个块元素里。
（1）以往对网页上的文字加特效只能用filter这个属性，在 CSS3中专门制订了一个加文字特效的属性，而且不止加阴 影这种效果。对应属性：font-effect。
（2）可用属性border-radius定义圆角表格，如图15-1所示
15.1 概要介绍
（3）丰富了对链接下划线的样式，HTML4的下划线都是直线 ，而HTML5有波浪线、点线、虚线等等，更可对下划线的颜色 和位置进行任意改变（还有对应顶线和中横线的样式，效果与 下划线类似）。对应属性：text-underline-style，textunderline-color，text-underline-mode，text-underline-position （4）文字下点几个点或打个圈以示重点，这在某些特定网页上 很有用。对应属性：font-emphasize-style和font-emphasizeposition。
[att^=val]：表示开始字符是val的att属性。
[att*=val]：表示包含至少有一个val的att属性。
15.1 概要介绍
15.1.2 CSS3的历史
CSS1：1996年12月，CSS1正式推出，在这个版本中，已经 包含了font的相关属性、颜色与背景的相关属性、box的相 关属性等。
（9）在用户界面方面，可用resize属性，可以由用户自己调整 div的大小，有hor源自文库zontal（水平）、vertical（垂直）或者both （同时），或者同时调整。如果再加上max-width或min-width 的话还可以防止破坏布局。
（10）在选择器方面，CSS3增加了更多的CSS选择器，可以实现 更简单但是更强大的功能，如nth-child()等，而Attribute selectors属性选择器中，在属性中可以加入通配符，包括^,$,* ，如：