Thiết kế typographic tốt là một phần quan trọng của một trang web thành công. CSS cho phép bạn kiểm soát tốt sự xuất hiện của văn bản trên các trang web mà bạn tạo ra. Điều này bao gồm khả năng thay đổi màu của bất kỳ phông chữ nào bạn sử dụng.
Màu phông chữ có thể được thay đổi bằng cách sử dụng một bảng định kiểu bên ngoài , một biểu định kiểu nội bộ , hoặc nó có thể được thay đổi bằng cách sử dụng kiểu dáng nội tuyến trong tài liệu HTML. Các phương pháp hay nhất quy định rằng bạn nên sử dụng một biểu định kiểu ngoài cho các kiểu CSS của bạn. Bảng kiểu nội bộ, là các kiểu được viết trực tiếp trong "đầu" của tài liệu của bạn, thường chỉ được sử dụng cho các trang web nhỏ, một trang. Nên tránh các kiểu nội tuyến vì chúng giống như các thẻ "phông chữ" cũ mà chúng ta đã xử lý từ nhiều năm trước. Những kiểu nội tuyến này làm cho nó rất khó quản lý kiểu phông chữ vì bạn sẽ cần phải thay đổi chúng ở mọi thể hiện của kiểu nội tuyến.
Trong bài viết này, bạn sẽ tìm hiểu cách thay đổi màu phông chữ bằng cách sử dụng một biểu định kiểu bên ngoài và một kiểu được sử dụng trong một thẻ đoạn. Bạn có thể áp dụng cùng thuộc tính kiểu để thay đổi màu phông chữ trên bất kỳ thẻ nào bao quanh văn bản, bao gồm thẻ
.Thêm kiểu để thay đổi màu phông chữ
Trong ví dụ này, bạn sẽ cần phải có một tài liệu HTML để đánh dấu trang của bạn và một tệp CSS riêng biệt được đính kèm với tài liệu đó. Tài liệu HTML có thể sẽ tạo ra một số phần tử trong đó. Cái mà chúng ta quan tâm với mục đích của bài viết này là phần tử đoạn.
Dưới đây là cách thay đổi màu chữ của văn bản bên trong các thẻ đoạn bằng cách sử dụng bảng định kiểu bên ngoài của bạn.
Giá trị màu có thể được biểu thị dưới dạng từ khóa màu, số màu RGB hoặc số màu hệ thập lục phân.
- Thêm thuộc tính style cho tag paragraph:
- p {}
- Đặt thuộc tính màu theo kiểu. Đặt dấu hai chấm sau thuộc tính đó:
- p {color:}
- Sau đó, thêm giá trị màu của bạn sau thuộc tính. Đảm bảo kết thúc giá trị đó bằng dấu chấm phẩy:
- p {color: black;}
Các đoạn trong trang của bạn bây giờ sẽ có màu đen.
Ví dụ này sử dụng từ khóa màu - "đen". Đó là một cách để thêm màu sắc trong CSS, nhưng nó rất hạn chế. Việc sử dụng từ khóa cho "đen" và "trắng" thật đơn giản vì hai màu đó rất cụ thể, nhưng điều gì xảy ra nếu bạn sử dụng các từ khóa như "đỏ", "xanh" hoặc "xanh"? Chính xác thì bạn sẽ nhận được bóng râm nào của màu đỏ, xanh dương hoặc xanh lá cây? Bạn không thể chỉ định chính xác màu nào bạn muốn với từ khóa. Đây là lý do tại sao giá trị thập lục phân thường được sử dụng thay cho các từ khóa màu.
p {color: # 000000; }
Kiểu CSS này cũng sẽ đặt màu của các đoạn văn của bạn thành màu đen, bởi vì mã hex của # 000000 chuyển thành màu đen. Bạn thậm chí có thể sử dụng viết tắt với giá trị hex đó và viết nó như chỉ # 000 và bạn sẽ nhận được cùng một điều.
Như chúng tôi đã đề cập, các giá trị hex hoạt động tốt khi bạn cần một màu không chỉ đơn thuần là đen hoặc trắng. Đây là một ví dụ:
p {color: # 2f5687; }
Giá trị hex này sẽ đặt đoạn văn thành màu xanh, nhưng không giống như từ khóa "xanh", mã hex này cung cấp cho bạn khả năng thiết lập một màu xanh rất cụ thể - có khả năng là nhà thiết kế chọn khi họ tạo giao diện cho Trang web này. Trong trường hợp này, màu sắc sẽ là một màu xanh trung bình.
Cuối cùng, bạn cũng có thể sử dụng các giá trị màu RGBA cho màu phông chữ. RGCA hiện được hỗ trợ trong tất cả các trình duyệt hiện đại, vì vậy bạn có thể sử dụng các giá trị này với một chút lo lắng rằng nó sẽ không được hỗ trợ trong trình duyệt web, nhưng bạn cũng có thể đặt dự phòng dễ dàng.
p {color: rgba (47,86,135,1); }
Giá trị RGBA này giống với màu xanh lam được chỉ định trước đó. 3 giá trị đầu tiên đặt giá trị Red, Green và Blue và số cuối cùng là cài đặt alpha. Nó được đặt thành "1", có nghĩa là "100%", vì vậy màu này sẽ không có độ trong suốt. Nếu bạn đặt số đó thành số thập phân, như .85, nó sẽ chuyển thành độ mờ đục 85% và màu sẽ hơi trong suốt.
Nếu bạn muốn chống lại các giá trị màu của bạn, bạn sẽ làm điều này:
p {
màu: # 2f5687;
màu sắc: rgba (47,86,135,1);
}
Cú pháp này đặt mã hex đầu tiên. Sau đó nó sẽ ghi đè giá trị đó bằng số RGBA. Điều này có nghĩa là bất kỳ trình duyệt cũ nào không hỗ trợ RGBA sẽ nhận được giá trị đầu tiên và bỏ qua giá trị thứ hai. Các trình duyệt hiện đại sẽ sử dụng thứ hai trên mỗi tầng CSS.