ใช้คุณสมบัติ Text-Indent และ Selectors Sibling Selectors
การออกแบบเว็บที่ ดีมักเป็นเรื่องเกี่ยวกับการพิมพ์ดีดที่ดี เนื่องจากเนื้อหาของหน้าเว็บเป็นจำนวนมากจึงถูกนำเสนอเป็นข้อความความสามารถในการจัดรูปแบบข้อความให้มีความน่าสนใจและมีประสิทธิภาพจึงถือเป็นทักษะสำคัญในการเป็นนักออกแบบเว็บไซต์ แต่น่าเสียดายที่เราไม่มีการควบคุมแบบออนไลน์ในระดับเดียวกับที่เราทำในการพิมพ์ ซึ่งหมายความว่าเราไม่สามารถเชื่อถือข้อความได้อย่างน่าเชื่อถือบนเว็บไซต์ในแบบเดียวกับที่เราสามารถทำได้ในส่วนที่พิมพ์
รูปแบบวรรคธรรมดาที่คุณเห็นบ่อยครั้งในการพิมพ์ (และที่เราสามารถสร้างออนไลน์ได้) คือบรรทัดแรกของย่อหน้านั้นเว้นวรรคหนึ่ง พื้นที่แท็บ ซึ่งจะช่วยให้ผู้อ่านสามารถดูว่าย่อหน้าหนึ่งเริ่มต้นขึ้นอีกหนึ่งจุด
คุณไม่เห็นรูปแบบภาพนี้มากในหน้าเว็บเนื่องจากเบราว์เซอร์จะแสดงวรรคย่อยโดยมีช่องว่างด้านล่างเพื่อแสดงจุดที่ปลายด้านหนึ่งและอีกจุดเริ่มต้น แต่ถ้าคุณต้องการจัดรูปแบบหน้าเว็บให้มีรูปแบบการพิมพ์ - คุณสามารถทำได้โดย ใช้ คุณสมบัติสไตล์ ข้อความเยื้อง
ไวยากรณ์สำหรับคุณสมบัตินี้เรียบง่าย นี่คือวิธีที่คุณจะเพิ่มข้อความย่อหน้าลงในย่อหน้าทั้งหมดในเอกสาร
p {text-indent: 2em; }การปรับแต่ง Indents
คุณสามารถเพิ่มระดับลงในย่อหน้าที่คุณต้องการเว้นแต่ว่าคุณต้องการแก้ไขย่อหน้าทุกครั้งเพื่อเพิ่มคลาสลงในหนึ่งวิธี ที่ไม่ได้ผลและไม่ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดใน การเข้ารหัส HTML
คุณควรพิจารณาเมื่อคุณเยื้องย่อหน้า คุณเยื้องย่อหน้าที่ต่อโดยตรงกับวรรคอื่น เมื่อต้องการทำเช่นนี้คุณสามารถใช้ตัวเลือก sibling ที่อยู่ติดกันได้ ด้วยตัวเลือกนี้คุณจะเลือกย่อหน้าทุกย่อหน้าที่นำหน้าด้วยย่อหน้าอื่น ๆ ทันที
p + p {text-indent: 2em; }เนื่องจากคุณกำลังเยื้องบรรทัดแรกคุณควรตรวจสอบให้แน่ใจว่าวรรคของคุณไม่มีช่องว่างระหว่างพวกเขา (ซึ่งเป็นค่าเริ่มต้นของเบราว์เซอร์) ตามสไตล์คุณควรมีช่องว่างระหว่างย่อหน้า หรือ เยื้องบรรทัดแรก แต่ไม่ใช่ทั้งสองอย่าง
p (margin-bottom: 0; padding-bottom: 0; } p + p {margin-top: 0; padding-top: 0; }Negents Indents
นอกจากนี้คุณยังสามารถใช้คุณสมบัติ text-indent พร้อมกับค่าลบเพื่อทำให้จุดเริ่มต้นของบรรทัดไปทางด้านซ้ายตรงข้ามกับด้านขวาเช่นการเยื้องปกติ คุณสามารถดำเนินการนี้ได้หากบรรทัดเริ่มต้นด้วยเครื่องหมายคำพูดเพื่อให้อักขระเครื่องหมายคำพูดปรากฏในส่วนขอบเล็กน้อยที่ด้านซ้ายของย่อหน้าและตัวอักษรจะยังคงจัดตำแหน่งด้านซ้ายที่ดี
กล่าวเช่นว่าคุณมีวรรคที่เป็นลูกหลานของแบบ Blockquote และคุณต้องการให้มีการเว้นวรรคลบ คุณสามารถเขียน CSS นี้ได้:
blockquote p {text-indent: -.5em; }นี่จะเป็นการเริ่มต้นของย่อหน้าซึ่งอาจรวมถึงอักขระราคาเปิดให้เลื่อนไปทางซ้ายเล็กน้อยเพื่อสร้างเครื่องหมายวรรคตอนที่แขวนอยู่
เกี่ยวกับ Margins และ Padding
บ่อยครั้งในการออกแบบเว็บคุณใช้ Margin หรือ Padding ค่า เพื่อย้ายองค์ประกอบและสร้างพื้นที่สีขาว คุณสมบัติเหล่านี้จะไม่สามารถทำงานได้เพื่อให้ได้ผลกระทบจากย่อหน้าที่เว้นไว้ ถ้าคุณใช้ค่าใดค่าหนึ่งกับย่อหน้าข้อความทั้งหมดของย่อหน้านั้นรวมถึงทุกบรรทัดจะเว้นระยะห่างแทนบรรทัดแรก