Ở bài học này, chúng ta sẽ tìm hiểu về cách sắp xếp và căn chỉnh văn bản. Đây là những khái niệm rất quan trọng trong CSS và sẽ giúp chúng ta nâng cao kỹ năng lập trình.
Thay đổi kích thước và phông chữ
Để thay đổi kích thước của chữ viết, chúng ta sử dụng thuộc tính font-size trong CSS. Thuộc tính này cho phép chúng ta điều chỉnh kích thước của chữ theo nhiều cách khác nhau.
-
Với kích thước tuyệt đối (
font-size: 14px) - chúng ta dùng đơn vị là pixel, cm hoặc mm để xác định kích thước cụ thể của chữ. Tuy nhiên, nên sử dụng cách này một cách cẩn thận để tránh việc chữ quá nhỏ không đọc được trên một số màn hình. -
Với kích thước tương đối (
font-size: 80%) - chúng ta sử dụng %, "em" hoặc "ex" để tạo ra một giải pháp linh hoạt. Điều này cho phép chữ tự động điều chỉnh kích thước theo cài đặt của người dùng.
Dưới đây là ví dụ về mã trong tệp .css sử dụng kích thước tuyệt đối và tương đối:
p {
font-size: 14px; /* Khoảng cách giữa các dòng là 14px */
}
h1 {
font-size: 40px; /* Khoảng cách giữa các dòng là 40px */
}Sau khi áp dụng mã CSS này, chúng ta sẽ nhận được kết quả như sau:
Ngoài ra, chúng ta cũng có thể sử dụng các giá trị khác nhau như "small", "large" hoặc "medium" để thay đổi kích thước chữ.
Thay đổi phông chữ
Trong CSS, chúng ta có thể thay đổi phông chữ bằng cách sử dụng thuộc tính font-family. Điều này cho phép chúng ta xác định phông chữ cho mỗi phần tử trong trang web của chúng ta.
Dưới đây là cú pháp sử dụng thuộc tính font-family:
the {
font-family: tenPhongChu;
}Để tránh việc người dùng không có cùng phông chữ với chúng ta, chúng ta có thể đưa ra nhiều phông chữ có thể sử dụng, được phân tách bởi dấu phẩy:
the {
font-family: tenPhongChu1, tenPhongChu2, tenPhongChu3, tenPhongChu4;
}Trình duyệt sẽ cố gắng sử dụng phông chữ đầu tiên, nếu không có sẵn thì sẽ thử phông chữ thứ hai và tiếp tục như vậy. Cuối cùng, nếu không tìm thấy phông chữ thích hợp, trình duyệt sẽ chuyển sang phông chữ mặc định, thường là "serif" hoặc "sans-serif".
Dưới đây là danh sách các phông chữ thông dụng mà chúng ta có thể sử dụng:
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
Sau đây là hình ảnh của đoạn văn bản hiển thị trong các phông chữ khác nhau:
Và đây là cú pháp để sử dụng các phông chữ này trong tệp CSS của chúng ta:
p {
font-family: "Arial", "Verdana", sans-serif;
}
h1 {
font-family: "Impact", "Arial Black", Arial, Verdana, sans-serif;
}Thường thì chúng ta sử dụng 2 hoặc 3 phông chữ khác nhau để đảm bảo rằng ít nhất một trong số chúng tồn tại trên máy người dùng.
Sắp xếp và căn chỉnh văn bản
CSS cho phép chúng ta sắp xếp và căn chỉnh văn bản theo nhiều cách khác nhau. Dưới đây là một số thuộc tính phổ biến để thực hiện điều này:
Căn lề
text-align: left: căn lề văn bản theo cạnh trái, đây là giá trị mặc định.text-align: center: căn lề văn bản theo giữa.text-align: right: căn lề văn bản theo cạnh phải.text-align: justify: căn lề văn bản cả hai bên, đồng thời giữ cho văn bản thẳng hàng và không có khoảng trống bên trái và bên phải. Thuộc tính này thường được sử dụng trong các trang báo.
Thả trôi
float: left: thả trôi văn bản về phía trái.float: right: thả trôi văn bản về phía phải.
Để dừng việc thả trôi và đưa văn bản về dòng mới, chúng ta sử dụng thuộc tính clear: both:
p {
clear: both;
}Tóm lại, CSS cho phép chúng ta tùy chỉnh kích thước, phông chữ và vị trí của văn bản. Bằng cách sử dụng các thuộc tính như font-size, font-family, text-align và float, chúng ta có thể tạo ra các hiệu ứng và sắp xếp văn bản một cách linh hoạt và chuyên nghiệp.
