home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

กวดวิชาสี CSS

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

ในการเพิ่มสี CSS มี color ชนิดข้อมูลซึ่งแสดงถึงสีในรูปแบบมาตรฐานสีแดง เขียว น้ำเงิน (RGB)

สี ไวยากรณ์

มีสองวิธีที่คุณสามารถกำหนดสีด้วย CSS:

  • ด้วยคีย์เวิร์ด โดยจะพิมพ์เป็นสตริง เช่น "แดง" "ขาว" "เหลือง" หรือเลขฐานสิบหกอย่าง #fff
  • ด้วยสัญกรณ์เลขฐานสิบหก เช่น #fff
  • ทาง rgb() หรือ rgba() สัญกรณ์การทำงาน
  • หรือใช้ฟังก์ชัน HSL เช่น hsl() และ hsla() .

การใช้ตัวระบุคำหลัก

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

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

<button class="color">Color Me</button>

ด้วยองค์ประกอบปุ่มของเรา เรามีสองตัวเลือกในการเพิ่มสี ไม่ว่าจะผ่าน background-color คุณสมบัติหรือ color คุณสมบัติ. ในกรณีนี้ คุณสมบัติสีจะเปลี่ยนสีของข้อความและสีของพื้นหลัง ซึ่งเป็นสีของพื้นหลัง ไปข้างหน้าและเลือกปุ่มของเราแล้วเพิ่มสีสันให้กับปุ่มของเรา!

ง่ายไปไหม

กวดวิชาสี CSS

rgba() และ hsl() ฟังก์ชัน

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

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

สีของคีย์เวิร์ดเหล่านี้ หรือสีอื่นๆ แทบทั้งหมด สามารถแสดงเป็นฐานสิบหก RGB หรือ RGB ก็ได้ ตัวอย่างเช่น 'black' จะเป็น #000000 หรือ 0,0,0 ในรูปแบบทศนิยมเป็นต้น คุณสามารถรับสีที่เฉพาะเจาะจงมากขึ้นด้วยตัวเลือกฐานสิบหกหรือทศนิยมเหล่านี้

วิธีง่ายๆ ในการเพิ่มทศนิยม RGB คือการใช้ rgb() การทำงาน. ค่าสูงสุดของทศนิยมแต่ละตำแหน่งคือ 255 เรามาเปลี่ยนสีคำหลักของเราเพื่อแสดงสองตัวเลือกใหม่นี้:

button.color {
    /* RGB and decimal */
    color: #fff;
    background-color: rgb(210,105,30);
}

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

อีกทางเลือกหนึ่งในการเพิ่มสีคือการใช้ hsl() การทำงาน. HSL ย่อมาจาก hue, saturation และ lightness ความสว่างแสดงถึงเปอร์เซ็นต์จากสีขาว (100%) ถึงสีดำ (0%) ความอิ่มตัวยังเป็นเปอร์เซ็นต์ แต่เป็นสีเทา โดยที่ 100% เป็นสีเทา "เต็ม" Hue หมายถึงองศา (0 ถึง 360) ในวงล้อสีเป็น RGB โดยที่ 0 คือสีแดง 120 คือสีเขียวและ 240 คือสีน้ำเงิน ฉันรู้ว่ามันฟังดูซับซ้อน 😅

โปรแกรมแก้ไขโค้ด เช่น Visual Studio มีตัวเลือกสีให้คุณเล่นได้ ไปข้างหน้าและพิมพ์ hsl() จากนั้นวางเมาส์เหนือและเห็นตัวเลือกสีปรากฏขึ้น

กวดวิชาสี CSS

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

การแก้ไขความทึบของสี

คุณอาจสังเกตเห็นว่าทั้งฟังก์ชัน rgb และ hsl สามารถแสดงได้ด้วย rgba() หรือ hsla() . 'a' หมายถึงอัลฟ่า แต่ค่อนข้างโปร่งใส / ความทึบโดยที่ 0 โปร่งใสและ 1 ทึบแสงทั้งหมด

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

button.color {
    color: #fff;
    background-color: rgba(210,105,30, 0.7);
}

ด้วยความทึบทำให้ข้อความของเราอ่านได้ดีขึ้นมาก!

กวดวิชาสี CSS