Khám phá thêm về CSS
Hãy khám phá nhiều cách khác mà CSS có thể giúp việc quản lý nội dung của bạn dễ dàng hơn và nội dung của bạn thú vị hơn cho độc giả của bạn.
Ý kiến
Giống như bất kỳ ngôn ngữ máy tính nào, CSS hỗ trợ chú thích. Để chú thích trong một phần của CSS, bạn sẽ sử dụng /* comment */. Biểu /* xác định điểm bắt đầu của chú thích và */ dấu kết thúc. Chú thích CSS có thể bao gồm nhiều dòng văn bản. Chú thích là một cách tuyệt vời để dành ghi chú cho chính bạn hoặc nhà phát triển khác hoặc ghi chú trong khi học ngôn ngữ.
Quan trọng
Chú thích CSS là công khai và có thể truy nhập bởi cả trình duyệt và người dùng website của bạn. Lưu trữ thông nhạy cảm trong chú thích.
Chú thích CSS được định dạng khác với chú thích HTML. Chú thích trong HTML sử dụng cú <!--comment--> pháp.
Đặt phông chữ
Bạn có thể dùng CSS để cho trình duyệt biết phông chữ nào bạn muốn dùng cho văn bản cụ thể. Đôi khi bạn muốn sử dụng Arial để có thể đọc được hoặc một cái gì đó fancier cho phong cách. Hình ảnh sau đây hiển thị một số văn bản trong Arial và văn bản khác trong phông chữ có tên là "Tác động".
Tùy chọn phổ biến nhất để đặt phông chữ sử dụng trên trang là font-family.
font-family thường được đặt thành danh sách phông chữ, cho phép trình duyệt sử dụng phông chữ đầu tiên được liệt kê mà phông chữ đó có thể hỗ trợ. Ví dụ, một cài đặt các Tahoma, Verdana, sans-serif nỗ lực sử dụng Tahoma, tiếp theo là Verdana, và cuối cùng là phông chữ sans serif chung.
Bạn cũng có thể sử dụng các tùy chọn khác, chẳng hạn như kiểu, độ dày và trang trí.
font-style được sử dụng để làm nghiêng văn bản bằng cách đặt giá trị thành italic.
font-weight hỗ trợ các cài đặt đậm khác nhau, bold là phổ biến nhất. Và cuối cùng, text-decoration được sử dụng để underline, overline, hoặc line-through bản.
| CSS | Kết quả |
|---|---|
font-weight: bold; |
Demo |
font-style: italic; |
Demo |
text-decoration: line-through; |
|
text-decoration bạn có thể cảm thấy khác với các tùy chọn khác được sử dụng để sửa đổi hiển thị phông chữ. Sự khác biệt chính là text-decoration được sử dụng để áp dụng kiểu xung quanh hoặc trên văn bản nhưng không sửa đổi phông chữ thực tế. Chữ đậm và nghiêng đang sửa đổi phông chữ.
Ghi
Thường nên tránh sử dụng gạch chân trên trang web vì văn bản có thể xuất hiện như một siêu liên kết.
Kích thước phông chữ
Biểu font-size cho phép bạn chỉ báo cỡ phông bạn muốn sử dụng. CSS cung cấp khả năng sử dụng kích thước tuyệt đối hoặc tương đối. Kích thước tuyệt đối thường được đặt bằng pixel và luôn sử dụng kích thước được chỉ định. Đổi cỡ tương đối có thể dựa trên kích cỡ mặc định cho trình duyệt và được đo theo phần trăm hoặc dựa trên kích cỡ của phần tử tham chiếu.
Ghi
Cỡ phông mặc định cho nhiều trình duyệt là 16 điểm ảnh.
Có thể đo kích cỡ tuyệt đối theo điểm ảnh và được biểu thị bằng CSS bằng cách sử dụng px. Để đặt phông chữ thành 14 điểm ảnh, bạn có thể sử dụng chỉ font-size: 14px;.
Đổi cỡ tương đối cho phông chữ thường được đo bằng em hoặc rem.
em phần tử và có liên quan đến phần tử mẹ (em) hoặc gốc (rem). Gốc là phần tử html gốc.
1em hoặc 1rem bằng kích cỡ của phần tử mẹ hoặc gốc, trong khi 2em hoặc 2em sẽ tăng gấp đôi kích cỡ. Vì kích cỡ màn hình có thể khác nhau nên thường là tốt nhất bạn nên sử dụng chỉnh cỡ tương đối bất cứ khi nào có thể.
Xem xét HTML và CSS sau đây làm ví dụ:
<html>
<body>
<div>Sample text</div>
</body>
</html>
html {
font-size: 18px;
}
div {
font-size: 14px;
}
Nếu phần div tử là 14 pixel vì phần tử 1em là và div được đặt thành , 14pxtrong khi 1rem sẽ là 18 pixel vì gốc html được đặt thành 18px.
1.5em cho phần tử div sẽ là 21 pixel (14 * 1,5 = 21), và 1.5rem sẽ là 27 pixel (18 * 1,5 = 27). Bạn có thể sử em và rem đảm bảo phần còn lại của thang đo trang khi bạn cập nhật kích cỡ gốc hoặc kích cỡ gốc.
Màu sắc
Bạn có thể đặt màu phông bằng cách sử dụng thuộc color phông chữ.
color có thể được đặt thành các giá trị RGB (đỏ, lục, lam) hoặc một trong nhiều màu có tên như black hoặc lightgray.
Giá trị RGB trong CSS có thể là các giá trị hex có tiền tố #, hoặc giá trị từ 0 đến 255 bên trong hàm rgb. Để đặt màu thành màu nâu mặc định, bạn nên sử dụng color: brown;. Đối với sắc tía tùy chỉnh, bạn có thể sử dụng color: #7462e0.
/* named value */
div {
color: brown;
}
/* RGB hex value */
h1 {
color: #7462e0;
}
/* RGB function */
h2 {
color: rgb(105, 6, 19);
}
Quan trọng
Lựa chọn màu sắc nên luôn xem xét những người bị thiếu thị lực màu. Bạn có thể sử dụng các công cụ như an toàn màu sắc để hỗ trợ trong việc lựa chọn màu sắc tương phản để đảm bảo trang web của bạn có thể truy cập được cho tất cả người dùng.
Như bạn có thể nghi ngờ, có hàng tá màu có tên sẵn dùng và các giá trị RGB cung cấp một tập hợp các tùy chọn vô hạn. Các trình soạn thảo như vscode.dev hoặc Mã Visual Studio thể giúp xác định các giá trị màu có sẵn. Cả hai trình chỉnh sửa đều hiển thị bản xem trước mẫu màu trong CSS của bạn. Nếu bạn di chuột qua mẫu màu, bạn sẽ thấy một bộ chọn màu mà bạn có thể sử dụng để đặt màu bạn muốn.
