ฉันเคยมีเจ้านายคนนี้ที่ รัก, รัก, รัก, รัก เพื่อเน้นคำ นี่เป็นวิธีย้อนกลับไปก่อนที่เราจะใช้โปรแกรมแก้ไขแบบ WYSIWYG และฉันต้องเขียนโค้ดอึนั้นด้วยลายมือ
<p> I used to have this boss who <em>loved</em>, <strong>loved</strong>, <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> to emphasize words.
</p>
(อย่าไปพูดถึงสีที่เขาใช้เลย โมอา เน้น.)
การเขียนมาร์กอัปทั้งหมดนั้นไม่เคยรู้สึกดีเลย ความพยายามที่เกิดขึ้นแน่นอนว่าอะไรก็ตาม แต่เป็นความคิดที่ดีที่จะเพิ่มเนื้อหาที่โอเวอร์โหลดเป็นสองเท่าหรือมากกว่านั้น! - เน้น?
แท็กที่แตกต่างกันจะสื่อถึงการเน้นที่ต่างกัน
สำหรับผู้เริ่มต้น <strong>
และ <em>
แท็กได้รับการออกแบบสำหรับการใช้งานที่แตกต่างกัน เราได้กลับมาในรูปแบบ HTML5 โดยที่:
ดังนั้น <strong>
ทำให้เนื้อหามีน้ำหนักมากขึ้นในแง่ที่บ่งบอกว่าเนื้อหาในนั้นมีความสำคัญหรือเร่งด่วน คิดถึงคำเตือน:
คำเตือน: เนื้อหาต่อไปนี้ถูกระบุว่ายอดเยี่ยม
อาจดึงดูดให้เข้าถึง <em>
เพื่อทำสิ่งเดียวกัน ข้อความตัวเอียงสามารถดึงดูดความสนใจได้ แต่มีความหมายว่าเป็นการบอกใบ้ให้ใช้การเน้นย้ำมากขึ้นเมื่ออ่านเนื้อหาในนั้น ตัวอย่างเช่น ต่อไปนี้เป็นประโยคเดียวกัน XNUMX เวอร์ชันโดยเน้นที่ตำแหน่งต่างๆ กัน:
<p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>
ทั้งสองตัวอย่างเน้นการเน้นย้ำแต่ใช้คำต่างกัน และมันจะฟังดูแตกต่างออกไปหากคุณอ่านออกเสียง นั่นทำให้ <em>
วิธีที่ดีในการแสดงน้ำเสียงในงานเขียนของคุณ มันเปลี่ยนความหมายของประโยคในลักษณะที่ <strong>
ไม่.
การเน้นภาพกับการเน้นความหมาย
นี่คือสองสิ่งที่คุณต้องชั่งน้ำหนักเมื่อเน้นเนื้อหา เช่น มีหลายกรณีที่คุณอาจต้องทำให้เนื้อหาเป็นตัวเอียงโดยไม่กระทบต่อความหมายของประโยค แต่สามารถจัดการกับแท็กอื่นที่แสดงตัวเอียงได้:
<i>
: นี่คือคลาสสิก! ก่อน HTML5 สิ่งนี้ใช้เพื่อเน้นย้ำด้วยตัวเอียงทั่วทุกแห่ง ปัจจุบัน มีการใช้เฉพาะเพื่อทำให้เนื้อหาเป็นตัวเอียงโดยไม่ต้องเปลี่ยนความหมายเชิงความหมาย<cite>
: ระบุแหล่งที่มาของข้อเท็จจริงหรือตัวเลข ("แหล่งที่มา: CSS-เคล็ดลับ")<address>
: ใช้เพื่อทำเครื่องหมายข้อมูลติดต่อ ไม่เพียงแต่ที่อยู่จริง แต่ยังรวมถึงที่อยู่อีเมลและหมายเลขโทรศัพท์ด้วย (
)
มันจะไปเขาสิ่งเดียวกันกับ <strong>
. แทนที่จะใช้เพื่อจัดรูปแบบข้อความที่คุณต้องการให้ดูหนาขึ้น เป็นความคิดที่ดีกว่าหากใช้แบบคลาสสิก <b>
แท็กสำหรับตัวหนาเพื่อหลีกเลี่ยงการให้ความสำคัญเป็นพิเศษกับเนื้อหาที่ไม่ต้องการ และโปรดจำไว้ว่า องค์ประกอบบางอย่าง เช่น ส่วนหัวจะแสดงเป็นตัวหนาอยู่แล้ว ต้องขอบคุณสไตล์เริ่มต้นของเบราว์เซอร์ ไม่จำเป็นต้องเพิ่มการเน้นที่หนักแน่นยิ่งขึ้นไปอีก
การใช้ตัวเอียงในเนื้อหาที่เน้น (และในทางกลับกัน)
มีหลายกรณีที่คุณอาจต้องเอียงบางส่วนของบรรทัดที่มีการเน้นไว้แล้ว หรืออาจเพิ่มการเน้นข้อความเล็กน้อยที่ตัวเอียงแล้ว
ข้อความอ้างอิงอาจเป็นตัวอย่างที่ดี ฉันเคยเห็นหลายครั้งที่พวกเขาเป็นตัวเอียงสำหรับสไตล์ แม้ว่าสไตล์เบราว์เซอร์เริ่มต้นจะไม่ทำก็ตาม:
blockquote { font-style: italic;
}
จะเกิดอะไรขึ้นหากเราต้องพูดถึงชื่อภาพยนตร์ในข้อความอ้างอิงนั้น ที่ควรเป็นตัวเอียง ไม่จำเป็นต้องเน้นย้ำดังนั้น <i>
แท็กจะทำ แต่ก็ยังแปลกที่จะเอียงบางสิ่งบางอย่างเมื่อมันแสดงผลไปแล้ว:
<blockquote> This movie’s opening weekend performance offers some insight in to its box office momentum as it fights to justify its enormous budget. In its first weekend, <i>Avatar: The Way of Water</i> made $134 million in North America alone and $435 million globally.
</blockquote>
ในสถานการณ์ที่เราใช้ตัวเอียงบางอย่างในเนื้อหาที่เป็นตัวเอียงเช่นนี้ เราควรจะทำ ลบตัวเอียง จากองค์ประกอบที่ซ้อนกัน… <i>
ในกรณีนี้.
blockquote i { font-style: normal;
}
แบบสอบถามสไตล์คอนเทนเนอร์ จะมีประโยชน์อย่างยิ่งในการจับกรณีเหล่านี้ทั้งหมดหากเราได้รับ:
blockquote { container-name: quote; font-style: italic;
} @container quote (font-style: italic) { em, i, cite, address { font-style: normal; }
}
ตัวอย่างเล็ก ๆ น้อย ๆ นี้ประเมิน blockquote เพื่อดูว่าจริงหรือไม่ font-style
ถูกตั้งค่าเป็น italic
. ถ้าเป็นเช่นนั้นก็จะทำให้แน่ใจว่า <em>
, <i>
, <cite>
และ <address>
องค์ประกอบจะแสดงเป็นข้อความปกติ ในขณะที่ยังคงรักษาความหมายเชิงความหมายไว้ หากมี
แต่กลับไปเน้นภายในเน้น
ฉันจะไม่รัง <strong>
ภายใน <em>
อย่างนี้:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
…หรือทำรัง <em>
ภายใน <strong>
แทน:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
เรนเดอร์ก็โอเค! และไม่สำคัญว่าพวกเขาจะอยู่ในลำดับใด… อย่างน้อยก็ในเบราว์เซอร์สมัยใหม่ Jennifer Kyrnin กล่าวถึงสิ่งนั้น เบราว์เซอร์บางตัวแสดงแท็กที่ใกล้กับข้อความมากที่สุดเท่านั้นแต่ฉันไม่ได้เจอสิ่งนั้นในการทดสอบที่จำกัดของฉัน แต่สิ่งที่ต้องระวัง!
เหตุผลที่ฉันจะไม่ซ้อนการเน้นรูปแบบหนึ่งในรูปแบบอื่นก็เพราะว่ามันไม่จำเป็น ไม่มีกฎไวยากรณ์ที่เรียกร้อง เช่นเดียวกับเครื่องหมายอัศเจรีย์ การเน้นรูปแบบเดียวก็เพียงพอแล้ว และคุณควรใช้รูปแบบที่ตรงกับที่คุณต้องการ ไม่ว่าจะเป็นการเน้นด้วยภาพ น้ำหนัก หรือการประกาศ
และแม้ว่าโปรแกรมอ่านหน้าจอบางตัวจะสามารถประกาศเนื้อหาที่เน้นได้ แต่โปรแกรมอ่านหน้าจอจะไม่อ่านมาร์กอัปที่มีความสำคัญหรือเน้นเพิ่มเติมใดๆ ดังนั้นจึงไม่มีสิทธิพิเศษในการเข้าถึงเพิ่มเติมเท่าที่ฉันสามารถบอกได้
แต่ฉันต้องการเน้นทั้งหมด!
หากคุณอยู่ในตำแหน่งที่เจ้านายของคุณชอบและต้องการ ทั้งหมด ความสำคัญฉันจะไปหาแท็ก HTML ที่ถูกต้องสำหรับประเภทการเน้น จากนั้นใช้สไตล์ที่เหลือด้วยแท็กผสมที่ไม่ส่งผลต่อความหมายกับ CSS เพื่อช่วยอธิบายสไตล์เบราว์เซอร์ที่จัดการไม่ได้
<style> /* If `em` contains `b` or `u` tags */ em:has(b, u) { color: #f8a100; }
</style> <p> I used to have this boss who <em>loved</em>, <strong>loved</strong>, <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> to emphasize words.
</p>
ฉันอาจจะทำมันกับ <strong>
แท็กเป็นมาตรการป้องกัน:
/* If `em` contains `b` or `u` tags */
em:has(b, u),
/* If `strong` contains `em` or `u` tags */
strong:has(i, u) { color: #f8a100;
}
ตราบใดที่เราเล่นเกมรับ เราสามารถระบุข้อผิดพลาดที่การเน้นเสียงซ้อนอยู่ภายในการเน้นเสียงได้โดยการเน้นด้วยสีแดงหรือบางอย่าง:
/* Highlight semantic emphases within semantic emphases */
em:has(strong),
strong:has(em) { background: hsl(0deg 50% 50% / .25); border: 1px dashed hsl(0deg 50% 50% / .25);
}
จากนั้นฉันอาจใช้ตัวอย่างข้อมูลนั้นจากส่วนสุดท้ายที่ลบสไตล์ตัวเอียงเริ่มต้นออกจากองค์ประกอบเมื่อซ้อนอยู่ในองค์ประกอบตัวเอียงอื่น
อะไรอีก?
เมย์:
- เนื้อหาที่ขับเคลื่อนด้วย SEO และการเผยแพร่ประชาสัมพันธ์ รับการขยายวันนี้
- เพลโตบล็อคเชน Web3 Metaverse ข่าวกรอง ขยายความรู้. เข้าถึงได้ที่นี่.
- ที่มา: https://css-tricks.com/the-double-emphasis-thing/
- 1
- 11
- 7
- 9
- 98
- a
- การเข้าถึง
- ลงชื่อเข้าใช้
- เพิ่มเติม
- ที่อยู่
- ที่อยู่
- มีผลต่อ
- น่าสงสาร
- หลังจาก
- ทั้งหมด
- คนเดียว
- แล้ว
- สหรัฐอเมริกา
- และ
- ประกาศ
- ประกาศ
- อื่น
- ทุกแห่ง
- ใช้
- Avatar
- กลับ
- พื้นหลัง
- เพราะ
- ก่อน
- กำลัง
- ดีกว่า
- บิต
- กล้า
- ชายแดน
- BOSS
- กล่อง
- บ็อกซ์ออฟฟิศ
- เบราว์เซอร์
- เบราว์เซอร์
- งบ
- โทร
- สามารถ
- กรณี
- กรณี
- การเปลี่ยนแปลง
- เปลี่ยนแปลง
- คลาสสิก
- สี
- ติดต่อเรา
- มี
- เนื้อหา
- CSS
- ค่าเริ่มต้น
- ป้องกัน
- การป้องกัน
- ได้รับการออกแบบ
- ต่าง
- ไม่
- Dont
- สอง
- ความพยายาม
- ทั้ง
- องค์ประกอบ
- อีเมล
- ความสำคัญ
- เน้น
- เน้น
- มหาศาล
- พอ
- ทั้งหมด
- ข้อผิดพลาด
- แม้
- ตัวอย่าง
- ตัวอย่าง
- ด่วน
- พิเศษ
- การต่อสู้
- รูป
- ชื่อจริง
- ถูกตั้งค่าสถานะ
- ดังต่อไปนี้
- ฟอร์ม
- ราคาเริ่มต้นที่
- ได้รับ
- จะช่วยให้
- ให้
- ทั่วโลก
- Go
- ไป
- ดี
- ยิ่งใหญ่
- จัดการ
- ช่วย
- โปรดคลิกที่นี่เพื่ออ่านรายละเอียดเพิ่มเติม
- เน้น
- ไฮไลต์
- HTML
- HTTPS
- ความคิด
- แยกแยะ
- ความสำคัญ
- สำคัญ
- in
- ข้อมูล
- ความเข้าใจ
- แทน
- IT
- เจนนิเฟอร์
- ชื่อสกุล
- ถูก จำกัด
- Line
- น้อย
- วันหยุด
- นาน
- ดู
- ทำ
- ทำ
- ทำให้
- เครื่องหมาย
- เรื่อง
- ความหมาย
- วัด
- กล่าวถึง
- อาจ
- ล้าน
- ทันสมัย
- โมเมนตัม
- ข้อมูลเพิ่มเติม
- หนัง
- Movies
- NAB
- จำเป็นต้อง
- รัง
- ปกติ
- ทางทิศเหนือ
- อเมริกาเหนือ
- ตัวเลข
- เสนอ
- Office
- ONE
- การเปิด
- ใบสั่ง
- อื่นๆ
- ส่วนหนึ่ง
- การปฏิบัติ
- perks
- โทรศัพท์
- กายภาพ
- สถานที่
- เพลโต
- เพลโตดาต้าอินเทลลิเจนซ์
- เพลโตดาต้า
- เล่น
- ความอุดมสมบูรณ์
- จุด
- ตำแหน่ง
- อาจ
- การป้องกัน
- หมดจด
- มาถึง
- อ่าน
- ผู้อ่าน
- เหตุผล
- สีแดง
- จำ
- การแสดงผล
- REST
- การรักษา
- กฎ
- เดียวกัน
- จอภาพ
- โปรแกรมอ่านหน้าจอ
- Section
- อรรถศาสตร์
- ความรู้สึก
- ประโยค
- ชุด
- น่า
- ง่ายดาย
- สถานการณ์
- So
- บาง
- บางสิ่งบางอย่าง
- เสียง
- แหล่ง
- ยังคง
- ความเครียด
- แข็งแรง
- สไตล์
- ชี้ให้เห็นถึง
- ยิ่งใหญ่
- ควร
- TAG
- การทดสอบ
- พื้นที่
- ที่มา
- สิ่ง
- สิ่ง
- ครั้ง
- ชื่อหนังสือ
- ไปยัง
- TONE
- เกินไป
- จริง
- ด่วน
- ใช้
- คำเตือน
- นาฬิกา
- สุดสัปดาห์
- ชั่งน้ำหนัก
- น้ำหนัก
- อะไร
- ว่า
- ในขณะที่
- WHO
- จะ
- ภายใน
- ไม่มี
- คำ
- จะ
- การเขียน
- คุณ
- ของคุณ
- ลมทะเล