[BÀI 3]Các giá trị màu và đơn vị đo lường trong CSS

Ở bài trước chúng ta đã nhắc đến các thuộc tính và giá trị trong CSS. Bài hôm nay chúng ta sẽ đi tìm hiểu về các giá trị và đơn vị đo lường trong CSS.

Trong CSS có 2 loại đơn vị đo lường :

Absolute Units – đơn vị css tuyết đối.
Relative Units – đơn vị css tương đối.

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

Là các đơn vị đã được định nghĩa sẵn và đại diện cho các đơn vị đo lường vật lý. Các đơn vị này không bị phụ thuộc và không hề thay đổi bởi bất cứ tác động nào. Ví dụ như đơn vị pixel, point..

Pixel (px): Được sử dụng trên màn hình hiển thị, một px sẽ tương đương với một điểm ảnh trên màn hình hiển thị. Chất lượng của điểm ảnh sẽ hoàn toàn khác nhau trên một số thiết bị, ví dụ như một điểm ảnh trên các thiết bị máy tính sẽ khác với một điểm ảnh trên mobile
Point (pt): Đơn vị point được tính 1 inch = 72pt.

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

Là các đơn vị đo lường được sử dụng trong CSS ở mức tương đối, nghĩa là nó có thể sẽ được thay đổi bởi các thành phần khác như thay đổi phụ thuộc vào kích thước màn hình. Các đơn vị tương đối được sử dụng trong CSS gồm có:

Em dash (em): Độ rộng của kí tự trong font chữ đang sử dụng.
Height (ex): Độ cao của kí tự thường trong font chữ đang sử dụng.
Percentages (%): Là đơn vị tham chiếu tỷ lệ so với một phần tử mẹ của nó dựa vào kích thước. Khá trừu tượng phải không các bạn. Ví dụ bạn có một cái màn hình với kích thước là 1200px và khung bên trong có kích thước là 50% thì nó sẽ là 600px. Nếu bạn sử dụng đơn vị phần trăm này để gán kích thước cho thẻ <html> trên website thì nó sẽ thay đổi theo kích thước màn hình. Bạn nên quan tâm vì sẽ sử dụng trong website reponsive rất nhiều

Các giá trị màu:

Có nhiều cách khác nhau để định nghĩa 1 màu. Nhưng kết quả chúng trả về là như nhau

Có các hệ màu sau:

+ # RRGGBB: Giá trị thập lục phân, đại diện cho các thành phần đỏ (RR), xanh lá (GG) và xanh da trời (BB)

+ Rgb (R #, G #, B #): Giá trị nguyên của thành phần đỏ, xanh lá và xanh da trời.

+ Rgb (R%, G%, B%): Giá trị phần trăm của thành phần đỏ, xanh lá và xanh da trời.

+ Tên màu: Tên màu bạn muốn chọn bằng tiếng anh.

>> Chia sẻ cách hoc lap trinh android cơ bản

Bảng màu tham khảo

Ví dụ tham khảo :

<!DOCTYPE html>
<html>
<head>
<title>Tùy chỉnh giao diện HTML bằng CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<style type="text/css">

div{
width: 400px;
color: red;
border: solid 1px;
font-size: 2em;
}
p{
width: 500pt;
color: blue;
border: solid 1px;
font-size: 3em;
}
p>u{
font-size: 5ex;
}
</style>
<body>
<div>
Chào mừng bạn đến với website laptrinhphp.com.vn
</div>
<p>
<u>Devpro.edu.vn</u><br>
Chào mừng bạn đến với devpro Việt Nam
</p>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Tùy chỉnh giao diện HTML bằng CSS</title>

</head>

div{

width: 400px;

color: red;

border: solid 1px;

font-size: 2em;

}

width: 500pt;

color: blue;

border: solid 1px;

font-size: 3em;

}

p>u{

font-size: 5ex;

}

</style>

<body>

<div>

Chào mừng bạn đến với website laptrinhphp.com.vn

</div>

<p>

<u>Devpro.edu.vn</u><br>

Chào mừng bạn đến với devpro Việt Nam

</p>

</body>

</html>

Kết quả :

Để tìm hiểu chi tiết hơn, các bạn có thể tham khảo các khóa học tại đây.!!!

Xem thêm khóa học lập trình:

Địa chỉ học lập trình php ở đâu tốt?
Cách tự học lập trình php tài nhà không tốn chi phí

Ở bài trước chúng ta đã nhắc đến các thuộc tính và giá trị trong CSS. Bài hôm nay chúng ta sẽ đi tìm hiểu về các giá trị và đơn vị đo lường trong CSS.

Related Posts

About The Author