首页 > 程序开发 > 综合编程 > 其他综合 >

【WEB基础】HTML & CSS 基础入门(5)边框与背景 - 青衫烟雨客 - 博客园

2019-05-24

【WEB基础】HTML & CSS 基础入门(5)边框与背景 前面(HTML图片) 漂亮的网页肯定少不了边框与背景的修饰,本篇笔记就是说明如何为网页上的元素设置边框或者背景(背景颜色和背景图片)。 之前,先了

【WEB基础】HTML & CSS 基础入门(5)边框与背景 前面(HTML图片)

漂亮的网页肯定少不了边框与背景的修饰,本篇笔记就是说明如何为网页上的元素设置边框或者背景(背景颜色和背景图片)。

之前,先了解一下HTML中的图片元素,因为图片标签的使用非常简单,所以就插在这里说明一下。

HTML中的图片,我们只需要掌握它的标签写法以及它的三个属性就基本OK了。

写法格式

主要属性

\

说明<喎"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vc3Ryb25nPqO6zbzGrDxpbWcvJmd0O7Hqx6m4+rbOwuQ8cD48L3A+serHqbK7zKvSu9H5o6w8aW1nLyZndDvKx9K7uPbX1LHVus+x6sepo6yyu8rHs8m21LP2z9a1xKGjwe3N4qOsc3JjyvTQ1Na4w/e1xM28xqzOxLz+wre+tr/J0tTOqs/gttTCt7620rK/ydLUzqq++LbUwre+tqGjPC9wPgo8cD48c3Ryb25nPs/gttTCt762PC9zdHJvbmc+o7rS1LWxx7DN+NKzzsS8/sv51Nq1xM7EvP680M6qu/nXvLaozrujrMjntbHHsM340rPL+dTatcTOxLz+vNDA78Pm09C49mltYWdlc87EvP680KOsuMPOxLz+vNDA79PQ0rvVxc28xqwmbGRxdW87t+e+sDEuanBnJnJkcXVvO6OsxMfDtKOs1eLVxc28xqy1xM/gttTCt762vs3Kx6O6JmxkcXVvO2ltYWdlcy+3576wMS5qcGcmcmRxdW87PC9wPgo8cD48c3Ryb25nPr74ttTCt762PC9zdHJvbmc+o7q++LbUwre+tsrH1rjOxLz+tcTN6tX7wre+tqOsyOejukQ6L9Gnz7AvSFRNTC9pbWFnZXMvt+e+sDEuanBnoaM8L3A+CjxwPsHtzeKjrM7Sw8e/ydLU1NpDU1PW0Mq508N3aWR0aLrNaGVpZ2h0wLS2qNLlzbzGrLXEtPPQoaGj1eLR+aOssru53M28xqy1xMq1vMq089Chyse24MnZo6zO0sPHtry/ydLUsLTV1c340rO1xMq1vMrQ6MfzwLS2qNLlzbzGrLXEz9TKvrTz0KGhozwvcD4KPHA+PHN0cm9uZz7Su7j2wP3X06O6PC9zdHJvbmc+PC9wPgoKPHByZSBjbGFzcz0="brush:java;"> 汽车人

\ CSS 边框

我们可以为网页上的元素设置边框,比如图片、表格、文本块等等。要为某个元素加上边框,一般只需设置三个属性即可。

\

注意:上表中的三个属性写起来很麻烦,因此CSS提供了一个简洁的写法:

\

一个例子:





    


    擎天柱左边是擎天柱

\ CSS 背景

背景也是网页设计中最常用的样式之一,要想页面美观,漂亮的背景是必须的。在CSS中,主要通过背景颜色背景图像两种方式来设置背景样式。

背景颜色 background-color

在CSS中,可以通过 background-color 属性来定义元素的背景颜色。颜色的取值可以是关键字(如:red、blue、green等,基本上都是颜色的英文名称),也可以是一个16进制的RGB值。

color 和 background-color:color是前景色(就是元素文本的颜色),background-color是背景色。

例子:





    


    
我是div元素,红色背景
我是span元素,蓝底白字

\

背景图像

如果背景颜色已经满足不了需求,那么就可以使用漂亮的图片做背景,如果需要设置背景图像,需要掌握以下四个属性设置:

background-image:设置背景图像的地址路径,这是个必选属性。

background-repeat:设置背景的重复方式,属性取值repeat表示水平垂直方向上都平铺,repeat-x 和 repeat-y只在水平或垂直方向上重复,no-repeat表示不平铺。

background-position:定义背景图片的位置。

background-attachment:当文档比较长,该属性可定义背景图像是否随文档滚动。scroll表示背景图像随对象滚动而滚动,是默认选项;fixed可以固定背景图像。

例子:





    


    
第一个DIV,背景图片位置居中,不平铺。
第一个DIV,背景图片重复平铺。

热点推荐