วิธีสร้างเส้นแนวตั้งใน html เพื่อเน้นประเด็นหลักในข้อความ เส้นแนวนอนและแนวตั้งโดยใช้ html และ css สร้างเส้นแนวตั้ง css

เส้นแนวนอนสร้างขึ้นโดยแท็กที่ไม่มีการจับคู่ (ไม่จำเป็นต้องมีแท็กปิด)

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

อย่างไรก็ตาม คุณยังสามารถใช้คุณสมบัติสไตล์บล็อกได้

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

เส้นแนวตั้งใน HTML

ก เส้นแนวตั้งที่จริงแล้วถูกสร้างขึ้นในบล็อกเดียวกัน

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

การก่อตัวของเส้นแนวนอน:

แท็ก
แทรกเส้นแนวนอนลงบนหน้าและมีคุณลักษณะดังต่อไปนี้:

ไวยากรณ์แท็ก
:

ตัวอย่างของเส้นแนวนอนใน HTML:

ตัวอย่างของเส้นแนวตั้งใน HTML:

นี่คือตัวอย่างของเส้นแนวตั้งสีแดงทางด้านซ้าย

นี่คือตัวอย่างของเส้นแนวตั้งสีแดงทางด้านขวา

นี่คือตัวอย่างของเส้นสีแดงแนวนอนที่ด้านบน

นี่คือตัวอย่างของเส้นแนวนอนที่เป็นสีแดงด้านล่าง

นี่คือตัวอย่างของเส้นแนวนอนและแนวตั้ง

ไวยากรณ์สำหรับตัวอย่างของเส้นแนวตั้งและแนวนอนใน HTML:

ใส่ใจกับแอตทริบิวต์สไตล์
ชายแดน- ซ้าย(-ขวา): 4px ทึบ #FF0000;:

วงกลมเกิดขึ้นโดยใช้แท็ก

นี่คือตัวอย่างของเส้นแนวตั้งสีแดงทางด้านซ้าย

นี่คือตัวอย่างของเส้นแนวตั้งสีแดงทางด้านขวา

นี่คือตัวอย่างของเส้นแนวนอนที่เป็นสีแดงด้านล่าง

นี่คือตัวอย่างของเส้นแนวนอนและแนวตั้ง

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

แต่ทั้งหมดขึ้นอยู่กับจินตนาการและการร้องขอ ดังนั้นเลือกและจัดรูปร่าง

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

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

การแยกข้อความแนวตั้งมีไว้เพื่ออะไร?

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

ส่วนใหญ่แล้วจะมีการเน้นเสียงในเนื้อหาข้อความของหน้าต่างๆ สำหรับสิ่งนี้เราใช้:

  • แท็กพิเศษ เช่น < แข็งแกร่ง>, < ฉัน>, < ใหญ่>และคนอื่น ๆ;
  • การแบ่งข้อความออกเป็นย่อหน้าและการป้อนหัวเรื่องในระดับต่างๆ
  • การเลือกวัตถุโดยใช้สิ่งต่าง ๆ ;
  • การเปลี่ยนรูปแบบตัวอักษร
  • การแนะนำเฟรมเฟรมเข้าไปในเนื้อหา ฯลฯ

ลองพิจารณาประเด็นสุดท้าย

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

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

คุณสมบัติทั้งหมดที่กล่าวมาข้างต้นสามารถควบคุมความหนาของเส้น สี และสไตล์การนำเสนอได้

ฉันอยากจะทราบว่าขอบเขตสามารถดูได้มากกว่าแค่เส้นตรง นอกจากนี้ยังอาจปรากฏ:

  • จุด(ประ)
  • จุด(ประ)
  • เชิงเส้น(แข็ง)
  • สองเท่า(สองเท่า)
  • ปริมาตร(ร่อง แทรก สัน และนอก) เฟรม
  • หรือทำซ้ำการตั้งค่าสไตล์ของบรรพบุรุษโดยใช้ คำสำคัญสืบทอด

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

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

ส่วนการปฏิบัติ

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 เส้นแนวตั้ง

ข้อความชิ้นนี้มีความสำคัญมาก

เส้นแนวตั้ง

ย่อหน้าแรก. ใช้เส้นขอบซ้าย

ในย่อหน้าแรก ให้เน้นจุดสำคัญของข้อความด้วยเส้นสีม่วงคู่ซ้าย

ข้อความชิ้นนี้มีความสำคัญมาก

ย่อหน้าที่สอง การใช้ภาพเส้นขอบ

ในย่อหน้าที่สอง เราเน้นจุดสำคัญของข้อความด้วยเส้นแนวตั้งทางด้านซ้ายในรูปแบบของรูปภาพ

ข้อความชิ้นนี้มีความสำคัญมาก

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

ขอแสดงความนับถือ Roman Chueshov

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

วิธีสร้างบรรทัดในข้อความโดยใช้ CSS

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

- ขอบด้านบน– เส้นแนวนอนที่อยู่เหนือข้อความ

- เส้นขอบขวา– เส้นแนวตั้งที่อยู่ทางด้านขวาของข้อความ

- ขอบล่าง– เส้นแนวนอนที่อยู่ด้านล่างข้อความ

- ขอบซ้าย– เส้นแนวตั้งอยู่ทางด้านซ้าย.

วิธีสร้างบรรทัดใน html

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



จะสร้างเส้นประหรือเส้นตรงได้อย่างไร?



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


คำอธิบายคำสั่งโดยย่อ

- ความกว้าง- ความยาวบรรทัด;

- แข็ง- เส้นทึบ

- จุด- จุดไข่ปลา.

เพื่อความเข้าใจสไตล์ที่ลึกซึ้งยิ่งขึ้น ฉันแนะนำให้อ่านอันนี้

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

วิธีนี้มีข้อดีหลายประการ:

ความเป็นไปได้ที่หลากหลายซึ่งคุณสามารถสร้างได้เกือบทุกบรรทัด

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

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

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

คุณสมบัติของแท็ก

- ความกว้าง– มีหน้าที่รับผิดชอบความยาวของเส้น สามารถระบุเป็นเปอร์เซ็นต์หรือเป็นพิกเซลก็ได้

- ขนาด– ความหนาของเส้น ระบุเป็นพิกเซล

- สี– กำหนดสีของเส้น

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

สวัสดีทุกคน! วันนี้ผมจะมาบอกวิธีสร้างเส้นแนวนอนโดยใช้ html

ในความเป็นจริง ความจำเป็นในการสร้างเส้นแนวนอนเกิดขึ้นค่อนข้างบ่อย เช่น เมื่อคุณต้องการแยกส่วนหนึ่งของข้อความออกจากอีกส่วนหนึ่ง

เส้นแนวนอนและแนวตั้งโดยใช้ CSS

คุณสามารถทำได้ด้วย ใช้ css. ในการดำเนินการนี้ ฉันใส่ส่วนที่ต้องการของข้อความลงในบล็อกโดยใช้แท็ก div จากนั้นในไฟล์ style.css หรือในโค้ด html โดยตรงที่เราเขียนคุณสมบัติของบล็อกนี้สำหรับเส้นขอบด้านบนหรือด้านล่างโดยใช้ border-top และ ขอบล่าง นี่คือตัวอย่าง:

เส้น HTML แนวตั้ง

เส้นแนวนอนโดยใช้ CSS

ในกรณีนี้ ฉันตั้งค่าสไตล์โดยใช้ css โดยตรงจากโค้ด html และทำให้เส้นขอบด้านบนทึบและด้านล่าง จุดไข่ปลา.

นี่คือลักษณะที่ปรากฏบนหน้า:

เส้นแนวนอนโดยใช้ CSS

วิธีนี้มีข้อดี:

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

ข้อเสียรวมถึงความยุ่งยากของโค้ด

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

.

เส้นแนวนอนโดยใช้แท็ก html

คุณลักษณะแรกของแท็กนี้คือไม่มีแท็กปิดที่จับคู่กัน สามารถใช้ได้ทุกที่ในโค้ด html ระหว่างแท็ก และ.

แท็กนี้มีคุณลักษณะดังต่อไปนี้:

  • ความกว้าง– กำหนดความยาวของเส้นแนวนอนของเราเป็นพิกเซลหรือเปอร์เซ็นต์
  • สี– กำหนดสีของเส้น;
  • จัดตำแหน่ง– กำหนดการจัดตำแหน่งของเส้นไปที่ขอบขวา – ขวา, ขอบซ้าย – ซ้าย, ตรงกลาง – กึ่งกลาง
  • ขนาด– ความหนาของเส้นเป็นพิกเซล

ที่นี่ ตัวอย่าง html– รหัส:

และนี่คือลักษณะที่ปรากฏ:

อย่างที่เห็น, วิธีนี้มีข้อเสีย:

  • การตั้งค่าบรรทัดน้อยลง
  • คุณไม่สามารถสร้างเส้นแนวตั้งได้

แต่วิธีนี้ง่ายกว่ามาก

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