第8章认识并应用CSS3属性.pptVIP

8.1.1　属性选择器 在CSS 3中新增了3种选择器类型，分别是属性选择器、结构伪类选择器以及UI元素状态伪类选择器。本节将详细的介绍这3种新增的选择器。 属性选择器是指直接使用属性控制HTML标记样式，他可以根据某个属性是否存在或者通过属性值来查找元素，具有很强大的效果。与使用CSS样式对HTML标签进行修饰有很大的不同，他避免了通过使用HTML标签名称或自定义名称指向具体的HTML元素，来达到控制HTML标签样式的目的，因此，具有很大的方便性。 8.1.2　结构伪类选择器 结构伪类选择器是指运用文档结构树来实现元素过滤，简单的来说，就是利用文档结构之间的相互关系来匹配指定的元素，用来减少文档内对class属性以及ID属性的定义，从而可以使整个文档更加简练。 8.1.3　UI元素状态伪类选择器 UI元素状态包括可用、不可用、选中、未选中、获取焦点、失去焦点、锁定和待机等。 8.2.1　overflow属性 在CSS 3中3种布局相关的属性，包括overflow属性、opacity属性和column属性，在Dreamweaver CC的“CSS设计器”面板中提供overflow和opacity两种CSS 3属性的设计，页column属性则只能通过手动编写的方式进行设置。 当对象的内容超过其指定的高度及宽度时应该如何进行处理？在CSS 3中新增了overflow属性，通过该属性可以设置当内容溢出时的处理方法。 overflow属性的语法格式如下。 overflow: visible | auto | hidden | scroll; visible：不剪切内容也不添加滚动条。如果显示声明该默认值，对象将被剪切为包含对象的window或frame的大小，并且clip属性设置将失效。 auto：该属性值为body对象和textarea的默认值，在需要时剪切内容并添加滚动条。 hidden：不显示超过对象尺寸的内容。 scroll：总是显示滚动条。 opacity属性用来设置一个元素的透明度，opacity取值为1时是完全不透明的，反之，取值为0是完全透明的。1~0之间的任何值都表示该元素的透明度。 动手实践——实现网页元素半透明效果 动手实践：实现网页元素半透明效果 最终文件：光盘\源文件\第8章\8-2-2.html 视 频：光盘\源文件\第8章\8-2-2.swf 8.2.2　opacity属性 opacity属性的语法格式如下。 opacity:length|inherit; length：由浮点数字和单位标识符组成的长度值，不可以为负值，默认值为1。 inherit：默认继承，继承父级元素的opacity属性设置。 8.2.3　column属性 column属性的语法格式如下。 column-width: [length | auto]; column-count: integer | auto; column-gap: length | normal; column-rule:length|style|color; column-width：该属性用于定义列宽度，length由浮点数和单位标识符组成的长度值。 column-count：该属性用于定义列数，integer用于定义栏目的列数，取值为大于0的整数，不可为负值。 column-gap：该属性用于定义列间距，length由浮点数和单位标识符组成的长度值。 column-rule：该属性用于定义列边框，length由浮点数和单位标识符组成的长度值；style用于设置边框样式；color用于设置边框的颜色。 动手实践——实现网页内容分栏显示 动手实践：实现网页内容分栏显示 最终文件：光盘\源文件\第8章\8-2-3.html 视 频：光盘\源文件\第8章\8-2-3.swf 文本属性是CSS样式中常用的设置属性，在CSS 3中新增了word-wrap属性、text-overflow属性和text-shadow属性，在本节中将向读者介绍这3种CSS 3中新增的文本相关的属性。 8.3.1　word-wrap属性 word-wrap属性用于设置当当前文本行超过指定容器的边界时是否断开转行，word-wrap属性的语法格式如下。 word-wrap: normal | break-word normal：控制连续文本换行。 break-word：内容将在边界内换行。如果需要，词内换行也会发生。 text-overflow属性的语法格式如下。 text-overflow: clip | ellipsis clip：不显示