สร้างรูปแบบใหม่ ในบรรทัดเดิมด้วย span

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

การสร้าง inline span
1.ที่จุดเริ่มต้นที่เราต้องการจะสร้างรูปแบบใหม่ ให้เราพิมพ์ <span
2.ถ้าเราต้องการควบคุมรูปแบบนั้นเพียงแค่ตำแหน่งเดียวในหน้าให้เราพิมพ์ id=”name” โดยที่ name คือชื่อของรูปแบบที่เราควบคุม ณที่ตำแหน่งนั้น และต้องไม่มีที่ไหนเรียกใช้อีก
3.ถ้าเราใช้รูปแบบที่ควบคุม ณ ตำแหน่งนั้น ซ้ำกับจุดอื่นๆ ให้เราพิมพ์ class=”name” โดยที่ name คือชื่อของรูปแบบ style ที่เราใช้ควบคุม
4.พิมพ์ > เพื่อทำให้ tag span สมบูรณ์
5.พิมพ์เนื้อหาที่เราต้องการที่จะจัดให้อยู่ในรูปแบบนั้น
6.ที่ตำแหน่งสุดท้าย ให้พิมพ์ </span>

<body>
<div id="start">
<h1>การทำเว็บ</h1>
<p>การทำเว็บหลายอนอาจจะมองเป็นเรื่องยาก แต่หากศึกษาแล้วไม่ใช่เรื่องยากเลย</p>
<p>คนทุกคนสามารถทำเว็บได้ หากว่า<span class="emph">มีความต้องการที่จะทำ และสนใจที่จะศึกษา</span></p>
</div>
<div class="content">
<h2>องค์ประกอบของหน้าเว็บ<h2>
<p>หน้าเว็บประกอบด้วยหลายๆส่วน <span class="emph">ซึ่งรวมๆเรียกว่า หน้าเว็บ 1 หน้า</span></p>
</div>
<div class="content">
<h2>การเริ่มต้นทำเว็บ</h2>
<p>เริ่มต้นได้จากการเรียนรู้และลองทำตามจนกระทั่งเคยชินก็จะทำได้อย่างรวดเร็ว</p>
</div>
</body>
สิ่งเพิ่มเติมที่ 3.14 tag span ที่ใส่เข้าไปเพื่อเปลี่ยนรูปแบบตัวอักษรหรือเปลี่ยนแปลงค่าอื่นๆ ณ ตำแหน่งนั้น

เพิ่มเติม
-การเปลี่ยนแปลงนี้จะไม่มีการขึ้นบรรทัดใหม่ดังนั้นสามารถแสดงผลตัวอักษรต่อไปในบรรทัดได้เลย
-span ไม่มีรูปแบบที่ตายตัวซึ่งรูปแบบเราสามารถกำหนดได้ด้วยตัวเราเอง โดยใช้ styles ซึ่งจะกล่าวในภายหลัง
-คุณสามารถใช้ class และ id เพื่อควบคุมร่วมกับ span ได้โดยรูปแบบที่เปลี่ยนไปจะขึ้นกับ class และ id

No comments yet.
You must be logged in to post a comment.