home

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

CSS Type Selector (ตัวเลือกประเภท)

CSS Type selector (เรียกอีกอย่างว่า element type selector) ใช้ target HTML elements โดย type ของพวกเขา Type อาจเป็น built-in HTML elements ใดๆ เช่น <h2>, <p>, <button>

Type selector syntax

เราใช้ syntax ต่อไปนี้เพื่อ style elements ผ่าน type selector:

element-name { property-name: value; }

ตัวอย่าง ให้ style button element ผ่าน type selector:

<button>Click me!</button>

CSS:

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

Result:

เมื่อใช้ type selector คุณ style elements บนเว็บไซต์ broadly (กว้าง)

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

Base styles (สไตล์พื้นฐาน)

อาจเป็น idea ที่ดีที่จะ set broad base styling บน HTML elements โดยตรง อย่างไรก็ตาม base styling ควร unspecific ที่สุด ควรทำหน้าที่ enforce visual consistency ที่ meaningful ทั่ว UI — และหลีกเลี่ยง code repetition ที่ไม่จำเป็น

พื้นที่ที่มักต้องการ consistency:

  • Fonts (เรียกว่ typefaces)
  • Font size
  • Line height
  • Colors
  • Spacing (whitespace)

ตัวอย่าง มักดีที่จะ consistent กับ font families ใน UI คุณไม่อยากใช้ 5 fonts ต่างกัน ทำให้ UI ดู weird และ inconsistent คุณอยากมี 1 ถึงสูงสุด 3 font families บนเว็บส่วนใหญ่

สมมติคุณอยากใช้ 2 fonts บนเว็บ:

  1. Serif สำหรับ paragraphs และ lists
  2. Sans Serif สำหรับทุกอย่างอื่น

ในกรณีนี้ ใช้ broad type selector apply font families นั้นสมเหตุสมผล:

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

ด้วย CSS ข้างต้น ทุก HTML element จะใช้ Roboto font ยกเว้น paragraphs และ lists จะใช้ Merriweather

เมื่อไหร่ไม่ควรใช้ type selector?

โดยทั่วไปเป็น bad practice ที่จะ "over style" element ใดๆ ด้วย broad stroke เพราะส่งผลต่อทุก representation ของ element นั้นบน page

ตัวอย่าง อย่าทำใน 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;
}

ข้างต้นจะ apply ชุด styles ให้ ทุก button element บนเว็บไซต์ โอกาสสูงที่คุณมี multiple buttons ที่มี roles ต่างกันบนเว็บ แม้คุณจะอยาก base UI design consistent (โดยเฉพาะ typography) คุณอาจไม่อยากให้พวกเขา look หรือ behave เหมือนกันทุกประการ โดยเฉพาะ margin values อันตรายที่จะ apply broadly ให้ element type ใดๆ

แน่นอน คุณสามารถ override base styling บน element ใดๆ ได้ด้วย class selector อย่างไรก็ตาม วัตถุประสงค์ของ classes ไม่ใช่การใช้เวลามาก override base styles ที่สืบทอดมาจาก element selector

วัตถุประสงค์ของการใช้ classes บน elements คือ:

  • To extend base styles บน elements ใน specific situations ที่เรียกร้อง ตัวอย่าง คุณอาจอยากให้ call to action button บน hero sections ใหญ่กว่าที่อื่นๆ
  • Reusability Classes สามารถ reuse ได้ไม่จำกัด ทำให้ flexible และ efficient ตัวอย่างดีคือ Tailwind CSS framework ที่ based on single-purpose utility classes เรียกว่ functional CSS

สรุป:

  • ใช้ type selector เพื่อสร้าง baseline ของ general styles ที่ enforce visual identity ของแบรนด์ผ่าน consistency
  • ใช้ classes (และบางครั้ง ids) เพื่อ build on top ของ base styles เพื่อ style elements ตาม role ของพวกเขาใน specific environment