วิธีการเปลี่ยนสีแบบอักษรของเว็บไซต์ด้วย CSS

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

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

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

การเพิ่มสไตล์เพื่อเปลี่ยนสีตัวอักษร

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

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

ค่าสีสามารถแสดงเป็นคำหลักสีตัวเลขสี RGB หรือตัวเลขสีฐานสิบหก

1. เพิ่มแอตทริบิวต์ style สำหรับแท็กวรรค:
   1. p {}
2. วางคุณสมบัติ สี ในสไตล์ วางเครื่องหมายทวิภาคหลังจากพร็อพเพอร์ตี้นั้น:
   1. p (สี:}
3. จากนั้นเพิ่มค่าสีของคุณหลังจากพร็อพเพอร์ตี้ ตรวจสอบให้แน่ใจว่าได้วางค่านั้นด้วยเครื่องหมายอัฒภาค:
   1. p (สี: ดำ;}

ย่อหน้าในหน้าเว็บของคุณจะเป็นสีดำ

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

p (สี: # 000000; }

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

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

p (สี: # 2f5687; }

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

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

p (สี: rgba (47,86,135,1); }

ค่า RGBA นี้เป็นสีเดียวกับสีฟ้าที่ระบุไว้ก่อนหน้านี้ ค่าแรกที่ตั้งค่าสีแดงสีเขียวและสีน้ำเงินและจำนวนสุดท้ายคือการตั้งค่าอัลฟา ตั้งค่าเป็น "1" ซึ่งหมายความว่า "100%" ดังนั้นสีนี้จึงไม่มีความโปร่งใส ถ้าคุณตั้งค่าให้เป็นตัวเลขทศนิยมเช่น. 85 ก็จะแปลเป็นความโปร่งแสง 85% และสีจะโปร่งใสเล็กน้อย

ถ้าคุณต้องการป้องกันสีของค่าต่างๆคุณควรทำดังนี้

p {
สี: # 2f5687;
สี: rgba (47,86,135,1);
}

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