Tìm hiểu cách định dạng văn bản in đậm, in nghiêng, gạch chân, gạch ngang, chỉ số dưới và chỉ số trên bằng HTML và CSS.

Bạn đang xem : font style html bold

Nếu bạn làm việc độc quyền trong hệ thống quản lý nội dung như CMS Hub hoặc WordPress, bạn đã quen với việc có thể in đậm, in nghiêng và gạch dưới văn bản chỉ bằng một lần nhấp vào nút. Nhưng điều gì sẽ xảy ra nếu thanh công cụ của bạn không cung cấp tùy chọn định dạng chính xác mà bạn muốn? Hay bạn không làm việc trong trình xử lý văn bản hoặc CMS?

Không thành vấn đề. Tất cả những gì bạn cần là một số HTML và CSS. Dưới đây chúng ta sẽ thảo luận về một số trường hợp sử dụng để định dạng văn bản. Sau đó, chúng ta sẽ hướng dẫn quy trình tạo văn bản in đậm, in nghiêng, gạch chân, gạch ngang, chỉ số dưới và chỉ số trên.

Tải xuống ngay: Hack HTML & amp; CSS miễn phí < / span>

Cách in đậm văn bản trong HTML

Để in đậm văn bản trong HTML, hãy sử dụng thẻ strong hoặc thẻ b (in đậm). Các trình duyệt sẽ in đậm văn bản bên trong cả hai thẻ này như nhau, nhưng thẻ mạnh cho biết rằng văn bản có tầm quan trọng hoặc khẩn cấp đặc biệt. Bạn cũng có thể in đậm văn bản với thuộc tính CSS font-weight được đặt thành “bold”.

Khi in đậm văn bản, bạn được coi là phương pháp hay nhất để sử dụng & lt; strong & gt; ủng hộ thẻ & lt; b & gt; nhãn. Điều này là do & lt; mạnh & gt; a phần tử ngữ nghĩa trong khi & lt; b & gt; không phải. Các yếu tố phi ngữ nghĩa có thể gây khó khăn cho việc bản địa hóa nội dung và việc soát lỗi trong tương lai, theo đặc điểm kỹ thuật HTML5 . Ngoài ra, nếu văn bản in đậm hoàn toàn là phong cách, tốt hơn nên sử dụng CSS và giữ tất cả các kiểu trang riêng biệt với nội dung.

Vì lý do này, chúng tôi sẽ chỉ hiển thị các ví dụ sử dụng & lt; strong & gt; và thuộc tính font-weight CSS.

Tài nguyên Nổi bật

Hướng dẫn dành cho người mới bắt đầu về HTML và CSS dành cho nhà tiếp thị

Điền vào biểu mẫu để nhận hướng dẫn giới thiệu miễn phí.

Cách in đậm văn bản trong HTML với yếu tố mạnh

Để xác định văn bản có tầm quan trọng cao, hãy đặt văn bản bên trong & lt; strong & gt; các thẻ. Hãy xem một ví dụ.

Đây là HTML:

  

& lt; p & gt; Đây là một số đoạn văn bản bình thường, & lt; strong & gt; và đây là một số đoạn văn bản quan trọng. & lt; / strong & gt; & lt; / p & gt;

Đây là kết quả:

Cách in đậm văn bản trong HTML với thuộc tính trọng lượng phông chữ CSS

Để in đậm văn bản đơn giản để trang trí, hãy sử dụng thuộc tính CSS font-weight thay vì phần tử mạnh HTML. Giả sử bạn muốn in đậm một từ trong một đoạn văn – bạn sẽ đặt từ này trong & lt; span & gt; và sử dụng công cụ chọn lớp CSS để chỉ áp dụng thuộc tính font-weight cho phần tử span cụ thể.

Đây là CSS:

  

.bolded {font-weight: bold; }

Đây là HTML:

  

& lt; p & gt; Đây là một số đoạn văn bản bình thường và đây là & lt; span class = "bolded" & gt; word & lt; / span & gt; đậm để trang trí. & lt; / p & gt;

Đây là kết quả:

Xem Thêm  JavaScript Lấy độ dài mảng - kích thước javascript của mảng

Cách in nghiêng văn bản trong HTML

Để in nghiêng văn bản trong HTML, hãy sử dụng thẻ em hoặc thẻ i (in nghiêng). Cả hai thẻ này sẽ in nghiêng văn bản, nhưng thẻ em cũng chỉ ra rằng văn bản có trọng âm khi đọc. Bạn cũng có thể in nghiêng văn bản với thuộc tính kiểu phông chữ CSS được đặt thành “in nghiêng”.

Thích & lt; strong & gt; và & lt; b & gt ;, the & lt; em & gt; thường được ưu tiên hơn thẻ & lt; i & gt; vì nó là một phần tử ngữ nghĩa, vì vậy chúng tôi sẽ sử dụng nó trong các ví dụ HTML của mình. Để tạo kiểu, hãy gắn bó với CSS và tránh & lt; i & gt; thẻ.

Bạn muốn tìm hiểu thêm về HTML? Tải xuống hướng dẫn miễn phí của chúng tôi để biết các phương pháp hay nhất để bắt đầu với HTML.

Cách in nghiêng văn bản trong HTML với phần tử nhấn mạnh

Để xác định văn bản có nhấn trọng âm, hãy đặt văn bản bên trong & lt; em & gt; các thẻ. Hãy xem một ví dụ.

Đây là HTML:

  

& lt; p & gt; Đây là một số đoạn văn bản bình thường, & lt; em & gt; và đây là một số đoạn văn bản được nhấn mạnh. & lt; / em & gt; & lt; / p & gt;

Đây là kết quả:

Cách in nghiêng văn bản trong HTML với Thuộc tính kiểu phông chữ CSS

Để in nghiêng văn bản để trang trí, hãy sử dụng thuộc tính kiểu phông chữ CSS. Hãy tưởng tượng bạn muốn in nghiêng một từ bên trong một đoạn văn. Đầu tiên, hãy bọc từ trong & lt; span & gt; , sau đó chỉ áp dụng thuộc tính font-style cho phần tử span.

Đây là CSS:

  

.emphasized {font-style: italic; }

Đây là HTML:

  

& lt; p & gt; Đây là một số đoạn văn bản bình thường và đây là & lt; span class = "nhấn mạnh" & gt; word & lt; / span & gt; được in nghiêng để trang trí. & lt; / p & gt;

Đây là kết quả:

Cách gạch dưới văn bản trong HTML

Để gạch dưới văn bản trong HTML và CSS, hãy sử dụng thuộc tính trang trí văn bản CSS, được đặt thành “gạch dưới”.

Bạn cũng có thể gạch dưới văn bản bằng & lt; u & gt; , nhưng không nên sử dụng phần tử này để gạch dưới văn bản cho mục đích trình bày. & lt; u & gt; phần tử dành cho các trường hợp sử dụng cụ thể như đánh dấu các từ sai chính tả, biểu thị tên riêng trong văn bản tiếng Trung hoặc cho biết họ.

Hãy xem xét cả hai phương pháp bên dưới.

Cách gạch dưới văn bản trong HTML với phần tử chú thích không phân biệt

Nếu bạn muốn hiển thị văn bản không theo chính sách hoặc có chú thích không phải là văn bản, hãy đặt văn bản bên trong & lt; u & gt; các thẻ. Ví dụ:

  

& lt; p & gt; Đây & lt; u & gt; wrd & lt; / u & gt; viết sai chính tả nên chúng tôi đã gạch chân. & lt; / p & gt;

Đây là kết quả:

Cách gạch dưới văn bản trong HTML với Thuộc tính trang trí văn bản CSS

Nếu bạn muốn gạch dưới văn bản để trang trí, thay vì thể hiện chú thích không phải văn bản, thì bạn sẽ sử dụng thuộc tính trang trí văn bản CSS, như vậy:

Đây là CSS:

  

.underline {text-decoration: underline;}

Đây là HTML:

  

& lt; p & gt; Văn bản này là bình thường và & lt; span class = "gạch chân" & gt; văn bản này được gạch chân & lt; / span & gt;. & lt; / p & gt;

Xem Thêm  iPhone 14 Pro Max tiếp tục lộ diện thiết kế qua concept mới, màn hình đục lỗ hình chữ 'i' và giá từ 18 triệu đồng - thiết kế giao diện android bằng photoshop

Và đây là kết quả:

Cách hiển thị văn bản gạch ngang trong HTML

Có nhiều cách để hiển thị văn bản gạch ngang trong HTML, là văn bản được hiển thị với một đường ngang xuyên qua nó. Bạn có thể sử dụng & lt; s & gt; để chỉ ra rằng văn bản hiện không chính xác, không chính xác hoặc không liên quan. Nếu bạn muốn cho biết văn bản đã bị xóa, hãy sử dụng nút & lt; del & gt; thẻ.

Nếu bạn muốn hiển thị văn bản dưới dạng gạch ngang vì một lý do khác, thì bạn phải sử dụng thuộc tính CSS text-decoration-line-line và đặt thuộc tính này thành “line-through”.

Điều quan trọng cần lưu ý là HTML & lt; đình công & gt; phần tử đã không được dùng nữa và không còn là một tùy chọn khả thi để hiển thị văn bản gạch ngang.

Hãy xem các ví dụ về ba phương pháp được hỗ trợ trong phiên bản HTML hiện tại.

Cách viết gạch ngang văn bản trong HTML với yếu tố gạch ngang

Nếu bạn muốn gạch ngang văn bản để chứng tỏ rằng văn bản đó không còn đúng, chính xác hoặc phù hợp, hãy đặt văn bản bên trong & lt; s & gt; các thẻ. Hãy xem một ví dụ.

Đây là HTML:

  

& lt; p & gt; Cuộc họp sẽ bắt đầu lúc 5:00 chiều vào & lt; s & gt; Thứ Bảy & lt; / s & gt; bây giờ là Chủ nhật. & lt; / p & gt;

Đây là kết quả:

Cách gạch ngang văn bản trong HTML với phần tử văn bản đã xóa

Để gạch ngang văn bản để cho biết rằng nó đã bị xóa, hãy đặt văn bản bên trong & lt; del & gt; các thẻ. Hãy xem một ví dụ với phần tử danh sách:

Đây là HTML:

  

& lt; p & gt; Hiện đã có các cuộc hẹn cho: & lt; / p & gt;

& lt; ul & gt;

& lt; li & gt; & lt; del & gt; 3 giờ chiều & lt; / del & gt; & lt; / li & gt;

& lt; li & gt; & lt; del & gt; 4 giờ chiều & lt; / del & gt; & lt; / li & gt;

& lt; li & gt; 5 giờ chiều & lt; / li & gt;

& lt; / ul & gt;

Đây là kết quả:

Cách gạch ngang văn bản trong HTML với Thuộc tính dòng-trang trí văn bản CSS

Để gạch ngang văn bản cho mục đích khác, hãy sử dụng thuộc tính dòng trang trí văn bản CSS.

Đây là CSS:

  

.strike {text-decoration-line: line-through; }

Đây là HTML:

  

& lt; p & gt; Văn bản này là bình thường và & lt; span class = "strike" & gt; văn bản này là dòng qua & lt; / span & gt;. & lt; / p & gt;

Đây là kết quả:

Cách tạo chỉ số dưới văn bản trong HTML

Thường được hiển thị bằng phông chữ nhỏ hơn nhưng nặng hơn, văn bản chỉ số dưới xuất hiện nửa ký tự bên dưới dòng bình thường. Nó có thể được sử dụng trong công thức hóa học, phương trình toán học, phân số và hơn thế nữa.

Để tạo văn bản chỉ số dưới trong HTML, hãy sử dụng & lt; sub & gt; yếu tố. Xem ví dụ bên dưới.

Đây là HTML:

  

& lt; p & gt; Công thức hóa học của nước là H & lt; sub & gt; 2 & lt; / sub & gt; O. & lt; / p & gt;

Đây là kết quả:

Làm thế nào để tạo văn bản Superscript trong HTML

Thường được hiển thị bằng phông chữ nhỏ hơn nhưng nặng hơn, văn bản chỉ số trên xuất hiện nửa ký tự trên dòng bình thường. Nó có thể được sử dụng để viết chú thích cuối trang, bản quyền, nhãn hiệu đã đăng ký và một số công thức hóa học.

Xem Thêm  Hàm Upper trong Excel: Chuyển chữ thành chữ in hoa nhanh chóng - hàm upper

Để tạo văn bản chỉ số trên trong HTML, hãy sử dụng thẻ & lt; sup & gt; yếu tố. Xem ví dụ bên dưới.

Đây là HTML:

  

& lt; p & gt; Nước cần thiết cho mọi dạng sống. & lt; sup & gt; 1 & lt; / sup & gt; & lt; / p & gt;

Đây là kết quả:

Định dạng Văn bản bằng HTML & amp; CSS

Bằng cách định dạng văn bản theo bất kỳ cách nào được mô tả ở trên, bạn có thể giúp người đọc hiểu rõ hơn và lưu giữ thông tin từ trang web của bạn. Cho dù bạn muốn in đậm từ khóa hay bao gồm chỉ số phụ trong công thức hóa học, việc định dạng văn bản chỉ yêu cầu kiến ​​thức cơ bản về HTML và CSS.

Ghi chú của người biên tập: Bài đăng này ban đầu được xuất bản vào tháng 10 năm 2020 và đã được cập nhật để có tính toàn diện.

Gọi hành động mới


Xem thêm những thông tin liên quan đến chủ đề kiểu chữ html đậm

Easily Use Any Font On Any Website – @font-face Tutorial

alt

  • Tác giả: Caler Edwards
  • Ngày đăng: 2017-06-27
  • Đánh giá: 4 ⭐ ( 5753 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Easily Use Any Font On Any Website – @font-face Tutorial

    Use any Font you want Safely & Easily on Any Website. In under 5 minutes you will be able to implement multiple custom font families into your code. Use any style: bold, italic, etc. Use any weight: light, regular, semibold, bold, 100, 200, 300 etc. Hope you enjoy 😀

    Have a great day and don’t forget to Like,Share the video and Subscribe for NEW VIDEOS every Week!
    Subscribe- http://www.youtube.com/user/CalerEdwards?sub_confirmation=1

    Used:
    Brackets

    Previous Video:
    https://youtu.be/chnT9Mz9cnE

    My Links:
    Website- http://caleredwards.com
    Dribbble- https://dribbble.com/CalerEdwards
    Facebook- https://www.facebook.com/CalerEdwards/
    Behance- http://behance.net/CalerEdwards
    GooglePlus- https://plus.google.com/u/0/+CalerEdwards

Tạo chữ đẹp in đậm, in nghiêng Online

  • Tác giả: www.taoanhdep.com
  • Đánh giá: 3 ⭐ ( 5310 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Công cụ tạo chữ kí tự đặc biệt, tạo chữ in đậm, chữ in nghiêng, tạo kiểu phông chữ đẹp để đăng lên mạng xã hội Facebook, Instagram,Twitter, Zalo…

Định dạng chữ trong HTML

  • Tác giả: webvn.com
  • Đánh giá: 3 ⭐ ( 2965 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ví dụ và cách sử dụng các thẻ định dạng trong HTML.

Định dạng font

  • Tác giả: hocwebchuan.com
  • Đánh giá: 3 ⭐ ( 4094 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các tag , , , , , , , , , , , được dùng để định dạng kiểu cho font, dùng phổ biến trong html4, tuy nhiên không khuyến khích sử dụng, dùng css để thay thế - Học web chuẩn

HTML Định Dạng Chữ

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 3 ⭐ ( 1472 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: HTML sử dụng thẻ để định dạng chữ viết theo kiểu in đậm và in nghiêng. Ngoài ra còn có các thẻ khác như , , ... mà chúng ta sẽ tìm hiểu ở các...

Cách Định Dạng Chữ In Đậm Chữ Trong Html Định Dạng Chữ, Html Định Dạng Chữ

  • Tác giả: mercare.com.vn
  • Đánh giá: 5 ⭐ ( 9261 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: NộI Dung: đến , Thực hiện theo các hướng dẫn khi sử dụng chúng: , nhưng đôi khi bạn có thể muốn thay đổi giao diện của một số phần văn bản không nằm trong thẻ

Thẻ định dạng văn bản trong HTML

  • Tác giả: hocjavascript.net
  • Đánh giá: 4 ⭐ ( 7674 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ngoài việc hiển thị văn bản trong HTML theo cách thông thường, bạn có thể sử dụng các thẻ định dạng văn bản trong HTML

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php