0
点赞
收藏
分享

微信扫一扫

5.边框样式-CSS基础

一、边框

1.设置边框的三方面

(1)边框样式属性

属性 说明
border-width 边框的宽度
border-style 边框的外观
border-color 边框的颜色

二、整体样式

1.边框属性

(1)border-width

(2)border-style

① border-width常用属性值
属性值 说明
none 无样式
dashed 虚线
solid 实线

(3)border-color

2.简写形式

border-width:1px;
border-style:dashed;
border-color:#000000;
上面这段代码其实等价于:
border:1px dashed #000000;

3.示例

① 例1
<!--为图片元素添加边框-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>边框样式-结构样式分离原则</title>
        <!-- <link rel="stylesheet" type="text/css" href="../css/边框样式.css"/> -->
        <style type="text/css">
            img{
                height: 300px;
                border: 2px solid #00FFFF;
            }
        </style>
    </head>
    <body>
        <img src="../img/水.jpg" alt="水天一色" title="水天一色">
    </body>
</html>

② 例2
边框样式.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>边框样式-结构样式分离原则</title>
        <link rel="stylesheet" type="text/css" href="../css/边框样式.css"/>
        <!--
            rel='stylesheet':(固定格式)引入样式表文件。
            type='text/css':(固定格式)标准CSS。
            href="文件路径"
        -->
    </head>
    <body>
        <div id="div1"></div>
        <div id="div2"></div>
    </body>
</html>

边框样式.css
div{
    width:99px;                 /*元素选择器,选择所有div元素*/
    height:45px;
}
#div1{
    border:1px dashed #000000;  /*边框整体样式,简写形式*/
}
#div2{
    border:2px solid #FFC0CB;   /*边框整体样式,简写形式*/
}

三、局部样式

1.上边框:border-top

(1)语法格式

border-top: 1px solid #000000

2.下边框border-bottom

(1)语法格式

border-top: 1px solid #000000

3.左边框border-left

(1)语法格式

border-top: 1px solid #000000

4.右边框border-right

(1)语法格式

border-top: 1px solid #000000

5.总结

6.示例

① 例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>边框样式-结构样式分离原则</title>
        <!-- <link rel="stylesheet" type="text/css" href="../css/边框样式.css"/> -->
        <style type="text/css">
            span{
                border: 1px solid #00FFFF;  /*边框整体样式*/
                border-bottom:0;            /*去除下边框*/
            }
        </style>
    </head>
    <body>
        <span>
            东风夜放花千树,更吹落、星如雨。宝马雕车香满路。凤箫声动,玉壶光转,一夜鱼龙舞。 
            蛾儿雪柳黄金缕,笑语盈盈暗香去。<strong>众里寻他千百度,蓦然回首,那人却在,灯火阑珊处。</strong>
        </span>
    </body>
</html>

7.border-bottom:0;实际开发

举报

相关推荐

0 条评论