วิธีการติดตั้งขอบเขตที่แตกต่างกันใน CSS

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

• เมื่อใดควรใช้ Borders
• เส้นขอบใน CSS
• คุณสมบัติของ CSS Border
• ค่าดีฟอลต์สำหรับ Border Attributes
• กำหนดพรมแดนในชวเลข
• สิ่งที่ควรคำนึงถึงขณะออกแบบพรมแดนใน CSS

เมื่อใดควรใช้ Borders

แนวทางปฏิบัติมาตรฐานคือการใช้แท็กขอบ CSS เพื่อกำหนดเส้นขอบในหน้า HTML สำหรับ:

• รอบหัวเรื่องที่สำคัญ
• เพื่อเน้นข้อความหลังหรือบันทึกย่อที่สำคัญ
• เพื่อใส่รูปภาพภาพประกอบคำพูดจากบุคคลวิดีโอ
• เพื่อดึงดูดความสนใจไปที่การกำหนดราคาระยะเวลาหรือข้อมูลสำคัญดังกล่าว

คุณอาจต้องการอ่านเกี่ยวกับไฟล์ ก่อนที่จะเรียนรู้เกี่ยวกับเส้นขอบ CSS

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

เส้นขอบใน CSS

CSS Borders สามารถกำหนดให้กับส่วนต่างๆของหน้า HTML ได้ไม่ว่าจะเป็นการใส่ส่วนหัวหรือย่อหน้า เริ่มจากตัวอย่าง ที่นี่เรากำหนดเส้นขอบรอบ ๆ ส่วนหัวและอีกเส้นขอบรอบข้อความย่อหน้า

เนื้อความ {background-color: lightblue} h1 {text-align: center border-style: solid} p {font-family: verdana font-size: 20px border-style: dotted}
ขอบรอบย่อหน้าด้วย!
 

คุณสมบัติของ CSS Border

เส้นขอบ CSS มีคุณลักษณะหลัก 3 ประการสำหรับไฟล์

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

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

• สไตล์ชายแดน แอตทริบิวต์

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

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

• ขอบสี แอตทริบิวต์

แอตทริบิวต์สีสำหรับเส้นขอบสามารถกำหนดได้หลายวิธี ซึ่งคล้ายกับการตั้งค่าสีสำหรับองค์ประกอบอื่น ๆ สามารถกำหนดสีได้ด้วยวิธีใดวิธีหนึ่งต่อไปนี้:

• ชื่อ - ระบุชื่อสีเช่น 'สีน้ำเงิน' คุณยังสามารถลองใช้ตัวเลือกสีแฟนซีเช่น“ อัลมอนด์ลวก”!
• Hex - ระบุค่าฐานสิบหกเช่น“ # ff0000”
• RGB - ตั้งรหัส RGB ตัวอย่างเช่น rgb (255,255,0) หมายถึงสีเหลือง
• การตั้งค่า - เช่น 'โปร่งใส' หรือ 'ทึบแสง'

• ขอบกว้าง แอตทริบิวต์:

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

สามารถระบุความกว้างในหน่วยมาตรฐานใดก็ได้เช่นพิกเซล ('px') จุด ('pt') หรือเป็นเซนติเมตร ('ซม.') คุณยังสามารถระบุความกว้างโดยใช้ค่าที่กำหนดไว้ล่วงหน้าเป็น 'thick' 'thin' และ 'medium'

• เส้นขอบรัศมี แอตทริบิวต์

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

รหัสต่อไปนี้จะสร้าง:

ขอบกว้าง: 10px
เส้นขอบรัศมี: 30px

ค่าดีฟอลต์สำหรับ Border Attributes

• แอตทริบิวต์ที่จำเป็นเพียงอย่างเดียวคือ สไตล์ . หากสไตล์หายไปเส้นขอบจะไม่ปรากฏ

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

• ค่าเริ่มต้นสำหรับ width คือ 'medium'

กำหนดพรมแดนในชวเลข

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

ใช้รหัสต่อไปนี้:

สไตล์ชายแดน: ประ
ขอบสี: สีเขียว
ความกว้างเส้นขอบ: 5px
เส้นขอบ: ประสีเขียว 5px

สิ่งที่ควรคำนึงถึงขณะออกแบบพรมแดนใน CSS

• อย่าใช้เส้นขอบมากเกินไปในหน้าอาจทำให้เสียสมาธิและทำให้ผู้ใช้โฟกัสได้ยาก

  java แปลง double เป็น int

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

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

หวังว่าคุณจะพบข้อมูลที่ต้องการใน CSS borders และ wด้วยเหตุนี้เราจึงมาถึงจุดสิ้นสุดของบทความ Borders ใน CSS

ตรวจสอบ ซึ่งมาพร้อมกับการฝึกอบรมสดที่นำโดยผู้สอนและประสบการณ์โครงการในชีวิตจริง การฝึกอบรมนี้ทำให้คุณมีความเชี่ยวชาญในทักษะในการทำงานกับเทคโนโลยีเว็บส่วนหลังและส่วนหน้า รวมถึงการฝึกอบรมเกี่ยวกับ Web Development, jQuery, Angular, NodeJS, ExpressJS และ MongoDB

มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นของบล็อก 'Border in CSS' แล้วเราจะติดต่อกลับไป