ตั้งค่าแบบอักษร ขนาด และสีของข้อความ

ตั้งค่าแบบอักษร ขนาด และสีของข้อความ

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

P ( สี: #211C18; )

ในตัวอย่างของเรา ค่า #211C18 แสดงถึงรหัสสีฐานสิบหก หากคุณคุ้นเคยกับระบบเลขฐานสิบหกอยู่แล้ว คุณสามารถข้ามไปอ่านย่อหน้าถัดไปได้ นอกจากนี้เรายังจะพูดคุยเพิ่มเติมเกี่ยวกับวิธีอื่นๆ ในการแสดงสีบนเว็บ - โดยใช้โมเดลสี (RGB, HSL) และคำหลัก ข้อมูลนี้จะเป็นประโยชน์สำหรับผู้เริ่มต้นและแนะนำให้อ่าน

สีเลขฐานสิบหก (hex)

ระบบเลขฐานสิบหก ( เลขฐานสิบหก, เลขฐานสิบหก) ขึ้นอยู่กับตัวเลข 16 ในการเขียนค่าเลขฐานสิบหกจะใช้อักขระ 16 ตัว: เลขอารบิคตั้งแต่ 0 ถึง 9 และตัวอักษรตัวแรกของตัวอักษรละติน (A, B, C, D, E, F) สีในรูปแบบเลขฐานสิบหกจะเขียนเป็นตัวเลขสองหลักสามตัวตั้งแต่ 00 ถึง FF (ต้องนำหน้าด้วยสัญลักษณ์แฮช #) ซึ่งสอดคล้องกับองค์ประกอบสามประการ: แดง เขียว น้ำเงิน (รุ่นสี RGB) กล่าวอีกนัยหนึ่ง รายการสีสามารถแสดงเป็น #RRGGBB โดยที่อักขระคู่แรกกำหนดระดับสีแดง ตัวที่สอง - ระดับสีเขียว และตัวที่สาม - ระดับสีน้ำเงิน สีที่ได้คือการรวมกันของสามสีนี้

สัญกรณ์ชวเลขสำหรับสีฐานสิบหก

ค่าสีเลขฐานสิบหกบางค่าสามารถเขียนเป็นตัวย่อได้ เมื่อต้องการทำเช่นนี้ ให้เปลี่ยนรายการเช่น #RRGGBB เป็น #RGB ซึ่งสามารถทำได้เมื่อเลขฐานสิบหกประกอบด้วยอักขระที่เหมือนกันสามคู่

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

ตัวอย่างสัญกรณ์ย่อสำหรับสีฐานสิบหก:

รุ่นสี RGB

วิธีที่สองในการระบุสีใน CSS คือการใช้ค่า RGB ทศนิยม (แดง น้ำเงิน เขียว) ในการทำเช่นนี้คุณจะต้องเขียนคำหลัก rgb หลังคุณสมบัติสีจากนั้นในวงเล็บและคั่นด้วยเครื่องหมายจุลภาค - ตัวเลขสามตัวในช่วงตั้งแต่ 0 ถึง 255 ซึ่งแต่ละตัวหมายถึงความเข้มของสีแดงสีเขียวและสีน้ำเงิน (r , ก, ข) ยิ่งตัวเลขมาก สีก็จะยิ่งเข้มขึ้น ตัวอย่างเช่นเพื่อให้ได้สีเขียวสดใสคุณต้องเขียน:

P ( สี: RGB(0, 255, 0); )

แต่โทนสีเหลืองมัสตาร์ดมีความหมายดังต่อไปนี้:

สี: RGB (94, 81, 3); /* ด้านล่างเป็นสีเดียวกัน เขียนด้วยเลขฐานสิบหก: */ color: #5E5103;

ค่าสีดำเขียนเป็น (0, 0, 0) และสีขาวเป็น (255, 255, 255) นอกจากนี้ยังสามารถระบุค่าเหล่านี้เป็นเปอร์เซ็นต์ได้ ดังนั้นตัวเลข 255 จึงตรงกับ 100% จึงสามารถกำหนดสีขาวได้ดังนี้

สี: RGB (100%, 100%, 100%);

จะหาความหมายของสีได้ที่ไหน

บางทีคุณอาจมีคำถาม: คุณได้ความหมายของสีเหล่านี้มาจากไหน? มีโปรแกรมแก้ไขกราฟิกและบริการออนไลน์มากมายที่คุณสามารถเลือกสีและสร้างโทนสีได้ หนึ่งในโปรแกรมยอดนิยมที่คุณสามารถเลือกสีที่เหมาะสมและรับ RGB, ค่าฐานสิบหกและอื่น ๆ ได้คือ Adobe Photoshop มีไซต์พิเศษที่คุณสามารถเลือกได้ไม่เพียง แต่สีเท่านั้น แต่ยังรวมถึงโทนสีทั้งหมดด้วย ตัวอย่างที่ดีคือบริการ Adobe Color CC

โมเดลสี RGBA

คุณสามารถตั้งค่าสีในรูปแบบ RGBA ได้ในลักษณะเดียวกับใน RGB ความแตกต่างระหว่าง RGBA และ RGB คือการมีช่องอัลฟ่าซึ่งมีหน้าที่รับผิดชอบในเรื่องความโปร่งใสของสี ความโปร่งใสถูกกำหนดโดยใช้ตัวเลขในช่วงตั้งแต่ 0 ถึง 1 โดยที่ 0 หมายถึงความโปร่งใสโดยสมบูรณ์ และ 1 ตรงกันข้าม หมายถึงทึบแสงโดยสิ้นเชิง ค่ากลางเช่น 0.5 ช่วยให้คุณสามารถตั้งค่าลักษณะโปร่งแสงได้ (อนุญาตให้ใช้สัญลักษณ์ชวเลขโดยไม่มีศูนย์ แต่มีจุด – .5) ตัวอย่างเช่น หากต้องการทำให้ข้อความมีสีและโปร่งใสเล็กน้อย คุณต้องเขียนคีย์เวิร์ด rgba และค่าสีหลังคุณสมบัติสี:

P ( สี: RGBA(94, 81, 3, .9); )

ข้อเสียของ RGBA คือ Internet Explorer เวอร์ชัน 8 และเวอร์ชันก่อนหน้าไม่รองรับ โดยเฉพาะอย่างยิ่งสำหรับ IE8 คุณสามารถใช้วิธีแก้ปัญหาต่อไปนี้:

P ( สี: RGB(94, 81, 3); สี: RGBA(94, 81, 3, .9); )

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

โมเดลสี HSL (HSLA)

คุณยังสามารถตั้งค่าสีใน CSS โดยใช้พิกัดของโมเดลสี HSL (Hue, Saturation, Lightness) มันเขียนแบบนี้:

P ( สี: hsl(165, 100%, 50%); )

ตัวเลขตัวแรกในวงเล็บหมายถึงเฉดสีและมีหน่วยเป็นองศา (ช่วงตัวเลขตั้งแต่ 0 ถึง 359) จะเข้าใจได้ง่ายว่าทำไมถึงใช้องศาถ้าคุณจำได้ว่าวงล้อสีมีลักษณะอย่างไร:

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

โมเดลสี HSLA ทำงานเกือบจะเหมือนกับ HSL แต่คล้ายกับ RGBA ตรงที่มีช่องอัลฟาซึ่งคุณสามารถตั้งค่าความโปร่งใสของสีได้โดยระบุค่าที่ต้องการในช่วงตั้งแต่ 0 ถึง 1:

P ( สี: hsla(165, 100%, 50%, .6); )

เบราว์เซอร์ทั้งหมดรองรับ HSL และ HSLA ยกเว้น Internet Explorer เวอร์ชัน 8 และเก่ากว่า

สี HTML มาตรฐาน

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

P(สี:ดำ;)

มีสีมาตรฐาน 16 สีที่สามารถเขียนได้ในค่าของคุณสมบัติสี:

สีเหล่านี้รองรับทุกเบราว์เซอร์ นอกจากนี้ ยังมีคำหลักเพิ่มเติมประมาณ 130 คำสำหรับเฉดสีต่างๆ สามารถดูตารางสีเหล่านี้ทั้งหมดได้ในหนังสืออ้างอิงของ W3C

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

ผลลัพธ์

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

นอกจากนี้ยังสามารถตั้งค่าความโปร่งใสขององค์ประกอบโดยใช้ช่องอัลฟา (รูปแบบ RGBA และ HSLA) ควรพิจารณาว่าเบราว์เซอร์ IE8 และเวอร์ชันก่อนหน้าไม่รองรับรูปแบบ RGBA, HSL และ HSLA

ใน HTML สามารถระบุสีได้สามวิธี:

การตั้งค่าสีใน HTML ตามชื่อของมัน

สีบางสีสามารถระบุได้ด้วยชื่อ โดยใช้ชื่อสีในภาษาอังกฤษเป็นค่า คำสำคัญที่พบบ่อยที่สุด: ดำ, ขาว, แดง, เขียว, น้ำเงิน ฯลฯ:

สีข้อความ – สีแดง

สียอดนิยมของมาตรฐาน World Wide Web Consortium (W3C):

ตัวอย่างการใช้ชื่อสีต่างๆ:

ตัวอย่าง: การระบุสีตามชื่อ

• ลองด้วยตัวเอง »

เฮดเดอร์บนพื้นหลังสีแดง

ส่วนหัวบนพื้นหลังสีส้ม

มุ่งหน้าสู่พื้นหลังมะนาว

ข้อความสีขาวบนพื้นหลังสีน้ำเงิน

เฮดเดอร์บนพื้นหลังสีแดง

ส่วนหัวบนพื้นหลังสีส้ม

มุ่งหน้าสู่พื้นหลังมะนาว

ข้อความสีขาวบนพื้นหลังสีน้ำเงิน

การระบุสีโดยใช้ RGB

เมื่อแสดงสีต่างๆ บนจอภาพ ระบบจะใช้จานสี RGB เป็นพื้นฐาน สีใดก็ได้โดยการผสมสีพื้นฐานสามสี: ร - แดง, G - สีเขียว, บี - น้ำเงิน- ความสว่างของแต่ละสีกำหนดไว้หนึ่งไบต์ดังนั้นจึงสามารถรับค่าได้ตั้งแต่ 0 ถึง 255 ตัวอย่างเช่น RGB (255,0,0) จะแสดงเป็นสีแดงเนื่องจากสีแดงถูกกำหนดไว้ที่ค่าสูงสุด (255) และ ส่วนที่เหลือตั้งค่าเป็น 0 คุณยังสามารถตั้งค่าสีเป็นเปอร์เซ็นต์ได้ พารามิเตอร์แต่ละตัวระบุระดับความสว่างของสีที่เกี่ยวข้อง ตัวอย่างเช่น: ค่า rgb(127, 255, 127) และ rgb(50%, 100%, 50%) จะตั้งค่าสีเขียวกลางเดียวกัน:

ตัวอย่าง: การระบุสีโดยใช้ RGB

• ลองด้วยตัวเอง »

RGB(127, 255, 127)

RGB(50%, 100%, 50%)

RGB(127, 255, 127)

RGB(50%, 100%, 50%)

ตั้งค่าสีตามค่าเลขฐานสิบหก

ค่านิยม ร ช บีสามารถระบุได้โดยใช้ค่าสีเลขฐานสิบหก (HEX) ในรูปแบบ: #RRGGBB โดยที่ RR (สีแดง), GG (สีเขียว) และ BB (สีน้ำเงิน) เป็นค่าสีฐานสิบหกตั้งแต่ 00 ถึง FF (เหมือนกับทศนิยม 0-255 ) . ระบบเลขฐานสิบหกซึ่งแตกต่างจากระบบฐานสิบนั้นเป็นไปตามชื่อของมัน ระบบเลขฐานสิบหกใช้เครื่องหมายต่อไปนี้: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. ตัวเลขตั้งแต่ 10 ถึง 15 จะถูกแทนที่ด้วยตัวอักษรละติน ตัวเลขที่มากกว่า 15 ในระบบเลขฐานสิบหกจะแสดงโดยการรวมอักขระสองตัวให้เป็นค่าเดียว ตัวอย่างเช่น จำนวนสูงสุด 255 ในฐานสิบจะสอดคล้องกับค่า FF สูงสุดในฐานสิบหก ไม่เหมือนกับระบบทศนิยม เลขฐานสิบหกจะมีสัญลักษณ์แฮชนำหน้า # ตัวอย่างเช่น #FF0000 จะแสดงเป็นสีแดง เนื่องจากสีแดงถูกกำหนดไว้ที่ค่าสูงสุด (FF) และสีที่เหลือถูกกำหนดไว้ที่ค่าต่ำสุด (00) ป้ายหลังสัญลักษณ์แฮช # คุณสามารถพิมพ์ได้ทั้งตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก ระบบเลขฐานสิบหกช่วยให้คุณใช้รูปแบบย่อ #rgb โดยที่อักขระแต่ละตัวมีค่าเท่ากับสองเท่า ดังนั้น รายการ #f7O ควรถือเป็น #ff7700

ตัวอย่าง: สี HEX

• ลองด้วยตัวเอง »

สีแดง: #FF0000

สีเขียว: #00FF00

สีน้ำเงิน: #0000FF

สีแดง: #FF0000

สีเขียว: #00FF00

สีน้ำเงิน: #0000FF

แดง+เขียว=เหลือง: #FFFF00

แดง+น้ำเงิน=ม่วง: #FF00FF

เขียว+น้ำเงิน=ฟ้า: #00FFFF

รายการสีทั่วไป (ชื่อ, HEX และ RGB):

รหัสสี (พื้นหลัง) ด้วยความอิ่มตัวและเฉดสี