home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

CSS Outline

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

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

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

โครงร่าง CSS

เค้าร่างเป็นเส้นที่วาดรอบองค์ประกอบ นอกเส้นขอบ กรณีการใช้งานทั่วไปของคุณสมบัติเค้าร่างคือการเน้นองค์ประกอบ HTML

นี่คือการแสดงภาพวิธีการใช้เค้าร่างใน CSS:

CSS Outline

กราฟิกนี้แสดงให้เห็นว่าเค้าร่างปรากฏภายนอกเนื้อหาและเส้นขอบขององค์ประกอบเว็บ คุณจะเห็นว่าเค้าร่างเป็นชั้นนอกสุดขององค์ประกอบเว็บ

มีความแตกต่างเล็กน้อยระหว่างเส้นขอบและโครงร่างใน CSS

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

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

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

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

หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับเส้นขอบใน CSS โปรดอ่านคำแนะนำเกี่ยวกับเส้นขอบ CSS

คุณสมบัติเค้าร่าง CSS

คุณสมบัติเค้าร่างใช้เพื่อเพิ่มเค้าร่างให้กับองค์ประกอบบนหน้าเว็บ

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

  • outline-color:กำหนดสีของเค้าร่าง
  • สไตล์เค้าร่าง:กำหนดรูปแบบของเค้าร่าง
  • outline-width:กำหนดความกว้างของเค้าร่าง

ไวยากรณ์สำหรับคุณสมบัติเค้าร่างมีดังนี้:

outline: outline-color outline-style outline-width;

ค่าที่ระบุด้วยคุณสมบัติเค้าร่างไม่จำเป็นต้องปรากฏในลำดับใดๆ

มาดูตัวอย่างกันเพื่อแสดงให้เห็นว่าคุณสมบัติเค้าร่างทำงานอย่างไร สมมติว่าเราต้องการสร้างโครงร่างรอบ ๆ กล่องที่มีข้อความ This is a box . โครงร่างของเราควรมีลักษณะดังต่อไปนี้:

  • โครงร่างควรเป็นสีแดง
  • โครงร่างควรมีความหนา 3px
  • โครงร่างควรมีจุด

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

<html>

<p class="outlineExample">This is a box.</p>
</html>

<style>
	
.outlineExample {
	width: 100px;
	border: black solid 1px;
	outline: red dotted 3px;
}
</style>

CSS Outline ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

ในโค้ดของเรา เราได้ประกาศทั้งโครงร่างซึ่งปรากฏเป็นสีแดงและเส้นขอบที่ปรากฏเป็นสีดำ เส้นขอบหนา 1px และปรากฏในลักษณะทึบ และเส้นขอบเป็นสีแดง หนา 3px และปรากฏในลักษณะจุด นอกจากนี้เรายังกำหนดความกว้างของกล่องของเราเป็น 100px

อย่างที่คุณเห็น เค้าร่างปรากฏนอกเส้นขอบในองค์ประกอบเว็บของเรา

คุณสมบัติย่อยโครงร่าง CSS

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

ความกว้างเค้าร่าง CSS

คุณสมบัติ outline-width ระบุความกว้างของโครงร่างที่ใช้กับองค์ประกอบเว็บ

คุณสมบัติ outline-width ยอมรับค่าความยาวต่อไปนี้:

  • บาง (โดยค่าเริ่มต้น 1px)
  • ปานกลาง (โดยค่าเริ่มต้น 3px)
  • หนา (โดยค่าเริ่มต้น 5px)
  • ขนาดที่ระบุเป็น px, pt, cm, em, rem หรือการวัดความยาว CSS อื่น

สมมติว่าเราต้องการออกแบบกล่องที่มีเส้นขอบทึบสีน้ำเงิน 3px (ปานกลาง) นอกจากนี้เรายังต้องการให้กล่องของเรามีเส้นขอบสีดำทึบกว้าง 1px เราสามารถสร้างกล่องนี้โดยใช้รหัสต่อไปนี้:

<html>

<p class="outlineExample">This is a box.</p>
</html>

<style>

.outlineExample {
	width: 100px;
	border: black solid 1px;
	outline-style: solid;
	outline-color: red;
	outline-width: medium;
}
<style>

CSS Outline ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

ลองแยกตัวอย่างนี้ ในโค้ด CSS ของเรา เราตั้งค่าความกว้างของกล่องเป็น 100px และกำหนดเส้นขอบสีดำทึบกว้าง 1px รอบกล่องของเรา

จากนั้น เราใช้คุณสมบัติย่อยสามรายการเพื่อกำหนดเส้นขอบของเรา

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

คุณสมบัติ outline-width ใช้เพื่อกำหนดความกว้างของโครงร่าง ซึ่งเราตั้งค่าเป็น medium (ซึ่งเป็น 3px โดยค่าเริ่มต้น)

อย่างที่คุณเห็น กล่องของเรามีเส้นขอบสีแดงกว้าง 3px

สีเค้าร่าง CSS

คุณสมบัติ outline-color ช่วยให้คุณสามารถกำหนดสีของเค้าร่างที่กำหนดให้กับองค์ประกอบเว็บเฉพาะได้ พร็อพเพอร์ตี้ยอมรับประเภทสี CSS ใดๆ ต่อไปนี้:

  • ชื่อ:ชื่อสี เช่น blue หรือ pink
  • ฐานสิบหก:สีฐานสิบหก เช่น #f7f7f7
  • rgb:ค่า RGB เช่น rgb(102, 211, 56)
  • กลับด้าน:เป็นการสลับสีของเค้าร่าง
  • hsl:ค่า HSL เช่น hsl(0, 25%, 50%)

สมมติว่าเราต้องการออกแบบเค้าร่างรอบ ๆ กล่องที่ปรากฏรอบ ๆ กล่องของเราเป็นสีน้ำเงิน โครงร่างของเราควรมีความหนา 3px และใช้สไตล์ทึบ เราสามารถสร้างกล่องที่มีโครงร่างนี้โดยใช้รหัสต่อไปนี้:

<html>

<p class="outlineExample">This is a box.</p>
<html>
  
<style>

.outlineExample {
	width: 100px;
	border: black solid 1px;
	outline-style: solid;
	outline-color: blue;
	outline-width: medium;
}
<style>

CSS Outline ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

ในตัวอย่างนี้ เราใช้คุณสมบัติสีเค้าร่างเพื่อกำหนดสีของเค้าร่างเป็นสีน้ำเงิน เรายังใช้คุณสมบัติ outline-style เพื่อกำหนดสไตล์ของ outline ของเราเป็น solid และคุณสมบัติ outline-width เพื่อกำหนดลักษณะของความกว้างของ outline ของเราเป็น 3px (หรือ medium )

ในโค้ดของเรา เราได้สร้างกล่องที่มีความกว้าง 100px และกำหนดเส้นขอบสีดำทึบ 1px รอบกล่องของเรา ซึ่งทำให้มองเห็นโครงร่างของเราได้ง่ายขึ้น

รูปแบบเค้าร่าง CSS

คุณสมบัติเค้าร่างช่วยให้คุณกำหนดรูปแบบของเค้าร่างได้

คุณสมบัตินี้ยอมรับค่าต่อไปนี้:

  • จุด
  • ประชด
  • ร่อง
  • สันเขา
  • แข็ง
  • ดับเบิ้ล
  • สิ่งที่ใส่เข้าไป
  • เริ่มต้น
  • ไม่มี
  • ซ่อนอยู่

ดังนั้น ridge ค่าสร้างโครงร่างสันเขา inset ค่าสร้างโครงร่างสิ่งที่ใส่เข้าไป groove ค่าจะสร้างโครงร่างร่องและอื่น ๆ เพื่อแสดงให้เห็นว่าเค้าร่างเหล่านี้ปรากฏอย่างไร ให้สร้างกล่องที่มีเค้าร่างและปรับใช้ลักษณะเค้าร่างเหล่านี้กับแต่ละกล่อง นี่คือรหัสพื้นฐานสำหรับกล่องของเรา:

<html>

<p class="outlineExample">This is a box.</p>
<html>
  
<style>

.outlineExample {
	width: 300px;
	border: black solid 1px;
	outline-color: blue;
	outline-width: medium;
}
<style>

CSS Outline ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

รหัสนี้สร้างกล่องที่มีโครงร่างสีน้ำเงินกว้าง 3px (โดยใช้ medium ค่าเพื่อระบุความกว้างของโครงร่าง) กล่องมีขอบทึบสีดำกว้าง 1px และกล่องกว้าง 200px

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

<style>
  
.outlineExample {
outline-style: dotted;
}
<style>

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

CSS Outline

CSS Outline Offset

คุณสมบัติ outline-offset เพิ่มช่องว่างระหว่างเค้าร่างและเส้นขอบขององค์ประกอบ

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

สมมติว่าเราต้องการออกแบบกล่องที่มีเส้นขอบสีดำทึบกว้าง 1px และเส้นขอบสีแดงทึบกว้าง 2px โครงร่างควรได้รับการชดเชย 10px นอกขอบเส้นขอบของเรา เราสามารถสร้างกล่องที่มีสไตล์เหล่านี้โดยใช้รหัสต่อไปนี้:

<html>

<p class="outlineExample">This is a box.</p>
<html>
  
<style>

.outlineExample {
	width: 200px;
	border: black solid 1px;
	outline: red 2px solid;
	outline-offset: 10px;
}
<style>

CSS Outline ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

ในตัวอย่างนี้ เรากำหนดกล่องที่มีความกว้าง 200px มีเส้นขอบสีดำทึบกว้าง 1px และเส้นขอบทึบสีแดงกว้าง 2px เค้าร่างสำหรับกล่องของเราถูกชดเชยด้วย 10px ซึ่งหมายความว่ามีช่องว่าง 10px ระหว่างขอบเส้นขอบแต่ละอันและเค้าร่าง

บทสรุป

คุณสมบัติเค้าร่าง CSS ใช้เพื่อกำหนดเค้าร่างรอบขอบขององค์ประกอบเว็บ

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

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