Hướng dẫn how do you change text in html? - làm thế nào để bạn thay đổi văn bản trong html?

Khi tùy chỉnh giao diện của trang web của bạn, bạn có thể quên mất kiểu chữ - cách bạn sắp xếp và phong cách văn bản trên trang. Tùy thuộc vào thương hiệu của bạn, bạn sẽ muốn thay đổi kiểu chữ, kích thước và màu sắc của phông chữ của bạn để phù hợp.

Ví dụ: nếu bạn thích màu xám đen hơn màu đen trong bảng màu của mình, bạn sẽ muốn thay đổi màu phông chữ mặc định của văn bản. Nếu bạn có trong phương tiện truyền thông, bạn có thể chọn một phông chữ sans serif, được coi là kiểu chữ dễ đọc nhất. Nhưng nếu bạn ở trong lĩnh vực sáng tạo, bạn có thể chọn một kiểu chữ trang trí hơn. Đây chỉ là một vài lý do bạn có thể muốn tạo kiểu cho phông chữ trên trang web của mình.

Trong bài đăng này, chúng tôi sẽ chỉ cho bạn cách thay đổi phông chữ của bạn trong HTML để giúp bản sao của bạn nổi bật, làm hài lòng người đọc và chuyển đổi lái xe.

Hãy xem cách bạn có thể thay đổi phông chữ trên trang web của mình chỉ bằng một chút mã. Chúng tôi sẽ bao gồm:

• Cách thay đổi loại phông chữ trong HTML
• Cách thay đổi kích thước phông chữ trong HTML

• Cách thay đổi kích thước phông chữ trong cùng một đoạn

• Cách thay đổi màu phông chữ trong HTML
• Cách thay đổi phông chữ trong một div trong html

Bắt đầu nào.

Cách thay đổi loại phông chữ trong HTML

Để thay đổi loại phông chữ hoàn toàn với HTML, hãy sử dụng thuộc tính gia đình phông chữ CSS. Đặt nó thành giá trị bạn muốn và đặt nó bên trong một thuộc tính kiểu. Sau đó thêm thuộc tính kiểu này vào phần tử HTML, như một đoạn, tiêu đề, nút hoặc thẻ nhịp.

Mặc dù cách tiếp cận này chỉ yêu cầu bạn thêm mã vào tệp HTML của mình, nhưng nó thực sự sử dụng CSS ngôn ngữ kiểu. Cụ thể hơn, kỹ thuật này được gọi là CSS Inline. CSS nội tuyến có nghĩa là HTML và CSS của bạn sẽ được đặt cùng nhau trong phần cơ thể của tài liệu HTML của bạn.

Hãy cùng xem xét một ví dụ cơ bản: Sử dụng CSS nội tuyến để thay đổi loại phông chữ của một đoạn văn. Illll thêm thuộc tính kiểu vào phần tử đoạn đầu tiên, có nghĩa là chỉ đoạn này sẽ được tạo kiểu. Đoạn khác và các tiêu đề trên trang sẽ vẫn còn như New Roman, loại phông chữ mặc định trong hầu hết các trình duyệt.

Xem bút Cách thay đổi loại phông chữ trong HTML [CSS nội tuyến] bằng HubSpot (@HubSpot) trên CodePen.

Mặc dù CSS nội tuyến hoạt động tốt để thay đổi một phần tử duy nhất trên trang, chúng tôi đề xuất các kiểu CSS khác, cụ thể là CSS bên ngoài, qua CSS nội tuyến.

CSS bên ngoài được đặt trong tệp CSS, được phân tách khỏi HTML. Đối với hầu hết các nhà phát triển, đây được coi là cách chính xác để thay đổi mặt phông chữ trong HTML vì bạn không cần phải sao chép và dán các quy tắc kiểu tương tự vào mỗi thẻ. Thay vào đó, chỉ cần nhắm mục tiêu tất cả một loại phần tử với bộ chọn CSS.

Tìm hiểu thêm: & NBSP; Hướng dẫn của người mới bắt đầu về HTML & CSS

Muốn tìm hiểu thêm về HTML? & NBSP; Tải xuống Hướng dẫn miễn phí của chúng tôi để thực hành tốt nhất để bắt đầu với HTML. Download our free guide for best practices for getting started with HTML.

Ví dụ, hãy để nói rằng tôi muốn thay đổi phông chữ của mọi yếu tố đoạn văn thành Arial. Tôi có thể sử dụng bộ chọn CSS, P Pi để nhắm mục tiêu tất cả các đoạn:

Xem bút Cách thay đổi loại phông chữ trong HTML [CSS nội bộ] bằng HubSpot (@HubSpot) trên CodePen.

Bạn có thể sử dụng CSS bên ngoài với mã CSS đơn giản hoặc được ghép nối với một khung như Bootstrap CSS.

Bây giờ chúng ta đã hiểu cách thay đổi loại phông chữ, hãy để Lôi chuyển sự chú ý của chúng ta sang kích thước phông chữ.

Cách thay đổi kích thước phông chữ trong HTML

Để thay đổi kích thước phông chữ trong HTML, hãy sử dụng thuộc tính kích thước phông chữ CSS. Đặt nó thành giá trị bạn muốn và đặt nó bên trong một thuộc tính kiểu. Sau đó thêm thuộc tính kiểu này vào phần tử HTML, như một đoạn, tiêu đề, nút hoặc thẻ nhịp.

Tiếp tục với ví dụ của chúng tôi ở trên, hãy để thay đổi kích thước phông chữ của đoạn văn thành 26 pixel với CSS. Giống như trên, tôi sẽ bắt đầu bằng cách thêm thuộc tính kiểu vào phần tử đoạn đầu tiên, có nghĩa là chỉ đoạn này sẽ được tạo kiểu. Đoạn khác và các tiêu đề trên trang sẽ giữ kích thước mặc định của chúng.

Xem bút Cách thay đổi kích thước phông chữ trong HTML [CSS nội tuyến] bằng HubSpot (@HubSpot) trên CodePen.

Bây giờ, hãy để nói rằng tôi muốn thay đổi phông chữ của mỗi yếu tố đoạn văn thành 26px. Tôi có thể sử dụng bộ chọn CSS để nhắm mục tiêu tất cả các đoạn:

Xem bút Cách thay đổi kích thước phông chữ trong HTML [CSS nội bộ] bằng HubSpot (@HubSpot) trên CodePen.

Thay đổi kích thước phông chữ trong cùng một đoạn

Một lợi thế khác của CSS là nó cung cấp cho bạn kiểm soát chi tiết hơn đối với mã của bạn, vì vậy bạn có thể làm những việc như áp dụng các kích thước phông chữ khác nhau để văn bản bên trong cùng một đoạn.

Nếu tôi muốn giữ đoạn văn ở kích thước phông chữ mặc định của nó, tôi chỉ có thể bọc văn bản mà tôi muốn thay đổi kích thước trong các thẻ. Sau đó, tôi sẽ thêm một thuộc tính kiểu với thuộc tính kích thước phông chữ được đặt thành giá trị tôi muốn.

Xem bút Cách thay đổi kích thước phông chữ trong cùng một đoạn [CSS nội tuyến] bằng HubSpot (@HubSpot) trên CodePen.

Để đạt được hiệu ứng này với CSS bên ngoài, tôi vẫn sẽ bọc văn bản mà tôi muốn thay đổi kích thước trong các thẻ. Nhưng, tôi sẽ thêm một thuộc tính ID vào phần tử nhịp. Sử dụng bộ chọn ID, tôi đặt phần tử Span thành một kích thước khác.

Xem Bút OW để thay đổi kích thước phông chữ trong cùng một đoạn [CSS bên trong] bằng HubSpot (@HubSpot) trên Codepen.

Để có cái nhìn sâu hơn về các thuộc tính và giá trị bạn có thể sử dụng để thay đổi kích thước văn bản của mình, hãy đọc cách thay đổi kích thước phông chữ trong CSS.

Cách thay đổi màu phông chữ trong HTML

Để thay đổi màu phông chữ trong HTML, hãy sử dụng thuộc tính màu CSS. Đặt nó thành giá trị bạn muốn và đặt nó bên trong một thuộc tính kiểu. Sau đó thêm thuộc tính kiểu này vào phần tử HTML như đoạn văn, tiêu đề, nút hoặc thẻ nhịp.

Bây giờ, hãy để thay đổi màu phông chữ của một đoạn văn thành Lorax Orange (mã màu Hex & NBSP;#FF7A59) với CSS. Giống như trên, tôi sẽ bắt đầu bằng cách thêm thuộc tính kiểu vào phần tử đoạn đầu tiên, điều đó có nghĩa là chỉ đoạn này sẽ được tạo kiểu. Đoạn khác và các tiêu đề trên trang sẽ vẫn là màu mặc định (màu đen).

Xem bút Cách thay đổi màu phông chữ trong HTML [CSS nội tuyến] bằng HubSpot (@HubSpot) trên CodePen.

Bây giờ, hãy để nói rằng tôi muốn thay đổi màu sắc của mọi yếu tố đoạn văn thành maroon. Tôi có thể sử dụng bộ chọn CSS để nhắm mục tiêu tất cả các đoạn văn với CSS bên ngoài:

Xem bút Cách thay đổi màu phông chữ trong HTML [CSS nội bộ] bằng HubSpot (@HubSpot) trên CodePen.

Để tìm hiểu cách thay đổi màu nền của văn bản của bạn, hãy đọc cách thay đổi văn bản và màu nền trong CSS.

Cách thay đổi phông chữ trong một div trong html

DIV trong HTML chỉ đơn giản là một yếu tố chung có thể chia trang web của bạn thành các phần để bạn có thể nhắm mục tiêu chúng với các thuộc tính CSS duy nhất. Thay đổi phông chữ trong DIV không khác gì thay đổi phông chữ trong một phần tử hoặc phần tử nhịp.

Nếu bạn muốn thay đổi loại phông chữ, kích thước và màu của văn bản trên một trang, bạn có thể bọc nó trong các thẻ div và sử dụng bộ chọn CSS để tạo kiểu cho phần tử đó.

Xem bút Cách thay đổi phông chữ trong DIV trong HTML [CSS nội bộ] bằng HubSpot (@HubSpot) trên Codepen.

Thẻ phông chữ HTML

Các nhà phát triển đã từng có thể sử dụng một thẻ được gọi để thay đổi kiểu văn bản trong HTML. Nếu bạn muốn thay đổi phông chữ của mình thành Arial, bạn sẽ viết dòng HTML sau:

 
Your text here.

Tuy nhiên, thẻ phông chữ đã bị phản đối vào năm 1998, đã được thay thế bằng CSS. Định dạng CSS là một sự thay thế nhẹ và linh hoạt hơn cho thẻ phông chữ HTML.

Cách tốt nhất để thay đổi phông chữ trong HTML & CSS

Với một số kiến ​​thức thiết kế web cơ bản, bạn có thể thay đổi loại, kích thước và màu sắc của phông chữ của bạn. Điều này có thể cho phép bạn tùy chỉnh mọi chi tiết trên trang web của bạn và làm cho nội dung của bạn dễ đọc hơn.

Lưu ý của biên tập viên: Bài đăng này ban đầu được xuất bản vào tháng 7 năm 2020 và đã được cập nhật về tính toàn diện.

Làm cách nào để thay đổi kiểu văn bản của tôi?

Làm cách nào để thay đổi phông chữ tùy chỉnh trong HTML?

Thẻ HTML nào được sử dụng để thay đổi phông chữ?