Dòng chữ. Văn bản in đậm bằng HTML và CSS

Hình nhỏ

Hình nhỏ

Nhiều hơn bình thường

Ít hơn bình thường

Chữ in nghiêng

Chữ in nghiêng

Với dấu gạch dưới

gạch bỏ

Ngoài các thẻ được mô tả, còn có một số cách khác để thay đổi phông chữ trong html. Một trong số đó là sử dụng thuộc tính style chung. Sử dụng các giá trị thuộc tính của nó, bạn có thể đặt kiểu hiển thị của phông chữ:

1) họ phông chữ – thuộc tính đặt họ phông chữ. Có thể liệt kê nhiều giá trị.
Việc thay đổi phông chữ trong html sang giá trị tiếp theo sẽ xảy ra nếu dòng trước đó không được cài đặt trên hệ điều hành của người dùng.

Cú pháp viết:

họ phông chữ: tên phông chữ [, tên phông chữ [, ...]]

2) cỡ chữ – kích thước được đặt từ 1 đến 7. Đây là một trong những cách chính để bạn có thể tăng phông chữ trong HTML.
Cú pháp viết:

cỡ chữ: kích thước tuyệt đối | kích thước tương đối | ý nghĩa | quan tâm | thừa kế

Bạn cũng có thể đặt kích thước phông chữ:

• Tính bằng pixel;
• Ở giá trị tuyệt đối (xx-nhỏ, x-nhỏ, nhỏ, trung bình, lớn);
• Theo tỷ lệ phần trăm;
• Tính theo điểm (pt).

Cỡ chữ:7

Cỡ chữ:24px

Cỡ chữ: x-lớn

Cỡ chữ: 200%

Cỡ chữ:24pt

kiểu phông chữ: bình thường | in nghiêng | xiên | thừa kế

Giá trị:

• bình thường – chính tả bình thường;
• in nghiêng – in nghiêng;
• xiên – phông chữ nghiêng về bên phải;
• kế thừa - kế thừa cách viết của phần tử cha.

Một ví dụ về cách thay đổi phông chữ trong html bằng thuộc tính này:

kiểu phông chữ: kế thừa

kiểu chữ: nghiêng

kiểu phông chữ: bình thường

kiểu chữ: xiên

biến thể phông chữ: bình thường | vốn hóa nhỏ | thừa kế

Một ví dụ về cách thay đổi phông chữ trong html bằng thuộc tính này:

biến thể phông chữ: kế thừa

biến thể phông chữ: bình thường

biến thể phông chữ:chữ hoa nhỏ

font-weight: đậm|đậm hơn|nhạt hơn|bình thường|100|200|300|400|500|600|700|800|900

Giá trị:

• in đậm – đặt phông chữ html thành in đậm;
• đậm hơn - táo bạo hơn so với bình thường;
• nhẹ hơn – ít bão hòa hơn so với bình thường;
• bình thường – chính tả bình thường;
• 100-900 – đặt độ dày phông chữ tương đương với số.

độ dày phông chữ: đậm

font-weight:đậm hơn

font-weight:nhẹ hơn

độ dày phông chữ: bình thường

trọng lượng phông chữ: 900

trọng lượng phông chữ: 100

Phông chữ là một thuộc tính chứa khác. Bên trong chính nó, nó kết hợp các giá trị của một số thuộc tính nhằm thay đổi phông chữ. cú pháp phông chữ:

phông chữ: họ phông chữ cỡ chữ | thừa kế

Giá trị này cũng có thể được đặt thành phông chữ được hệ thống sử dụng trong nhãn trên các điều khiển khác nhau:

• chú thích – cho các nút;
• biểu tượng – dành cho biểu tượng;
• thực đơn - thực đơn;
• hộp thông báo – dành cho hộp thoại;
• chú thích nhỏ – dành cho các điều khiển nhỏ;
• thanh trạng thái - phông chữ thanh trạng thái.

phông chữ:biểu tượng

phông chữ:chú thích

phông chữ: thực đơn

phông chữ: hộp tin nhắn

chú thích nhỏ

phông chữ: thanh trạng thái

phông chữ:nghiêng 50px in đậm "Times New Roman", Times, serif

Chào hỏi những người bạn.

Sau một thời gian dài nghỉ ngơi, tôi nhớ ra đã lâu rồi mình chưa viết một dòng nào. Tất nhiên là có lý do cho việc này, bởi vì sẽ luôn có lý do nào đó để viện ra lý do, phải không? Trên thực tế, tôi tham gia Khóa học Video hàng ngày, điều mà tôi đã đề cập một vài lần, nhưng hiện tại tôi sẽ không nói gì thêm về nó, bạn sẽ sớm tìm ra mọi thứ.

Vì vậy, vì không có gì nảy ra trong đầu để viết về. Tôi quyết định xem số liệu thống kê để xem người dùng RuNet quan tâm đến điều gì về HTML, WordPress, DLE và các chủ đề tương tự. Và đoán xem? Vẫn còn cái gì đó để viết. Tất cả những câu hỏi mà tôi tìm thấy dường như đều có câu trả lời, nhưng không phải lúc nào cũng ở dạng dễ hiểu. Và nói chung việc viết những thứ như thế trở nên thú vị.

Hôm nay chúng ta sẽ nói về HTML. Cụ thể, chúng ta sẽ nói về cách làm nổi bật văn bản in đậm và in nghiêng, đồng thời chúng ta cũng sẽ nói về cách làm nổi bật bằng màu sắc.

Để in đậm văn bản, bạn không cần phải làm bất cứ điều gì cầu kỳ với các kiểu CSS hoặc nghĩ ra bất kỳ sự phức tạp nào khác. HTML đã có tính năng này. Đồng thời, chúng ta không chỉ có thể đánh dấu văn bản in đậm mà còn có thể nhấn mạnh vào nó bằng cách sử dụng tính năng đánh dấu. Sự nhấn mạnh có thể được đặt vào các công cụ tìm kiếm hoặc bất kỳ trình duyệt hoặc chương trình đặc biệt nào. Điều chính là không lạm dụng việc nhấn mạnh vào văn bản trong một bài báo hoặc trên một trang có một số thông tin, vì điều này có thể có tác động bất lợi, ít nhất là đối với việc quảng cáo trang HTML này.

Vì vậy, để in đậm văn bản một cách đơn giản, chúng ta có thể sử dụng thẻ. Thẻ này đề cập đến các yếu tố đánh dấu vật lý, đồng thời đặt văn bản ở chế độ in đậm mà không nhấn mạnh vào nó. Thẻ này là thẻ ghép đôi, nghĩa là nó có cả thẻ mở và thẻ đóng. Ngoài ra, vì phần tử là nội tuyến nên nó phải nằm trong một phần tử khối nào đó, chẳng hạn

Mã mẫu:

hình nhỏ

Kết quả:

hình nhỏ

Trong trường hợp này, chúng tôi chỉ cần đánh dấu văn bản in đậm và thế là xong.

Nhưng điều đó xảy ra, vì vậy chúng ta không chỉ cần làm nổi bật văn bản mà còn phải tập trung vào nó. Để làm được điều này, chúng ta có thể sử dụng thẻ đánh dấu logic. Văn bản được đánh dấu bằng thẻ này không chỉ có trọng lượng hơn đối với các công cụ tìm kiếm. Nhưng về mặt lý thuyết, nó phải khác với thẻ trong trình duyệt giọng nói, chẳng hạn như về ngữ điệu. Tuy nhiên, tôi không thể xác nhận hay phủ nhận thông tin này, điều này có đúng không?

Trong trường hợp này, mọi thứ hoàn toàn giống như trong trường hợp đánh dấu đơn giản bằng chữ in đậm, chỉ có điều chúng tôi đang tạo điểm nhấn chứ không chỉ làm nổi bật.

Mã mẫu:

Kết quả:

Mọi chuyện khá đơn giản phải không?

Trong trường hợp này, mọi thứ không phức tạp hơn trong trường hợp đầu tiên. Và hoàn cảnh của chúng tôi hoàn toàn giống nhau. Chúng ta có thể đánh dấu văn bản bằng hai tùy chọn trong HTML. Một lần nữa, sử dụng thẻ đánh dấu vật lý hoặc thẻ logic, chúng tôi lại tập trung vào văn bản đã chọn.

Để in nghiêng văn bản chúng ta sẽ sử dụng thẻ . Phần tử này được ghép nối và nội dòng, cho chúng ta biết rằng chúng ta nên sử dụng cả thẻ mở và thẻ đóng. Họ cũng nên sử dụng nó bên trong phần tử khối. Và trong trường hợp này, phần tử khối phù hợp nhất là thẻ đoạn văn

Mã mẫu:

văn bản in nghiêng