ตัวเลือกประเภท CSS

CSS ตัวเลือกประเภท (เรียกอีกอย่างว่า ตัวเลือกประเภทองค์ประกอบ ) ใช้เพื่อกำหนดเป้าหมายองค์ประกอบ HTML ตามประเภท ประเภทอาจเป็นองค์ประกอบ HTML ในตัว เช่น <h2> , <p> , <button> .

ไวยากรณ์ตัวเลือกประเภท

เราใช้ไวยากรณ์ต่อไปนี้เพื่อจัดรูปแบบองค์ประกอบผ่านตัวเลือกประเภท

element-name {
    property-name: value;
}

ตัวอย่างเช่น ลองจัดรูปแบบองค์ประกอบปุ่มนี้โดยใช้ตัวเลือกประเภท:

<button>Click me!</button>

CSS:

button {
    font-size: 32px;
    padding: 1rem;
    color: red;
}

ผลลัพธ์:

เมื่อคุณใช้ตัวเลือกประเภท คุณจะจัดรูปแบบองค์ประกอบบนเว็บไซต์ของคุณในวงกว้าง

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

รูปแบบพื้นฐาน

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

ประเด็นที่คุณมักจะต้องการให้สอดคล้อง:

• แบบอักษร (เรียกอีกอย่างว่าแบบอักษร)
• ขนาดตัวอักษร
• ความสูงของเส้น
• สี
• การเว้นวรรค (ช่องว่าง)

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

สมมติว่าคุณต้องการใช้แบบอักษรสองประเภทบนเว็บไซต์ของคุณ:

1. Serif สำหรับย่อหน้าและรายการของคุณ
2. Sans Serif สำหรับอย่างอื่น

ในกรณีนี้ ควรใช้ตัวเลือกประเภทแบบกว้างเพื่อใช้ตระกูลแบบอักษรเหล่านั้น:

/* Roboto is a sans serif*/
html, body {
  font-family: roboto;  
}

/* Merriweather is a serif*/
p, li {
  font-family: merriweather;
}

ด้วย CSS ข้างต้น องค์ประกอบ HTML ทุกรายการจะใช้ฟอนต์ Roboto ยกเว้นย่อหน้าและรายการที่จะใช้ Merriweather

เมื่อใดที่จะไม่ใช้ตัวเลือกประเภท

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

ตัวอย่างเช่น อย่าทำเช่นนี้ใน CSS ของคุณ:

button {
  font-size: 1.125rem;
  padding: 1.5rem;
  margin-top: 1rem;
  border-radius: 8px;
  border: 1px solid #444444;
  color: green; 
  background-color: black; 
  transition: all 1s ease-in;
}

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

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

จุดประสงค์ของการใช้คลาสกับองค์ประกอบคือ:

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

โดยสรุป:

• ใช้ตัวเลือกประเภทเพื่อสร้างพื้นฐานของสไตล์ทั่วไปที่บังคับใช้เอกลักษณ์ทางภาพของแบรนด์ของคุณผ่านความสม่ำเสมอ
• ใช้คลาส (และบางครั้ง ID) เพื่อสร้างจากสไตล์พื้นฐาน เพื่อจัดสไตล์องค์ประกอบตามบทบาทในสภาพแวดล้อมเฉพาะที่พวกเขาอยู่