องค์ประกอบจำลอง

พอดแคสต์ CSS - 014: องค์ประกอบจำลอง

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

ใน CSS คุณใช้องค์ประกอบเทียม ::first-letter เพื่อสร้างรายละเอียดการออกแบบนี้ได้

p::first-letter {
  color: blue;
  float: left;
  font-size: 2.6em;
  font-weight: bold;
  line-height: 1;
  margin-inline-end: 0.2rem;
}

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

::before และ ::after

ทั้ง ::before และ ::after องค์ประกอบเทียมจะสร้างองค์ประกอบย่อยภายในองค์ประกอบ เฉพาะเมื่อคุณกำหนดพร็อพเพอร์ตี้ content

.my-element::before {
    content: "";
}

.my-element::after {
    content: "";
}

content เป็นสตริงใดก็ได้ —แม้ว่าจะว่างเปล่าก็ตาม แต่โปรดทราบว่าโปรแกรมอ่านหน้าจออาจอ่านออกเสียงข้อความอื่นๆ ที่ไม่ใช่สตริงว่างเปล่า คุณเพิ่มรูปภาพ url ได้ ซึ่งจะแทรกรูปภาพในขนาดดั้งเดิม คุณจึงไม่สามารถปรับขนาดได้ นอกจากนี้คุณยังแทรก counter

เมื่อสร้างองค์ประกอบ ::before หรือ ::after แล้ว คุณจะจัดรูปแบบสไตล์ได้ อย่างไร้ขีดจำกัด คุณจะแทรกได้เฉพาะองค์ประกอบ ::before หรือ ::after ลงในองค์ประกอบที่จะยอมรับองค์ประกอบย่อยเท่านั้น (องค์ประกอบที่มีแผนผังเอกสาร) ดังนั้นองค์ประกอบอย่างเช่น <img />, <video> และ <input> จะไม่ทำงาน

::first-letter

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

• color
• พร็อพเพอร์ตี้ background (เช่น background-image)
• พร็อพเพอร์ตี้ border (เช่น border-color)
• float
• พร็อพเพอร์ตี้ font (เช่น font-size และ font-weight)
• พร็อพเพอร์ตี้ข้อความ (เช่น text-decoration และ word-spacing)

p::first-letter {
  color: goldenrod;
  font-weight: bold;
}

::first-line

::first-line Pseudo-element จะให้คุณจัดรูปแบบบรรทัดแรกของข้อความ เฉพาะเมื่อองค์ประกอบที่ใช้ ::first-line มีค่า display เป็น block inline-block, list-item, table-caption หรือ table-cell

p::first-line {
  color: goldenrod;
  font-weight: bold;
}

เช่นเดียวกับองค์ประกอบเทียม ::first-letter มีเพียงชุดย่อยของพร็อพเพอร์ตี้ CSS ที่คุณใช้ได้ ดังนี้

• color
• ที่พัก background แห่ง
• ที่พัก font แห่ง
• ที่พัก text แห่ง

::backdrop

หากคุณมีองค์ประกอบที่แสดงในโหมดเต็มหน้าจอ เช่น <dialog> หรือ <video> คุณสามารถจัดรูปแบบฉากหลัง—ช่องว่างระหว่างองค์ประกอบและส่วนอื่นๆ ของหน้าเว็บด้วย องค์ประกอบเทียม ::backdrop:

video::backdrop {
  background-color: goldenrod;
}

::marker

::marker องค์ประกอบเทียมให้คุณจัดรูปแบบสัญลักษณ์หรือตัวเลขสำหรับรายการหรือลูกศรขององค์ประกอบ <summary>

::marker {
  color: hotpink;
}

ul ::marker {
  font-size: 1.5em;
}

ol ::marker {
  font-size: 1.1em;
}

summary::marker {
  content: '\002B'' '; /* Plus symbol with space */
}

details[open] summary::marker {
  content: '\2212'' '; /* Minus symbol with space */
}

::marker รองรับพร็อพเพอร์ตี้ CSS จำนวนไม่มาก ได้แก่

• color
• content
• white-space
• ที่พัก font แห่ง
• พร็อพเพอร์ตี้ animation และ transition

คุณสามารถเปลี่ยนสัญลักษณ์ของเครื่องหมายได้โดยใช้พร็อพเพอร์ตี้ content คุณใช้ตัวเลือกนี้เพื่อตั้งค่าเครื่องหมายบวกและลบสำหรับสถานะปิดและว่างเปล่าขององค์ประกอบ <summary> ได้ เป็นต้น

::selection

::selection องค์ประกอบเทียมช่วยให้คุณจัดรูปแบบข้อความที่เลือกได้

::selection {
  background: green;
  color: white;
}

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

p:nth-of-type(2)::selection {
  background: darkblue;
  color: yellow;
}

ระบบจะอนุญาตเฉพาะพร็อพเพอร์ตี้ CSS บางส่วนเท่านั้นเช่นเดียวกับองค์ประกอบเทียมอื่นๆ

• color
• background-color แต่ไม่ใช่ background-image
• ที่พัก text แห่ง

::placeholder

คุณสามารถเพิ่มคำแนะนำตัวช่วย ลงในองค์ประกอบแบบฟอร์ม เช่น <input> ที่มีแอตทริบิวต์ placeholder ::placeholder Pseudo-element ช่วยให้คุณจัดรูปแบบข้อความดังกล่าวได้

input::placeholder {
  color: darkcyan;
}

::placeholder รองรับเฉพาะกฎ CSS ชุดย่อยต่อไปนี้

• color
• ที่พัก background แห่ง
• ที่พัก font แห่ง
• ที่พัก text แห่ง

::cue

สุดท้ายในทัวร์ชมองค์ประกอบจำลองนี้คือ ::cue องค์ประกอบเทียม วิธีนี้จะช่วยให้คุณจัดรูปแบบคิว WebVTT ซึ่งเป็นคำอธิบายภาพขององค์ประกอบ <video>

คุณยังส่งตัวเลือกไปยัง ::cue ได้ด้วย ซึ่งช่วยให้คุณจัดรูปแบบองค์ประกอบที่ต้องการภายในคำบรรยายได้

video::cue {
  color: yellow;
}

video::cue(b) {
  color: red;
}

video::cue(i) {
  color: lightpink;
}

ตรวจสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับองค์ประกอบเทียม