เส้นแนวนอน

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

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

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

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

- ตัวคั่นที่แบ่งส่วนต่างๆ ของเนื้อหาของคุณด้วยสายตา และเน้นที่ที่แนวคิดหนึ่งสิ้นสุดลงและอีกแนวคิดหนึ่งเริ่มต้นขึ้น

- ปากกาเน้นข้อความที่เน้นส่วนที่มีความหมายของหน้าเว็บ

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

ความยาว;

ความกว้าง;

สี;

การจัดตำแหน่ง

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

เส้นแนวนอนมีประโยชน์มากในการแยกหน้าของคุณออกเป็นส่วนต่างๆ เมื่อต้องการเพิ่มเส้นแนวนอนอย่างง่าย เพียงพิมพ์ < hr > แล้วคุณจะได้สิ่งนี้:

---

วิธีการสร้างเส้นแนวนอน

คุณสามารถกำหนดบรรทัดโดยใช้แท็ก <hr > แบบง่าย ย่อมาจาก "กฎแนวนอน" และตั้งค่าพารามิเตอร์ภายนอกแบบคลาสสิก สิ่งที่แตกต่างไปจากที่อื่นๆ คือไม่จำเป็นต้องมีแท็กปิดและสามารถมีอยู่ได้ด้วยตัวมันเอง คุณสามารถเปลี่ยนลักษณะภายนอกขององค์ประกอบโดยใช้ค่าเพิ่มเติมในแท็ก:

ดูเหมือนว่านี้ ตัวอย่างเช่น หากเราต้องการความยาว 100 พิกเซล เราจะตั้งค่าแท็กดังนี้: hr width = "100.

การจัดตำแหน่ง

คุณสามารถจัดแนวเส้นที่ขอบด้านซ้ายหรือด้านขวา และตรงกลางได้ด้วย คุณลักษณะนี้ใช้ได้เฉพาะเมื่อคุณได้ระบุพารามิเตอร์ความกว้างแล้ว เนื่องจากไม่สามารถจัดแนวบรรทัดเต็มหน้าได้ สำหรับการจัดตำแหน่ง ให้ตั้งค่าแอตทริบิวต์เพิ่มเติมในแท็ก "align" และเพิ่มทิศทางไปที่: center - สำหรับกึ่งกลาง, ซ้าย - สำหรับซ้ายและขวา - สำหรับการจัดตำแหน่งด้านขวา

แท็กที่เสร็จสิ้นแล้ว ในกรณีนี้ จะมีลักษณะดังนี้: หากเราต้องตั้งค่าการจัดตำแหน่งกึ่งกลางสำหรับเส้นแนวนอนที่มีความยาว 150 พิกเซล แท็กที่เสร็จแล้วจะมีลักษณะดังนี้: hr align = "center" width = " 150".

โปรดทราบว่า "จัดตำแหน่ง" ซึ่งเป็นหน่วยวัดสำหรับการจัดตำแหน่ง จะอยู่ในตำแหน่งที่ 1 แม้ว่าแอตทริบิวต์จะขึ้นอยู่กับความกว้างของการวัดความยาว

ความกว้าง.

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

ดังนั้น หากเราต้องการสร้างเส้นที่มีความกว้าง 15 พิกเซล เราจำเป็นต้องสร้างแท็กต่อไปนี้: hr size = "15"

สี.

มันยังถูกกำหนดให้เป็นตัวบ่งชี้อิสระอีกด้วย หากต้องการเปลี่ยน ให้ใช้แอตทริบิวต์สีร่วมกับชื่อสีในรูปแบบรหัสหรือภาษาอังกฤษ สีจะถูกระบุในเครื่องหมายคำพูดหลังสัญลักษณ์ "="

ดังนั้น แท็กสำหรับเส้นสีขาวมาตรฐานสามารถเขียนได้สองวิธี: hr color = "#FFFFFF" หรือ hr color = "white"

สามารถสร้างสีดำได้โดยใช้รหัส # 000000

วิธีทำเส้นแนวนอนสี?

เส้นแนวนอนเหมาะสำหรับแยกข้อความหนึ่งบล็อกออกจากอีกบล็อกหนึ่ง ข้อความขนาดเล็กที่มีเส้นแนวนอนที่ด้านบนและด้านล่างจะดึงดูดความสนใจมาที่ผู้อ่านมากกว่าข้อความธรรมดา

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

ตามค่าเริ่มต้น เส้นจะแสดงเป็นสีเทาและมีเอฟเฟกต์ระดับเสียง เส้นประเภทนี้ไม่เหมาะกับการออกแบบของไซต์เสมอไป ดังนั้นความปรารถนาของนักพัฒนาในการเปลี่ยนสีและพารามิเตอร์อื่นๆ ของเส้นผ่านสไตล์จึงเป็นที่เข้าใจได้ อย่างไรก็ตาม เบราว์เซอร์มีความคลุมเครือเกี่ยวกับปัญหานี้ ซึ่งเป็นสาเหตุที่คุณจะต้องใช้คุณสมบัติสไตล์หลายอย่างพร้อมกัน โดยเฉพาะอย่างยิ่ง Internet Explorer รุ่นเก่าใช้คุณสมบัติสีสำหรับสีของเส้น ในขณะที่เบราว์เซอร์อื่นใช้สีพื้นหลัง แต่นั่นไม่ใช่ทั้งหมด ในกรณีนี้ อย่าลืมระบุความหนาของเส้น (คุณสมบัติความสูง) ที่ไม่ใช่ศูนย์ และลบเส้นขอบรอบเส้นโดยการตั้งค่าคุณสมบัติเส้นขอบเป็นไม่มี เมื่อรวมคุณสมบัติทั้งหมดเข้าด้วยกันสำหรับตัวเลือก hr เราได้รับโซลูชันสากลสำหรับเบราว์เซอร์ยอดนิยม

< ! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title> สีเส้นแนวนอน < /title > < style > hr { border: none; / * ลบเส้นขอบ * / พื้นหลังสี: สีแดง; / * สีเส้น * / สี: แดง; / * สีเส้นสำหรับ IE6-7 * / ความสูง: 2px; / * ความกว้างบรรทัด * / } < /style > < /head > < เนื้อหา > < ชม > < p > สตริงข้อความ < /p > < ชม > < /body > < /html >

ตัวอย่าง:

นี้:

< ชม. color="#c7c34c" size="2" width="50%" >

ให้สิ่งนี้:

---

สี: สีของเส้น:

< ชม. color="#c7c34c" size="2" width="50%" >

ขนาด: ความสูงของเส้นแสดงเป็นพิกเซล:

< ชม. size="x" >

ความกว้าง: ความกว้างของเส้นแสดงเป็นเปอร์เซ็นต์ (%) หรือเป็นพิกเซล (ในตัวอย่างของฉันคือ 50% ของขนาดดั้งเดิม):

< ชม. width="x%"> หรือ < ชม. width="x" >

ขั้นสูงเพิ่มเติม:

นี้:

< ชม. width="400" color="#000000" size="4" >

ให้:

---

ในกรณีนี้เราใช้สไตล์:

ความกว้างของเส้นขอบคือ 3 พิกเซล (3 พิกเซล)

มีจุด

สีพื้นเป็นสีดำ : #000000

จุดสีน้ำเงิน: #0099CC

ตัวอย่างสุดท้ายที่จะอธิบายเพิ่มเติม หากยังจำเป็น ;):

นี้

< ชม. width="400" color="#FFFFFF" size="6" >

ให้:

---

ในกรณีนี้ด้านบน:

ความกว้างของเส้นขอบคือ 2 พิกเซล (2 พิกเซล)

มันประปราย

สีพื้นเป็นสีขาว : #FFFFFF

เส้นประสีเงิน: #C0C0C0

รูปแบบที่เป็นไปได้คือ:

-จุด

-ประ

-แข็ง

-สองเท่า

-ร่อง

-outset

-inset

-ridge

นั่นคือทั้งหมดที่ฉันต้องพูดเกี่ยวกับเส้นแนวนอน!