13.1　解读SPAN

与DIV标记块级元素不同，SPAN标记指行内元素，主要用于文本的容器，相对DIV容器，SPAN容器的文本或图片要小些。

与DIV一样，SPAN也是一个标记，包含着一个容器，里面所放置的可以是文本或图片等，SPAN的宽度依照包围着对象的宽度而定，故不能用宽度属性width设置SPAN标记内对象的宽度，但可以设置SPAN的margin（外补丁）值，以及SPAN中的对象位置与父对象的距离。

SPAN的语法与DIV一样，其参数可以接ID和类（class）等，代码13.1表示SPAN的用法。

代码13.1　源代码\第13章\span基本语法.html

—————————————-文件名：span基本语法1.html—————————————-

01 ＜html＞

02 ＜head＞

03 ＜title＞span基本语法＜/title＞

04 ＜/head＞

05 ＜body＞

06 ＜！—在body标记对里加入span标记—＞

07 ＜span＞

08 SPAN基本语法是文本的容器。

09 ＜/span＞

10 ＜/body＞

11 ＜/html＞

【代码解析】第7～9行用到SPAN标记。因SPAN标记对对象无宽度设置，且默认值与没有SPAN标记对是一样的，所以看起来的效果好像没有任何变化，好像只输入了一行文字，如图13.1所示。

图　13.1　SPAN基本语法

13.2　何时用SPAN

在13.1节中讲解了SPAN的语法，也初步了解了SPAN的用法，那么什么时候才可以用SPAN标记呢？用SPAN标记时可以用DIV取代吗？针对这些问题，现在来探讨并做出解答。

从前面的讲解中可以知道，一个DIV内容不超过一行，所占的就是一行文本内容，因为DIV默认宽度是父对象的100%，而SPAN标记中的内容宽度是指其内容所占的宽度，即不能设置SPAN的宽度，所以在一行文本中，想对其中的文字设置样式，而又不要该行文本换行的条件下，可以选择SPAN标记，同理，在图片中应用也如此。

代码13.2　中显示的是，同一行文字在不同文字中需要不同样式，而且又不影响该行换行的效果。这时用SPAN来做文字的容器，然后在SPAN中设置ID，在样式表中设置不同ID中不同的字体颜色和字体大小。这样，在一行文本中显示出不同的样式，如代码13.2所示。

代码13.2　源代码\第13章\何时该用SPAN.html

—————————————-文件名：何时该用SPAN.html——————————————

01 ＜html＞

02 ＜head＞

03 ＜title＞何时该用SPAN＜/title＞

04 ＜style type="text/css"＞

05 #span1

06 {

07 /设置颜色值/

08 color：blue；

09 }

10 #span2

11 {

12 /设置字体大小和字体重量/

13 font-size：15px；

14 font-weight：600；

15 }

16 ＜/style＞

17 ＜/head＞

18 ＜body＞

19 ＜span id="span1"＞HTML+CSS＜/span＞完全＜span id="span2"＞自学＜/span＞手册

20 ＜/body＞

21 ＜/html＞

【代码解析】代码第19行用到了SPAN做容器，其中HTML+CSS用SPAN标记设置字体颜色为蓝色，而对“自学”二字设置粗体，且大小是15像素。范例在同一行文本中，设置了不同的样式，实现了不换行的情况下，一行文本不同的部分可以设置不同的样式。在实际应用中，对段落的同一行设置不同的样式，还保证了段落中的不换行，效果如图13.2所示。

图　13.2　何时该用SPAN