เส้น css3. เส้นแนวนอน. เส้นประบาง หนา สองเส้นโดยใช้แป้นพิมพ์

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

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

วิธีพื้นฐานในการจัดเรียงบล็อกใน CSS

เราจะไม่ทำให้ซับซ้อนอะไร มี 3 วิธีหลัก:

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

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

ทำให้องค์ประกอบลอยโดยใช้คุณสมบัติลอย

มุ่งเน้นไปที่ตัวเลือกเหล่านี้ เราจะไม่พิจารณา Flexbox การแสดงตาราง และด้านอื่นๆ สมมติว่าเรามี 3 หัวข้อย่อย

หัวเรื่อง 1

หัวเรื่อง 2

หัวเรื่อง 3

โดยปกติแล้ว คุณสมบัติ CSS ทั้งหมดจะต้องเขียนลงไป แยกไฟล์(style.css) ซึ่งจำเป็นต้องเชื่อมต่อกับเอกสาร html ในไฟล์นี้ ฉันจะเขียนสไตล์มินิมอลเพื่อให้มองเห็นหัวข้อย่อยของเราได้ง่าย

h3( พื้นหลัง: #EEDDCD; )

พวกเขาอยู่ที่นี่บนหน้า:

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

มาแปลงเป็นบรรทัดแล้วเพิ่มการเยื้องทันที เมื่อต้องการทำเช่นนี้ ตัวเลือก h3 จำเป็นต้องเพิ่มคุณสมบัติต่อไปนี้:

จอแสดงผล: อินไลน์; ช่องว่างภายใน: 30px;

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

ใน html ให้วางโค้ดของบล็อกที่ต้องการในหนึ่งบรรทัดโดยไม่มีช่องว่าง

ป้อนค่าลบ ระยะขอบขวา -4 พิกเซล นั่นคือจำนวนหนึ่งพื้นที่ที่ใช้

ปัญหาที่สองคือหากองค์ประกอบมีความสูงต่างกัน ปัญหาในการแสดงผลก็อาจเกิดขึ้นได้ โดยรวมแล้ว ตัวเลือกที่ดีที่สุด- บล็อกลอย แทนที่จะแสดง: inline-block เราเขียนสิ่งนี้:

บล็อกในบรรทัดโดยใช้กรอบงาน

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

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

ตัวอย่างเช่น เมื่อคุณควรมี 4 คอลัมน์บนหน้าจอขนาดใหญ่ 3 คอลัมน์บนหน้าจอขนาดกลาง และ โทรศัพท์มือถือ— 2. ด้วยความช่วยเหลือของเฟรมเวิร์ก เช่น Bootstrap หรือด้วยความช่วยเหลือของกริด การนำสิ่งนี้ไปใช้งานก็ใช้เวลาเพียงไม่กี่นาที

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

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

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

เส้นแนวนอนคืออะไรและมีไว้เพื่ออะไร?

เส้นแนวนอนใน html เป็นองค์ประกอบการออกแบบเพจที่ทำหน้าที่หลายอย่าง:

1. ตกแต่ง- ช่วยเพิ่มความน่าสนใจให้กับเพจ
2. การแบ่ง- ส่งเสริมการแยกข้อมูลที่มีความหมายต่างกันอย่างมีประสิทธิภาพ
3. การเน้นหรือเน้นย้ำ- ดึงดูดความสนใจของแขกเพจไปยังข้อมูลที่จำเป็นและสำคัญที่สุด

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

• ความยาว;
• ความกว้าง;
• ลักษณะสี
• การจัดตำแหน่งตามขอบด้านใดด้านหนึ่ง

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

การสร้างเส้นแนวนอนใน HTML

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

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

มีลักษณะเช่นนี้ ตัวอย่างเช่น หากเราต้องการความยาว 100 พิกเซล ให้ตั้งค่าแท็กต่อไปนี้: hr width=”100″

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

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

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

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

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

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

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

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

1. วางไว้ เงา- หากคุณต้องการองค์ประกอบที่ไม่มีเงา คุณควรใช้แอตทริบิวต์ noshade ในแท็ก สามารถใช้เดี่ยว ๆ หรือใช้ร่วมกับองค์ประกอบอื่น ๆ ได้ แท็กสำหรับบรรทัดมาตรฐานที่ใช้จะมีลักษณะดังนี้: hr noshade

การสร้างเส้นแนวนอนโดยใช้วิดีโอ

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

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

งาน

สร้างเส้นแนวนอนบนหน้า

สารละลาย

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

การใช้แท็ก

บรรทัดเริ่มต้น

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

ด้วยการรวมคุณสมบัติทั้งหมดเข้าด้วยกันสำหรับตัวเลือก hr เราจะได้โซลูชันที่เป็นสากลสำหรับเบราว์เซอร์ยอดนิยม (ตัวอย่างที่ 1)

HTML5 CSS 2.1 IE Cr Op Sa Fx

สีของเส้นแนวนอน สตริงข้อความผลลัพธ์

ตัวอย่างนี้

แสดงในรูปที่. 1.

ข้าว. 1. เส้นแนวนอนสี
ดูเหมือนว่าเหตุใดจึงต้องมีสี่วิธี? ท้ายที่สุดแล้วเกือบทุกคนใช้วิธีการเดียวที่เขาคุ้นเคย ตัวอย่างเช่น ฉันกด Shift และแป้น dash หลายครั้ง ดังนั้นฉันจึงได้เส้นแนวนอน

3.
4.
5.

แต่จะเกิดอะไรขึ้นถ้าสิ่งนี้ส่งผลให้เกิดเส้นประ แต่คุณต้องการเส้นทึบล่ะ?

- เป็นไปได้มากว่าปุ่ม Shift บนแป้นพิมพ์ผิดปกติ วิธีอื่นจะมาช่วยเหลือที่นี่

บางทีวิธีทั่วไปที่สุดในการสร้างบรรทัดใน Word ก็คือการใช้ปุ่มสองสามปุ่มบนคีย์บอร์ด

เส้นประบาง หนา สองเส้นโดยใช้แป้นพิมพ์

ด้านล่างนี้เป็นรูปภาพของแป้นพิมพ์ที่มีรูปแบบภาษาอังกฤษ แต่ไม่มีรูปแบบภาษารัสเซีย แต่ก็ไม่สำคัญเพราะเราสนใจเพียงสามปุ่มเท่านั้น: Shift, dash และ Enter

ข้าว. 1. สามปุ่มบนแป้นพิมพ์: Shift, dash และ Enter สำหรับเส้นแนวนอนต่อเนื่องใน Word ด้วยปุ่มทั้งสามปุ่มนี้ คุณสามารถวาดเส้นแนวนอนต่อเนื่องใน Word ได้: จุดหรือทึบ บางหรือหนา ยาวหรือสั้น 1) เมื่อคุณกดปุ่ม “-” (เส้นประ) หลายครั้ง

โปรแกรมแก้ไขคำ เราจะได้เส้นประที่มีความยาวเท่าใดก็ได้ที่จะทำ

• บาง
• เส้นยาวพาดผ่านความกว้างทั้งหมดของหน้า:
• เราพบปุ่ม "dash" บนแป้นพิมพ์ (ทางด้านขวาของปุ่ม "ศูนย์" ในกรอบสีเขียวในรูปที่ 1)

2) เมื่อคุณกด Shift และ "-" (เส้นประ) พร้อมกัน จะไม่พิมพ์เส้นประ แต่จะขีดล่าง _________ วิธีนี้จะทำให้คุณสามารถสร้างเส้นต่อเนื่องตามความยาวใดก็ได้ในเอกสาร

ข้าว. 2. เส้นแนวนอนบางและหนาใน Word

ตอนนี้เรามาพิมพ์ อ้วนเส้นแนวนอนตลอดความกว้างของหน้า:

• เราพบปุ่ม "เส้นประ" เดียวกันอีกครั้ง เช่นเดียวกับปุ่ม Shift (ทางซ้ายหรือทางขวาตามที่คุณต้องการ) กด Shift ค้างไว้แล้วอย่าปล่อย
• และตอนนี้จากบรรทัดใหม่ (!) ให้คลิกที่เส้นประหลาย ๆ ครั้ง (เช่น 3-4 ครั้ง) (โดยที่ไม่ปล่อย Shift): ___ ปล่อยกะ
• ตอนนี้กดปุ่ม Enter คุณจะเห็นเส้นทึบแนวนอนหนาๆ

มาสรุปผลลัพธ์บางส่วนในรูปแบบของตาราง:

(คลิกเพื่อดูภาพขยาย) บรรทัดใน Word โดยใช้แป้นพิมพ์

­­­­­­­­­­­­­­­­­­­­­

II บรรทัดใน Word โดยใช้ตาราง

เส้นแนวนอนสามารถรับได้โดยใช้ตารางของเซลล์หนึ่งเซลล์ (1x1) ซึ่งมีการลงสีเฉพาะเส้นขอบด้านบนหรือด้านล่างเท่านั้น (จะมองเห็นได้) และอีกสามด้านของตารางมีเส้นขอบที่ไม่มีสี (จะมองไม่เห็น) .

วางเคอร์เซอร์ในตำแหน่งที่ควรจะเป็นบรรทัด ในเมนูด้านบนของ Word คลิก:

• เม็ดมีด (1 ในรูปที่ 3)
• ตาราง (2 ในรูปที่ 3)
• หนึ่งเซลล์ (3 ในรูปที่ 3)

ข้าว. 3. วิธีแทรกตาราง 1x1 (จากเซลล์เดียว) ใน Word

ผลลัพธ์จะเป็นตารางของเซลล์ขนาดใหญ่หนึ่งเซลล์ (1x1):

สิ่งที่เหลืออยู่คือการลบเส้นขอบออกจากสามด้านในตาราง 1x1 สำหรับสิ่งนี้

• ไปที่แท็บ "หน้าแรก" (1 ในรูปที่ 4)
• ถัดจาก "แบบอักษร" เราจะพบ "ย่อหน้า" และเส้นขอบ (2 ในรูปที่ 4)
• ลบเส้นขอบทั้งหมดโดยคลิก "ไม่มีเส้นขอบ" (3 ในรูปที่ 4)
• เลือก “ขอบบน” หรือ “ขอบล่าง” (4 ในรูปที่ 4)

ข้าว. 4. วิธีลบการเลือกเส้นขอบออกจากตาราง Word (ทำให้มองไม่เห็นเส้นขอบ)

ฉันแสดงสิ่งนี้อย่างชัดเจนในวิดีโอ (ท้ายบทความ)

โดยวิธีการในรูป 3 เป็นที่ชัดเจนว่ามีวิธีที่ง่ายกว่า คุณสามารถวางเคอร์เซอร์ไว้ที่จุดเริ่มต้นของบรรทัดใน Word แล้วคลิก "เส้นแนวนอน" (5 ในรูปที่ 4):

III บรรทัดใน Word โดยใช้รูปวาด

แทรก (1 ในรูปที่ 5) - รูปร่าง (2 ในรูปที่ 5) - นี่เป็นอีกวิธีหนึ่งในการรับเส้นแนวนอนใน Word

หากต้องการให้เส้นอยู่ในแนวนอนอย่างเคร่งครัด ให้กดปุ่ม Shift ค้างไว้แล้วลากเส้นไปพร้อมๆ กัน

ข้าว. 5. วิธีวาดเส้นใน Word

IV Line ใน Word โดยใช้แป้นพิมพ์บนหน้าจอ

หากต้องการค้นหาแป้นพิมพ์บนหน้าจอ ให้ป้อนวลี “แป้นพิมพ์บนหน้าจอ” ในการค้นหา รายละเอียดเพิ่มเติมสำหรับ Windows 7 และสำหรับ Windows 8

สำหรับ Windows 10 คุณสามารถค้นหาแป้นพิมพ์บนหน้าจอได้โดยพิมพ์ “แป้นพิมพ์บนหน้าจอ” ลงในแถบค้นหา

ข้าว. 6. แป้นพิมพ์บนหน้าจอ

เราจะสร้างเส้นแนวนอนในลักษณะเดียวกับในตัวเลือกแรกด้วย แป้นพิมพ์ปกติ- คุณจะต้องมีปุ่มสามปุ่มบนแป้นพิมพ์บนหน้าจอ: แดช, Shift และ Enter

1 ขีดแล้วเข้า

จากบรรทัดใหม่ใน Word ให้คลิกที่เส้นประ (1 ในรูปที่ 6) หลายครั้งแล้วกด Enter คุณจะได้เส้นแนวนอนบางๆ

2 Shift, ขีดกลาง และ Enter

จากบรรทัดใหม่ใน Word ขั้นแรกให้คลิก Shift (2 ในรูปที่ 6) จากนั้นคลิก Dash (1 ในรูปที่ 6) คุณจะได้รับขีดเส้นใต้ เราจะทำซ้ำอีก 2 ครั้ง จากนั้นกด Enter ส่งผลให้เราจะเห็นเส้นแนวนอนหนาๆ

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

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

มีแท็กพิเศษสำหรับการวาดเส้นแนวนอนในรูปแบบ HTML

- แต่ฉันอยู่ที่นี่

---

ไม่สามารถมีเนื้อหาได้เนื่องจากไม่มีแท็กปิด หมายความว่าว่างเปล่า

ตัวอย่างการวาดเส้นแนวนอนในรูปแบบ HTML

---

ย่อหน้า

ย่อหน้า

---

ย่อหน้า

ผลลัพธ์ในเบราว์เซอร์

ย่อหน้า

ย่อหน้า

ย่อหน้า

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

จะเปลี่ยนสี ความหนา และความกว้างของเส้นแนวนอนได้อย่างไร?

ใน HTML เวอร์ชันเก่า แท็ก

---

มีคุณสมบัติพิเศษที่คุณสามารถเปลี่ยนสี ความหนา และความกว้างของเส้นแนวนอนได้ ได้แก่ สี ขนาด และความกว้าง ตามลำดับ แต่ในเวอร์ชันใหม่ พวกเขาละทิ้งไปเพื่อสนับสนุน Cascading Style Sheets (CSS) ดังนั้น ดังที่คุณอาจเดาได้ เราจะใช้แอตทริบิวต์สไตล์ที่เราชื่นชอบอีกครั้ง ไวยากรณ์ทั่วไปเช่น:

---

style="พื้นหลัง:สี">- สีของเส้น (หรือมากกว่าพื้นหลัง)

---

สไตล์ = "ความสูง: ขนาด" >- ความหนาของเส้น

---

สไตล์ = "ความกว้าง: ขนาด" >- ความกว้างของเส้น

---

สไตล์= "พื้นหลัง:สี; ความสูง:ขนาด; ความกว้าง:ขนาด"> - หรือคุณสามารถระบุพารามิเตอร์ทั้งหมดพร้อมกันได้ เพียงอย่าลืมเครื่องหมายอัฒภาค (;)

สามารถระบุสีด้วยชื่อเป็นภาษาอังกฤษหรือตามรหัส HEX ของสีที่นำหน้าด้วยแฮช (#) คุณรู้เรื่องนี้แล้วตั้งแต่บทเรียนเป็นต้นไป เปลี่ยนสีข้อความและพื้นหลัง.

แต่เราจะพูดคุยเพิ่มเติมเกี่ยวกับการปรับขนาด ตามที่คุณจำได้จาก บทเรียนเกี่ยวกับการเปลี่ยนแบบอักษรมีหน่วยการวัดประมาณสิบหน่วยใน CSS แต่ ความกว้างของเส้นสามารถระบุเป็นพิกเซล (px) และเปอร์เซ็นต์ (%) เท่านั้น และ ความหนาโดยทั่วไปจะมีหน่วยเป็นพิกเซลเท่านั้น หากคุณใส่หน่วยการวัดอื่น จะไม่เกิดข้อผิดพลาด แต่เบราว์เซอร์จะเพิกเฉยต่อหน่วยเหล่านั้น

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

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

---

- ในกรณีนี้ มิติของพาเรนต์จะถือเป็น 100% เช่น ถ้าเราวางแท็ก

---

สไตล์ = "ความกว้าง: 50%" >องค์ประกอบภายใน

ไม่ว่าเราจะเปลี่ยนขนาดหน้าต่างเบราว์เซอร์หรือความละเอียดของจอภาพอย่างไร ความกว้างของเส้นจะเป็นครึ่งหนึ่งของความกว้างของบล็อกเสมอ

.

ตัวอย่างการเปลี่ยนสี ความหนา และความกว้างของเส้นแนวนอน

---

---

---

---

ผลลัพธ์ในเบราว์เซอร์

การเปลี่ยนตำแหน่งของเส้นแนวนอน

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

---

จัดแอตทริบิวต์ให้สอดคล้องกับค่าต่อไปนี้:

• ศูนย์- เส้นถูกจัดชิดตรงกลาง (ค่าเริ่มต้น)
• ซ้าย- กดไปทางขอบด้านซ้าย
• ขวา- กดไปทางขอบด้านขวา

ตัวอย่างการจัดแนวเส้นแนวนอน

---

---

---

ผลลัพธ์ในเบราว์เซอร์

จะถอดกรอบรอบเส้นได้อย่างไร?

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

ตอนนี้ฉันจะอธิบาย ตามค่าเริ่มต้น เบราว์เซอร์จะวาดเฟรมรอบๆ เส้น ซึ่งสร้างเอฟเฟกต์สามมิติ ดังนั้น เมื่อเราไม่เพิ่มความหนาของเส้นแนวนอน เบราว์เซอร์จะแสดงเฉพาะเฟรมเหล่านี้ เนื่องจากความหนาของเส้นคือ 0px

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

---

การบ้าน.

1. สร้างบทความ ส่วน และหัวข้อย่อย วางไว้ตรงกลาง
2. ตั้งค่าแบบอักษรเป็น Arial สำหรับทั้งหน้าและ Courier สำหรับส่วนหัว
3. ปล่อยให้ขนาดตัวอักษรบนทั้งหน้าเป็น 85% ของขนาดเบราว์เซอร์เริ่มต้น และส่วนหัวมีขนาดตัวอักษรบนหน้า 145%, 125% และ 110% ตามลำดับ
4. เขียนย่อหน้าใต้หัวข้อแรก ข้อความยาวๆ ใต้หัวข้อที่สอง และบทกวีใต้หัวข้อที่สาม และให้บทกวีอยู่ตรงกลางหน้า
5. คำสามคำที่เป็นตัวหนาในเครื่องหมายคำพูด
6. ใต้ชื่อบทความ ให้วาดเส้นแนวนอนสีแดงสามพิกเซลให้เต็มความกว้างของหน้า
7. ที่ด้านบนและด้านล่างของบทกวี ให้ลากเส้นหนา 1 พิกเซลเป็นสีดำ ปล่อยให้ความกว้างของเส้นบนสุดประมาณเท่ากับความกว้างของข้อและด้านล่าง - ครึ่งหนึ่ง
8. ลบเฟรมที่ไม่จำเป็นออกจากบรรทัด