ซีเอสเอส	อินเทอร์เน็ตเอ็กซ์พลอเรอร์		โครเมียม	โอเปร่า	ซาฟารี	ไฟร์ฟอกซ์	หุ่นยนต์	ไอโอเอส
2.1	6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+
3			2.0+	11.6+	3.1+	3.6+	2.1+	2.0+

ข้อมูลโดยย่อ

เวอร์ชัน CSS

ค่านิยม

center จัดข้อความให้อยู่ตรงกลาง ข้อความจะถูกวางในแนวนอนในหน้าต่างเบราว์เซอร์หรือคอนเทนเนอร์ที่มีบล็อกข้อความอยู่ ดูเหมือนว่าบรรทัดข้อความจะพันกันบนแกนที่มองไม่เห็นซึ่งพาดผ่านกึ่งกลางของหน้าเว็บ วิธีการจัดตำแหน่งนี้ใช้กันอย่างแพร่หลายในส่วนหัวและลายเซ็นต่างๆ เช่น คำบรรยาย ช่วยให้การออกแบบข้อความดูเป็นทางการและชัดเจน ในกรณีอื่น ๆ ทั้งหมด การจัดกึ่งกลางไม่ค่อยได้ใช้ด้วยเหตุผลที่ทำให้ไม่สะดวกในการอ่านข้อความดังกล่าวจำนวนมาก justify Justified ความหมายคือ จัดชิดซ้ายขวาพร้อมกัน ในการดำเนินการนี้ เบราว์เซอร์ในกรณีนี้จะเพิ่มช่องว่างระหว่างคำ left จัดข้อความชิดซ้าย ในกรณีนี้ บรรทัดข้อความจะจัดชิดซ้าย และขอบด้านขวาจะจัดเรียงเป็นขั้นบันได วิธีการจัดตำแหน่งนี้เป็นวิธีที่ได้รับความนิยมมากที่สุดบนเว็บไซต์ เนื่องจากจะทำให้ผู้ใช้สามารถค้นหาได้อย่างง่ายดาย บรรทัดใหม่และอ่านข้อความขนาดใหญ่ได้อย่างสะดวกสบาย right จัดข้อความชิดขวา วิธีการจัดตำแหน่งนี้ทำหน้าที่เป็นศัตรูกับประเภทก่อนหน้า กล่าวคือ บรรทัดข้อความจะถูกจัดชิดกับขอบด้านขวา ในขณะที่ด้านซ้ายยังคง "ขาด" เนื่องจากขอบด้านซ้ายไม่ได้จัดแนว ซึ่งเป็นที่สำหรับอ่านบรรทัดใหม่ ข้อความนี้จึงอ่านได้ยากกว่าการจัดชิดซ้าย ดังนั้น การจัดชิดขวาจึงมักใช้กับหัวข้อเรื่องสั้นไม่เกิน 3 บรรทัด เราไม่พิจารณาเฉพาะไซต์ที่ต้องอ่านข้อความจากขวาไปซ้าย ซึ่งบางทีวิธีการจัดตำแหน่งที่คล้ายกันอาจเป็นประโยชน์ auto ไม่เปลี่ยนตำแหน่งขององค์ประกอบ inherit สืบทอดค่าของพาเรนต์ เริ่มต้น เช่นเดียวกับซ้ายถ้าข้อความไปจากซ้ายไปขวาและขวาเมื่อข้อความไปจากขวาไปซ้าย สิ้นสุด เช่นเดียวกับขวาถ้าข้อความไปจากซ้ายไปขวาและซ้ายเมื่อข้อความไปจากขวาไปซ้าย

HTML5 CSS2.1 IE Cr Op Sa Fx

ผลลัพธ์ของตัวอย่างนี้แสดงไว้ในรูปที่ 1 1.

ข้าว. 1. จัดแนวข้อความในเบราว์เซอร์ Safari

รวม Internet Explorer จนถึงเวอร์ชัน 7.0 ตีความความแตกต่างบ้าง ตัวอย่างนี้กว่าเบราว์เซอร์อื่น ๆ ไม่เพียงแต่จัดแนวข้อความเท่านั้น แต่ยังบล็อกด้วย (รูปที่ 2)

ข้าว. 2. การจัดแนวข้อความใน Internet Explorer 7

โมเดลวัตถุ

document.getElementById("elementID ").style.textAlign

เบราว์เซอร์

IE จนถึงเวอร์ชัน 7.0 ไม่เพียงแต่จะจัดแนวเนื้อหาขององค์ประกอบระดับบล็อกเท่านั้น แต่ยังรวมไปถึงองค์ประกอบด้วย

แท็ก HTML ที่กำหนดการจัดตำแหน่งข้อความและการเยื้อง

ข้อความที่ถูกต้องที่ใช้ในการพิมพ์

ตัวอย่างด้านล่างแสดงวิธีการจัดแนว ข้อความให้มีความกว้างหน้า:

จัด = "ซ้าย"	จัด = "ขวา"
	จำนวนคนงานที่ทำงานในภาคบริการและการเผยแพร่ข้อมูลมีเพิ่มขึ้นทุกวัน หากสัญลักษณ์ของศตวรรษที่ผ่านมาคือฟาร์มและโรงงาน สัญลักษณ์ของศตวรรษที่ 21 ในปัจจุบันก็คือสำนักงานที่มีคอมพิวเตอร์ซึ่งสามารถเข้าถึงการไหลของข้อมูลได้
align="จัดชิดขอบ"	จัด = "ศูนย์"
จำนวนคนงานที่ทำงานในภาคบริการและการเผยแพร่ข้อมูลมีเพิ่มขึ้นทุกวัน หากสัญลักษณ์ของศตวรรษที่ผ่านมาคือฟาร์มและโรงงาน สัญลักษณ์ของศตวรรษที่ 21 ในปัจจุบันก็คือสำนักงานที่มีคอมพิวเตอร์ซึ่งสามารถเข้าถึงการไหลของข้อมูลได้	จำนวนคนงานที่ทำงานในภาคบริการและการเผยแพร่ข้อมูลมีเพิ่มขึ้นทุกวัน หากสัญลักษณ์ของศตวรรษที่ผ่านมาคือฟาร์มและโรงงาน สัญลักษณ์ของศตวรรษที่ 21 ในปัจจุบันก็คือสำนักงานที่มีคอมพิวเตอร์ซึ่งสามารถเข้าถึงการไหลของข้อมูลได้

ค่าเหตุผลทำให้มั่นใจได้ว่ามีความสม่ำเสมอ จัดแนวข้อความไปทางขวาและซ้าย, นั่นคือ ในความกว้าง- วิธีนี้ใช้กันอย่างแพร่หลายในการพิมพ์

การจัดแนวข้อความใน HTML ให้อยู่กึ่งกลางและความกว้าง

จัดข้อความให้อยู่กึ่งกลาง HTML ข้อความไปทางขวา:

ผลลัพธ์:

คุณลักษณะและค่านิยม

• align="left" - กำหนด การจัดตำแหน่งข้อความด้านซ้าย(ค่าเริ่มต้น).
• align="ศูนย์" - จัดข้อความให้อยู่ตรงกลาง.
• align="ขวา" - จัดข้อความชิดขวา.

การจัดแนว | การเยื้องข้อความ HTML

ข้อความ HTMLและการเยื้องด้านซ้ายของหน้า

เราจะผลิต การเยื้องข้อความทางด้านซ้ายได้สองวิธี:

ผลลัพธ์:

ดูในหน้าต่างใหม่

คุณสมบัติ text-align-last ( เพื่อไม่ให้สับสนกับการจัดตำแหน่ง HTML) กำหนดว่าบรรทัดสุดท้ายของบล็อกหรือบรรทัดก่อนการบังคับแบ่งจะจัดแนวอย่างไร สิ่งนี้สำคัญเนื่องจากบรรทัดสุดท้ายของย่อหน้ามักจะมีข้อความไม่เพียงพอที่จะเติมช่องว่างทั้งหมด

ในบทความนี้ เราจะครอบคลุมทุกแง่มุมของคุณสมบัติ text-align-last รวมถึงค่าที่ยอมรับและการสนับสนุนเบราว์เซอร์

การใช้งานและค่าที่ยอมรับ

การใช้คุณสมบัติ text-align-last นั้นง่ายมาก ต่อไปนี้คือข้อมูลโค้ดเพื่อจัดแนวข้อความบรรทัดสุดท้ายทางด้านขวา:

กราฟแนะนำ ( text-align: justify; // จำเป็นสำหรับ IE และ Edge text-align-last: right; )

คุณสมบัติสามารถรับได้เจ็ดค่า คุณอาจคุ้นเคยกับค่าข้อความ HTML มาตรฐานของ align:left , right และ center โดยจะจัดข้อความในบรรทัดสุดท้ายไปทางขวา ซ้าย และกึ่งกลางของคอนเทนเนอร์

ตัวอย่างด้านล่างแสดงให้เห็นถึงความแตกต่างระหว่างค่าทั้งสามนี้:

ดูตัวอย่าง

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

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

ดูตัวอย่าง

การจัดแนวข้อความบรรทัดสุดท้ายไปทางซ้ายเหมาะสำหรับภาษาที่อ่านจากซ้ายไปขวา ( ลิตร) แต่จะไม่ถูกต้องสำหรับภาษา RTL ในกรณีเช่นนี้การใช้ค่าซ้ายหรือขวาอาจทำให้เกิดปัญหาได้

โชคดีที่คุณสามารถใช้ค่าเริ่มต้นเพื่อจัดแนวข้อความชิดขอบที่เริ่มเขียนและอ่านได้ ซึ่งหมายความว่าโดยการตั้งค่าคุณสมบัติ text-align-last เป็น start คุณจะจัดข้อความไปทางซ้ายสำหรับภาษา LTR และจัดชิดขวาสำหรับภาษา RTL

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

ดูตัวอย่าง

ค่าเริ่มต้นสำหรับคุณสมบัตินี้คือ auto เมื่อใช้ ข้อความในบรรทัดสุดท้ายจะถูกจัดแนวตามค่าของคุณสมบัติการจัดตำแหน่งข้อความ HTML เว้นแต่จะถูกตั้งค่าให้ชิดขอบ มิฉะนั้น ข้อความจะถูกกระจายตามความกว้างของคอนเทนเนอร์ก็ต่อเมื่อคุณสมบัติ text-justify ถูกตั้งค่าเป็น distribution เท่านั้น มิฉะนั้น ข้อความจะจัดชิดขอบที่เริ่มเขียนและอ่าน

หมายเหตุสำคัญ

เพื่อให้ text-align-last ทำงาน ต้องตั้งค่าคุณสมบัติ text-align ให้ชิดขอบ แต่กฎนี้ใช้ได้เฉพาะใน IE และ Edge เท่านั้น ใน Firefox และ Chrome คุณสมบัติจะทำงานได้โดยไม่ต้องตั้งค่าการจัดแนวข้อความเพื่อปรับแนว ในตัวอย่างด้านล่าง ข้อความควรจัดชิดขวาใน Edge และ IE ในเบราว์เซอร์อื่นๆ บรรทัดสุดท้ายของย่อหน้าจะถูกจัดเรียงตามค่าของคุณสมบัติ text-align-last และบรรทัดที่เหลือจะถูกจัดชิดขวา

ดูการสาธิต

หากเราไม่ตั้งค่า text-align ให้จัดชิดขอบ HTML ผลลัพธ์ที่ได้จะดูไม่ดีนัก ดังนั้น คุณมักจะตั้งค่าการกระจายข้อความให้มีความกว้าง

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

หากคุณต้องการจัดแนวเนื้อหาบรรทัดสุดท้าย คุณสามารถใช้ตัวเลือก :last-child หรือ :last-of-type นำโค้ดจากการสาธิตด้านล่างเป็นตัวอย่าง:

บทความ ( text-align: justify; ) บทความ p:last-of-type ( text-align-last: right; )

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

ดูการสาธิต

คุณยังสามารถใช้ตัวเลือกอื่น: :even และ :odd เพื่อเปลี่ยนการจัดตำแหน่ง

บางครั้งย่อหน้าอาจมีเพียงบรรทัดเดียวเท่านั้น ในกรณีนี้ หากคุณระบุค่าสำหรับทั้งคุณสมบัติ text-align และ text-align-last คุณสมบัติ คุณสมบัติหลังจะมีความสำคัญกว่า

พิจารณาข้อมูลโค้ดต่อไปนี้:

p ( text-align: justify; ) p:nth-of-type(2) ( text-align-last: left; )

หากย่อหน้าที่สองมีเพียงบรรทัดเดียว ข้อความจะถูกจัดแนวทิ้งไว้เนื่องจาก text-align-last จะมีความสำคัญกว่า การสาธิตด้านล่างแสดงให้เห็น รหัสนี้ CSS ที่ใช้งานจริง และอื่นๆ อีกสองสามรายการ ตัวอย่าง HTMLจัดตำแหน่ง

ดูการสาธิต

รองรับเบราว์เซอร์

การสนับสนุนคุณสมบัตินี้สามารถเปิดใช้งานได้โดยใช้ตัวเลือก " เปิดใช้งานคุณลักษณะแพลตฟอร์มเว็บทดลอง"วี Google Chromeและ Opera โดยเริ่มจากเวอร์ชัน 35 และ 22 ตามลำดับ รองรับ Chrome 47+ และ Opera 34+ อย่างสมบูรณ์

หากต้องการใช้คุณสมบัตินี้ใน Firefox คุณจะต้องเติมคำนำหน้าด้วย -moz- IE ไม่รองรับค่าเริ่มต้นและสิ้นสุด ในขณะเดียวกัน Edge ก็สนับสนุนคุณสมบัตินี้อย่างเต็มที่ เบราว์เซอร์ยอดนิยมเพียงตัวเดียวที่ไม่รองรับการจัดตำแหน่งข้อความล่าสุดคือ Safari

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

• ไม่มี - ข้อความถูกเขียนโดยไม่มีการเปลี่ยนแปลง
• ใช้ทุน- แต่ละคำจะขึ้นต้นด้วยตัวพิมพ์ใหญ่
• ตัวพิมพ์เล็ก - อักขระทั้งหมดกลายเป็นตัวพิมพ์เล็ก (ตัวพิมพ์เล็ก)
• ตัวพิมพ์ใหญ่- ตัวอักษรทั้งหมดเป็นตัวพิมพ์ใหญ่ (ตัวพิมพ์ใหญ่)

ตัวอย่างเช่น กฎต่อไปนี้ระบุว่าส่วนหัว H1 ควรเป็นตัวพิมพ์ใหญ่:

H1 (การแปลงข้อความ: ตัวพิมพ์ใหญ่;)

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

การตกแต่งข้อความ: คุณสมบัติการตกแต่งข้อความ

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

ข้าว. 11.4.

การใช้ทรัพย์สินที่พบบ่อยที่สุด การตกแต่งข้อความคือการเปลี่ยนลิงค์เริ่มต้นที่ขีดเส้นใต้ ตัวอย่างเช่น กฎต่อไปนี้ระบุว่าควรขีดเส้นใต้ลิงก์:

A:link (การตกแต่งข้อความ: ขีดเส้นใต้;)

การเว้นวรรคระหว่างคำ: คุณสมบัติการเว้นวรรคคำ

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

ดังนั้น กฎต่อไปนี้จะเพิ่มระยะห่างระหว่างคำในส่วนหัว H1 ขึ้น 1em:

H1 (ระยะห่างระหว่างคำ: 1em;)

การจัดตำแหน่งข้อความ: คุณสมบัติการจัดตำแหน่งข้อความ

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

กฎต่อไปนี้จะตั้งค่าการจัดตำแหน่งกึ่งกลางขององค์ประกอบทั้งหมดที่มีอยู่ภายในองค์ประกอบ DIV:

DIV (จัดข้อความ: กึ่งกลาง;)

ชั้นนำ: คุณสมบัติความสูงของบรรทัด

ผู้นำคือระยะห่างระหว่างเส้นฐานของเส้นที่อยู่ใกล้กัน ภายใต้สถานการณ์ปกติ ระยะห่างระหว่างบรรทัดจะขึ้นอยู่กับประเภทและขนาดของแบบอักษร และเบราว์เซอร์จะกำหนดโดยอัตโนมัติ แต่ค่านี้สามารถเปลี่ยนแปลงได้โดยใช้คุณสมบัติ line-height ค่าเริ่มต้นของค่าปกติจะทำให้เบราว์เซอร์คำนวณระยะห่างระหว่างบรรทัดโดยอัตโนมัติ จำนวนใดๆ ที่มากกว่าศูนย์จะถือเป็นตัวคูณขนาดแบบอักษรของข้อความปัจจุบัน นอกจากนี้ยังสามารถใช้หน่วยความยาวใดๆ ที่ยอมรับใน CSS เป็นค่าสำหรับคุณสมบัตินี้ได้ อนุญาตให้ใช้สัญลักษณ์เปอร์เซ็นต์ได้ และในกรณีนี้ ความสูงของแบบอักษรถือเป็น 100% ไม่อนุญาตให้ใช้ระยะห่างระหว่างบรรทัดติดลบ

การเว้นวรรคตัวอักษร: คุณสมบัติการเว้นวรรคตัวอักษร

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

กฎต่อไปนี้จะเพิ่มระยะห่างระหว่างอักขระในส่วนหัว H1 0.5em

สวัสดีผู้อ่านที่รักของบล็อกไซต์ วันนี้เราศึกษากันต่อ และต่อไปเรามีคุณสมบัติ text- decoration, Vertical-align, text-align, text-indent และอื่นๆ อีกมากมาย ซึ่งช่วยในการออกแบบลักษณะที่ปรากฏของข้อความในโค้ด Html

ในบทความที่แล้ว เราได้ดูคุณสมบัติที่มีไว้เพื่อกำหนดค่า รูปร่างแบบอักษรที่.

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

การตกแต่งข้อความ, การจัดข้อความ, การเยื้องข้อความใน CSS

จะทำงานกับข้อความใน Css ได้อย่างไร? คงจะสมเหตุสมผลที่จะถือว่ามีกฎที่ออกแบบมาเป็นพิเศษเพื่อจุดประสงค์นี้ เริ่มต้นด้วยการจัดตำแหน่งข้อความ ซึ่งจริงๆ แล้วเป็นการแทนที่แอตทริบิวต์การจัดตำแหน่ง (ใช้เพื่อจัดตำแหน่งเนื้อหา เช่น ย่อหน้า P หรือส่วนหัว)

มีเพียงสี่ความหมายที่เป็นไปได้:

ความหมายยังคงเหมือนเดิม จัดแนวข้อความ- นี่คือการจัดแนวเส้นแนวนอน กฎนี้ใช้เฉพาะกับองค์ประกอบบล็อก (ย่อหน้า ส่วนหัว ฯลฯ) เช่น แท็กเหล่านั้นซึ่งอาจปรากฏหลายบรรทัด เพราะ เนื่องจากองค์ประกอบแบบอินไลน์สามารถมีได้เพียงบรรทัดเดียว จึงไม่มีความเฉพาะเจาะจงในการใช้การจัดแนวข้อความในองค์ประกอบเหล่านั้น

เป็นที่ชัดเจนว่าค่าของกฎนี้หมายถึงการจัดตำแหน่งตามลำดับ: ซ้าย, ขวา, กึ่งกลางและความกว้างของหน้า (ชิดขอบ - ซ้ายและขวาพร้อมกันโดยเพิ่มระยะห่างระหว่างคำ) . ดำเนินไปโดยไม่ได้บอกว่าควรใช้ค่า Justify สำหรับองค์ประกอบที่มีข้อความอย่างน้อยหลายบรรทัด ไม่เช่นนั้นจะไม่มีผลกระทบที่มองเห็นได้

ตัวอย่างเช่น ฉันจัดชิดขอบย่อหน้าก่อนหน้า (คุณจะเห็นว่ามีเส้นขอบเรียบทั้งซ้ายและขวา) โดยใช้:

การจัดแนวข้อความ: จัดชิดขอบ;

ตามค่าเริ่มต้น การจัดแนวข้อความแนวนอนจะยังคงอยู่ เช่น ไม่จำเป็นต้องเขียน text-align:left โดยเฉพาะ เว้นแต่ว่าคุณได้ระบุการจัดตำแหน่งอื่นไว้ก่อนหน้านี้ อย่างไรก็ตาม ฉันจัดย่อหน้านี้ให้อยู่ตรงกลาง (กลาง) อีกครั้งเพื่อให้เป็นตัวอย่างที่ชัดเจน แต่ที่นี่ ฉันคิดว่าทุกอย่างชัดเจน

กฎ Css ถัดไป เยื้องข้อความช่วยให้คุณสามารถระบุเส้นสีแดง เช่น สำหรับข้อความในแท็กย่อหน้า P การเยื้องของเส้นสีแดงสามารถระบุได้โดยการระบุค่า (โดยใช้เครื่องหมายบวกหรือเครื่องหมายลบ โดยใช้ ) หรือใช้เปอร์เซ็นต์:

เปอร์เซ็นต์ที่คำนวณจากการเยื้องข้อความคืออะไร? จากความกว้างของพื้นที่ที่จัดสรรให้กับข้อความ เหล่านั้น. กฎ CSS text-indent:50% จะตั้งค่าเส้นสีแดงเท่ากับครึ่งหนึ่งของความยาวของบรรทัดนี้ ย่อหน้านี้ทำหน้าที่เป็นตัวอย่างของกฎดังกล่าว

หรือคุณสามารถตั้งค่าลบสำหรับเส้นสีแดงในการเยื้องข้อความ จากนั้นเราจะได้สิ่งที่คุณเห็นในย่อหน้านี้โดยประมาณ เพื่อความสำเร็จ ผลลัพธ์นี้ฉันเขียนกฎ CSS นี้สำหรับแท็กย่อหน้า P:

เยื้องข้อความ:-1em;

การใช้ text-indent โดยทั่วไป (เพื่อตั้งค่าเส้นสีแดงมาตรฐาน) อาจมีลักษณะดังนี้: text-indent:40px; (ใช้กับย่อหน้านี้โดยวิธี) กฎนี้ เช่นเดียวกับการจัดข้อความที่กล่าวถึงก่อนหน้านี้ ใช้กับองค์ประกอบบล็อกเท่านั้น, เช่น. ซึ่งอาจปรากฏหลายบรรทัด (ย่อหน้า หัวข้อ ฯลฯ)

เอาล่ะ เรามาต่อกันที่ การตกแต่งข้อความ(การออกแบบโดยใช้เส้นแนวนอน) ซึ่งนำไปใช้กับองค์ประกอบ Html ทั้งหมดแล้ว (ทั้งแบบอินไลน์และแบบบล็อก)

อาจมีความหมายได้เพียงสี่ความหมาย:

เหล่านั้น. สามารถใช้ตกแต่งข้อความได้ เช่น โอเวอร์ไลน์ ไลน์ทรู ขีดเส้นใต้ หรือไม่ใช้อะไรเลย (ไม่มีเลย) องค์ประกอบ HTML บางอย่างมีการออกแบบเริ่มต้นอยู่แล้ว เส้นแนวนอนตัวอย่างเช่น (จะถูกขีดเส้นใต้ตามค่าเริ่มต้น)

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

ความแตกต่างในการใช้กฎการตกแต่งข้อความ Css คือคุณสามารถป้อนค่าสาม (หรือสอง) ค่าในคราวเดียวสำหรับองค์ประกอบ Html ใด ๆ (ละเว้นไม่มีเลย) และด้วยเหตุนี้คุณจะได้รับ ส่วนของข้อความที่ขีดเส้นใต้-ขีดเส้นใต้-ขีดฆ่า(ฟังดูแล้วดูดีใช่ไหมล่ะ):

การตกแต่งข้อความ:ขีดเส้นใต้ ซ้อนทับ เส้นผ่าน;

จำเป็นต้องเขียนค่าสำหรับการตกแต่งข้อความ (หากคุณต้องการใช้หลายค่าในคราวเดียว) ผ่านอักขระช่องว่าง.

จัดแนวตั้ง - จัดแนวตั้ง

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

สำหรับกฎการจัดแนวตั้ง CSS คุณสามารถใช้ค่าต่อไปนี้:

เส้นมีการจัดแนวพื้นฐานตามค่าเริ่มต้น ดูสิ ฉันสมัครแล้ว เพิ่มขนาดตัวอักษรสำหรับข้อความชิ้นนี้และทั้งสองส่วนนี้จัดชิดกับเส้นฐาน (ล่าง) และการจัดตำแหน่งแนวตั้งโดยใช้การจัดแนวตั้งนั้นมีจุดประสงค์เพื่อเปลี่ยนวิธีจัดแนวเส้นอย่างแม่นยำ

ตัวอย่างเช่น หากฉันเขียน Vertical-align:baseline สำหรับข้อความที่ขยายขนาดเดียวกัน จะไม่มีการเปลี่ยนแปลงเกิดขึ้น เนื่องจาก ค่าพื้นฐานจะใช้สำหรับกฎ CSS นี้ตามค่าเริ่มต้น

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

คุณสามารถเขียนได้ดังนี้:

แนวตั้ง-align:10px;

และเราจะได้รับ เลื่อนส่วนที่มีแบบอักษรขนาดใหญ่ขึ้น 10 พิกเซลสัมพันธ์กับเส้นฐาน ถ้าเราเขียนค่าลบ:

จัดแนวตั้ง:-10px;

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

ในการจัดแนวเนื้อหาของเซลล์ตารางในแนวตั้ง การจัดแนวตั้งควรใช้ค่าบนและล่างเพื่อจัดตำแหน่งเนื้อหาให้ด้านบนและด้านล่างของเซลล์ตามลำดับ (ตรงกลางในเซลล์ตารางจะใช้เป็นค่าการจัดตำแหน่งแนวตั้งเริ่มต้น ).

และสำหรับองค์ประกอบแบบอักษร คุณสามารถใช้ข้อความบน ล่างข้อความ ตรงกลางได้ ลองใช้มันเป็นตัวอย่าง ข้อความชิ้นนี้ความหมาย:

แนวตั้งจัด: กลาง;

ผลลัพธ์คืออะไร? เส้นกลางของส่วนที่ขยายจะสอดคล้องกับบรรทัดฐานของข้อความปกติ เช่น เราได้การจัดแนวแนวตั้งไปที่เส้นกึ่งกลาง สำหรับข้อความด้านบนและด้านล่างทุกอย่างจะเหมือนกัน นี่คือ text-top และนี่คือ text-bottom

ค่าของคุณสมบัติ Css แนวตั้งจัดย่อยและซุปเปอร์สอดคล้องกับดัชนีย่อยและซุปเปอร์ที่เกิดขึ้นใน HTML บริสุทธิ์(ก่อนใช้งาน คุณสมบัติซีเอสเอสสำหรับการออกแบบภาพ)

การแปลงข้อความ การเว้นวรรคตัวอักษร การเว้นวรรคคำ และการเว้นวรรค

ไม่มีการใช้เป็นค่าเริ่มต้น และหมายความว่าอักขระในข้อความจะไม่เปลี่ยนแปลง แต่อย่างใด - ตามที่เขียนด้วย Html นี่คือลักษณะที่จะแสดง ค่าตัวพิมพ์ใหญ่สำหรับการแปลงข้อความจะเปลี่ยนตัวอักษรทั้งหมดในส่วนให้เป็นตัวพิมพ์ใหญ่ ( ตัวอย่างจะแสดงอยู่ในประโยคนี้โดยที่ใช้กฎ text-transform:ตัวพิมพ์ใหญ่ และตัวอักษรเดิมเขียนด้วยตัวพิมพ์เล็ก)

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

ดังนั้นหากคุณมีงานให้เขียนเฉพาะหัวข้อทั้งหมดเท่านั้น เป็นตัวพิมพ์ใหญ่จากนั้นเขียนในรูปแบบ Html ตามปกติ และกำหนดให้เป็นตัวพิมพ์ใหญ่ใน CSS ผ่าน text-transform:uppercase จากนั้น หากคุณตัดสินใจที่จะเปลี่ยนบางอย่างกลับ คุณจะต้องทำการเปลี่ยนแปลงสไตล์เพียงเล็กน้อยเท่านั้น ไม่ใช่เนื้อหาของส่วนหัวทั้งหมด 100,500 รายการในไซต์ของคุณ

ตามค่าเริ่มต้น ทั้งการเว้นวรรคตัวอักษรและคำจะถูกตั้งค่าเป็นปกติ หรือเท่ากับศูนย์ (นั่นคือ ระยะห่างระหว่างอักขระและคำไม่มีการเปลี่ยนแปลงแต่อย่างใด) จำนวนการเปลี่ยนแปลงระยะทางในกฎเหล่านี้สามารถระบุเป็นพิกเซลได้เท่านั้น ไม่ว่าจะเป็น Em หรือ Ex แต่ไม่สามารถระบุเป็นเปอร์เซ็นต์ได้

อย่างไรก็ตาม คุณสามารถใช้ทั้งค่าบวก (ความกระจัดกระจายของอักขระหรือคำ) และค่าลบ (ทำให้อักขระหรือคำอยู่ใกล้กันมากขึ้น) ตัวอย่างเช่นคุณสามารถ “นี่คือวิธีทำให้ตัวอักษรในวลีนี้บางลง”โดยใช้กฎ Css ต่อไปนี้:

ระยะห่างระหว่างตัวอักษร:0.4em;

หรือคุณสามารถ “นี่คือวิธีนำสัญลักษณ์ในวลีนี้มาชิดกันมากขึ้น”โดยใช้:

ระยะห่างระหว่างตัวอักษร:-1px;

เช่นเดียวกันอาจกล่าวได้เกี่ยวกับการเว้นวรรคคำ โดยมีข้อแตกต่างเพียงอย่างเดียวคือระยะห่างระหว่างคำจะเปลี่ยนไป เช่น ในวลีนี้ การใช้โครงสร้าง CSS นี้:

การเว้นวรรคคำ:4em;

ในทำนองเดียวกัน คุณสามารถใช้ค่าลบในการเว้นวรรคคำเพื่อลดระยะห่างระหว่างคำ

กฎ CSS สุดท้ายสำหรับวันนี้ซึ่งช่วยให้คุณจัดรูปแบบข้อความในโค้ด Html ด้วยวิธีใดวิธีหนึ่งก็คือสิ่งนี้ พื้นที่สีขาว- มีหน้าที่แสดงอักขระช่องว่างบนหน้าเว็บที่เกิดขึ้นเมื่อเขียนโค้ด Html

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

ดังนั้น พื้นที่สีขาวอาจมีค่าใดค่าหนึ่งจากสามค่า:

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

ความหมายคืออะไร? ตอนนี้แรปมันจะป้องกันไม่ให้เบราว์เซอร์ล้อมอักขระช่องว่างใดๆ ที่พบภายในแฟรกเมนต์ด้วยกฎ CSS white-space:nowrap คุณสามารถลองใช้งานทั้งหมดได้ด้วยตัวเองโดยสร้างไฟล์ Html ง่ายๆ และใส่ข้อความใดๆ ลงในแท็กดังนี้:

ขอให้โชคดี! พบกันเร็ว ๆ นี้ในหน้าของเว็บไซต์บล็อก

คุณอาจจะสนใจ

รูปแบบรายการ (ประเภท รูปภาพ ตำแหน่ง) - กฎ CSS สำหรับปรับแต่งลักษณะที่ปรากฏของรายการในโค้ด Html
การจัดตำแหน่งโดยใช้กฎ Z-index และ CSS Cursor เพื่อเปลี่ยนเคอร์เซอร์ของเมาส์
Padding, Margin และ Border - ตั้งค่าไว้ CSS ภายในและระยะขอบภายนอกตลอดจนกรอบสำหรับทุกด้าน (บน, ล่าง, ซ้าย, ขวา)
CSS มีไว้ทำอะไร วิธีเชื่อมต่อสไตล์ชีทแบบเรียงซ้อน เอกสาร HTMLและพื้นฐานของไวยากรณ์ของภาษานี้
ลอยและชัดเจนใน CSS - เครื่องมือเค้าโครงบล็อก
CSS - มันคืออะไร สไตล์ชีทแบบเรียงซ้อนเชื่อมต่อกันอย่างไร รหัส HTMLใช้สไตล์และลิงค์
หน่วยขนาด (พิกเซล, Em และ Ex) และกฎการสืบทอดใน CSS
แท็ก คลาส รหัส และตัวเลือกสากล รวมถึงตัวเลือกแอตทริบิวต์ใน CSS สมัยใหม่
ตำแหน่ง (สัมบูรณ์ สัมพัทธ์ และคงที่) - วิธีการกำหนดตำแหน่ง องค์ประกอบ HTMLใน CSS (กฎซ้าย, ขวา, บนและล่าง)
พื้นหลังใน CSS (สี ตำแหน่ง รูปภาพ ทำซ้ำ ไฟล์แนบ) - ทุกอย่างสำหรับการตั้งค่าพื้นหลังหรือสีพื้นหลัง รูปภาพ HTMLองค์ประกอบ