2015-09-21 第三节课 css属性 border(边框)、background(背景)
一、border的用法
border的属性有:border-color:边框颜色
border-width: 表示边框的粗细
border-style:边框样式(solid实线、dashed虚线、dotted:点线)
通常的写法:border:solid 3px red;
HTML如下:
<div id="d1"> 边框高度 边框宽度 边框颜色 </div>
CSS如下:
#d1{ width:200px; height:200px; border:solid 2px red; }
二、设置网页背景(background)
网页背景属性有:background-color:背景颜色
background-image:背景图片
background-repeat:背景重复分别有三个属性:(repeat-x; (横向铺满) repeat-y;(纵向铺满)no-repeat;(不铺满)
background-position:22px 25px 背景图像的位置
background-attachment:fixed 背景图片的固定
/*background-size:cover(拉伸铺满)*/
通常的写法:background:#FC6 url(../images/9.png) no-repeat fixed 5px 10px;
HTML如下:
<body> <div id="d2"> <p>金柄撑宝伞,周边缀美饰,形妙极庄严,亦展献诸佛。金柄撑起的各种珍宝伞,周边点缀着美丽的装饰品,外形特别庄严,将这样的宝伞也供养诸佛菩萨。</p> <p>觉林菩萨偈华严第四会,夜摩天宫,无量菩萨来集,说偈赞佛。尔时觉林菩萨,承佛威力,遍观十方,而说颂言。譬如工画师,分布诸彩色,虚妄取异相,</p> <p>没有悟的人,与大悟以后的人,前途各有不同。大略替你们讲一下子,不然,这样下去,是不容易分别。未悟的人,眼睛是没有打开的,犹如瞎子一般。</p> <p>人的爱好、秉性、工作、家庭等千差万别,所立功课不应强求一致。佛法的修持,不外乎戒定慧三学;戒定慧修持次第,不外乎闻思修:闻而后能思,思而后能修。</p> </body> </html>
CSS如下:
#d2{ width:300px; height:300px; border:solid 2px red; background-color:#FC6; /*背景颜色*/ background-image:url(../images/9.png); /*背景图片*/ background-repeat:no-repeat; /*背景重复*/ background-position:22px 25px;/*背景方位*/ background-attachment:fixed;/*背景固定*/ }
三、CSS之Overflow属性
overflow属性规定当内容溢出元素框时发生的事情,有四个参数,分别是:
visible:默认的值。(内容不会被修剪,会呈现在元素框之外)。
hidden:超出的内容会被隐藏掉。
scroll:内容会被修剪,但是浏览器会显示一个滚动条,以便查看其余的内容。
auto:在内容不需要滚动条的时候不会出现滚动条,如果内容超出范围就会显示滚动条。
分别说一下各个参数的用法:
1.visible
Overflow的Visible属性是默认值,如果你不设置overflow属性,则默认的属性值就是visible。如下图:
2.hidden
hidden值与默认值相反,它会将所有超出范围的内容都给隐藏掉.如下图:
3.scroll
设置overflow值为scroll将会隐藏掉盒子之外的内容,但是它将会提供一个滚动条在盒子内部滚动,从而可以查看剩下的内容。如下图:
值得注意的是,使用scroll将会同时产生水平和垂直两个滚动条,如果内容只需要其中一个可以通过overflow-x:hidden;overflow-y:hidden;来控制滚动条的隐藏!如下图:
overflow-x:hidden; | overflow-x:hidden; |
4.auto
Overflow的auto值与scroll很像,它唯一不同的是在内容不需要滚动条的时候不会出现滚动条,如果内容超出范围就会显示滚动条。如下图:
作者:逢场作戏
出处:http://www.cnblogs.com/ruanmou
博客园:逢场作戏博客
说明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。