พอดแคสต์ 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;
}
ตรวจสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับองค์ประกอบเทียม
ข้อใดต่อไปนี้ไม่ใช่องค์ประกอบจำลอง
::marker
::before
::first-paragraph
:active
::after
::pencil
พบองค์ประกอบ Pseudo ในไฟล์ HTML