ด้วย CSS คุณสามารถกำหนดสีของข้อความในเอกสารได้โดยง่าย หากคุณต้องการให้ย่อหน้าบนหน้าเว็บของคุณแสดงผลในสีที่กำหนดคุณเพียงแค่ระบุว่าในสไตล์ชีตภายนอกของคุณและเบราว์เซอร์จะแสดงข้อความของคุณด้วยสีที่เลือก จะเกิดอะไรขึ้นเมื่อคุณต้องการเปลี่ยนสีของคำเพียงคำเดียว (หรืออาจแค่ไม่กี่คำ) ภายในย่อหน้า? คุณจะต้องใช้องค์ประกอบแบบอินไลน์เช่นแท็ก
ในท้ายที่สุดการเปลี่ยนสีของคำคำเดียวหรือกลุ่มเล็ก ๆ ของคำภายในประโยคเป็นเรื่องง่ายโดยใช้ CSS และแท็กเป็น HTML ที่ถูกต้องดังนั้นคุณจึงไม่ต้องกังวลกับการถูกแฮ็กนี้ ด้วยวิธีนี้คุณจะหลีกเลี่ยงการใช้แท็กและแอตทริบิวต์ที่เลิกใช้เช่น "แบบอักษร" ซึ่งเป็นผลิตภัณฑ์ของยุค HTML ที่ล่วงไปแล้ว
บทความนี้มีไว้สำหรับนักพัฒนาเว็บที่มีแนวโน้มจะเป็น HTML และ CSS แล้ว จะช่วยให้คุณเรียนรู้วิธีใช้แท็ก HTML และ CSS เพื่อเปลี่ยนสีของข้อความเฉพาะบนหน้าเว็บของคุณ ที่ถูกกล่าวว่ามีข้อบกพร่องบางประการสำหรับวิธีการนี้ซึ่งเราจะกล่าวถึงในตอนท้ายของบทความนี้ ตอนนี้อ่านต่อเพื่อเรียนรู้ขั้นตอนในการเปลี่ยนสีข้อความนี้ เป็นเรื่องง่ายมากและควรใช้เวลาประมาณสองนาที
คำแนะนำทีละขั้นตอน
- เปิดเว็บเพจที่คุณต้องการอัปเดตในโปรแกรมแก้ไข HTML ข้อความโปรด นี่อาจเป็นโปรแกรมเช่น Adobe Dreamweaver หรือโปรแกรมแก้ไขข้อความแบบง่ายๆเช่น Notepad, Notepad ++, TextEdit ฯลฯ
- ในเอกสารให้ค้นหาคำที่คุณต้องการให้แสดงเป็นสีอื่นในหน้า เพื่อประโยชน์ของบทแนะนำนี้ให้ใช้คำศัพท์บางคำที่อยู่ในข้อความขนาดใหญ่ ข้อความดังกล่าวจะอยู่ภายในคู่แท็ก ค้นหาหนึ่งในสองคำที่มีสีที่คุณต้องการแก้ไข
- วางเคอร์เซอร์ไว้หน้าตัวอักษรตัวแรกในคำหรือกลุ่มของคำที่คุณต้องการเปลี่ยนสี โปรดจำไว้ว่าถ้าคุณใช้โปรแกรมแก้ไขแบบ WYSIWYG เช่น Dreamweaver คุณกำลังทำงานใน "มุมมองโค้ด" ในขณะนี้
- ให้ตัดข้อความที่มีสีที่เราต้องการเปลี่ยนด้วยแท็กรวมถึงแอตทริบิวต์ class ย่อหน้าทั้งหมดอาจมีลักษณะดังนี้:
นี่คือข้อความที่เน้นในประโยค
- เราเพิ่งใช้องค์ประกอบแบบอินไลน์เพื่อให้ข้อความดังกล่าวเป็น "เบ็ด" ที่เราสามารถใช้ใน CSS ได้ ขั้นตอนต่อไปคือการข้ามไปยังไฟล์ CSS ภายนอกเพื่อเพิ่มกฎใหม่
- ในไฟล์ CSS ของเราขอเพิ่ม:
-
.focus-text {
-
สี: # F00;
-
}
- กฎนี้จะกำหนดว่าองค์ประกอบแบบอินไลน์เพื่อแสดงเป็นสีแดง ถ้าเรามีสไตล์ก่อนหน้าที่กำหนดข้อความในเอกสารของเราเป็นสีดำสไตล์แบบอินไลน์นี้จะทำให้ข้อความในช่วงเน้นและโดดเด่นด้วยสีที่ต่างกัน นอกจากนี้เรายังสามารถเพิ่มรูปแบบอื่น ๆ ในกฎนี้ซึ่งอาจทำให้ตัวเอียงตัวหนาหรือตัวหนาเพื่อเน้นย้ำถึงเรื่องนี้มากยิ่งขึ้น
- บันทึกหน้าเว็บของคุณ
- ทดสอบหน้าเว็บในเว็บเบราเซอร์ที่คุณชื่นชอบเพื่อดูการเปลี่ยนแปลงผล
- โปรดทราบว่านอกจากผู้เชี่ยวชาญเว็บบางรายเลือกใช้องค์ประกอบอื่น ๆ เช่นคู่แท็กหรือ แท็กเหล่านี้เคยเป็นตัวหนาและตัวเอียงโดยเฉพาะ แต่ถูกเลิกใช้และแทนที่ด้วยและ แท็กยังทำงานได้ดีในเบราว์เซอร์ที่ทันสมัย แต่นักพัฒนาเว็บจำนวนมากจึงใช้เป็นตะขอแบบใส่ข้อความอินไลน์ นี่ไม่ใช่วิธีที่แย่ที่สุด แต่ถ้าคุณต้องการหลีกเลี่ยงองค์ประกอบที่เลิกใช้เราขอแนะนำให้ติดแท็กสำหรับความต้องการในการจัดรูปแบบประเภทนี้
เคล็ดลับและสิ่งที่ควรระวัง
แม้ว่าวิธีนี้จะใช้ได้ดีกับความต้องการในการจัดรูปแบบเล็ก ๆ เช่นหากคุณต้องการเปลี่ยนเพียงแค่ข้อความขนาดเล็กในเอกสารก็จะสามารถออกจากการควบคุมได้อย่างรวดเร็ว หากคุณพบว่าหน้าเว็บของคุณเต็มไปด้วยองค์ประกอบแบบอินไลน์ซึ่งทั้งหมดมีชั้นเรียนที่ไม่ซ้ำกันที่คุณใช้อยู่ในไฟล์ CSS ของคุณคุณอาจทำผิดพลาดโปรดจำไว้ว่ายิ่งแท็กเหล่านี้อยู่ในหน้าเว็บมากเท่าไหร่ก็ยิ่งยากขึ้นเท่านั้น มีแนวโน้มที่จะรักษาหน้าเว็บดังกล่าวไว้ข้างหน้า นอกจากนี้การพิมพ์เว็บที่ดีมักไม่ค่อยมีหลากสีและอื่น ๆ ตลอดทั้งหน้า
