HTML+CSS+DIV网页设计与布局 教学课件 作者 聂斌 1_ 第10章 设置背景 边框 边.ppt

《HTML+CSS+DIV网页设计与布局 教学课件 作者 聂斌 1_ 第10章 设置背景 边框 边.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第10章设置背景、边框、边距和补白背景颜色、背景图片、边框和边距，这些在网页设计中都是使用得比较多的修饰方法。合理地配置网页的前景色与背景色，再加以边框和边距的辅助，可以让网页看起来更为漂亮。10.1背景颜色背景通常指的是除了文本与边框之外的所有颜色。在CSS里可以使用background-color来设置背景颜色。background-color属性的语法代码如下：background-color:transparent

2、颜色

3、inherit10.2背景图像页面中的元素背景除了可以设置为特殊的颜色外，还可以使用图像进行设置。使用图像作为元素背景，除了需要设置图像的源文件，同时还需要

4、设置其他一些属性。10.2.1背景图像在HTML中设置网页背景图片的方式为，那CSS中设置背景图片的属性为background-image，该属性不但可以设置网页背景图片，还可以设置表格、单元格、按钮等元素的背景图片。background-image属性的语法代码如下：background-image:none

5、url(uri)

6、inherit10.2.2设置固定背景图像通常在网页上设置了背景图片之后，背景图片都会平铺在网页的下方，当网页内容比较多时，在拖动滚动条时，网页的背景会跟着网页的内容一起滚动。在CSS里使用background

7、-attachment属性可以将背景图片固定在浏览器上，此时如果拖动滚动条，背景图片不会随着网页内容滚动而滚动，看起来好像文字是浮动在图片上似的。background-attachment属性的语法代码如下：background-attachment:scroll

8、fixed

9、inherit10.2.3设置背景图像平铺方式在HTML里，如果背景图片大小小于浏览器窗口大小，浏览器会自动将背景图片平铺以充满整个浏览器窗口。不过在很多种情况下，这种方式并不是最好的背景图片展现方式。CSS中可以通过background-repeat属性来设置背景图片的平铺方式，background-repe

10、at属性的语法代码如下：background-repeat:repeat

11、no-repeat

12、repeat-x

13、repeat-y

14、inherit10.2.4背景图像定位默认情况下，背景图像都是从元素的左上角开始显示的，使用background-position属性可以更改背景图像的开始显示位置，其语法是：background-position:位置的具体值10.3边框表格的边框很容易理解，其实在HTML里，很多对象都是拥有边框的，如div、input等。在HTML里，这些元素的边框都是很呆板的，甚至有些元素还显示不了边框，有了CSS之后，网页开发者就可以很轻松地设置边框的样式了，如边

15、框的粗细、颜色等等。10.3.1设置边框样式边框的样式在边框的几个属性里可以说是最重要的属性了，边框样式除了可以改变HTML里呆板的边框样式之外，在某些时候甚至还可以控制边框是否显示。在CSS中设置边框样式的属性为border-style，该属性的语法代码为。border-style:边框的样式值在这里可以设置为边框设置多种线条效果，也就是边框的样式值，例如实线、点线、短线等，具体的取值及效果如下表所示。10.3.2设置不同的边框样式使用border-style属性也可以为对象四个边框设置不同的样式，其设置方法与border-width属性类似。可以直接使用border-style属

16、性设置4个边框的风格，它们对应的边框顺序依次是上边框、右边框、下边框和左边框。如果这里只设置了1个边框风格，则会对4个边框同时起作用；如果设置了两个，则第1个值应用于上下边框，第2个值应用于左右边框；如果提供3个，第1个用于上边框，第2个用于左右边框，第3个用于下边框。10.3.3设置边框宽度在HTML里的table元素可以使用border属性来设置边框的宽度，在CSS里可以使用border-width属性来设置边框宽度，但是border-width属性不仅仅可以设置表格的边框宽度，还可以设置任何一个有边框的对象的边框宽度。border-width属性的语法代码如下所示。border

17、-width:medium

18、thin

19、thick

20、数值10.3.4设置不同的边框宽度使用border-width属性不仅仅可以设置整个边框宽度，还可以设置单个边框的宽度。用法和设置边框样式一样，如果这里只设置了1个边框宽度，则会对4个边框同时起作用；如果设置了两个边框宽度，则第1个值应用于上下边框，第2个值应用于左右边框；如果提供3个边框宽度，第1个用于上边框，第2个用于左右边框，第3个用于下边框。10.3.4设置边框颜色在HTML里没有办法为表格设置边框