CSS的背景属性和边框属性

CSS的背景属性：

background                  简写属性，作用是将背景属性设置在一个声明中

background-attachment       背景图像是否固定或者随着页面的其余部分滚动

background-color            设置元素的背景颜色

background-image            把图像设置为背景

background-position         设置背景图像的起始位置

background-repeat           设置背景图像是否如何重复

实例代码一：

<p style="background-color:pink;

           width:1024px;

           height:600px;

           background-image:url('a.jpg');

           background-repeat:repeat-x;

           ">

    </p>

显示效果：

小结：

背景的属性有5个，可以直接放在background中．

background的属性顺序不是固定，但是建议顺序为:背景色，背景图，是否扩展，位置，是否固定

在默认情况下，背景图的原点是包含其父元素的左上角，但是设置background-attachment:fixed，则原点变成浏览器视窗的左上角

CSS的边框属性:

border                  简写属性，用于把四个边的属性设置在一个声明

border-style            用于设置元素所有的边框，或者单独地为各边设置边框宽度

border-width            用于为元素的所有边框设置宽度，或者单独的为各边框设置宽度

border-color            设置元素的所有边框中可见部分的，或为四个边分别设置颜色

border-bottom           用于把下边框的所有属性设置到一个声明中

border-bottom-color     设置元素的下边框的颜色

border-bottom-style     设置元素的下边框的样式

border-bottom-width     设置元素的下边框的宽度

border-left             用于把左边框的所有属性设置到一个声明中

border-left-color       设置元素的左边框的颜色

border-left-style       设置元素的左边框的样式

border-left-width       设置元素的左边框的宽度

border-right            用于把右边框的所有属性设置到一个声明中

border-right-color      设置元素的右边框的颜色

border-right-style      设置元素的右边框的样式

border-right-width      设置元素的右边框的宽度

border-top              用于把上边框的所有属性设置到一个声明中

border-top-color        设置元素的上边框的颜色

border-top-style        设置元素的上边框的样式

border-top-width        设置元素的上边框的宽度

边框可以设置的样式有：

none            定义无边框

hidden          与"none"相同，对于表，hidden用于解决边框冲突

dotted          定义点状边框

dashed          定义虚线边框

soild           定义实线

double          定义双线，双线的宽度等于border-width的值

groove          定义3D凹槽边框，其效果取决于border-color的值

ridge           定义3D垄状边框，其效果取决于border-color的值

inset           定义3D inset边框，其效果取决于border-color的值

outset          定义3D outset边框，其效果取决于border-color的值

inherit         规定应该从父元素继承边框样式

实例代码二：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        #div-box{

            width:300px;

            height:150px;

            /*border的三个属性值分别是：宽度，样式，颜色*/

            border:3px solid red;

        }

    </style>

</head>

<body>

<div id="div-box">

hello world!

</div>

</body>

</html>

效果如下：

实例代码三：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        *{

            margin:0;/*指定主页面距离父标签的距离*/

            padding:0;

        }

        #div-box{

            width:800px;/*指定灰色边框的宽度*/

            height:500px;/*指定灰色边框匠高度*/

            border:1px solid grey;/*定义边框为1px的实线灰色边框*/

            margin:20px 0 0 20px;/*定义灰色边框距离上个标签20px的距离，距离浏览器边界20px*/

        }

        .img_list{

            list-style:none;/*图像列表无样式*/

            background-color:pink;

        }

        .img_list img{

            width:125px;/*定义每个图像的宽度为125px*/

            height:85px;/*定义每个图像的高度训85px*/

            margin:10px 0 0 20px;/*定义每个图像距离红色边框上边10px,左边20px*/

        }

        .img_list li{

            float:left;/*使用左浮动*/

            border:1px solid red;/*定义每个图像的边框为１px的实线红色边框*/

            width:165px;/*定义每个边框的宽度为165px*/

            height:125px;/*定义每个边框的高度为125px*/

            margin:10px 0 0 10px;/*定义红色边框距离上个标签和左边的标签的距离各为10px*/

        }

        .img_list a{

            display:block;/*把字体转换为块元素*/

            margin-left:60px;/*超链接的字体距离红色边距左边距离为60px*/

            margin-top:-3px;/*超链接的字体距离红色边框下边距离为-3px*/

        }

        .img_list a:hover{

            color:red;/*鼠标悬浮上超链接时，字体变成红色*/

            text-decoration:underline;/*鼠标悬浮上超链接时，字体加下划线*/

        }

    </style>

</head>

<body>

<div id="div-box">

    <ul class="img_list">

        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>

        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>

        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>

        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>

        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>

        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>

        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>

        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>

    </ul>

</div>

</body>

</html>

效果显示为：

巴特西

CSS的背景属性和边框属性

最新文章

热门文章