span边框设置_span标签边框CSS设置_ThinkCSS
您的位置:首页 > 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的边框设置实例 thinkcss</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边框设置教程,对于常用边框样式可进入thinkcss网站border边框教程和相关教程学习。

相关标签: 边框 span
如需转载,请注明文章出处和来源网址:www.thinkcss.com/css/1520.shtml

日期:2018-07-24 17:50:16 来源:www.thinkcss.com 作者:thinkcss原创
上一篇:css3和css的区别 两版本css区别不同地方
下一篇:没有了

热门点击