您的位置:CSS5 > CSS笔记 >

span认识与用法教程

发布日期:2019-07-07 21:40:20 来源:WWW.CSS5.COM.CN

span标签怎么用,span标签的作用,span有什么用,我们来认识span元素html标签。

特点:

span是html布局中常用的标签,span默认没有任何CSS样式。span就是一个最基本的标签,和div标签对应,默认情况下span不独占一行,div独占一行(块)。

语法:

<span>内容</span>

怎么用?用到何处?

HTML布局时,span应用是非常多的,可以对span设置class和id赋予css样式,也可以通过父级指向给与span不加class和id来赋予css样式。

实例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>span实例 www.CSS5.com.cn</title>
<style type="text/css">
.main{
width:300px;
height: 86px;
margin: 0;
background: #fff url(bgs.gif) top left repeat-x;
border:1px solid #00CCFF;font-size:12px;
}
.main span{
background: url(ico.gif) 5px 5px no-repeat;
padding-left:25px; padding-bottom:15px;
color: #fff; font-size:12px; height:24px; line-height:24px;
display:block;/* span设置块(独占一行) */
}
.ab{color:#F00}
</style>
</head>
<body>
<div class="main">
<span>span元素</span>
使用css .main span设置span元素控制标题行的文字及背景图
</div>
<p>看<span class="ab">被加红色</span>这里对span设置class设置字体红色样式!</p>
</body>
</html>

 实例截图:

span用法教程截图
span实例应用

span应用非常多,一般小局部,可以使用span设置所需样式。

运行试试

比如:
1、一段文字中,其中一部分文字设置不同颜色、不同字体大小可以使用span

2、文章列表布局,左边为标题、右边为时间,那么右边时间可以使用span布局

平时布局多用,多实践总结灵活应用span。

标签(Tag): span
本文分享URL地址:https://www.css5.com.cn/biji/1550.shtml

作者:CSS5原创

上一页:上一篇:标签内style属性设置CSS
下一页:下一篇:body里第一个div设置的高度100%成功方法