HTML+CSS+DIV网页设计与布局（第2版）（微课版）全套PPT课件.ppt

11.1.1合并表格边框在一个表格中同时存在着两种边框，一种是表格的表框，即表格最外面的四条边框；另一种是单元格的边框，每一个单元格都有自己的边框。在默认情况下，这两种不同的边框是分开来显示的，但在CSS的border-collapse属性的作用下，可以将这两种边框合并起来。border-collapse属性的语法代码如下所示：border-collapse:collapse|separate|inherit11.1.2定义表格边框间距在CSS中可以使用border-spacing属性来为表格设置边框间距，这一点与HTML中的table元素的cellspacing属性十分类似，border-spacing属性的语法代码为：border-spacing:宽度||inherit11.1.3定义表格标题位置在HTML里可以使用caption元素来设置表格的标题，而CSS中的caption-side属性可以用来设置标题放在表格的什么位置上。caption-side属性的语法代码如下所示：caption-side:top|bottom|left|right|inherit11.1.4设置表格布局当一个单元格里对象的宽度超过单元格所定义的宽度时，在能换行时，浏览器会自动在宽度的最大处换行，在不能换行时，浏览器就会自动调整表格列的宽度，以容纳单元格中的对象。在CSS中有一个名为table-layout的属性可以设置是否保证单元格宽度不被改变。table-layout属性的语法代码为：table-layout:auto|fixed|inherit9.4.3词间距在CSS中可以使用word-spacing来设置词间距，词间距是针对英文而言的。目前，浏览器还不能区分中文的“词”与“字”。word-spacing属性的语法代码如下。word-spacing:normal|length|inherit9.4小结本章主要介绍了CSS中文字和文本样式的设置。其中，文字样式设置包括字体设置、文字大小设置、粗体设置、文字颜色设置、斜体设置；文本样式包括设置阴影效果、英文单词大小写转换、文本缩进、文本水平和垂直对齐方式设置、文本流入方式设置以及文本修饰的设置。第10章设置背景、边框、边距和补白背景颜色、背景图片、边框和边距，这些在网页设计中都是使用得比较多的修饰方法。合理地配置网页的前景色与背景色，再加以边框和边距的辅助，可以让网页看起来更为漂亮。10.1背景颜色背景通常指的是除了文本与边框之外的所有颜色。在CSS里可以使用background-color来设置背景颜色。background-color属性的语法代码如下：background-color:transparent|颜色|inherit10.2背景图像页面中的元素背景除了可以设置为特殊的颜色外，还可以使用图像进行设置。使用图像作为元素背景，除了需要设置图像的源文件，同时还需要设置其他一些属性。10.2.1背景图像在HTML中设置网页背景图片的方式为bodybackground=图片URL，那CSS中设置背景图片的属性为background-image，该属性不但可以设置网页背景图片，还可以设置表格、单元格、按钮等元素的背景图片。background-image属性的语法代码如下：background-image:none|url(uri)|inherit10.2.2设置固定背景图像通常在网页上设置了背景图片之后，背景图片都会平铺在网页的下方，当网页内容比较多时，在拖动滚动条时，网页的背景会跟着网页的内容一起滚动。在CSS里使用background-attachment属性可以将背景图片固定在浏览器上，此时如果拖动滚动条，背景图片不会随着网页内容滚动而滚动，看起来好像文字是浮动在图片上似的。background-attachment属性的语法代码如下：background-attachment:scroll|fixed|inherit10.2.3设置背景图像平铺方式在HTML里，如果背景图片大小小于浏览器窗口大小，浏览器会自动将背景图片平铺以充满整个浏览器窗口。不过在很多种情况下，这种方式并不是最好的背景图片展现方式。CSS中可以通过background-repeat属性来设置背景图片的平铺方式，background-repeat属性的语法代码如下：background-repeat:repeat|no-repeat|repeat-x|repe