ASP.NET动态网页设计案例教程 教学课件 作者 郭建东 教程及教案chap02.ppt

《ASP.NET动态网页设计案例教程 教学课件 作者 郭建东 教程及教案chap02.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第2章CSS样式与母版页学习要点掌握简单CSS样式设计掌握母版页的创建、应用及在母版页中使用样式掌握主题的应用使用CSS布局页面使用CSS布局网页是Web标准的基础，使用CSS，可对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。使用CSS＋Div布局页面主要优点如下：结构清晰，容易被搜索引擎搜索到。缩短改版时间，只要修改CSS文件就可以重新设计页面。表现与内容相分离，将设计部分分离出来放在一个独立的样式文件中。可方便将网页的风格格式同时更新。CSS概述CSS是CascadingStyleSheets的简称，通过CSS可将所有有关文档的样式指定内容全

2、部脱离出来，通过外部样式文件供HTML调用。CSS样式表的主要目的是将网页上的元素进行精确定位，把网页上的内容结构和格式控制相分离。把一个网页页面当作是一个盒子，用CSS来定义盒子的位置、大小、边框、内外边距、内容排列方式等。CSS方框模型参考如图2-1所示。图2-1CSS方框模型参考CSS盒子模型示例图2-2盒子模型示例ASP.NET中应用CSS样式建立CSS样式文件添加样式规则设置样式属性样式引用CSS样式属性ASP.NET中的CSS样式属性设置包括对字体、块、背景、边框、方框、定位、布局、列表、表格共9大类进行设置。字体属性块属性背景属性边框属性方框属性

3、定位属性布局属性列表属性表格属性字体属性设置网页中的文字的字体、颜色、风格等。font-family：指定文本的字体。font-size：对文字的大小进行设置。font-weight：设置字体的粗细。font-style：设置字体的风格。font-varian：设置文本的大小写字母。text-transform：控制字母的大小写转换。color：设置文本的颜色。text-decoration：控件链接文本的显示状态。块属性CSS中的区块指的是网页中的文本、图像和层等替代元素，主要控制块中内容的间隔、对齐等。line-height：行高设置。vertical-a

4、lign：块的垂直对齐方式。text-align：块的水平对齐方式。text-indent：设置块的缩进程度。white-space：设置空白格式，在HTML里，空格（空白）默认是被忽略的。word-spacing：字之间的空白。letter-spacing：字符之间的空白。背景属性用于在网页元素后面加固定的背景色或图像background-color：设置背景颜色。background-image：设置背景图片。background-repeat：当显示图片的位置与图片大小不同时，确定背景图片是否重复显示及如何重复显示。background-attachme

5、nt：确定背景图片是固定在原始位置还是随内容一起滚动。background-position（x）或（y）：指定图片相对元素的初始位置（对齐方式）。边框属性边框是位于外边距和内边距间的线。使用CSS的边框属性，可以创建出如同表格一样效果的边框样式，可应用于任何元素上，每个边框分为上、右、下、左四个边。border-style：设置边框的样式。border-width：设置边框的粗细。border-color：设置边框的颜色。方框属性CSS把所有块元素都当作一个由一个方框包围，可对每个块元素设置外边距和填充空间大小。可分别设置上、右、下、左四个方向的边距。pad

6、ding：块元素内边距。margin：块元素外边距。定位属性利用定位属性，可以建立列式布局，即布局的一部分与另一部分重叠。position：确定定位类型。z-index：设置块元素的叠放顺序。width、height：确定元素的宽度和高度。top、right、bottom、left：设置元素上、右、下、左的位置。布局属性用于设置块元素在网页中的显示方式。visibility、display：控制元素的隐藏、显示。float：设置块元素的浮动效果。clear：清除块元素的浮动效果。cursor：某个元素使用光标的形状。overflow：当元素高度或宽度超出时溢出

7、处理方式。clip：元素被定为绝对定位类型后，对块元素的剪切。列表属性控制列表内各项元素。list-style-type：列表内每一项前使用的符号。list-style-image：用于代替每一列表项前符号的图片。list-style-position：列表位置。表格属性设置表格外观相关属性。table-layout：完成表布局的方式。border-collapse：设置表格的边框是否被合并为一个单一的边框。border-spacing：设置相邻单元格的边框与边框间的距离（空白）。empty-cells：设置是否显示表格中的空单元格（仅用于“分离边框”模式）。

8、caption-side：设置表格标题