การใช้งาน span

การใช้งาน span

span จุดเด่นคือ สามารถทำงานในบรรทัดเดียวกันโดยใช้หลาย style หรือหลายรูปแบบ โดยที่ span จะใช้ style เข้ามาควบคุมในส่วนนั้น เช่น ถ้าเรา ใส่ class ใน div รูปแบบก็จะถูกกำหนดระหว่าง <div> ถึง </div>

ตัวอย่าง

<div class="text01">
<h2>เริยนรู้</h2>
<p>เรียนรู้อย่างสร้างสรรค์กับซอฟต์แวร์</p>
</div>

จะได้

เรียนรู้อย่างสร้างสรรค์กับซอฟต์แวร์

จะเห็นว่า ข้อความ ด้านใน <div class="text01"> ถึง </div>

ก็จะรูปแบบ class ของ text01 ซึ่งถ้าหาเราต้องการเปลียน สีของคำว่า "สร้างสรรค์" ใน "เรียนรู้อย่างสร้างสรรค์กับซอฟต์แวร์"

จะได้ตังนี้

<div class="text01">
<h2>เริยนรู้</h2>
<p>เรียนรู้อย่าง<span class="orange">สร้างสรรค์</span>กับซอฟต์แวร์</p>
</div>

จะได้

เรียนรู้อย่างสร้างสรรค์กับซอฟต์แวร์

ตัวอย่างอื่น ๆ

<ul style="color: 'red'">
<li><span style="color: 'green'">Line 1</span>
<li><span style="color: 'green'">Line 2</span>
<li><span style="color: 'blue'">Line 3</span>
</ul>

<span style="background-color:#FFDDDD;">
<span style="background-image:url('grid.gif')" >
<span style="border:red solid 1px;">
<span style="color:#FF0000;">
<span style="cursor:wait;" > (hover cursor to see the hourglass)
<span style="font:bold italic 16px serif;" >
<span style="font-size:17px;" >
<span style="font-family:Arial,Helvetica,sans-serif;" >
<span style="font-style:italic;" >
<span style="font-variant:small-caps;" >
<span style="font-weight:bold;" >
<span style="text-decoration:underline;">
<span style="letter-spacing:1px;">

    <li style="list-style:upper-alpha" >
    <li style="list-style:lower-alpha" >
    <li style="list-style:upper-roman" >
    <li style="list-style:decimal" >
    <li style="list-style:disc" >
    <li style="list-style:circle inside" >
    <li style="list-style:square outside" >
    <li style="list-style:url('bullet.jpg') inside" >

<span style="position:relative;top:0px;left:1px;">
<span style="position:absolute;top:0px;left:1px;">
 <span style="position:absolute;top:0px;right:1px;">
<span style="vertical-align:text-bottom;"> 

<span style="line-height:19px;">