Web前端开发学习之路——初识CSS的基本功能（三）

最新推荐文章于 2022-05-03 21:37:38 发布

宇直豪

最新推荐文章于 2022-05-03 21:37:38 发布

阅读量384

点赞数

分类专栏：前端开发文章标签：前端开发

本文链接：https://blog.csdn.net/CSDN_XUWENHAO/article/details/88596515

版权

前端开发专栏收录该内容

15 篇文章 1 订阅

订阅专栏

控制边界与边框

边界

margin-top：上边界
margin-right：右边界
margin-bottom：下边界
margin-left：左边界

使用方法例如：

div{
margin-top:20px;
margin-right:40pt;
margin-bottom:120%;
margin-left:auto;
}

下面看一个范例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin</title>
    <style type="text/css">
        <!--
        img.one{
            margin-top: 20px;
            margin-right: 20px;
            margin-bottom: 10px;
            margin-left:5px;
        }
        img.all{margin:5px 15px 10px 20px;}
        -->
    </style>
</head>
<body>
<table border=1 bordercolor="#000000"align="center">
    <tr>
        <td><img src="images/pic.jpg" width="231" height="200" border="0"> </td>
    </tr>
</table><br>
<table border=1 bordercolor="#000000">
    <tr>
        <td><img src="images/pic.jpg" width="231" height="200" border="0" class="one"> </td>
        <td><img src="images/b.jpg" width="191" height="111" border="0" class="all"></td>
    </tr>
</table>
</body>
</html>

执行结果如下：

可以看出未加margin属性之前，图片会紧贴着表格，图片加了margin属性，图片四边与表格有了距离。

**边框属性**
属性	属性名称	设置值
border-style	边框样式	none(默认值) solid(实线) dotted(点线) double(双实线) groove(3D凹线) ridge(3D凸线) inset(3D嵌入线) ouset(3D复出线)
border-top-style border-left-sytle border-bottom-style border-right-style	上下左右四边的边框样式	同Border-style
border-width	边框宽度	宽度数值+单位 thin(薄) thick(厚) medium(中等，默认值)
border-top-width border-left-width border-bottom-width border-right-width	上下左右四边的宽度	与border-width相同
border-color	边框颜色	颜色名称十六进制(HEX)码 RGB码
border-top-color border-left-color border-bottom-color border-right-color	上线左右四边的边框颜色	与border-color相同
border	综合设置
border-radius	圆角边框	长度(px)或百分比(%)
border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius	上下左右四边圆角	长度(px)或百分比(%)
border-image	花边框线

下面进行一个实例，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border-style</title>
    <style type="text/css">
        <!--
        img{border-style: solid groove inset dashed}
        div{border-top-style: dotted;border-bottom-style:dashed;}
        -->
    </style>
</head>
<body>
<table>
    <tr>
        <td width="200" height="210" align="center"><img src="images/cat.jpg"width="200" height="210"></td>
        <td width="200" height="210" align="center"><div>Curiosity killed the cat<br>好奇心害死猫</div></td>
    </tr>
</table>
</body>
</html>

执行结果如下：

border边框综合设置语法如下：

div{ border:#0000FF 5px solidl}

border-radius圆角边框语法：

border-radius:25px;
border-radius:25px 10px 15px 30px;
//其中还有border-top-left-radius、border-top-raight-radius、border-bottom-left-radius以及border-bottom-right-radius可以进行设置

border-image是可以用图片做一个花边框，具体语法如下：

border-image:url(border.png) 35 25 25 15;
//stretch:把图片拉伸到整个边框区域
//repeat:重复填充
//round:重复填充并自动调整图片大小

边界间距

div{padding:5px 10px 15px 20px;}/*上5px右10px下15px左20px*/
div{padding:5px;}/*四个边界都为5px*/
div{padding:5px 10px;}/*上5px右10px下5px左10px*/
div{padding:5px 10px 15px;}/*上=5px右10px下15px左10px*/

网页组件的定位

**位置的属性**
属性	属性名称	设置值
position	设置组件位置的排列方式	absolute relative static
width	指定组件宽度	宽度数值
height	指定组件高度	高度数值
left	指定组件与左边界的距离（X坐标）	距离数值
top	指定组件与上边界的距离（Y坐标）	距离数值
overflow	超出边界的显示方式	距离数值
visibility	设置是否显示	visible hidden inherit

absolute(绝对寻址)：以使用position定位的上一层组件（父组件）的左上角点为原点来进行定位。如果找不到position定位的上一层组件，则以<body>左上角为远点来定位。

relative(相对定位)：以组件本身的左上角点为原点来定位。

请参考下面的范例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件的定位</title>
    <style>
        <!--
        span{
            position: absolute;
            width:200px;
            height: 150pt;
            border:1px solid #330000;
        }
        -->
    </style>
</head>
<body>
<table border=1 align ="center">
    <tr>
        <td>
            <span style="left:10px;top:10px;overflow:visible;">
                落日熔金，暮云合璧，人在何处。<br/>
                染柳烟浓，吹梅笛怨，春意知几许。<br/>
                元宵佳节，融和天气，次第岂无风雨。<br/>
                来相召、香车宝马，谢他酒朋诗侣。<br/>
                中州盛日，闺门多暇，记得偏重三五。<br/>
                铺翠冠儿，捻金雪柳，簇带争济楚。<br/>
                如今憔悴，风鬟霜鬓，怕见夜间出去。<br/>
                不如向、帘儿底下，听人笑语。<br/>
            </span>
        </td>
        <td>
            <span style="left:220px;top:10px;overflow: hidden;">
                落日熔金，暮云合璧，人在何处。<br/>
                染柳烟浓，吹梅笛怨，春意知几许。<br/>
                元宵佳节，融和天气，次第岂无风雨。<br/>
                来相召、香车宝马，谢他酒朋诗侣。<br/>
                中州盛日，闺门多暇，记得偏重三五。<br/>
                铺翠冠儿，捻金雪柳，簇带争济楚。<br/>
                如今憔悴，风鬟霜鬓，怕见夜间出去。<br/>
                不如向、帘儿底下，听人笑语。<br/>
            </span>
        </td>
        <td>
            <span style="left:440px;top:10px;overflow:scroll;">
                落日熔金，暮云合璧，人在何处。<br/>
                染柳烟浓，吹梅笛怨，春意知几许。<br/>
                元宵佳节，融和天气，次第岂无风雨。<br/>
                来相召、香车宝马，谢他酒朋诗侣。<br/>
                中州盛日，闺门多暇，记得偏重三五。<br/>
                铺翠冠儿，捻金雪柳，簇带争济楚。<br/>
                如今憔悴，风鬟霜鬓，怕见夜间出去。<br/>
                不如向、帘儿底下，听人笑语。<br/>
            </span>
        </td>
        <td>
            <span style="left:660px;top:10px;overflow:auto;">
                落日熔金，暮云合璧，人在何处。<br/>
                染柳烟浓，吹梅笛怨，春意知几许。<br/>
                元宵佳节，融和天气，次第岂无风雨。<br/>
                来相召、香车宝马，谢他酒朋诗侣。<br/>
                中州盛日，闺门多暇，记得偏重三五。<br/>
                铺翠冠儿，捻金雪柳，簇带争济楚。<br/>
                如今憔悴，风鬟霜鬓，怕见夜间出去。<br/>
                不如向、帘儿底下，听人笑语。<br/>
            </span>
        </td>
    </tr>
</table>
</body>
</html>

执行结果如下：

下面再看一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图文混排</title>
    <style>
        div{
            width: 200px;
            img{float:left;}
        }
    </style>
    <div>
        <img src="images/pic.jpg" width="100">这个例子是为了给大家展示float:left是如何做到图文混排的效果。
    </div>
</head>
<body>

</body>
</html>

执行结果如下：

图层定位,z-index:层次数值，例如：

<img src="sample.gif" style="position:absolute;top:30;z-index:1">

我们再用一个实例来很清楚的说明这个层次关系：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图层定位</title>
    <style>
        <!--
        #layer1{
            position:absolute;
            z-index:1;
            top:20px;
            left:30px;
            font-size:24pt;
            font-family: 楷体;
            color:#FFFFFF;
        }
        #layer2{
            position: absolute;
            z-index:2;
            width:200px;
            top:110px;
            left:100px;
            font-size:12pt;
            font-family: 楷体;
        }
        -->
    </style>
</head>
<body>
<div id="layer1"><img src="images/cat.jpg"width="200" height="210" border="0"></div>
<div id="layer2"><font size="5" face="Broadway BT" color="#FF9900">Dont't put off
till tomorrow what you can do today.</font></div><!--layer2的z-index的层次较高，故此文字应该在图片上面-->
</body>
</html>

执行结果如下：

文字在图片上方。z-index后面的值越大，就会越位于上层

超链接与鼠标光标特效

a:{样式属性：属性值;}        /*声明超链接样式*/
a:link{样式属性：属性值;}        /*尚未声明超链接样式*/
a:visited{样式属性：属性值;}        /*已链接的超链接样式*/
a:active{样式属性：属性值;}        /*激活时超链接样式*/
a:hover{样式属性：属性值;}        /*当鼠标悬停链接时的超链接样式*/

<style type="text/css">
<!--
a {border:1px red solid;}  //声明超链接的样式时红色实实线、宽1px的边框
a:link {color:black;}    //未链接前超链接文字颜色是黑色
a:visited {color:blue;border:0px;}    //已链接过的超链接文字颜色为蓝色，没有边框    
a:active {color:yellow;}    //激活时超链接文字颜色为黄色    
a:hover {border:1px green solid;text-decoration:none;}    //当鼠标移到链接时的超i按揭样式是绿色实线、宽1px的边框，文字不添加下划线
-->
</style>

下面看一个超链接的实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
    <style type="text/css">
        <!--
        a{
            border: 1px #d5311c solid;
            color: #398bfb;
            background-color: #e6e6e6;
            height: 20px;
            padding: 5px;
            width: 120px;
            text-align: center;
        }
        a:hover{
            border: 2px #605080 solid;
            color:#999999;
            background-color: #84d52e;
        }
        -->
    </style>
</head>
<body>
<img src="images/f.png" width="78" height="72" border="0"><p>
    <a href="#">回首页</a>>   <!--#表示空链接-->
    <a href="#">与我联系</a>
</body>
</html>

执行结果如下：

鼠标悬停在“与我联系上”显示绿色。

除了文字超链接之外，图片也能当作超链接样式，当我们鼠标移动到超链接上时还能更换另一张图片，程序如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片超链接</title>
    <style type="text/css">
        <!--
        a{
            color:#990000;
            height: 200px;
            width: 200px;
            text-align: center;
            line-height: 55px;
            background-image: url("images/c1.png");
            text-decoration: none;
        }
        a:hover{
            color:#006600;
            background-image: url("images/c2.png");
        }
        -->
    </style>
</head>
<body>
<a href="#">公司简介</a>
<a href="#">产品简介</a>
<a href="#">与我联系</a>
<a href="#">回首页</a>
</body>
</html>

执行结果如下：

鼠标光标特效

<style type:"text/css">
<!--
a{cursor:crosshair;}
-->
</style>


计算机种常见的鼠标光标（cursor样式）
cursor:auto;(默认值)
cursor:crosshair;
cursor:pointer;
cursor:text;
cursor:move;
cursor:wait;
cursor:help;
cursor:progress;
cursor:not-allowed;
cursor:no-drop;
cursor:all-scrol;
cursor:col-size;
cursor:row-resize;
cursor:e-resize;
cursor:ne-resize;
cursor:n-resize;
cursor:nw-resize;

除此之外，我们还可以使用自己拥有的光标图案，案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义鼠标光标</title>
    <style type="text/css">
        <!--
        body{
            cursor:url("images/link.cur"),url("images/c1.png"),auto;
        }
        -->
    </style>
</head>
<body>
<img src="images/cat.jpg" width="231" height="200" border="0">
</body>
</html>

执行结果如下：

光标文件必须时cur文件，可以从网上下载，但可能部分浏览器不支持cur，所以我们为了使每个浏览器都能正常显示，我们就应该加入多种格式的光标，语法如下：

cursor:url(images/my.cur),url(images/my.png),auto;

本章节总算结束了，基本语法已经大致讲完，由于在编辑过程中，已经快完成了却不知为何突然回到了一半内容之前，导致我不得不重新编辑，在下一章中，我们将结合HTML5和CSS3做一些综合项目...

宇直豪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发学习之路——初识CSS的基本功能（三）

控制边界与边框边界margin-top：上边界 margin-right：右边界 margin-bottom：下边界 margin-left：左边界使用方法例如：div{margin-top:20px;margin-right:40pt;margin-bottom:120%;margin-left:auto;}下面看一个范例：&lt;!DOCTYPE ht...
复制链接

扫一扫

专栏目录