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 : html gạch dưới và in đậm

Nếu bạn làm việc riêng 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ả:

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”.

Xem Thêm  Cách đặt hình nền trong HTML - cách đặt hình ảnh làm nền trong html

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;

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ẻ.

Xem Thêm  Làm thế nào để chuyển đổi một chuỗi thành một mảng trong JavaScript - chuỗi thành mảng javascript

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.

Để 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;

Xem Thêm  Truy vấn SQL trong SQL Server - hướng dẫn cho người mới bắt đầu - truy vấn sql trong máy chủ sql

Đâ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ủ đề html gạch chân và in đậm

CSS Text Decoration

alt

  • Tác giả: Jeffery Hirono
  • Ngày đăng: 2008-01-02
  • Đánh giá: 4 ⭐ ( 7381 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Check out my new site at http://www.youtubemuse.com/

    In this screencast, we are going to talk about setting text decoration other than italic and bold. This rule allows you to set underline, overline and strike through to your text

Định dạng HTML : in đậm , in nghiêng, gạch chân, chỉ số trên, chỉ số dưới trong HTML

  • Tác giả: blog.codegym.vn
  • Đánh giá: 5 ⭐ ( 2238 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Định dạng HTML: in đậm, in nghiêng, gạch chân, chỉ số trên, chỉ số dưới trong HTML

  • Tác giả: vietjack.com
  • Đánh giá: 5 ⭐ ( 7608 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Định dạng HTML: in đậm, in nghiêng, gạch chân, chỉ số trên, chỉ số dưới trong HTML – Học HTML cơ bản và nâng cao theo các bước đơn giản và dễ hiểu từ HTML là gì, in đậm trong HTML, in nghiêng trong HTML, gạch chân trong HTML, gạch ngang trong HTML, chỉ số trên trong HTML, chỉ số dưới trong HTML, tổng hợp các thẻ HTML cơ bản, thẻ meta, thuộc tính, định dạng, thẻ trong HTML, commemnt, font, marquee, hình ảnh, link, bảng, frame, danh sách, layout, màu, form, background, style sheet, và sử dụng javascript.

Định dạng HTML: in đậm, in nghiêng, gạch chân, chỉ số trên, chỉ số dưới trong HTML

  • Tác giả: 123docz.net
  • Đánh giá: 4 ⭐ ( 6855 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Định dạng HTML: in đậm, in nghiêng, gạch chân, chỉ số trên, chỉ số dưới trong HTMLNếu bạn sử dụng một ứng dụng Word, bạn phải làm quen với các thao tác để in đậm, in nghiêng, hay gạch chân; đó là 3 trong số 10 tùy chọn có sẵn để chỉ cách mà văn bản xuất hiện

Định dạng văn bản trong HTML – Formatting

  • Tác giả: trogiupnhanh.com
  • Đánh giá: 3 ⭐ ( 7077 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Formatting HTML hay còn gọi là định dạng trong HTML giúp trang trí dòng chữ hoặc đoạn văn bản, nhấn mạnh nội dung

Sử dụng thẻ in đậm, in nghiêng, gạch chân thế nào trong trang web?

  • Tác giả: carly.com.vn
  • Đánh giá: 5 ⭐ ( 7428 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sử dụng thẻ in đậm, in nghiêng, gạch chân, gạch ngang thế nào cho đúng cách trong trang web sẽ giúp người đọc dễ nắm bắt được nội dung truyền tải, cũng như thân thiện với Công cụ tìm kiếm.

Bài 05: Định Dạng Văn Bản Trong HTML

  • Tác giả: hocban.vn
  • Đánh giá: 3 ⭐ ( 9656 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này chúng ta sẽ tìm hiểu cách định dạng văn bản trong tài liệu HTML. Cụ thể là cách để in đậm, in nghiêng, gạch chân, màu chữ, kiểu chữ,.v.v…

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