Hướng dẫn bold text html - html văn bản in đậm

Question

Có rất nhiều cách khác nhau để in đậm một đoạn text trên trang web. Ngoài việc sử dụng thẻ bold hoặc strong, bạn có thể sử dụng thẻ in đậm trong CSS. Thuộc tính in đậm của CSS giúp bạn có nhiều lựa chọn hơn so với HTML. Hãy cùng Got It tìm hiểu về thẻ in đậm trong CSS cũng như cách sử dụng nó qua bài viết dưới đây nhé.thẻ in đậm trong CSS. Thuộc tính in đậm của CSS giúp bạn có nhiều lựa chọn hơn so với HTML. Hãy cùng Got It tìm hiểu về thẻ in đậm trong CSS cũng như cách sử dụng nó qua bài viết dưới đây nhé.

Nội dung chính Show

1. Thẻ in đậm trong CSS là gì?Thẻ in đậm trong CSS là gì?
2. Cách sử dụng thẻ in đậmCách sử dụng thẻ in đậm
3. Các giá trị của thẻ in đậm trong CSSCác giá trị của thẻ in đậm trong CSS
Nội dung chính
2. Cách sử dụng thẻ in đậm
3. Các giá trị của thẻ in đậm trong CSS
1) Thẻ trong HTML
2) Định dạng CSS mặc định
Tiêu đề và đoạn văn bản
Các thẻ định dạng chữ viết
Thẻ trích dẫn
Thẻ định dạng sẵn
Thuộc tính style để định dạng chữ viết
[html]Canh giữa văn bản[/html]

Đọc thêm: Giới thiệu về CSS cơ bản và những điều cần biết Giới thiệu về CSS cơ bản và những điều cần biết
Đọc thêm: Hướng dẫn CSS căn bản dành cho người mới bắt đầuHướng dẫn CSS căn bản dành cho người mới bắt đầu

Mục lục

1. Thẻ in đậm trong CSS là gì?
2. Cách sử dụng thẻ in đậm
3. Các giá trị của thẻ in đậm trong CSS

1. Thẻ in đậm trong CSS là gì?Thẻ in đậm trong CSS là gì?

2. Cách sử dụng thẻ in đậm

3. Các giá trị của thẻ in đậm trong CSS

Khi thiết kế một website, việc in đậm một đoạn text giúp người dùng chú ý hơn vào nội dung này. Đây là cách hữu ích để truyền đạt một thông tin quan trọng cho người đọc. In đậm một đoạn text cũng có công dụng về cải thiện SEO (Search Engine Optimization) website. Các từ khóa được in đậm sẽ giúp công cụ tìm kiếm đánh giá tầm quan trọng cao hơn khi index website. Để in đậm một đoạn text, thông thường bạn hay sử dụng thẻ bold và thẻ strong trong HTML. Tuy nhiên, hai thẻ này có khá ít lựa chọn và không dễ thao tác đối với lập trình viên.

2. Cách sử dụng thẻ in đậmCách sử dụng thẻ in đậm

3. Các giá trị của thẻ in đậm trong CSS

Khi thiết kế một website, việc in đậm một đoạn text giúp người dùng chú ý hơn vào nội dung này. Đây là cách hữu ích để truyền đạt một thông tin quan trọng cho người đọc. In đậm một đoạn text cũng có công dụng về cải thiện SEO (Search Engine Optimization) website. Các từ khóa được in đậm sẽ giúp công cụ tìm kiếm đánh giá tầm quan trọng cao hơn khi index website. Để in đậm một đoạn text, thông thường bạn hay sử dụng thẻ bold và thẻ strong trong HTML. Tuy nhiên, hai thẻ này có khá ít lựa chọn và không dễ thao tác đối với lập trình viên.

Thẻ in đậm trong CSS là gì?

3. Các giá trị của thẻ in đậm trong CSSCác giá trị của thẻ in đậm trong CSS

Khi thiết kế một website, việc in đậm một đoạn text giúp người dùng chú ý hơn vào nội dung này. Đây là cách hữu ích để truyền đạt một thông tin quan trọng cho người đọc. In đậm một đoạn text cũng có công dụng về cải thiện SEO (Search Engine Optimization) website. Các từ khóa được in đậm sẽ giúp công cụ tìm kiếm đánh giá tầm quan trọng cao hơn khi index website. Để in đậm một đoạn text, thông thường bạn hay sử dụng thẻ bold và thẻ strong trong HTML. Tuy nhiên, hai thẻ này có khá ít lựa chọn và không dễ thao tác đối với lập trình viên.

Thẻ in đậm trong CSS là gì?

Một trong những cách tối ưu hơn để in đậm text là sử dụng thẻ in đậm trong CSS. Thẻ in đậm text trong CSS là thẻ font-weight. Thẻ này sẽ giúp thay đổi độ mỏng và dày của chữ tùy theo mục đích của lập trình viên. Thẻ font-weight mang lại rất nhiều lựa chọn cho bạn so với thẻ bold và strong trong HTML. Thuộc tính font-weight được hỗ trợ bởi hầu hết các trình duyệt như Chrome, Firefox, Safari,… Đây là giá trị mặc định của thẻ font-weight. Đoạn text sẽ được hiển thị với độ dày mặc định của trình duyệt web.
Cách sử dụng thẻ in đậm Giá trị này sẽ hiển thị đoạn text đậm hơn so với bình thường.
Thuộc tính in đậm được sử dụng giống như hầu hết các thuộc tính CSS khác. Để sử dụng thuộc tính này, đầu tiên bạn hãy lựa chọn đoạn text mà mình muốn in đậm. Bạn có thể in đậm cả đoạn văn bản, hoặc sử dụng span để in đậm một text nhỏ. Bạn hãy tham khảo đoạn code mẫu dưới đây: Đây là giá trị hiển thị đoạn text đậm hơn so với giá trị bold.
Đoạn code trên sẽ in đậm toàn bộ văn bản p của website. “font-weight” là tên thuộc tính in đậm trong CSS. Còn “bold” là giá trị in đậm. Bạn có thay thế giá trị “bold” bằng các giá trị khác tùy theo mục đích.Giá trị lighter của thẻ in đậm sẽ hiển thị đoạn text mỏng hơn so với normal.
Các giá trị của thẻ in đậm trong CSS Bạn có thể nhập các giá trị này vào để tùy chỉnh độ dày của đoạn text.
Thẻ in đậm có rất nhiều giá trị khác nhau. Bạn có thể thay đổi độ mỏng và dày của đoạn text bằng các giá trị này. Thẻ font-weight trong CSS thường có các giá trị như: Giá trị này sẽ kế thừa độ đậm của thành phần mẹ bao quanh đoạn text.

normal: Đây là giá trị mặc định của thẻ font-weight. Đoạn text sẽ được hiển thị với độ dày mặc định của trình duyệt web. in đậm trong CSS sẽ giúp bạn thiết kế website một cách tốt nhất.

Hiện tại blog tạm đóng bình luận vì mình cần tập trung thời gian vào cập nhật bài viết. Bình luận sẽ mở ra cho đến khi mình sẵn sàng.thẻ in đậm trong CSS. Thuộc tính in đậm của CSS giúp bạn có nhiều lựa chọn hơn so với HTML. Hãy cùng Got It tìm hiểu về thẻ in đậm trong CSS cũng như cách sử dụng nó qua bài viết dưới đây nhé.

Có rất nhiều cách khác nhau để in đậm một đoạn text trên trang web. Ngoài việc sử dụng thẻ bold hoặc strong, bạn có thể sử dụng thẻ in đậm trong CSS. Thuộc tính in đậm của CSS giúp bạn có nhiều lựa chọn hơn so với HTML. Hãy cùng Got It tìm hiểu về thẻ in đậm trong CSS cũng như cách sử dụng nó qua bài viết dưới đây nhé.

Nội dung chính
1. Thẻ in đậm trong CSS là gì?
2. Cách sử dụng thẻ in đậm
3. Các giá trị của thẻ in đậm trong CSS
1) Thẻ trong HTML
2) Định dạng CSS mặc định
Tiêu đề và đoạn văn bản
Các thẻ định dạng chữ viết
Thẻ định dạng sẵn
Thuộc tính style để định dạng chữ viết
[html]Canh giữa văn bản[/html]

Lời kết Giới thiệu về CSS cơ bản và những điều cần biết
Có vẻ bài này chúng ta đã tìm hiểu hơi nhiều về HTML rồi phải không nè? Nhưng những gì mình đề cập ở trên đều rất quan trọng và bạn cần nên tập viết nhiều để làm quen với nó vì về sau nó sẽ giúp ích bạn nhiều trong công việc nói chung và việc làm web nói riêng.Hướng dẫn CSS căn bản dành cho người mới bắt đầu

Thạch Phạm

Nội dung chính
1. Thẻ in đậm trong CSS là gì?
2. Cách sử dụng thẻ in đậm

Nội dung chính

1. Thẻ in đậm trong CSS là gì?

2. Cách sử dụng thẻ in đậm

3. Các giá trị của thẻ in đậm trong CSS

2. Cách sử dụng thẻ in đậm

Cách sử dụng thẻ in đậm

Thuộc tính in đậm được sử dụng giống như hầu hết các thuộc tính CSS khác. Để sử dụng thuộc tính này, đầu tiên bạn hãy lựa chọn đoạn text mà mình muốn in đậm. Bạn có thể in đậm cả đoạn văn bản, hoặc sử dụng span để in đậm một text nhỏ. Bạn hãy tham khảo đoạn code mẫu dưới đây:

Đoạn code trên sẽ in đậm toàn bộ văn bản p của website. “font-weight” là tên thuộc tính in đậm trong CSS. Còn “bold” là giá trị in đậm. Bạn có thay thế giá trị “bold” bằng các giá trị khác tùy theo mục đích.

3. Các giá trị của thẻ in đậm trong CSS

Các giá trị của thẻ in đậm trong CSS

Thẻ in đậm có rất nhiều giá trị khác nhau. Bạn có thể thay đổi độ mỏng và dày của đoạn text bằng các giá trị này. Thẻ font-weight trong CSS thường có các giá trị như:

normal: Đây là giá trị mặc định của thẻ font-weight. Đoạn text sẽ được hiển thị với độ dày mặc định của trình duyệt web. Đây là giá trị mặc định của thẻ font-weight. Đoạn text sẽ được hiển thị với độ dày mặc định của trình duyệt web.
bold: Giá trị này sẽ hiển thị đoạn text đậm hơn so với bình thường.Giá trị này sẽ hiển thị đoạn text đậm hơn so với bình thường.
bolder: Đây là giá trị hiển thị đoạn text đậm hơn so với giá trị bold. Đây là giá trị hiển thị đoạn text đậm hơn so với giá trị bold.
lighter: Giá trị lighter của thẻ in đậm sẽ hiển thị đoạn text mỏng hơn so với normal.Giá trị lighter của thẻ in đậm sẽ hiển thị đoạn text mỏng hơn so với normal.
100,200,…,900: Bạn có thể nhập các giá trị này vào để tùy chỉnh độ dày của đoạn text. Bạn có thể nhập các giá trị này vào để tùy chỉnh độ dày của đoạn text.
inherit: Giá trị này sẽ kế thừa độ đậm của thành phần mẹ bao quanh đoạn text. Giá trị này sẽ kế thừa độ đậm của thành phần mẹ bao quanh đoạn text.

Thuộc tính in đậm là cách hữu hiệu để in đậm một đoạn text của website. Bạn có thể tùy chỉnh độ đậm nhạt của văn bản với nhiều giá trị của thẻ font-weight. Thẻ in đậm trong CSS sẽ giúp bạn thiết kế website một cách tốt nhất. in đậm trong CSS sẽ giúp bạn thiết kế website một cách tốt nhất.

1) Thẻ trong HTML

- Thẻ dùng để xác định đoạn văn bản được in đậm. dùng để xác định đoạn văn bản được in đậm.

<!DOCTYPE html>
<html>
<body>
    <p>Tài liệu học <strong>Lập Trình Web</strong> từ cơ bản đến nâng cao</p>
</body>
</html>

Khi đó, màn hình trình duyệt sẽ hiển thị:

Tài liệu học Lập Trình Web từ cơ bản đến nâng caoLập Trình Web từ cơ bản đến nâng cao

- Lưu ý: Thẻ có chức năng giống với thẻ . Tuy nhiên, về mặt làm SEO website thì thẻ hỗ trợ tốt hơn.

2) Định dạng CSS mặc định

- Hầu hết các trình duyệt sẽ hiển thị phần tử với định dạng CSS như sau: với định dạng CSS như sau:

strong { 
    font-weight: bold;
}

Bắt đầu từ phần này, chúng ta sẽ cùng nhau làm việc trong cặp thẻ <body> </body> trong tài liệu web HTML để viết nội dung hiển thị ra ngoài website, và đây cũng sẽ là phần mà bạn sẽ làm việc nhiều nhất sau này vì thẻ <head> </head> chỉ cần đụng tới khi cần khai báo thông tin của tài liệu mà thôi.

Trong khuôn khổ bài viết này, mình sẽ giới thiệu chi tiết các thẻ HTML dành cho mục đích định dạng chữ viết và văn bản bên trong website, ví dụ như tiêu đề văn bản, in đậm, in nghiêng,…định dạng chữ viết và văn bản bên trong website, ví dụ như tiêu đề văn bản, in đậm, in nghiêng,…
Tiêu đề và đoạn văn bản
Tiêu đề (Headline) và đoạn văn bản (Paragraph) là hai thành phần mà bạn cần phân biệt để sau này sử dụng cho đúng. Bạn hãy hiểu rằng, tiêu đề văn bản nó giống như tên của từng chương trong một quyển sách vậy, nó sẽ được hiển thị to hơn nhằm nổi bật hơn.
Trong HTML, các thẻ tiêu đề sẽ được định nghĩa bằng cặp thẻ <hn>, trong đó n là số tự nhiên từ 1 đến 6 tương ứng với từng cấp độ, số càng nhỏ thì cấp độ càng lớn. Để dễ hiểu hơn, hãy thử soạn thảo một tài liệu HTML như dưới đây.
Bạn thấy không, thẻ <h2> sẽ có kích thước to nhất và thẻ <h6> sẽ có kích thước nhỏ nhất. Nếu sau này bạn có soạn thảo một bài viết bằng HTML thì nhớ sử dụng các thẻ tiêu đề này để làm văn bản trở nên chuyên nghiệp hơn.
Còn đoạn văn bản thì nó sẽ được khai báo bằng cặp thẻ
strong { font-weight: bold; }
0. Các văn bản nằm trong cặp thẻ này sẽ được hiểu là một đoạn văn bản, mỗi đoạn văn bản sẽ được xuống dòng và cách nhau với tỷ lệ nhất định. Ví dụ bên dưới:
Các thẻ định dạng chữ viết
Đôi khi trong văn bản của bạn sẽ cần định dạng lại chữ viết như in đậm, tô nghiêng, gạch chân,…và đây là các thẻ HTML cho từng chức năng đó. Trước hết là hãy soạn một đoạn văn bản HTML như thế này: in đậm, tô nghiêng, gạch chân,…và đây là các thẻ HTML cho từng chức năng đó. Trước hết là hãy soạn một đoạn văn bản HTML như thế này:
Mình xin giải thích một số thẻ mới như sau:
strong { font-weight: bold; }
1: In đậm chữ viết.
strong { font-weight: bold; }
2: In nghiêng chứ viết.
strong { font-weight: bold; }
3: Gạch chân chữ viết.
strong { font-weight: bold; }
4: Gạch ngang chữ viết.
strong { font-weight: bold; }
5: Nhấn mạnh câu.
strong { font-weight: bold; }
6: Định dạng cho một đoạn mã nào đó.
strong { font-weight: bold; }
7: Thước kẻ ngang trên tài liệu.
strong { font-weight: bold; }
8: Tô sáng chữ viết.
Thẻ trích dẫn
Trích dẫn (Quote) là một thẻ có thể bạn sẽ thường sử dụng nếu thường xuyên viết báo hay phóng sự, mục đích của nó là định dạng một câu nói như một câu trích dẫn và có thể định dạng thêm tên người trích dẫn một cách chuyên nghiệp hơn, thẻ trích dẫn được quy định là
strong { font-weight: bold; }
9 và tên tác giả trích dẫn được quy định là <body> </body>0.
Lưu ý rằng thẻ <body> </body>0 thường chỉ nên dùng đặt trong thẻ
strong { font-weight: bold; }
9 thôi chứ dùng tùy tiện nó lại mất hay. Và mặc định thì các trình duyệt sẽ tự quy định nội dung nằm trong thẻ <body> </body>0 sẽ được in nghiêng, còn thẻ
strong { font-weight: bold; }
9 thì không có gì cả nhưng sau này bạn làm tới phần CSS rồi thì có thể tự thêm tí “phong cách” cho thẻ quote đẹp hơn.
Thẻ định dạng sẵn
Trong HTML hiện tại nó có một thẻ được gọi là thẻ định dạng sẵn (preformatted), thẻ này sẽ được viết là <body> </body>5. Sở dĩ nó được gọi là thẻ định dạng sẵn vì mặc định trình duyệt đã tự động định dạng cho các nội dung nằm bên trong thẻ đó như kích thước chữ, khoảng cách, kiểu chữ.
Thẻ <body> </body>5 này thường được dùng để đăng một câu đối thoại hoặc in một đoạn mã để cho dễ phân biệt với các văn bản thông thường. Xem ví dụ:
Ngoài ra cũng lưu ý rằng khi viết văn bản trong cặp thẻ<body> </body>7 thì việc xuống hàng thông thường vẫn sẽ được định dạng ra mà không cần thêm thẻ <body> </body>8.
Thuộc tính style để định dạng chữ viết
Mặc dù việc lên màu sắc trên website là do CSS đảm nhận, nhưng nếu là một văn bản HTML thông thường thì bạn vẫn có thể thêm màu sắc cho chữ viết bằng thuộc tính <body> </body>9. Thuộc tính <body> </body>9 có thể đặt trong bất cứ thẻ nào và giá trị của thuộc tính đó là các thuộc tính của CSS (mình sẽ liệt kê một số thuộc tính hay dùng bên dưới).đặt trong bất cứ thẻ nào và giá trị của thuộc tính đó là các thuộc tính của CSS (mình sẽ liệt kê một số thuộc tính hay dùng bên dưới).
Cấu trúc viết thuộc tính sẽ là <head> </head>1.
Màu chữ
Để thiết lập màu chữ, bạn có thể sử dụng thuộc tính <head> </head>2. Giá trị của nó là tên màu trong tiếng Anh hoặc mã màu HEX.
[html]chữ màu đỏ[/html]
Màu nền
Màu nền có cách thiết lập giống hệt màu chữ, tức là bạn có thể dùng giá trị là tên màu trong tiếng Anh hoặc mã màu HEX. Tên thuộc tính của màu nền là <head> </head>3.
[html]Chữ có nền màu đỏ và màu chữ là trắng[/html]
Kích thước chữ
Kích thước chữ bạn có thể sử dụng thuộc tính <head> </head>4 và giá trị là số kèm đơn vị. Bạn có thể sử dụng đơn vị <head> </head>5, <head> </head>6, <head> </head>7 hoặc <head> </head>8 tùy thích, đơn giản nhất là dùng <head> </head>5.
[html]Chữ có kích thước 32px[/html]
Font chữ
Nếu bạn có nhu cầu sử dụng font chữ khác so với font chữ mặc định thì hãy dùng thuộc tính <hn>0 với giá trị là tên font chữ có trên máy tính. Một số tên font chữ phổ biến nhất là Arial, Helvetica, Time New Roman, Verdana.Arial, Helvetica, Time New Roman, Verdana.
[html]Font chữ Arial[/html]
Ngoài ra bạn có thể thêm font chữ dự phòng bằng cách khai báo nhiều tên font chữ khác nhau được ngăn cách bởi dấu phẩy, ví dụ:
[html]Font chữ Arial[/html]
Ngoài ra bạn có thể thêm font chữ dự phòng bằng cách khai báo nhiều tên font chữ khác nhau được ngăn cách bởi dấu phẩy, ví dụ:
Có nghĩa là nếu máy người đọc không có font chữ Helvetica thì nó sẽ sử dụng font chữ Arial.
Căn lề văn bản
Để canh lề, chúng ta sử dụng thuộc tính <hn>1 với giá trị là <hn>2,<hn>3, <hn>4 hoặc <hn>5.
[html]Canh giữa văn bản[/html]
Lời kết
Có vẻ bài này chúng ta đã tìm hiểu hơi nhiều về HTML rồi phải không nè? Nhưng những gì mình đề cập ở trên đều rất quan trọng và bạn cần nên tập viết nhiều để làm quen với nó vì về sau nó sẽ giúp ích bạn nhiều trong công việc nói chung và việc làm web nói riêng.
Thạch Phạm
Bé Thạch 18 tuổi, hiện công tác tại AZDIGI với vị trí giữ xe và viết thuê tại ThachPham.Com. Sở thích nghiên cứu về website, DevOps, SysAdmin và xăm mình nữa. Phương châm sống của bé là "No Pain, No Gain".