Khóa học IT CSS Cơ bản 021_Kiểu giá trị, Đơn vị, Kích thước, Màu sắc

Kiểu số

Trong CSS, các giá trị khác nhau được sử dụng trong các thuộc tính khác nhau. Các kiểu số phổ biến như sau:

• Chuỗi: Văn bản được bao bởi dấu nháy đơn hoặc kép, cần đảm bảo tính nhất quán của dấu nháy.
• Số: Số nguyên hoặc số thập phân. Như 1024, -100, 0.255. Tránh sử dụng số không có đơn vị, trừ khi biểu thị giá trị số thuần túy.
• Đơn vị: Kiểu giá trị đơn vị, ví dụ 45deg, 5s hoặc 10px.
• Phần trăm: Kiểu giá trị phần trăm, ví dụ 50%. Giá trị phần trăm thường được sử dụng cho chiều rộng, chiều cao và các thuộc tính khác.
• Giá trị màu: Hệ thập lục phân, RGB, RGBA, HSL, HSLA, v.v. Sử dụng cách biểu diễn màu phù hợp, xem xét độ tương phản màu và khả năng tiếp cận, tránh sử dụng màu quá sáng hoặc quá giống nhau.
• Từ khóa: Các từ có ý nghĩa cụ thể, như auto, initial, inherit, v.v. Hiểu ý nghĩa và chức năng của từ khóa để đảm bảo sử dụng đúng.

Đơn vị

Đơn vị trong CSS được sử dụng để biểu thị giá trị của chiều dài, góc, thời gian, tần số và các thuộc tính khác.

Đơn vị độ dài:

Trong CSS, đơn vị độ dài được sử dụng để biểu thị kích thước và khoảng cách, có thể áp dụng cho các thuộc tính khác nhau như chiều rộng, chiều cao, margin, padding, v.v.

Đơn vị độ dài tương đối:

• em: Tương đối với kích thước phông chữ của phần tử cha. 1.5em nghĩa là kích thước phông chữ của phần tử bằng 1.5 lần kích thước phông chữ của phần tử cha.
• rem: Tương đối với kích thước phông chữ của phần tử gốc (phần tử html). 1rem bằng kích thước phông chữ của phần tử gốc.
• ex: Thường được sử dụng cho kích thước dọc, tương đối với chiều cao của chữ cái thường “x”. (Trong hầu hết các phông chữ, ký tự x thường bằng một nửa chiều cao ký tự tối đa)

Ví dụ:

1
.example {
2
  font-size: 16px;
3
  padding: 1.5em; /* 1em tương đương 24px */
4
  margin: 2rem; /* 2rem tương đương 32px */
5
  height: 2ex; /* Chiều cao bằng một nửa kích thước phông chữ, tức là 8px, tương đương 16px */
6
}

Đơn vị độ dài tuyệt đối:

• px: Pixel là đơn vị cơ bản nhất trên màn hình và là đơn vị được sử dụng rộng rãi nhất trong CSS. Kích thước pixel phụ thuộc vào độ phân giải màn hình.
• in: Inch là đơn vị độ dài, thường được sử dụng để biểu thị kích thước của màn hình hoặc thiết bị điện tử khác. 1 inch bằng 96 pixel.
• cm: Centimet là đơn vị độ dài, thường được sử dụng để biểu thị kích thước của vật thể.
• mm: Milimet là đơn vị độ dài, thường được sử dụng để biểu thị kích thước của giấy hoặc vật liệu in ấn khác.
• pt: Viết tắt của point, đơn vị được sử dụng trong in ấn truyền thống. 1pt bằng 1/72 inch, khoảng 0.352778 milimet.
• pc: Viết tắt của pica, cũng là đơn vị được sử dụng trong in ấn truyền thống. 1pc bằng 12pt, khoảng 4.21752 milimet, 1pc bằng 16 pixel. Được khuyến nghị cho bảng kiểu in hoặc tình huống cần kích thước in chính xác.

Ví dụ:

1
.example {
2
  width: 200px;
3
  height: 2in; /* 2 inch, bằng 192px */
4
  margin: 1cm; /* 1 centimet */
5
  font-size: 12pt; /* 12 point */
6
}

Đơn vị phần trăm tương đối:

• %: Phần trăm biểu thị kích thước phần trăm tương đối với phần tử cha. Ví dụ, width: 50% nghĩa là chiều rộng của phần tử bằng 50% chiều rộng của phần tử cha.

Ví dụ:

1
.example {
2
  width: 50%; /* Chiều rộng bằng 50% chiều rộng phần tử cha */
3
  padding: 10%; /* Padding bằng 10% chiều rộng phần tử */
4
}

Đơn vị viewport:

• vw: Phần trăm chiều rộng viewport, 1vw bằng 1% chiều rộng viewport.
• vh: Phần trăm chiều cao viewport, 1vh bằng 1% chiều cao viewport.
• vmin: Giá trị nhỏ hơn giữa vw và vh.
• vmax: Giá trị lớn hơn giữa vw và vh.

Ví dụ:

1
.example {
2
  width: 50vw; /* Chiều rộng bằng 50% chiều rộng viewport */
3
  height: 30vh; /* Chiều cao bằng 30% chiều cao viewport */
4
}

Đơn vị góc:

Trong CSS, đơn vị góc được sử dụng để biểu thị giá trị góc trong các thuộc tính xoay, biến đổi, v.v.

deg (độ):

• deg độ là đơn vị phổ biến nhất cho góc. Một vòng tròn có tổng góc là 360 độ.
• Được sử dụng để biểu thị xoay, góc gradient, v.v.

Ví dụ:

1
.example {
2
  transform: rotate(45deg); /* Xoay phần tử 45 độ */
3
  background: linear-gradient(45deg, red, yellow); /* Nền gradient 45 độ */
4
}

rad (radian):

• rad radian là tỷ lệ của chu vi với bán kính. Một vòng tròn có tổng cộng 2π radian.
• Được sử dụng trong một số hàm toán học, biến đổi, v.v.

Ví dụ:

1
.example {
2
  transform: rotate(1rad); /* Xoay phần tử 1 radian */
3
}

grad (gradian):

• grad biểu thị đơn vị gradian. Một vòng tròn có tổng cộng 400 gradian.
• Tương tự như độ, được sử dụng để biểu thị xoay, góc gradient, v.v.

1
.example {
2
  transform: rotate(50grad); /* Xoay phần tử 50 gradian */
3
}

turn:

• turn biểu thị số vòng quay hoàn chỉnh, bằng 360 độ.
• Được sử dụng để biểu thị số vòng xoay.

1
.example {
2
  transform: rotate(0.5turn); /* Xoay nửa vòng, 180 độ */
3
}

Đơn vị thời gian:

Trong CSS, đơn vị thời gian được sử dụng để biểu thị giá trị thời gian trong các thuộc tính animation, transition, độ trễ animation, v.v.

s (giây)

• s biểu thị đơn vị giây.
• Được sử dụng để biểu thị thời gian animation, thời gian transition, v.v.

Ví dụ:

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; /* Định nghĩa thuộc tính và thời gian transition */
11
}

ms (mili giây)

• ms biểu thị đơn vị mili giây. 1 giây bằng 1000 mili giây.
• Được sử dụng cho kiểm soát thời gian chính xác hơn.

Ví dụ:

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; /* Định nghĩa thuộc tính và thời gian transition */
12
}

Đơn vị tần số:

Trong CSS, đơn vị tần số được sử dụng để biểu thị tần số của các sự kiện tuần hoàn. Đơn vị tần số phổ biến là Hz (Hertz), biểu thị số chu kỳ mỗi giây.

Hz (Hertz)

• Hertz là đơn vị phổ biến nhất cho tần số, biểu thị số chu kỳ mỗi giây.
• Được sử dụng để biểu thị tần số của hiệu ứng rung, xoay trong animation.

Ví dụ:

1
.example {
2
  animation: shake 1s infinite; /* Tần số rung là 1 Hertz, lặp vô hạn */
3
}

kHz (kilohertz)

• Kilohertz là đơn vị tần số biểu thị hàng nghìn chu kỳ mỗi giây. 1 kHz bằng 1000 Hz.
• Được sử dụng trong một số kịch bản tần số cao, như tần số âm thanh.

Ví dụ:

1
.example {
2
  audio {
3
    frequency: 5kHz; /* Tần số âm thanh là 5 kilohertz */
4
  }
5
}

Đơn vị độ phân giải:

Trong CSS, đơn vị độ phân giải được sử dụng để biểu thị mật độ pixel của hình ảnh hoặc bản in.

dpi (điểm trên mỗi inch)

• dpi biểu thị số điểm trên mỗi inch, tức là mật độ pixel trên mỗi inch của hình ảnh hoặc bản in.
• Thường được sử dụng trong bảng kiểu in để xác định độ rõ nét của hình ảnh khi in.

Ví dụ:

1
.example {
2
  background-image: url('image.png');
3
  background-size: 300px 200px;
4
  background-resolution: 300dpi; /* Mật độ pixel của hình ảnh khi in là 300dpi */
5
}

dppx (điểm trên mỗi pixel)

• dppx biểu thị số điểm trên mỗi pixel, tức là mật độ pixel trên mỗi pixel vật lý trên màn hình.
• Thường được sử dụng trong thiết kế responsive để thích ứng với các mật độ pixel màn hình khác nhau.

Ví dụ:

1
.example {
2
  background-image: url('image.png');
3
  background-size: 300px 200px;
4
  background-resolution: 2dppx; /* Hình ảnh hiển thị trên màn hình mật độ pixel 2x */
5
}

dpcm (điểm trên mỗi centimet)

• dpcm là đơn vị độ phân giải biểu thị số điểm trên mỗi centimet.
• Được sử dụng trong bảng kiểu in hoặc media query để điều chỉnh kiểu và hình ảnh để thích ứng với các độ phân giải hoặc thiết bị in khác nhau.

Ví dụ:

1
.example {
2
  background-image: url('image.png');
3
  background-size: 2dpcm 3dpcm; /* Hình ảnh hiển thị với độ phân giải ngang 2 điểm/cm và độ phân giải dọc 3 điểm/cm */
4
}

Kích thước

Kích thước trong CSS có thể được sử dụng để kiểm soát kích thước của phần tử.

Thuộc tính width và height

Được sử dụng để đặt chiều rộng và chiều cao của phần tử, thường sử dụng các đơn vị độ dài như pixel (px), phần trăm (%), em, rem, v.v.

Ví dụ:

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

Thuộc tính max-width và max-height

Được sử dụng để đặt chiều rộng và chiều cao tối đa của phần tử, thường sử dụng các đơn vị độ dài như pixel (px), phần trăm (%), em, rem, v.v.

Ví dụ:

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

Thuộc tính min-width và min-height:

Ví dụ:

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

Màu sắc

Màu từ khóa

Màu sắc được biểu thị bằng một số từ khóa được định nghĩa trước, ví dụ: red (đỏ), blue (xanh dương), green (xanh lá), v.v.

Ví dụ:

1
.example {
2
  color: red; /* Đỏ */
3
  background-color: blue; /* Xanh dương */
4
}

Màu thập lục phân

Màu RGB được biểu thị bằng số thập lục phân sáu chữ số hoặc ba chữ số. Định dạng sáu chữ số là #RRGGBB, trong đó RR, GG, BB lần lượt biểu thị giá trị màu đỏ, xanh lá và xanh dương. Định dạng ba chữ số là #RGB, mỗi ký tự biểu thị một kênh màu.

Ví dụ:

1
.example {
2
  color: #ff0000; /* Đỏ */
3
  background-color: #00f; /* Xanh dương */
4
}

Màu RGB và RGBA

Màu sắc được biểu thị bằng hàm rgb(), nhận ba tham số biểu thị giá trị màu đỏ, xanh lá và xanh dương, phạm vi từ 0-255. rgba() tương tự như rgb(), nhưng có thêm tham số độ trong suốt, phạm vi từ 0-1.

Ví dụ:

1
.example1 {
2
  color: rgb(255, 0, 0); /* Đỏ */
3
  background-color: rgb(0, 0, 255); /* Xanh dương */
4
}
5

6
.example2 {
7
  color: rgba(255, 0, 0, 0.5); /* Đỏ bán trong suốt */
8
  background-color: rgba(0, 0, 255, 0.7); /* Xanh dương bán trong suốt */
9
}

Màu HSL và HSLA

Màu sắc được biểu thị bằng hàm hsl(), nhận ba tham số biểu thị hue (sắc độ), saturation (độ bão hòa) và lightness (độ sáng). Hue có phạm vi 0-360, saturation và lightness có phạm vi 0%-100%. hsla() tương tự như hsl(), nhưng có thêm tham số độ trong suốt, phạm vi từ 0-1.

Ví dụ:

1
.example1 {
2
  color: hsl(0, 100%, 50%); /* Đỏ */
3
  background-color: hsl(240, 100%, 50%); /* Xanh dương */
4
}
5

6
.example2 {
7
  color: hsla(0, 100%, 50%, 0.5); /* Đỏ bán trong suốt */
8
  background-color: hsla(240, 100%, 50%, 0.7); /* Xanh dương bán trong suốt */
9
}

Bảng tham chiếu màu RGB (oschina.net)