1.1 Màu sắc
CSS (Cascading Style Sheets) cung cấp nhiều thuộc tính để định kiểu văn bản. Trong số đó, các thuộc tính chính là color, font-size và font-weight. Những thuộc tính này cho phép bạn kiểm soát màu sắc của văn bản, kích thước và độ dày của phông chữ tương ứng. Hãy cùng xem chi tiết từng thuộc tính này.
Thuộc tính color xác định màu sắc của văn bản. Nó có thể được thiết lập thông qua các định dạng màu khác nhau, bao gồm tên màu, giá trị thập lục phân, RGB, RGBA, HSL và HSLA.
Ví dụ về cách sử dụng
1. Tên màu:
p {
color: red;
}
2. Giá trị thập lục phân:
p {
color: #ff0000;
}
3. RGB và RGBA:
p {
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5); /* Đỏ trong suốt */
}
4. HSL và HSLA:
p {
color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.5); /* Đỏ trong suốt */
}
Ví dụ sử dụng trong HTML:
p {
color: #3498db; /* Màu xanh dương */
}
<body>
<p>Văn bản này sẽ có màu xanh dương.</p>
</body>
1.2 Thuộc tính font-size
Thuộc tính font-size xác định kích thước của văn bản. Giá trị có thể được chỉ định bằng các đơn vị khác nhau như pixel (px), đơn vị tương đối (em, rem, %), "tương đương pixel" (mm, cm, pt, pc), vw và vh (chiều rộng của viewport và chiều cao của viewport), và các đơn vị khác.
Ví dụ về cách sử dụng
1. Pixel:
p {
font-size: 16px;
}
2. Đơn vị tương đối:
%, em, rem
p {
font-size: 150%; /* 150% kích thước phông chữ cơ bản */
font-size: 1.5em; /* 1.5 lần kích thước phông chữ cơ bản */
font-size: 1.5rem; /* kích thước so với kích thước phông chữ của phần tử <html> */
}
3. Đơn vị "viewport":
p {
font-size: 2vw; /* 2% chiều rộng của viewport */
font-size: 2vh; /* 2% chiều cao của viewport */
}
Ví dụ sử dụng trong HTML:
p {
font-size: 18px; /* Kích thước văn bản 18 pixel */
}
<body>
<p>Văn bản này sẽ có kích thước 18 pixel.</p>
</body>
1.3 Thuộc tính font-weight
Thuộc tính font-weight xác định độ dày của văn bản. Giá trị có thể được chỉ định bằng các từ khóa (normal, bold, bolder, lighter) hoặc giá trị số từ 100 đến 900, trong đó 400 tương ứng với normal và 700 tương ứng với bold.
Ví dụ về cách sử dụng
1. Từ khóa:
p {
font-weight: bold;
}
2. Giá trị số:
p {
font-weight: 300; /* Văn bản nhẹ */
font-weight: 700; /* Tương đương bold */
}
Ví dụ sử dụng trong HTML:
p {
font-weight: 700; /* Văn bản đậm */
}
<body>
<p>Văn bản này sẽ có phông chữ đậm.</p>
</body>
GO TO FULL VERSION