วิธีเปลี่ยนสีแบบอักษร HTML

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

อย่างไรก็ตาม เป็นความคิดที่ดีที่จะเปลี่ยนสีฟอนต์ HTML บนเว็บไซต์ของคุณด้วยเหตุผลหลายประการ การเปลี่ยนสีแบบอักษร HTML อาจดูน่ากลัว แต่ก็ค่อนข้างง่าย มีหลายวิธีในการเปลี่ยนสีแบบอักษรบนเว็บไซต์ของคุณ

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

ทำไมต้องเปลี่ยนสีแบบอักษร HTML

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

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

มาดูวิธีการกำหนดและเปลี่ยนสีฟอนต์ HTML กันดีกว่า

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

วิธีกำหนดสี

มีหลายวิธีในการกำหนดสีในการออกแบบเว็บ รวมถึงชื่อ ค่า RGB รหัสฐานสิบหก และค่า HSL เรามาดูกันว่าพวกเขาทำงานอย่างไร

ชื่อสี

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

อย่างไรก็ตาม ข้อเสียของแนวทางนี้คือไม่รองรับชื่อสีทั้งหมด กล่าวคือ ถ้าคุณใช้สีที่ไม่อยู่ในรายการสีที่รองรับ คุณจะไม่สามารถใช้สีดังกล่าวในการออกแบบของคุณตามชื่อสีได้

ค่า RGB และ RGBA

ถัดไป เรามีค่า RGB และ RGBA RGB ย่อมาจาก Red, Green และ Blue มันกำหนดสีโดยผสมค่าสีแดง สีเขียว และสีน้ำเงิน คล้ายกับวิธีผสมสีบนจานสีจริง

ค่า RGB จะมีลักษณะดังนี้: RGB(153,0,255) ตัวเลขแรกระบุอินพุตสีแดง ตัวเลขที่สองระบุอินพุตสีเขียว และหมายเลขที่สามระบุสีน้ำเงิน

ค่าของการป้อนสีแต่ละสีสามารถอยู่ในช่วงระหว่าง 0 ถึง 255 โดยที่ 0 หมายถึงไม่มีสีเลย และ 255 หมายความว่าสีเฉพาะอยู่ที่ระดับความเข้มสูงสุด

ค่า RGBA จะเพิ่มอีกหนึ่งค่าให้กับชุดผสม และนั่นคือค่าอัลฟ่าที่แสดงถึงความทึบ มีตั้งแต่ 0 (ไม่โปร่งใส) ถึง 1 (โปร่งใสทั้งหมด)

ค่า HEX

รหัสสีฐานสิบหกทำงานเหมือนกับรหัส RGB ประกอบด้วยตัวเลขตั้งแต่ 0 ถึง 9 และตัวอักษรจาก A ถึง F รหัสฐานสิบหกมีลักษณะดังนี้: #800080 ตัวอักษรสองตัวแรกระบุความเข้มของสีแดง ตัวเลขสองตัวตรงกลางระบุความเข้มของสีเขียว และสองตัวสุดท้ายกำหนดความเข้มของสีน้ำเงิน

ค่า HSL และ HSLA

อีกวิธีในการกำหนดสีใน HTML คือการใช้ค่า HSL HSL ย่อมาจาก hue, saturation และ lightness

Hue ใช้องศาตั้งแต่ 0 ถึง 360 ในวงล้อสีมาตรฐาน สีแดงอยู่ที่ประมาณ 0/360 สีเขียวอยู่ที่ 120 และสีน้ำเงินอยู่ที่ 240

ความอิ่มตัวของสีใช้เปอร์เซ็นต์เพื่อกำหนดความอิ่มตัวของสี 0 หมายถึงสีดำและสีขาว และ 100 หมายถึงสีทั้งหมด

สุดท้าย ความเบาใช้เปอร์เซ็นต์คล้ายกับความอิ่มตัว ในกรณีนี้ 0% หมายถึงสีดำ และ 100% หมายถึงสีขาว

ตัวอย่างเช่น สีม่วงที่เราใช้ตลอดทั้งบทความนี้จะมีลักษณะดังนี้ใน HSL: hsl(276, 100%, 50%)

HSL เช่น RGB รองรับความทึบ ในกรณีนั้น คุณจะต้องใช้ค่า HSLA โดยที่ A ย่อมาจาก alpha และถูกกำหนดเป็นตัวเลขตั้งแต่ 0 ถึง 1 หากเราต้องการลดความทึบของตัวอย่างสีม่วง เราจะใช้รหัสนี้: hsl(276, 100%, 50%, .85)

เมื่อคุณรู้วิธีกำหนดสีแล้ว มาดูวิธีเปลี่ยนสีฟอนต์ HTML กัน

เก่า: <font> แท็ก

ก่อนเปิดตัว HTML5 และกำหนดเป็นมาตรฐานการเข้ารหัส คุณสามารถเปลี่ยนสีแบบอักษรได้โดยใช้แท็กแบบอักษร โดยเฉพาะอย่างยิ่ง คุณจะต้องใช้แท็กแบบอักษรที่มีแอตทริบิวต์สีเพื่อกำหนดสีข้อความ ระบุ color ด้วยชื่อหรือรหัสฐานสิบหก

ต่อไปนี้คือตัวอย่างลักษณะโค้ดนี้ดูด้วยรหัสสีฐานสิบหก:

 <font color="#800080">This text is purple.</font>

และนี่คือวิธีที่คุณสามารถตั้งค่าสีข้อความเป็นสีม่วงโดยใช้ชื่อสี

 <font color="purple">This text is purple.</font>

อย่างไรก็ตาม แท็ก <font> เลิกใช้แล้วใน HTML5 และไม่ได้ใช้อีกต่อไป การเปลี่ยนสีฟอนต์เป็นการตัดสินใจในการออกแบบ และการออกแบบไม่ใช่จุดประสงค์หลักของ HTML ดังนั้นจึงทำให้รู้สึกว่าแท็ก <font> ไม่ได้รับการสนับสนุนใน HTML5 อีกต่อไป

ดังนั้นหากแท็ก <font> ไม่รองรับอีกต่อไป คุณจะเปลี่ยนสีแบบอักษร HTML ได้อย่างไร คำตอบคือด้วย Cascading Style Sheets หรือ CSS

ใหม่: สไตล์ CSS

หากต้องการเปลี่ยนสีแบบอักษร HTML ด้วย CSS คุณจะต้องใช้คุณสมบัติสี CSS ที่จับคู่กับตัวเลือกที่เหมาะสม CSS ช่วยให้คุณใช้ชื่อสี ค่า RGB ฐานสิบหก และ HSL เพื่อระบุสีได้ มีสามวิธีในการใช้ CSS เพื่อเปลี่ยนสีฟอนต์

CSS แบบอินไลน์

CSS แบบอินไลน์จะเพิ่มลงในไฟล์ HTML ของคุณโดยตรง คุณจะใช้แท็ก HTML เช่น <p> แล้วจัดรูปแบบด้วยคุณสมบัติสี CSS ดังนี้:

 <p>This is a purple paragraph.</p>

หากคุณต้องการใช้ค่าฐานสิบหก โค้ดของคุณจะมีลักษณะดังนี้:

 <p>This is a purple paragraph.</p>

หากคุณกำลังจะใช้ค่า RGB คุณจะเขียนได้ดังนี้:

 <p>This is a purple paragraph.</p>

สุดท้าย การใช้ค่า HSL คุณจะต้องใช้รหัสนี้:

 <p>This is a purple paragraph.</p>

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

ตัวอย่างเช่น การแทนที่แท็ก <p> ด้านบนด้วย <h2> จะเปลี่ยนสีของข้อความส่วนหัวนั้น ในขณะที่การแทนที่ด้วยแท็ก <a> จะเปลี่ยนสีของลิงก์นั้น คุณยังสามารถใช้องค์ประกอบ <span> เพื่อระบายสีข้อความจำนวนเท่าใดก็ได้

ลงทะเบียนเพื่อรับจดหมายข่าว

ต้องการทราบว่าเราเพิ่มการเข้าชมของเรามากกว่า 1,000% ได้อย่างไร

เข้าร่วมกับคนอื่นๆ อีกกว่า 20,000 คนที่ได้รับจดหมายข่าวรายสัปดาห์พร้อมเคล็ดลับ WordPress จากวงใน!

สมัครสมาชิกตอนนี้

ถ้าคุณต้องการเปลี่ยนสีพื้นหลังของทั้งย่อหน้าหรือหัวเรื่อง ให้คล้ายกับวิธีเปลี่ยนสีฟอนต์ของคุณ คุณต้องใช้แอตทริบิวต์ background-color แทนและใช้ชื่อสี ค่าฐานสิบหก RGB หรือ HSL เพื่อตั้งค่าสี นี่คือตัวอย่าง:

<p>

CSS แบบฝังตัว

CSS ที่ฝังอยู่ภายในแท็ก <style> และวางไว้ระหว่างแท็กส่วนหัวของเอกสาร HTML ของคุณ

รหัสจะมีลักษณะดังนี้หากคุณต้องการใช้ชื่อสี:

 <!DOCTYPE html> <html> <head> <style> <p> { color: purple; } </style> </head>

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

หากคุณต้องการใช้รหัสฐานสิบหก โค้ดจะมีลักษณะดังนี้:

 <!DOCTYPE html> <html> <head> <style> <p> { color: #800080; } </style> </head>

ตัวอย่างด้านล่างใช้ค่า RBGA เพื่อให้คุณสามารถดูตัวอย่างการตั้งค่าความทึบได้:

 <!DOCTYPE html> <html> <head> <style> <p> { color: RGB(153,0,255,0.75), } </style> </head>

และรหัส HSL จะมีลักษณะดังนี้:

 <!DOCTYPE html> <html> <head> <style> <p> { color: hsl(276, 100%, 50%), } </style> </head>

CSS ภายนอก

สุดท้าย คุณสามารถใช้ CSS ภายนอกเพื่อเปลี่ยนสีแบบอักษรบนเว็บไซต์ของคุณได้ CSS ภายนอกคือ CSS ที่วางอยู่ในไฟล์สไตล์ชีตแยกต่างหาก ปกติจะเรียกว่า style.css หรือ stylesheet.css

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

หากต้องการเปลี่ยนสีแบบอักษรด้วย CSS ภายนอก คุณจะต้องใช้ตัวเลือกเพื่อจัดรูปแบบส่วนต่างๆ ของ HTML ที่คุณต้องการ ตัวอย่างเช่น รหัสนี้จะเปลี่ยนข้อความเนื้อหาทั้งหมดบนไซต์ของคุณ:

 body {color: purple;}

จำไว้ว่า คุณสามารถใช้ค่า RGB, hex และ HSL ไม่ใช่แค่ชื่อสีเพื่อเปลี่ยนสีฟอนต์ หากคุณต้องการแก้ไขสไตล์ชีต ขอแนะนำให้แก้ไขในโปรแกรมแก้ไขโค้ด

Inline, Embedded หรือภายนอก?

ตอนนี้คุณรู้แล้วว่าคุณสามารถใช้ CSS เพื่อเปลี่ยนสีฟอนต์ได้อย่างไร แต่คุณควรใช้วิธีใด?

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

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

CSS แบบฝังจะอยู่ระหว่างแท็ก <head> และภายในแท็ก <style> เช่นเดียวกับ CSS แบบอินไลน์ เป็นการดีสำหรับการแก้ไขอย่างรวดเร็วและแทนที่สไตล์ที่ระบุในสไตล์ชีตภายนอก

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

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

โปรดทราบว่าสไตล์อินไลน์และแบบฝังสามารถแทนที่สไตล์ที่ตั้งค่าในสไตล์ชีตภายนอกได้

แท็กแบบอักษรหรือรูปแบบ CSS: ข้อดีและข้อเสีย

วิธีหลักสองวิธีในการเปลี่ยนสีแบบอักษร HTML คือการใช้แท็กแบบอักษรหรือรูปแบบ CSS ทั้งสองวิธีมีข้อดีและข้อเสีย

แท็กแบบอักษร HTML ข้อดีและข้อเสีย

แท็กฟอนต์ HTML ใช้งานง่าย จึงเป็นข้อดี โดยทั่วไปแล้ว CSS นั้นซับซ้อนกว่าและใช้เวลาในการเรียนรู้นานกว่าการพิมพ์ <font color="purple"> หากคุณมีเว็บไซต์เก่าที่ไม่ได้ใช้ HTML5 แท็กฟอนต์เป็นวิธีที่มีประสิทธิภาพในการเปลี่ยนสีฟอนต์

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

ข้อดีและข้อเสียของ CSS

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

ดังที่ได้กล่าวไว้ก่อนหน้านี้ มันแยกการนำเสนอออกจากการออกแบบ ซึ่งทำให้รหัสของคุณง่ายต่อการจัดการและบำรุงรักษา

ข้อเสีย CSS และ HTML5 อาจใช้เวลาในการเรียนรู้และเขียนอย่างถูกต้องเมื่อเทียบกับวิธีการเขียนโค้ดแบบเก่า

โปรดทราบว่าด้วย CSS คุณจะเปลี่ยนสีแบบอักษรได้หลายวิธี และแต่ละวิธีก็มีข้อดีและข้อเสียต่างกันไป ตามที่กล่าวไว้ก่อนหน้านี้

เคล็ดลับในการเปลี่ยนสีแบบอักษร HTML

เมื่อคุณทราบวิธีเปลี่ยนสีแบบอักษร HTML แล้ว ต่อไปนี้คือเคล็ดลับบางประการที่จะช่วยคุณได้

ใช้ตัวเลือกสี

แทนที่จะเลือกสีแบบสุ่ม ให้ใช้ตัวเลือกสีเพื่อเลือกสีที่เหมาะสม ประโยชน์ของตัวเลือกสีคือจะให้ชื่อสีและค่าฐานสิบหก, RGB และ HSL ที่ถูกต้องซึ่งคุณต้องใช้ในโค้ดของคุณ

ตรวจสอบความคมชัด

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

ค้นหาสีโดยใช้วิธีการตรวจสอบ

หากคุณเห็นสีที่คุณชอบบนเว็บไซต์ คุณสามารถตรวจสอบรหัสเพื่อรับค่าฐานสิบหก, RGB หรือ HSL ของสีได้ ใน Chrome สิ่งที่คุณต้องทำคือชี้เคอร์เซอร์ไปที่ส่วนของหน้าเว็บที่คุณต้องการตรวจสอบ คลิกขวาและเลือก ตรวจสอบ ซึ่งจะเปิดแผงการตรวจสอบโค้ดขึ้น ซึ่งคุณสามารถดูโค้ด HTML ของเว็บไซต์และรูปแบบที่เกี่ยวข้องได้

ต้องการเปลี่ยนสีแบบอักษรบนเว็บไซต์ของคุณหรือไม่? มันง่าย! คู่มือนี้จะช่วยคุณในการเริ่มต้น ️ คลิกเพื่อทวีต

สรุป

การเปลี่ยนสีแบบอักษร HTML สามารถช่วยปรับปรุงความสามารถในการอ่านและการเข้าถึงของเว็บไซต์ของคุณ นอกจากนี้ยังสามารถช่วยให้คุณสร้างความสอดคล้องของแบรนด์ในรูปแบบเว็บไซต์ของคุณ

ในคู่มือนี้ คุณได้เรียนรู้เกี่ยวกับสี่วิธีในการเปลี่ยนสีแบบอักษร HTML: ด้วยชื่อสี รหัสฐานสิบหก ค่า RGB และ HSL

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

คุณคิดอย่างไรกับการเปลี่ยนสีแบบอักษรด้วย CSS และแท็กแบบอักษร แจ้งให้เราทราบในส่วนความคิดเห็น!