Thay đổi loại phông chữ và màu sắc được hiển thị trên một trang web

Lưu ý: Trang này có liên quan đến việc thay đổi loại phông chữ, kích thước và màu sắc trên trang web. Đối với Microsoft Word, hãy xem trang của chúng tôi về cách thay đổi màu phông chữ, kích thước hoặc nhập vào Word.

Tài liệu này chứa các hướng dẫn về cách thay đổi phông chữ và màu sắc của nó trên trang web. Cú pháp thích hợp di chuyển về phía trước là sử dụng Cascading Style Sheets cùng với các bộ chọn lớp hoặc ID thay vì thuộc tính kiểu thẻ nội tuyến hoặc thẻ phông chữ không được dùng nữa. Mặc dù, điều đáng chú ý là hai phương pháp này vẫn hoạt động với hầu hết các trình duyệt Internet.

Để tiếp tục, chọn phương pháp bạn muốn tìm hiểu hoặc đọc mọi phần.

Nếu bạn dự định thay đổi mặt phông chữ và màu của nó chỉ một lần trên một trang web, bạn cần thay đổi các thuộc tính của nó trong thẻ phần tử. Sử dụng thuộc tính style, bạn có thể chỉ định mặt và màu của phông chữ với họ phông chữ, màu sắc và kích thước phông chữ với cỡ chữ, như trong ví dụ bên dưới.

Mã ví dụ

Văn bản này có phông chữ Courier, là Blue và 20px.

Kết quả

Văn bản này có phông chữ Courier, có màu Xanh lam và kích thước 20px.

Sử dụng CSS cho một hoặc nhiều trang

Phông chữ tùy chỉnh cho một trang

Trong phần đầu của trang web của bạn, bạn có thể chèn mã giữa các tab để thay đổi giao diện của văn bản trong các yếu tố khác nhau. Hộp màu xanh tiếp theo chứa mã ví dụ, một khi được gọi, sẽ thay đổi mặt phông chữ của bạn thành Chuyển phát nhanh và tô màu đỏ. Như bạn có thể thấy, chúng tôi đã định nghĩa tên lớp là "tùy chỉnh".

 .custom {font-family: Chuyển phát nhanh; màu đỏ; cỡ chữ: 20px; } 

Sau khi được xác định, kiểu dáng này có thể được áp dụng cho hầu hết các thành phần trong trang của bạn bằng cách đính kèm lớp "tùy chỉnh" cho chúng. Hộp sau đây cho thấy hai dòng mã và kết quả tương ứng của chúng.

Thí dụ

Toàn bộ câu này là màu đỏ và Chuyển phát nhanh

Chỉ có từ TEST là màu đỏ và Chuyển phát nhanh.

Kết quả

Toàn bộ câu này là màu đỏ và Chuyển phát nhanh.

Chỉ có từ TEST là màu đỏ và Chuyển phát nhanh.

Phông chữ tùy chỉnh cho nhiều trang

Nhập tệp CSS bên ngoài có thể rất có lợi ở chỗ nó cho phép người dùng thay đổi quy tắc cho nhiều trang cùng một lúc. Phần sau đây cho thấy một ví dụ để tạo một tệp CSS cơ bản thay đổi phông chữ và màu của nó cho hầu hết các yếu tố. Tập tin này có thể được tải vào nhiều trang web, thậm chí toàn bộ trang web.

Sử dụng bất kỳ trình soạn thảo văn bản cơ bản nào, việc lưu văn bản sau dưới dạng tệp .css sẽ chuẩn bị cho việc nhập.

 @charset "utf-8";

.courier {font-family: Chuyển phát nhanh; màu: # 005CB9; }

Khi văn bản trước đã được đặt vào tệp .css (chúng tôi đã đặt tên cho basic.css của chúng tôi), bạn có thể liên kết với nó từ bất kỳ trang nào khác bằng một dòng tương tự như ví dụ sau.

Mẹo: Người dùng có thể thay đổi các thuộc tính của các thành phần trên một trang bằng cách thay đổi mã trong tệp .css đã nhập.

Giải pháp thẻ phông chữ

Mặc dù không được dùng nữa, thẻ HTML vẫn có thể được sử dụng và có thể cần được sử dụng với một số dịch vụ trực tuyến. Khi sử dụng thẻ FONT, bạn phải bao gồm thuộc tính khuôn mặt, mô tả phông chữ sẽ được sử dụng. Trong ví dụ dưới đây, chúng tôi đang sử dụng phông chữ Chuyển phát nhanh và mã màu thập lục phân # 005CB9, có màu xanh đậm.

Mã ví dụ

 Một ví dụ phông chữ đặc biệt. 

Kết quả