Cách thay đổi font chữ, kích thước và màu sắc trên trang web

Bài viết này sẽ hướng dẫn về cách thay đổi phông chữ và màu sắc của phông chữ trên trang web HTML (ngôn ngữ đánh dấu siêu văn bản). Với sự ra đời của HTML5 , cách thích hợp để định cấu hình phông chữ trang web hiện nay là sử dụng CSS (các biểu định kiểu xếp tầng). Phương pháp cũ, sử dụng thuộc tính kiểu nội tuyến hoặc thẻ phông chữ, không được dùng nữa và không còn được sử dụng nữa.

Mặc dù các phương pháp không được dùng nữa vẫn có thể hiển thị chính xác trong các trình duyệt Internet hiện đại nhưng chúng không còn được đảm bảo để làm như vậy nữa. Để tạo các trang web hiển thị chính xác cho số lượng người dùng tối đa, hãy sử dụng các phương pháp CSS được mô tả trên trang này.

Các phương pháp thay đổi thuộc tính phông chữ trên trang này hoạt động đối với văn bản có trong hầu hết các thẻ HTML, bao gồm <div>, <p> và <span>. Các phương pháp này cũng áp dụng được cho văn bản trong bảng bằng cách sử dụng các thẻ <table>, <tr> và <td>.

Sử dụng CSS cho một ứng dụng

Nếu bạn dự định thay đổi giao diện phông chữ và màu của phông chữ cho một từ, câu hoặc đoạn trên trang web, hãy định cấu hình các thuộc tính của phông chữ đó trong thẻ phần tử. Sử dụng thuộc tính style , bạn có thể chỉ định kiểu và màu phông chữ bằng font-family, color và kích thước phông chữ bằng font-size, như trong ví dụ bên dưới.

<p style="font-family:Courier; color:Blue; font-size : 20px;">Văn bản này có font Courier, là Blue và 20px.</p>

Kết quả:

Văn bản này có font Courier, là Blue và 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, bạn có thể chèn mã giữa các tab <style></style> để thay đổi giao diện văn bản của bạn trong các thành phần khác nhau. Hộp màu xanh lam tiếp theo chứa mã ví dụ, sau khi được gọi, sẽ thay đổi kiểu chữ của bạn thành Courier và tô màu đỏ. Như bạn có thể thấy, chúng tôi đã định nghĩa tên class là “custom”.

<style type="text/css">
.custom {
font-family: Courier;
color: red;
font-size:20px;
}
</style>

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 gắn lớp “tùy chỉnh” cho chúng. Hộp sau đây hiển thị hai dòng mã và kết quả tương ứng của chúng.

Ví dụ

<p class="custom">Toàn bộ câu này có màu đỏ.</p>
<p>Chỉ có từ <span class="custom">test</span> là màu đỏ.</p>

Kết quả

Toàn bộ câu này có màu đỏ.

Chỉ có từ test là màu đỏ.

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 vì 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 trình bày ví dụ về cách tạo tệp CSS cơ bản có khả năng thay đổi phông chữ và màu sắc cho hầu hết các thành phần. Tệp 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: Courier;
color: #005CB9;
}

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

<link rel="stylesheet" Type="text/css" href="http://www.example.com/basic.css">

Người dùng có thể thay đổi 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.

Sử dụng thẻ phông chữ

Mặc dù không được dùng nữa nhưng thẻ HTML <font> 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ẻ phông chữ, bạn phải bao gồm thuộc tính face , mô tả phông chữ sẽ được sử dụng. Trong ví dụ bên dưới, chúng tôi đang sử dụng phông chữ Courier và mã màu thập lục phân #005CB9 , có màu xanh đậm.

Ví dụ

<font color="#005CB9" face="courier" size="5">Một ví dụ về phông chữ đặc biệt.</font>

Kết quả

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