ฉันจะเยื้องหรือแท็บข้อความบนหน้าเว็บของฉันหรือใน HTML ได้อย่างไร

มีวิธีการเยื้องข้อความที่แตกต่างกัน อย่างไรก็ตามเพื่อความเข้ากันได้กับเบราว์เซอร์และการเข้าถึงที่หลากหลายเราจะพูดถึงวิธีที่นิยมที่สุดในการเยื้องข้อความบนหน้าเว็บของคุณ

วิธีที่แนะนำด้วย CSS & HTML

สำหรับการเยื้องข้อความหรือย่อหน้าวิธีที่นิยมใช้และแนะนำมากที่สุดคือการใช้ CSS ด้านล่างเป็นตัวอย่างที่แตกต่างกันของวิธีที่ CSS สามารถใช้เพื่อเยื้องข้อความ ตัวอย่างเหล่านี้แต่ละตัวอย่างจะอยู่ระหว่างแท็ก HTML ของคุณ

ตัวอย่างต่อไปนี้จะสร้างคลาสสไตล์ชื่อ "แท็บ" ที่เยื้องข้อความและย่อหน้า 40 พิกเซลจากด้านซ้าย

เมื่อรหัสด้านบนอยู่ในส่วนคุณสามารถใช้งานได้ทุกจุดโดยเพิ่มลงในย่อหน้าของคุณ (

) แท็กตามที่แสดง

ตัวอย่างของแท็บ

การรวม CSS ในเอกสาร HTML ของคุณดังที่แสดงด้านบนเรียกว่า CSS "ในบรรทัด" มันมีประโยชน์สำหรับการเปลี่ยนแปลงอย่างรวดเร็ว แต่ในระยะยาวมันเป็นการยากที่จะเปลี่ยนแปลงในภายหลัง

แต่คุณสามารถใช้รหัส CSS ของคุณทั้งหมดและวางเป็นไฟล์แยกต่างหากด้วยนามสกุล. css จากนั้นคุณสามารถลิงก์ไปยังไฟล์นี้หนึ่งไฟล์จากเอกสาร HTML ใด ๆ และเอกสารนั้นสามารถใช้คุณสมบัติ CSS เหล่านั้นได้ การใช้ไฟล์ CSS ภายนอกทำให้ง่ายต่อการเปลี่ยน CSS ในภายหลังเพราะ CSS ทั้งหมดถูกกำหนดไว้ในที่เดียว

หากต้องการลิงก์ไปยังไฟล์ CSS ภายนอกของคุณให้เพิ่มบรรทัดต่อไปนี้ในเอกสาร HTML ของคุณในองค์ประกอบ (หลังจาก basic.css

เมื่อสร้างไฟล์. css นี้แล้วให้แก้ไขไฟล์และเพิ่มรหัส CSS เดียวกันไม่รวมแท็กและความคิดเห็นลงในไฟล์ตามที่แสดง

.tab {margin-left: 40px; }

ในที่สุดเมื่อขั้นตอนข้างต้นเสร็จสมบูรณ์คุณสามารถแท็บข้อความใดก็ได้โดยใช้แบบเดียวกัน

ตัวอย่างที่เราได้แสดงไว้ด้านบน

นอกจากนี้ยังมีรูปแบบอื่น ๆ ของการเยื้อง ตัวอย่างเช่นถ้าคุณต้องการเยื้องบรรทัดแรกของย่อหน้าแทนที่จะใช้ CSS บรรทัดข้างต้นคุณจะใช้บรรทัดต่อไปนี้

.tab {ข้อความเยื้อง: 40px}

เคล็ดลับ: คุณสามารถเยื้องโดยใช้เปอร์เซ็นต์ ตัวอย่างเช่นแทนที่จะเป็นการเยื้อง 40px (พิกเซล) คุณสามารถแทนที่การเยื้องด้วย 5% เพื่อเยื้องข้อความ 5% ของมุมมองปัจจุบัน คุณยังสามารถใช้พื้นที่ em เมื่อกำหนดความกว้างของการเยื้อง

เคล็ดลับโบนัส: คุณสามารถเปลี่ยนเยื้องจากซ้ายเยื้องเป็นเยื้องขวาได้โดยเปลี่ยนระยะเยื้องซ้าย - ขวาขวา

วิธีที่แนะนำโดยใช้ HTML

เป็นไปได้ที่จะได้ผลลัพธ์เดียวกันข้างต้นโดยใช้สไตล์อินไลน์ภายใน HTML ในขณะที่ใช้ตัวอย่าง CSS ด้านบนสามารถทำให้ง่ายต่อการบำรุงรักษาในหลาย ๆ หน้าเว็บหากคุณจำเป็นต้องใช้สไตล์เพียงครั้งเดียวคุณสามารถใช้ตัวอย่างต่อไปนี้

ข้อความนี้ถูกเยื้อง

ในตัวอย่างแรกนี้ข้อความทั้งหมดในแท็กวรรคจะเยื้อง 40 พิกเซลจากด้านซ้าย แท็กย่อหน้าอื่น ๆ จะไม่เยื้อง

ข้อความนี้ถูกเยื้อง

ในตัวอย่างที่สองนี้เฉพาะข้อความบรรทัดแรกในย่อหน้าที่จะเยื้อง 40 พิกเซลจากด้านซ้าย บรรทัดข้อความเพิ่มเติมในวรรคนั้นจะไม่ถูกเยื้อง

วิธีการทางเลือก

วิธีการทั่วไปอื่น ๆ (แต่ไม่เหมาะสม) ของการเยื้องข้อความคือการใช้แท็กดังที่แสดงในตัวอย่างต่อไปนี้ แม้ว่านี่จะเป็นวิธีที่ง่ายกว่ามาก แต่ก็มีปัญหาการช่วยสำหรับการเข้าถึงที่อาจเกิดจากการใช้วิธีนี้เพื่อเยื้องข้อความของคุณ แท็กนี้มีไว้สำหรับอ้างอิงข้อความไม่ใช่การเยื้อง

ข้อความนี้จะถูกเยื้อง