วิธีการเปลี่ยนสีของ Word ด้วยแท็ก Span และ CSS

ด้วย CSS คุณสามารถกำหนดสีของข้อความในเอกสารได้โดยง่าย หากคุณต้องการให้ย่อหน้าบนหน้าเว็บของคุณแสดงผลในสีที่กำหนดคุณเพียงแค่ระบุว่าในสไตล์ชีตภายนอกของคุณและเบราว์เซอร์จะแสดงข้อความของคุณด้วยสีที่เลือก จะเกิดอะไรขึ้นเมื่อคุณต้องการเปลี่ยนสีของคำเพียงคำเดียว (หรืออาจแค่ไม่กี่คำ) ภายในย่อหน้า? คุณจะต้องใช้องค์ประกอบแบบอินไลน์เช่นแท็ก

ในท้ายที่สุดการเปลี่ยนสีของคำคำเดียวหรือกลุ่มเล็ก ๆ ของคำภายในประโยคเป็นเรื่องง่ายโดยใช้ CSS และ แท็ก เป็น HTML ที่ถูกต้องดังนั้นคุณจึงไม่ต้องกังวลกับการถูกแฮ็กนี้ ด้วยวิธีนี้คุณจะหลีกเลี่ยงการใช้แท็กและแอตทริบิวต์ที่เลิกใช้เช่น "แบบอักษร" ซึ่งเป็นผลิตภัณฑ์ของยุค HTML ที่ล่วงไปแล้ว

บทความนี้มีไว้สำหรับนักพัฒนาเว็บที่มีแนวโน้มจะเป็น HTML และ CSS แล้ว จะช่วยให้คุณเรียนรู้วิธีใช้แท็ก HTML และ CSS เพื่อเปลี่ยนสีของข้อความเฉพาะบนหน้าเว็บของคุณ ที่ถูกกล่าวว่ามีข้อบกพร่องบางวิธีนี้ซึ่งจะครอบคลุมในตอนท้ายของบทความนี้ ตอนนี้อ่านต่อเพื่อเรียนรู้ขั้นตอนในการเปลี่ยนสีข้อความนี้! เป็นเรื่องง่ายมากและควรใช้เวลาประมาณ 2 นาที

คำแนะนำทีละขั้นตอน

1. เปิดเว็บเพจที่คุณต้องการอัปเดตในโปรแกรมแก้ไข HTML ข้อความโปรด นี่อาจเป็นโปรแกรมเช่น Adobe Dreamweaver หรือโปรแกรมแก้ไขข้อความเพียงอย่างเช่น Notepad, Notepad ++, TextEdit ฯลฯ
2. ในเอกสารให้ค้นหาคำที่คุณต้องการให้แสดงเป็นสีอื่นในหน้า เพื่อประโยชน์ของบทแนะนำนี้ให้ใช้คำบางคำที่อยู่ในข้อความขนาดใหญ่ ข้อความดังกล่าวจะอยู่ภายในคู่ thetag ค้นหาหนึ่งในสองคำที่มีสีที่คุณต้องการแก้ไข
3. วางเคอร์เซอร์ไว้หน้าตัวอักษรตัวแรกในคำหรือกลุ่มของคำที่คุณต้องการเปลี่ยนสี โปรดจำไว้ว่าถ้าคุณใช้ โปรแกรม แก้ไข แบบ WYSIWYG เช่น Dreamweaver ตอนนี้คุณกำลังทำงานในมุมมองโค้ด "rigth"
4. ให้ตัดข้อความที่มีสีที่เราต้องการเปลี่ยนด้วยแท็กรวมถึงแอตทริบิวต์ class วรรคทั้งหมดอาจมีลักษณะดังนี้: นี่คือข้อความที่เน้นในประโยค
5. เราเพิ่งใช้องค์ประกอบแบบอินไลน์เพื่อให้ข้อความดังกล่าวเป็น "เบ็ด" ที่เราสามารถใช้ใน CSS ได้ ขั้นตอนต่อไปคือการข้ามไปยังไฟล์ CSS ภายนอกเพื่อเพิ่มกฎใหม่

1. ในไฟล์ CSS ของเราขอเพิ่ม:
   1. .focus-text {
   2. สี: # F00;
   3. }
2. กฎนี้จะกำหนดว่าองค์ประกอบแบบอินไลน์เพื่อแสดงเป็นสีแดง ถ้าเรามีสไตล์ก่อนหน้าที่กำหนดข้อความในเอกสารของเราเป็นสีดำสไตล์แบบอินไลน์นี้จะทำให้ข้อความในช่วงเน้นและโดดเด่นด้วยสีที่ต่างกัน นอกจากนี้เรายังสามารถเพิ่มรูปแบบอื่น ๆ ในกฎนี้ซึ่งอาจทำให้ตัวเอียงตัวหนาหรือตัวหนาเพื่อเน้นย้ำถึงเรื่องนี้มากยิ่งขึ้น
3. บันทึกหน้าเว็บของคุณ
4. ทดสอบหน้าเว็บ ในเว็บเบราเซอร์ที่คุณชื่นชอบเพื่อดูการเปลี่ยนแปลงผล
5. โปรดทราบว่านอกจากผู้เชี่ยวชาญเว็บบางรายเลือกใช้องค์ประกอบอื่น ๆ เช่นคู่แท็กหรือ แท็กเหล่านี้เคยเป็น "ตัวหนา" และ "ตัวเอียง" โดยเฉพาะ แต่ถูกเลิกใช้และแทนที่ด้วยและ แท็กยังทำงานได้ดีในเบราว์เซอร์ที่ทันสมัย ​​แต่นักพัฒนาเว็บจำนวนมากจึงใช้เป็นตะขอแบบใส่ข้อความอินไลน์ นี่ไม่ใช่วิธีที่แย่ที่สุด แต่ถ้าคุณต้องการหลีกเลี่ยงองค์ประกอบที่เลิกใช้ไปผมขอแนะนำให้คุณติดแท็กสำหรับความต้องการในการจัดแต่งทรงผมประเภทนี้

เคล็ดลับและสิ่งที่ควรระวัง

แม้ว่าวิธีนี้จะใช้ได้ดีกับความต้องการในการจัดรูปแบบขนาดเล็กเช่นถ้าคุณต้องการเปลี่ยนข้อความเพียงชิ้นเดียวในเอกสาร แต่ก็สามารถออกจากการควบคุมได้อย่างรวดเร็ว หากคุณพบว่าหน้าเว็บของคุณเต็มไปด้วยองค์ประกอบแบบอินไลน์ซึ่งทั้งหมดมีชั้นเรียนที่ไม่ซ้ำกันที่คุณใช้อยู่ในไฟล์ CSS ของคุณคุณอาจทำผิดพลาดโปรดจำไว้ว่ายิ่งแท็กเหล่านี้อยู่ในหน้าเว็บมากเท่าไหร่ก็ยิ่งยากขึ้นเท่านั้น มีแนวโน้มที่จะรักษาหน้าเว็บดังกล่าวไว้ข้างหน้า นอกจากนี้การ พิมพ์เว็บที่ดี มักไม่ค่อยมีหลากสีและอื่น ๆ ตลอดทั้งหน้า!