📄 js09.htm
字号:
</UL>
<H2><A name="9.4 Style对象">9.4 Style对象</A>
<A href="#第九章 级联样式表(CSS)技术">(目录)</A></H2>
<UL>
<LI>在JavaScript中也可以处理CSS样式，方法是访问页面元素对象的style属性。</LI>
<LI>style属性本身也是对象，称为style对象，可通过它的属性访问CSS属性。</LI>
<LI><A href="SAMPLE/S09_09.HTM">例9.9</A>，设计一个页面，它通过JavaScript脚本设置一个段落的显示格式。</LI>
<LI>每个页面元素对象都具有style对象属性，通过使用这个style对象，就可以动态地更改相应页面元素的CSS样式，从而获得需要的效果。</LI>
<LI>style对象几乎没有什么方法和事件，但具有大量的属性。</LI>
<LI>关于style对象的详细描述可从Microsoft脚本编辑器帮助系统中查找到。</LI>
</UL>
<H2><A name="9.5 CSS属性">9.5 CSS属性</A>
<A href="#第九章 级联样式表(CSS)技术">(目录)</A></H2>
<UL>
<LI>
级联样式表(CSS)技术的核心是大量的CSS属性，可以把这些属性大致分为以下几类：字体属性、文本属性、颜色和背景属性、容器属性、列表属性、鼠标属性、定位和显示属性以及CSS滤镜属性等。</LI>
<LI>关于CSS属性的详细描述也可从Microsoft脚本编辑器帮助系统中查找到。</LI>
<LI>长度单位：在为CSS属性指定长度值时，既可以用表9-2所列的绝对单位，也可以用表9-3所列的相对单位。</LI>
<LI>颜色值：可以使用表9-4所列的任何一种方式为CSS属性指定颜色值。</LI>
</UL>
<H3><A name="9.5.1 字体属性">9.5.1 字体属性</A>
<A href="#第九章 级联样式表(CSS)技术">(目录)</A></H3>
<UL>
<LI>字体属性用于控制页面中的文本显示样式，例如控制文字的大小、粗细以及使用的字体等。</LI>
<LI>
CSS中的字体属性包括font、font-family、font-size、font-style、font-variant和font-weight，如表9-5所示。</LI>
<LI><A href="SAMPLE/S09_10.HTM">例9.10</A>，设计一个页面，使用JavaScript脚本把一个段落的显示效果设置为与“<P
style="font:italic small-caps bold 36pt Times New Roman"> JavaScript</P>”相同。</LI>
</UL>
<H3><A name="9.5.2 文本属性">9.5.2 文本属性</A>
<A href="#第九章 级联样式表(CSS)技术">(目录)</A></H3>
<UL>
<LI>文本属性用于控制文本的段落格式，例如设置首行缩进、段落对齐方式等。</LI>
<LI>
CSS中的常用文本属性包括：line-height、letter-spacing、text-align、text-decoration、text-indent、text-transform和vertical-align，如表9-6所示。</LI>
<LI><A href="SAMPLE/S09_11.HTM">例9.11</A>，设计一个关于某校简介的页面，要求标题居中、后续段落首行缩进2个字符，段间距150%，并且使用JavaScript脚本将标题的字符间距设置为10pt。</LI>
</UL>
<H3><A name="9.5.3 颜色和背景属性">9.5.3 颜色和背景属性</A>
<A href="#第九章 级联样式表(CSS)技术">(目录)</A></H3>
<UL>
<LI>
在CSS中，color属性设置前景色，而各种背景属性则可以设置背景颜色和背景图案。CSS背景属性包括：background、background-attachment、background-color、background-image、background-position
和 background-repeat，如表9-7所示。</LI>
<LI><A href="SAMPLE/S09_12.HTM">例9.12</A>，设计一个页面，使用JavaScript脚本把页面背景设置为灰色，并且含有一个居中的不重复的固定图案。</LI>
</UL>
<H3><A name="9.5.4 容器属性">9.5.4 容器属性</A>
<A href="#第九章 级联样式表(CSS)技术">(目录)</A></H3>
<UL>
<LI>容器属性包括4类：边框(border)属性、边距(margin)属性、填充(padding)属性和浮动属性。</LI>
<LI>
在任何一个页面元素的周围，都包含边框、边界和填充这三种空白。最接近元素内容的是填充，接下来是边框，最外围是边界。边界区总是透明的，可以显示出背景色或背景图像；而填充总是采用标记符的背景色或背景图像；边框则可以使用自己的颜色。
</LI>
<LI><A href="SAMPLE/S09_13.HTM">例9.13</A>，在图9-13所示的页面中，文字周围的浅灰色空白为填充(padding)，草绿色部分为边框(border)，而再向外与浏览器窗口相临的空白（以文档的背景颜色显示）则是边界(margin)。</LI>
</UL>
<P><IMG border="0" src="JS_09_01.jpg" width="483" height="162"></P>
<UL>
<LI>一、边框属性
<UL>
<LI>
在CSS中，边框设置包括三项：边框颜色（color）、边框样式（style）和边框宽度（width），而边框又包括四个方向：上(top)、下(bottom)、左(left)和右(right)。将边框设置和方向组合起来，则构成了以下CSS边框属性：border、border-bottom、border-bottom-color、border-bottom-style、border-bottom-width、border-color、border-left、border-left-color、border-left-style、border-left-width、border-right、border-right-color、border-right-style、border-right-width、border-style、border-top、border-top-color、border-top-style、border-top-width
以及 border-width等。</LI>
<LI>边框颜色属性取值可以使用各种指定颜色的方式。</LI>
<LI>
边框样式属性取值可以是none、dotted、dashed、solid、double、groove、ridge、inset或outset，默认值是none。</LI>
<LI>边框宽度属性取值可以是thin、medium、thick或长度值，默认值是medium。</LI>
<LI><A href="SAMPLE/S09_14.HTM">例9.14</A>，设计一个页面，使用JavaScript脚本把一个段落的显示效果设置为与“<P
style="border-width:thin medium
thick;border-style:solid;border-color:gray">”相同。</LI>
</UL>
</LI>
<LI>二、边距属性
<UL>
<LI>
CSS边距属性margin-left、margin-right、margin-top和margin-bottom分别设置左、右、上、下边界的宽度。</LI>
<LI>
使用margin属性可以同时指定上、右、下、左(以此顺序)边界的宽度。如果只指定一个值，则四个方向都采用相同的边距；如果指定了2或3个值，则没有指定边距的边采用对边的边距。</LI>
<LI><A href="SAMPLE/S09_15.HTM">例9.15</A>，设计一个页面，使用JavaScript脚本把该页面的边距设置为与“<BODY
style="margin: 1cm 3cm">”相同。</LI>
</UL>
</LI>
<LI>三、填充属性<UL>
<LI>
CSS填充属性padding-left、padding-right、padding-top和padding-bottom分别设置左、右、上、下填充区的宽度。</LI>
<LI>
使用padding属性可以同时指定上、右、下、左四个方向(以此顺序)填充的宽度。如果只指定一个值，则四个方向都采用相同的填充宽度；如果指定了2或3个值，则没有指定填充宽度的边采用对边的填充宽度。</LI>
<LI><A href="SAMPLE/S09_16.HTM">例9.16</A>，设计一个页面，使用JavaScript脚本把一个段落的填充距设置为与“<P
style=" padding:2em 4em">”相同。</LI>
</UL>
</LI>
<LI>四、浮动属性
<UL>
<LI>CSS浮动属性包括float和clear。<UL>
<LI>float属性可以将元素的内容浮动到页面左边缘或右边缘，它取值为none、left或right，默认值为none，指示元素不浮动到任一边缘。</LI>
<LI>
clear属性指定元素是否允许浮动元素在它旁边，取值为none、left、right或both，默认值为none，表示允许浮动元素在其旁边；值left表示跳过左边的浮动元素，right表示跳过右边的浮动元素，both表示跳过所有的浮动元素。</LI>
</UL>
</LI>
<LI><A href="SAMPLE/S09_17.HTM">例9.17</A>，设计一个页面，它含有一个图片和两段文字，要求图片浮动到第1段的左边，并且使用JavaScript脚本使另一段不允许浮动元素出现在它旁边。</LI>
</UL>
</LI>
</UL>
<H3><A name="9.5.5 列表属性">9.5.5 列表属性</A>
<A href="#第九章 级联样式表(CSS)技术">(目录)</A></H3>
<UL>
<LI>列表属性用于设置列表的格式，例如可以把图片设置为项目符号。</LI>
<LI>CSS列表属性包括
list-style、list-style-image、list-style-position以及list-style-type，如表9-8所示。</LI>
<LI><A href="SAMPLE/S09_18.HTM">例9.18</A>，设计一个页面，它有两个列表，一个是使用大写罗马数字编号的有序列表，另一个是无序列表。要求使用JavaScript脚本把一个小图片作为无序列表的项目符号<BR>
</LI>
</UL>
<H3><A name="9.5.6 鼠标属性">9.5.6 鼠标属性</A>
<A href="#第九章 级联样式表(CSS)技术">(目录)</A></H3>
<UL>
<LI>用CSS来改变鼠标的属性，就是当鼠标移动到不同的元素对象上面时，让鼠标以不同的形状、图案显示。 </LI>
<LI>在CSS当中，这种样式通过cursor属性来实现。Cursor属性可以有表9-9所示的值。</LI>
<LI><A href="SAMPLE/S09_19.HTM">例9.19</A>，设计一个页面，使访问者用鼠标指向页面上的不同文字时，鼠标的形状会有所不同。</LI>
</UL>
<H3><A name="9.5.7 定位和显示">9.5.7 定位和显示</A>
<A href="#第九章 级联样式表(CSS)技术">(目录)</A></H3>
<UL>
<LI>定位和显示属性用于控制页面元素的位置和显示。</LI>
<LI>一、定位属性<UL>
<LI>CSS定位属性包括position、top、bottom、left、right和z-index。<UL>
<LI>
position属性指定元素如何在页面上定位，取值为：static(默认值)、relative或absolute。static表示正常定位，relative是指定位在相对于页面上前一个元素的尾端位置，absolute是用绝对位置指定元素在页面中的位置。</LI>
<LI>top和left属性指定某元素与其父或其他元素之间的距离。</LI>
<LI>z-index属性控制元素的堆叠，值较高的元素将覆盖值较低的元素。如果使用值-1，则表示元素将置于页面默认文本的后边。</LI>
</UL>
</LI>
<LI><A href="SAMPLE/S09_20.HTM">例9.20</A>，设计一个页面，使用top、left和z-index属性使三段相同文字堆叠，从而产生阴影字效果</LI>
</UL>
</LI>
<LI>二、宽高和剪裁属性
<UL>
<LI>
在CSS中，可以用width和height属性控制元素的宽度和高度，用clip和overflow属性控制元素的剪裁。当使用这些属性时，position属性必须指定为absolute。</LI>
<LI>clip属性确定对象的剪裁区域，取值为rect(top right bottom
left)或auto。其中top、right、bottom和left用于指定上、右、下、左4个方向上的剪裁长度，取值为(相对于原区域顶边界或左边界的)长度值或auto。如果任意一边使用auto，则相当于该边没有进行剪裁。</LI>
<LI>
overflow属性用于设置当元素的内容超出它的高度和宽度限制时，浏览器如何进行处理，取值可以是visible、hidden、scroll或auto，其中visible是默认值。值visible表示不剪裁内容，也不添加滚动条；hidden表示剪裁内容，不显示超出部分的内容；scroll表示剪裁内容，同时提供滚动条；auto表示只有在必要时才剪裁内容并添加滚动条。</LI>
<LI><A href="SAMPLE/S09_21.HTM">例9.21</A>，设计一个页面，显示图像的多种剪裁效果。</LI>
</UL>
</LI>
<LI>三、显示属性<UL>
<LI>在CSS中，有两个属性可以控制元素的显示和隐藏，即display属性和visibility属性。<UL>
<LI>
display属性控制元素的显示方式，取值为none、inline或block。None使元素不显示，而且元素也将退出当前的页面布局层，不占用任何显示空间；block使元素以块方式(如<P>标记)显示；inline使元素以内嵌方式(如<B>标记)显示。对于块元素，默认值是block,对于内嵌元素，默认值是inline。</LI>
<LI>
visibility属性控制元素是否可见，取值为visible（可见）、hidden（隐藏）和inherit(继承)，默认值为inherit。与display属性的不同之处在于：当隐藏元素时，仍然为元素保留原有的显示空间。</LI>
</UL>
</LI>
<LI><A href="SAMPLE/S09_22.HTM">例9.22</A>，设计一个页面，通过脚本控制一个<SPAN>元素的display和visibility属性，以体会其效果和区别。</LI>
</UL>
</LI>
</UL>
<H3><A name="9.5.8 CSS滤镜">9.5.8 CSS滤镜</A>
<A href="#第九章 级联样式表(CSS)技术">(目录)</A></H3>
<UL>
<LI>
滤镜(filter)是CSS的一种扩充，它能够将特定的效果(如阴影效果、模糊效果、翻转效果等)应用于文本容器、图片或其他对象。在JavaScript脚本中，应用滤镜可以创建出更复杂美观的交互式网页。</LI>
<LI>滤镜效果通过filter样式表属性定义，格式如下： <BR>
filter:滤镜名称（参数）<UL>
<LI>其中的参数用于控制特定的滤镜效果。例如，如果要为IMG标记定义透明度效果，可以使用样式定义：IMG {filter:
alpha(Opacity=80)}。其中，Opacity=80 是参数指定，用于控制透明度。</LI>
<LI>也可以同时指定多个滤镜效果，此时只需将不同的滤镜用空格分隔即可。例如，以下样式定义为IMG标记同时应用透明度和垂直翻转效果：<BR>
IMG{filter: alpha(Opacity=80) flipV()}。 </LI>
</UL>
</LI>
<LI>表9-10列出可以使用的各种滤镜效果。</LI>
<LI>
与大多数CSS属性不同，滤镜属性只能应用于HTML控件元素。所谓HTML控件元素是指它们在网页上定义了一个矩形空间，浏览器窗口可以显示这些空间。常见的HTML控件元素包括：BODY、BUTTON、DIV、IMG、INPUT、MARQUEE、SPAN、TABLE、TD、TEXTAREA、TH。</LI>
<LI><A href="SAMPLE/S09_23A.HTM">例9.23A</A>，设计一个页面，为图片设置alpha、chroma、flipH、flipV、gray、invert、wave和xray等滤镜效果。</LI>
<LI><A href="SAMPLE/S09_23B.HTM">例9.23B</A>，设计一个页面，为文本设置一些滤镜效果。</LI>
</UL>
</BODY>
</HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -