กวดวิชาCSS

CSS HOME บทนำ CSS ไวยากรณ์ CSS ตัวเลือก CSS CSS วิธีการ ความคิดเห็น CSS CSS สี พื้นหลัง CSS CSS Borders CSS Margins CSS Padding CSS ความสูง/ความกว้าง โมเดลกล่อง CSS CSS Outline CSS Text แบบอักษร CSS ไอคอน CSS ลิงค์ CSS รายการ CSS ตาราง CSS จอแสดงผล CSS CSS ความกว้างสูงสุด ตำแหน่ง CSS CSS Z-ดัชนี CSS Overflow CSS Float CSS Inline-block CSS Align CSS Combinators CSS Pseudo-class CSS Pseudo-element CSS ความทึบ แถบนำทาง CSS CSS Dropdowns CSS Image Gallery CSS Image Sprites CSS Attr Selectors แบบฟอร์ม CSS CSS Counters เค้าโครงเว็บไซต์ CSS หน่วย CSS ความจำเพาะของ CSS CSS !สำคัญ ฟังก์ชันคณิตศาสตร์ CSS

CSS ขั้นสูง

CSS มุมโค้งมน รูปภาพ CSS Border พื้นหลัง CSS CSS สี คำหลักสี CSS CSS Gradients CSS Shadows เอฟเฟกต์ข้อความ CSS CSS Web Fonts การแปลง CSS 2D การแปลง CSS 3D การเปลี่ยน CSS ภาพเคลื่อนไหว CSS CSS Tooltips CSS สไตล์รูปภาพ ภาพสะท้อน CSS CSS วัตถุพอดี CSS วัตถุตำแหน่ง CSS Masking ปุ่ม CSS CSS Pagination CSS หลายคอลัมน์ ส่วนต่อประสานผู้ใช้ CSS ตัวแปร CSS ขนาดกล่อง CSS CSS Media Queries ตัวอย่าง CSS MQ CSS Flexbox

CSS Responsive

แนะนำ RWD วิวพอร์ต RWD RWD Grid View แบบสอบถามสื่อ RWD รูปภาพ RWD วิดีโอ RWD กรอบงาน RWD เทมเพลต RWD

CSS Grid

บทนำกริด คอนเทนเนอร์กริด รายการกริด

CSS SASS

กวดวิชา SASS

ตัวอย่างCSS

เทมเพลต CSS ตัวอย่าง CSS แบบทดสอบ CSS แบบฝึกหัด CSS ใบรับรอง CSS

การอ้างอิงCSS

การอ้างอิง CSS ตัวเลือก CSS ฟังก์ชัน CSS CSS อ้างอิง Aural CSS Web Safe Fonts CSS Animable หน่วย CSS ตัวแปลง CSS PX-EM CSS สี ค่าสี CSS ค่าดีฟอลต์ CSS รองรับเบราว์เซอร์ CSS

CSS สี


ระบุสีโดยใช้ชื่อสีที่กำหนดไว้ล่วงหน้า หรือค่า RGB, HEX, HSL, RGBA, HSLA


ชื่อสี CSS

ใน CSS สามารถระบุสีได้โดยใช้ชื่อสีที่กำหนดไว้ล่วงหน้า:

มะเขือเทศ
ส้ม
DodgerBlue
กลางทะเลสีเขียว
สีเทา
กระดานชนวนสีฟ้า
สีม่วง
แสงสีเทา

CSS/HTML รองรับ ชื่อ สีมาตรฐาน 140 ชื่อ


สีพื้นหลัง CSS

คุณสามารถตั้งค่าสีพื้นหลังสำหรับองค์ประกอบ HTML:

สวัสดีชาวโลก


ความเจ็บปวดคือความรัก จึงเป็นเหตุให้เกิดขึ้นมาเพียงเล็กน้อยเท่านั้น ที่ผู้ปฏิบัติธรรมดาของเราแบกรับผลที่ตามมา

ตัวอย่าง

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>


CSS Text Color

คุณสามารถกำหนดสีของข้อความ:

สวัสดีชาวโลก

ความเจ็บปวดคือความรัก

จึงเป็นเหตุให้เกิดขึ้นมาเพียงเล็กน้อยเท่านั้น ที่ผู้ปฏิบัติธรรมดาของเราแบกรับผลที่ตามมา

ตัวอย่าง

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

CSS Border Color

คุณสามารถกำหนดสีของเส้นขอบ:

สวัสดีชาวโลก

สวัสดีชาวโลก

สวัสดีชาวโลก

ตัวอย่าง

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

ค่าสี CSS

ใน CSS สีสามารถระบุได้โดยใช้ค่า RGB, ค่า HEX, ค่า HSL, ค่า RGBA และค่า HSLA:

เช่นเดียวกับชื่อสี "มะเขือเทศ":

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

เช่นเดียวกับชื่อสี "มะเขือเทศ" แต่โปร่งใส 50%:

rgba (255, 99, 71, 0.5)
สลา (9, 100%, 64%, 0.5)

ตัวอย่าง

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

เรียนรู้เพิ่มเติมเกี่ยวกับค่าสี

คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับRGB , HEXและHSLในบทต่อไป