หมายเหตุ เอกสารฉบับนี้เป็นเอกสารแปลจากต้นฉบับภาษาอังกฤษอาจมีข้อบกพร่องหรือไม่ทันสมัย
เอกสารต้นฉบับเป็นของ W3C และถือเป็นเอกสารอย่างเป็นทางการ ท่านสามารถอ่านประกอบเพื่อความถูกต้อง
Original Document Indented paragraphs

เว็บสไตล์ชีท
CSS ทิป & ทริค

(หน้าเพจนี้ใช้ CSS style sheets)

การเยื้องย่อหน้า

Eiffel tower

Scale model of the Eiffel tower in Parc Mini-France

การเยื้องย่อหน้าจะช่วยให้ผู้อ่านสามารถอ่านเนื้อหาได้ง่ายเมื่อมีข้อความยาวๆต่อกันหลายบรรทัด และช่วยให้ท่านสามารถเก็บการเว้นย่อหน้าไว้ใช้ในการแยกเนื้อหาส่วนสำคัญๆได้

การเยื้องย่อหน้าอาจทำได้โดย กำหนดให้บรรทัดแรกของย่อหน้าถัดจากย่อหน้าแรกเยื้องจากขอบด้านซ้ายของหน้าเพจตามระยะห่างที่ต้องการ โดยปกติย่อหน้าแรกของเว็บอาจไม่จำเป็นต้องทำการเยื้องย่อหน้า เช่นเดียวกับย่อหน้าที่ต่อจาก ตารางแผนภูมิ heading หรือ วัตถุอื่นที่นอกเหนือตัวอักษร ท่านอาจใช้โค้ดด้านล่างในการกำหนดค่าการเยื้องย่อหน้าได้ ดังนี้:

p {
  margin-bottom: 0 }
p + p {
  text-indent: 1.5em;
  margin-top: 0 }

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

ในหน้านี้ มีการใช้ แท็ก P ในส่วนของคำบรรยายใต้รูป (ดู “รูปภาพ & การใส่คำบรรยายใต้รูปภาพ” ประกอบ) ในแท็กนี้ เราต้้องการให้คำบรรยายอยู่ตรงกลาง และไม่ต้องการให้มีการเยื้องย่อหน้า ดังนั้นในแท็กนี้ เราจะใช้คลาสเข้าช่วย เพื่อไม่ให้แท็กนี้มีการเยื้องย่อหน้าเกิดขึ้น ซึ่งในหน้านี้เราใช้โค้ด 'p.caption {text-indent: 0}' ในการกำหนดคำบรรยายใต้ภาพแทน

การเยื้องย่อหน้าจะช่วยให้ท่านสามารถสำรองการเว้นย่อหน้าไว้เพื่อใช้เน้นเฉพาะข้อความที่สำคัญๆ
ในหน้าเพจของท่านเพียงเท่านั้น และท่่านยังอาจใช้ระยะห่างการเว้นย่อหน้าที่ต่างกัน ในการแสดงความสำคัญที่ต่างกันของแต่ละย่อหน้าได้โดยการใช้คลาส เช่น ท่านอาจกำหนดคลาส ขึ้นมาสามคลาสเพื่อแสดงความสำคัญของย่อหน้าที่ต่างกัน เช่น: คลาส stb (เ้ว้่นย่อหน้าเล็ก), คลาส mtb (เว้นย่อหน้ากลาง) และ คลาส ltb (เว้นย่อหน้าใหญ่) ซึ่งในย่อหน้านี้เราใช้ คลาส stb เพื่อให้ท่านเห็นเป็นตัวอย่าง โค้ดที่ใ้ช้ในการกำหนดค่าครั้งนี้คือ:

p.stb { text-indent: 0; margin-top: 0.83em }
p.mtb { text-indent: 0; margin-top: 2.17em }
p.ltb { text-indent: 0; margin-top: 3.08em }

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
ปรับปรุงล่าสุด $วันที่: 2009/08/19 09:01:25 $ GMT