คอร์ส IT พื้นฐาน CSS 021_ประเภทค่า หน่วย ขนาด สี

ประเภทตัวเลข

ใน CSS มีการใช้ค่าตัวเลขต่างๆ ในคุณสมบัติที่แตกต่างกัน ประเภทตัวเลขทั่วไป:

• สตริง: ข้อความในเครื่องหมายคำพูดเดี่ยวหรือคู่
• ตัวเลข: จำนวนเต็มหรือทศนิยม เช่น 1024, -100, 0.255
• หน่วย: ประเภทตัวเลขที่มีหน่วย เช่น 45deg, 5s หรือ 10px
• เปอร์เซ็นต์: ประเภทตัวเลขเปอร์เซ็นต์ เช่น 50%
• ค่าสี: เลขฐานสิบหก, RGB, RGBA, HSL, HSLA เป็นต้น
• คีย์เวิร์ด: คำที่มีความหมายเฉพาะ เช่น auto, initial, inherit เป็นต้น

หน่วย

หน่วยใน CSS ใช้แทนค่าของคุณสมบัติ เช่น ความยาว มุม เวลา ความถี่ เป็นต้น

หน่วยความยาว:

หน่วยความยาวสัมพัทธ์:

• em: สัมพัทธ์กับขนาดฟอนต์ขององค์ประกอบแม่ 1.5em = 1.5 เท่าของขนาดฟอนต์แม่
• rem: สัมพัทธ์กับขนาดฟอนต์ขององค์ประกอบราก (html) 1rem = ขนาดฟอนต์ราก
• ex: สัมพัทธ์กับความสูงของตัวอักษรพิมพ์เล็ก “x”

ตัวอย่าง:

1
.example {
2
  font-size: 16px;
3
  padding: 1.5em;
4
  margin: 2rem;
5
  height: 2ex;
6
}

หน่วยความยาวสัมบูรณ์:

• px: พิกเซล หน่วยพื้นฐานและใช้มากที่สุดใน CSS
• in: นิ้ว, 1 นิ้ว = 96 พิกเซล
• cm: เซนติเมตร
• mm: มิลลิเมตร
• pt: พอยต์, 1pt = 1/72 นิ้ว
• pc: ไพกา, 1pc = 12pt = 16 พิกเซล

ตัวอย่าง:

1
.example {
2
  width: 200px;
3
  height: 2in;
4
  margin: 1cm;
5
  font-size: 12pt;
6
}

หน่วยเปอร์เซ็นต์สัมพัทธ์:

• %: เปอร์เซ็นต์สัมพัทธ์กับองค์ประกอบแม่

ตัวอย่าง:

1
.example {
2
  width: 50%;
3
  padding: 10%;
4
}

หน่วย viewport:

• vw: 1vw = 1% ของความกว้าง viewport
• vh: 1vh = 1% ของความสูง viewport
• vmin: ค่าที่น้อยกว่าระหว่าง vw และ vh
• vmax: ค่าที่มากกว่าระหว่าง vw และ vh

ตัวอย่าง:

1
.example {
2
  width: 50vw;
3
  height: 30vh;
4
}

หน่วยมุม:

deg (องศา):

• deg เป็นหน่วยมุมที่ใช้บ่อยที่สุด วงกลมเต็ม = 360 องศา

ตัวอย่าง:

1
.example {
2
  transform: rotate(45deg);
3
  background: linear-gradient(45deg, red, yellow);
4
}

rad (เรเดียน):

• rad วงกลมเต็ม = 2π เรเดียน

ตัวอย่าง:

1
.example {
2
  transform: rotate(1rad);
3
}

grad (เกรเดียน):

• grad วงกลมเต็ม = 400 เกรเดียน

1
.example {
2
  transform: rotate(50grad);
3
}

turn (รอบ):

• turn แทนหนึ่งรอบเต็ม = 360 องศา

1
.example {
2
  transform: rotate(0.5turn);
3
}

หน่วยเวลา:

s (วินาที)

• s เป็นหน่วยวินาที

ตัวอย่าง:

1
.base{
2
    width: 200px;
3
    height: 200px;
4
    background-color: #3498db;
5
}
6
.base:hover{
7
    background-color: #e74c3c;
8
}
9
.example{
10
    transition: background-color 1s ease;
11
}

ms (มิลลิวินาที)

• ms 1 วินาที = 1000 มิลลิวินาที

ตัวอย่าง:

1
.base{
2
    width: 200px;
3
    height: 200px;
4
    background-color: #3498db;
5
}
6
.base:hover{
7
    background-color: #e74c3c;
8
}
9

10
.example{
11
    transition: background-color 2000ms ease;
12
}

หน่วยความถี่:

Hz (เฮิรตซ์)

• เฮิรตซ์เป็นหน่วยความถี่ที่ใช้บ่อยที่สุด

ตัวอย่าง:

1
.example {
2
  animation: shake 1s infinite;
3
}

kHz (กิโลเฮิรตซ์)

• 1 kHz = 1000 Hz

ตัวอย่าง:

1
.example {
2
  audio {
3
    frequency: 5kHz;
4
  }
5
}

หน่วยความละเอียด:

dpi (จุดต่อนิ้ว)

• dpi แทนจุดต่อนิ้ว

ตัวอย่าง:

1
.example {
2
  background-image: url('image.png');
3
  background-size: 300px 200px;
4
  background-resolution: 300dpi;
5
}

dppx (จุดต่อพิกเซล)

• dppx แทนจุดต่อพิกเซลบนหน้าจอ

ตัวอย่าง:

1
.example {
2
  background-image: url('image.png');
3
  background-size: 300px 200px;
4
  background-resolution: 2dppx;
5
}

dpcm (จุดต่อเซนติเมตร)

• dpcm แทนจุดต่อเซนติเมตร

ตัวอย่าง:

1
.example {
2
  background-image: url('image.png');
3
  background-size: 2dpcm 3dpcm;
4
}

ขนาด

ขนาดใน CSS ควบคุมมิติขององค์ประกอบ

คุณสมบัติ width และ height

กำหนดความกว้างและความสูงขององค์ประกอบ

ตัวอย่าง:

1
.example {
2
  width: 300px;
3
  height: 200px;
4
}

คุณสมบัติ max-width และ max-height

กำหนดความกว้างและความสูงสูงสุด

ตัวอย่าง:

1
.example {
2
  max-width: 100%;
3
  max-height: 500px;
4
}

คุณสมบัติ min-width และ min-height:

ตัวอย่าง:

1
.example {
2
  min-width: 200px;
3
  min-height: 100px;
4
}

สี

สีคีย์เวิร์ด

สีที่แทนด้วยคีย์เวิร์ด: red (แดง), blue (น้ำเงิน), green (เขียว) เป็นต้น

ตัวอย่าง:

1
.example {
2
  color: red;
3
  background-color: blue;
4
}

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

สี RGB ในเลขฐานสิบหก 6 หรือ 3 หลัก รูปแบบ #RRGGBB หรือ #RGB

ตัวอย่าง:

1
.example {
2
  color: #ff0000;
3
  background-color: #00f;
4
}

สี RGB, RGBA

rgb() รับสามพารามิเตอร์ (0-255) rgba() เพิ่มพารามิเตอร์ความโปร่งใส (0-1)

ตัวอย่าง:

1
.example1 {
2
  color: rgb(255, 0, 0);
3
  background-color: rgb(0, 0, 255);
4
}
5

6
.example2 {
7
  color: rgba(255, 0, 0, 0.5);
8
  background-color: rgba(0, 0, 255, 0.7);
9
}

สี HSL, HSLA

hsl() รับค่าเฉดสี (0-360), ความอิ่มตัว (0%-100%) และความสว่าง (0%-100%) hsla() เพิ่มความโปร่งใส (0-1)

ตัวอย่าง:

1
.example1 {
2
  color: hsl(0, 100%, 50%);
3
  background-color: hsl(240, 100%, 50%);
4
}
5

6
.example2 {
7
  color: hsla(0, 100%, 50%, 0.5);
8
  background-color: hsla(240, 100%, 50%, 0.7);
9
}

ตารางสี RGB (oschina.net)