ล่าสุดการพัฒนาเว็บบทเรียน
×

CSS เกี่ยวกับการสอน

CSS บ้าน CSS บทนำ CSS วากยสัมพันธ์ CSS ทำอย่างไร CSS สี CSS ภูมิหลัง CSS พรมแดน CSS อัตรากำไรขั้นต้น CSS การขยายความ CSS สูงกว้าง CSS ข้อความ CSS แบบอักษร CSS การเชื่อมโยง CSS รายการ CSS ตาราง CSS รูปแบบกล่อง ร่าง CSS การแสดงผล CSS CSS ความกว้างสูงสุด CSS ตำแหน่ง CSS ลอย CSS Inline-block CSS เป็นเส้นตรง CSS combinators CSS หลอกชั้น CSS องค์ประกอบหลอก CSS แถบนำทาง CSS เมนูแบบเลื่อนลง CSS คำแนะนำเครื่องมือ CSS แกลเลอรี่ภาพ CSS ภาพทึบ CSS ภาพแบบ Sprite CSS attr Selectors รูปแบบ CSS CSS เคาน์เตอร์

CSS3

CSS3 บทนำ CSS3 มุมโค้งมน CSS3 แสดงสินค้าชายแดน CSS3 ภูมิหลัง CSS3 สี CSS3 การไล่ระดับสี CSS3 เงา CSS3 ข้อความ CSS3 แบบอักษร CSS3 แปลง 2D CSS3 แปลง 3D CSS3 การเปลี่ยน CSS3 ภาพเคลื่อนไหว CSS3 ภาพ CSS3 ปุ่ม CSS3 การให้เลขหน้า CSS3 หลายคอลัมน์ CSS3 หน้าจอผู้ใช้ CSS3 กล่องขนาด CSS3 Flexbox CSS3 สื่อแบบสอบถาม CSS3 ตัวอย่าง MQ

CSS การออกแบบเว็บที่ตอบสนอง

การออกแบบเว็บที่ตอบสนอง แนะนำ การออกแบบเว็บที่ตอบสนอง วิวพอร์ต การออกแบบเว็บที่ตอบสนอง ตารางมุมมอง การออกแบบเว็บที่ตอบสนอง สื่อแบบสอบถาม การออกแบบเว็บที่ตอบสนอง ภาพ การออกแบบเว็บที่ตอบสนอง วิดีโอ การออกแบบเว็บที่ตอบสนอง กรอบ

CSS Examples

CSS ตัวอย่าง CSS ทดสอบ CSS ใบรับรอง

CSS References

CSS การอ้างอิง CSS selectors CSS ฟังก์ชั่น CSS หูอ้างอิง CSS Web Safe แบบอักษร CSS Animatable CSS หน่วย CSS PX-EM แปลง CSS สี CSS ค่าสี CSS ชื่อสี CSS3 สนับสนุนเบราว์เซอร์

 

CSSสี


สี CSS3

CSS สนับสนุนชื่อสีฐานสิบหกและสี RGB

นอกจากนี้ยังแนะนำ CSS3:

  • สี RGBA
  • สี HSL
  • สี HSLA
  • ความทึบแสง

สนับสนุนเบราว์เซอร์

ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ค่าสี CSS3 / คุณสมบัติ

คุณสมบัติ
RGBA, HSL, and HSLA 4.0 9.0 3.0 3.1 10.1
ความทึบแสง 4.0 9.0 2.0 3.1 10.1

สี RGBA

ค่าสี RGBA เป็นส่วนขยายของค่าสี RGB ที่มี alpha Channel - ซึ่งระบุความทึบแสงสำหรับสี

ค่าสี RGBA ถูกระบุด้วย: RGBA (สีแดง, สีเขียว, สีฟ้า, alpha ) alpha พารามิเตอร์เป็นตัวเลขระหว่าง 0.0 (โปร่งใสเต็มที่) และ 1.0 (ทึบแสงเต็มที่)

RGBA (255, 0, 0, 0.2);
RGBA (255, 0, 0, 0.4);
RGBA (255, 0, 0, 0.6);
RGBA (255, 0, 0, 0.8);

ตัวอย่างต่อไปนี้กำหนดสี RGBA แตกต่างกัน:

ตัวอย่าง

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue with opacity */
ลองตัวเอง»

สี HSL

HSL ยืนสำหรับสี, ความอิ่มตัวและความสว่าง

ค่าสี HSL ถูกระบุด้วย: HSL (สี, ความเข้มความสว่าง)

  1. เว้เป็นระดับบนวงล้อสี (0-360) A:
    • 0 (หรือ 360) เป็นสีแดง
    • 120 เป็นสีเขียว
    • 240 เป็นสีฟ้า
  2. อิ่มตัวเป็นค่าร้อยละ: 100% เป็นสีเต็มรูปแบบ
  3. ความสว่างยังเป็นเปอร์เซ็นต์; 0% เป็นสีเข้ม (สีดำ) และ 100% เป็นสีขาว
HSL (0, 100%, 30%);
HSL (0, 100%, 50%);
HSL (0, 100%, 70%);
HSL (0, 100%, 90%);

ตัวอย่างต่อไปนี้กำหนดสี HSL แตกต่างกัน:

ตัวอย่าง

#p1 {background-color: hsl(120, 100%, 50%);}  /* green */
#p2 {background-color: hsl(120, 100%, 75%);}  /* light green */
#p3 {background-color: hsl(120, 100%, 25%);}  /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);}   /* pastel green */
ลองตัวเอง»

สี HSLA

ค่าสี HSLA เป็นส่วนขยายของค่าสี HSL กับ alpha Channel - ซึ่งระบุความทึบแสงสำหรับสี

ค่าสี HSLA ถูกระบุด้วย: HSLA (สี, ความเข้มความสว่าง, alpha ) ที่ alpha พารามิเตอร์กำหนดความทึบ alpha พารามิเตอร์เป็นตัวเลขระหว่าง 0.0 (โปร่งใสเต็มที่) และ 1.0 (ทึบแสงเต็มที่)

HSLA (0, 100%, 30%, 0.3);
HSLA (0, 100%, 50%, 0.3);
HSLA (0, 100%, 70%, 0.3);
HSLA (0, 100%, 90%, 0.3);

ตัวอย่างต่อไปนี้กำหนดสีที่แตกต่างกัน HSLA:

ตัวอย่าง

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* pastel green with opacity */
ลองตัวเอง»

ความทึบแสง

สถานที่ให้บริการ CSS3 ทึบชุดทึบสำหรับค่า RGB ที่ระบุ

ค่าของคุณสมบัติความทึบจะต้องเป็นตัวเลขระหว่าง 0.0 (โปร่งใสเต็มที่) และ 1.0 (ทึบแสงเต็มที่)

rgb (255, 0, 0); ทึบ: 0.2;
rgb (255, 0, 0); ทึบ: 0.4;
rgb (255, 0, 0); ทึบ: 0.6;
rgb (255, 0, 0); ทึบ: 0.8;

ขอให้สังเกตว่าข้อความดังกล่าวข้างต้นยังจะมีสีขาวขุ่น

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงค่า RGB ที่แตกต่างกับความทึบ:

ตัวอย่าง

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* red with opacity */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* green with opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* blue with opacity */
ลองตัวเอง»

ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!

การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย»