您的位置:CSS5 > CSS入门 >

 

span边框设置_span标签边框CSS设置

 

用CSS样式给span标签设置所需边框样式图文教程

一、元素介绍:

span是html标签之一。
span标签语法:<span></span>

边框对应css样式单词:border(了解border教程)

二、span标签直接使用边框代码

无论span标签还是div标签P标签都可以直接标签内使用style直接设置所需CSS样式代码。

这里再次使用style对span直接设置边框样式。

1、代码

<span style="border:2px solid #F00">对span设置2px红色边框</span>

2、效果

直接对span标签设置css边框样式
直接对span标签设置css边框样式

三、外部CSS对span设置边框

外部CSS设置html span边框样式,要么使用id要么使用class引入选择器设置。

1、完成HTML+CSS代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>span的边框设置实例 CSS5</title>
<style>
.span-a{ border:1px solid #00F}
#span-b{ border:1px dashed #090}
</style>
</head>

<body>
<p>
<span class="span-a">使用class引入外部CSS设置边框</span>
</p>
<p>
<span id="span-b">使用id引入外部CSS设置边框</span>
</p>
</body>
</html>

2、效果截图

分别对span用了class和id引入外部CSS设置span边框样式。
分别对span用了class和id引入外部CSS设置span边框样式。

四、总结

以上为span边框设置教程,对于常用边框样式可进入CSS5网站border边框教程和相关教程学习。

标签(Tag): span 边框
本文分享URL地址:http://css5.com.cn/css/1520.shtml

更多

上一页: 上一篇:css3和css的区别 两版本css区别不同地方
下一页: 下一篇:没有了

 

CSS必备基础教程 - TOP

 

热门信息

 

CSS5更新 - TOP

 

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解。
CSS教程文章修订日期::2018-07-24     点击:
原创:CSS5     来源网址:http://css5.com.cn/css/1520.shtml
本文css5.com.cn(DIV CSS) CSS5版权所有,欢迎转载,并注明出处来源及URL!