HTML+CSS+DIV网页设计与布局 作者 聂斌 第10章 设置背景、边框、边.pptVIP

10.5.4 设置右侧补白 右侧补白是指设置页面中元素与右侧边界之间的间隔，其语法是： padding-right:距离值 一般采用数值加单位的方式设置距离，如果省略单位，则认为是以像素为单位。 10.5.5 综合设置补白 如果要同时设置某个元素的4个补白，除了可以分别进行设置外，还可以使用复合属性padding来进行，其语法是： padding:各个方向的补白 10.6 小结 本章主要讲解了HTML中的背景颜色、背景图像、边框、边距和补白的设置。其中背景图像包括如何设置背景图像、设置固定背景图像、设置背景图像平铺方式和背景图像定位；边框包括设置边框样式、边框宽度和边框颜色；边距包括设置上边距、下边距、左边距和右边距；补白包括设置顶端补白、底部补白、右侧补白和左侧补白。 第10章 设置背景、边框、边距和补白 背景颜色、背景图片、边框和边距，这些在网页设计中都是使用得比较多的修饰方法。合理地配置网页的前景色与背景色，再加以边框和边距的辅助，可以让网页看起来更为漂亮。 在线教务辅导网： 教材其余课件及动画素材请查阅在线教务辅导网 QQ:349134187 或者直接输入下面地址： 10.1 背景颜色 背景通常指的是除了文本与边框之外的所有颜色。在CSS里可以使用background-color来设置背景颜色。background-color属性的语法代码如下： background-color : transparent | 颜色 | inherit 10.2 背景图像 页面中的元素背景除了可以设置为特殊的颜色外，还可以使用图像进行设置。使用图像作为元素背景，除了需要设置图像的源文件，同时还需要设置其他一些属性。 10.2.1 背景图像 在HTML中设置网页背景图片的方式为body background= 图片URL，那CSS中设置背景图片的属性为background-image，该属性不但可以设置网页背景图片，还可以设置表格、单元格、按钮等元素的背景图片。 background-image属性的语法代码如下： background-image : none | url (uri) | inherit 10.2.2 设置固定背景图像 通常在网页上设置了背景图片之后，背景图片都会平铺在网页的下方，当网页内容比较多时，在拖动滚动条时，网页的背景会跟着网页的内容一起滚动。 在CSS里使用background-attachment属性可以将背景图片固定在浏览器上，此时如果拖动滚动条，背景图片不会随着网页内容滚动而滚动，看起来好像文字是浮动在图片上似的。background-attachment属性的语法代码如下： background-attachment : scroll | fixed | inherit 10.2.3 设置背景图像平铺方式 在HTML里，如果背景图片大小小于浏览器窗口大小，浏览器会自动将背景图片平铺以充满整个浏览器窗口。不过在很多种情况下，这种方式并不是最好的背景图片展现方式。CSS中可以通过background-repeat属性来设置背景图片的平铺方式，background-repeat属性的语法代码如下： background-repeat : repeat | no-repeat | repeat-x | repeat-y | inherit 10.2.4 背景图像定位 默认情况下，背景图像都是从元素的左上角开始显示的，使用background-position属性可以更改背景图像的开始显示位置，其语法是： background-position:位置的具体值 10.3 边框 表格的边框很容易理解，其实在HTML里，很多对象都是拥有边框的，如div、input等。在HTML里，这些元素的边框都是很呆板的，甚至有些元素还显示不了边框，有了CSS之后，网页开发者就可以很轻松地设置边框的样式了，如边框的粗细、颜色等等。 10.3.1 设置边框样式 边框的样式在边框的几个属性里可以说是最重要的属性了，边框样式除了可以改变HTML里呆板的边框样式之外，在某些时候甚至还可以控制边框是否显示。在CSS中设置边框样式的属性为border-style，该属性的语法代码为。 border-style :边框的样式值 在这里可以设置为边框设置多种线条效果，也就是边框的样式值，例如实线、点线、短线等，具体的取值及效果如下表所示。 10.3.2 设置不同的边框样式 使用border-style属性也可以为对象四个边框设置不同的样式，其设置方法与border-width属性类似。 可以直接使用border-style属性设置4个边框的风格，它们对应的边框顺序依次是上边框、右边框、下边