如何为span标签设置样式，这里分享了为span标签添加样式要注意的问题，为span元素添加的背景样式显示的宽度问题，以及span标签的样式在IE与FireFox中的差异等。
span标签样式设置教程
一、为span标签添加样式
复制代码 代码示例:
<html>
<head>
<style>
.has_children{width:250px;color:white;}
.has_children a{float:left;width:250px;background:#6C3;}
.has_children span{background:red;width:250px;}
</style>
<title$amp;>amp;$lt;/title>
</head>
<body>
<div class="has_children">
<span>第1章-认识jquery</span>
<a>1.1-
javascript和javascript库</a>
<a>1.2-加入jquery</a>
<a>1.3-编写简单jquery代码</a>
<a>1.4-jquery对象和dom对象</a>
<a>1.5-解决jquery和其它库的冲突</a>
<a>1.6-jquery开发工具和插件</a>
<a>1.7-小结</a>
</div>
<body>
</html>
二、为span元素添加的背景样式显示的宽度不是250px怎么办？而只是span标签中的字的背后区域才显示背景颜色？
span是内联元素，高宽度是由其内容来决定：
.has_children span{background:red;width:250px;}
修改为：
.has_children span{display:block;background:red;width:250px;}
div占用的位置是一行，span占用的是内容有多宽就占用多宽的空间距离：
.has_children span{background:red;width:250px;display:inline-block}
三、span样式无效怎么办？ jquery为span赋值失效怎么办？
问题：span设置css样式不起作用
解决：
让span成块级元素显示，css样式才会起作用。
<span id='span_slide_container' style='display:block; overflow-y: auto; overflow-x: auto; height: 500px;'>
此处 display:block; 一定要加上，否则，span不起作用。
如果要定义span居中，必须先让span成块级元素显示，也就是说，要先定义span的display:block;属性，然后再给span添加边距属性margin:0px auto;这样就能达到你想要的效果了。span的属性很多，几乎所有标签的属性都可以定义在span上，只是很多属性都必须在span成块级元素时菜其作用，span本身只是为了补充a标签的作用，是一个辅助标签，一般只能识别对文字的样式的你故意，所以如果想给span标签定义更多的其他样式属性，你就必须先给span加上块级属性，也就说添加display:block;属性，这样以后你的样式就可以起作用了
四、这里顺带介绍下span标签的样式在IE与FireFox中的差异
复制代码 代码示例:
<span class="ImgNavigationLeft"></span>
.ImgNavigationLeft {
BACKGROUND-IMAGE: url(../images/navigation_left.gif); WIDTH: 24px; HEIGHT: 31px;
}
在IE中，可以直接显示span的样式。可是在fireFox中，span的宽度会随着其内容的变化而变化。
在这里span没有内容，所以从页面上看，好像span标签不存在一样，设的背景图所以也不会显示出来。
display:block加上这句话后，即可解决问题。
(display:block在firefox opera 中会让span标签后的内容换行，而在IE中则不会。如果不想让其换行，可以更改为：display:inline-block)
