Làm cách nào để căn chỉnh văn bản trong HTML?

Để nói rõ hơn về khái niệm canh lề trong HTML, chúng ta cần đề cập đến một số công cụ cần thiết để chạy mã HTML. Một là trình soạn thảo văn bản và cái thứ hai là trình duyệt. Trình soạn thảo văn bản có thể là notepad, sublime, notepad ++ hoặc bất kỳ thứ gì khác có thể hữu ích. Trong hướng dẫn này, chúng tôi đã sử dụng notepad, một ứng dụng mặc định trong windows và Google Chrome làm trình duyệt

định dạng HTML

Để hiểu được sự liên kết, trước tiên chúng ta cần có một số kiến ​​thức cơ bản về HTML. Chúng tôi đã trình bày ảnh chụp màn hình của mã mẫu

< html >

< đầu > … < /head>

< cơ thể > …. < /cơ thể >

< /html >

HTML có hai phần chính. Một là đầu, và một là cơ thể. Tất cả các thẻ được viết trong dấu ngoặc nhọn. Phần đầu liên quan đến việc đặt tên trang html bằng cách sử dụng thẻ “tiêu đề”. Ngoài ra, hãy sử dụng câu lệnh phong cách bên trong đầu. Mặt khác, phần thân xử lý tất cả các thẻ khác của văn bản, hình ảnh hoặc video, v.v. nói cách khác, bất cứ điều gì bạn muốn thêm vào trang html của mình đều được viết trong phần nội dung của html

One thing I need to highlight here is the tag opening and closing. Each tag that is written must be closed. For instance, Html has starting tag of and the ending tag is . So it is observed that the ending tag has a slash followed by the tag name. Similarly, all other tags also follow the same approach. Each text editor is then saved with the extension of html. For example, we have used a file with the name example.html. Then you will see that the notepad icon has changed into the browser icon.

Vì căn chỉnh là nội dung của kiểu dáng. Phong cách trong html có ba loại. Một phong cách nội tuyến, phong cách bên trong và bên ngoài. Nội tuyến ngụ ý trong thẻ. Nội bộ được viết bên trong đầu. Đồng thời, phong cách bên ngoài được viết trong một tệp CSS riêng

Kiểu dáng nội tuyến của văn bản

ví dụ 1

Bây giờ là lúc để thảo luận về một ví dụ ở đây. Hãy xem xét hình ảnh hiển thị ở trên. Trong tệp notepad đó, chúng tôi đã viết một văn bản đơn giản. Khi chúng tôi chạy nó dưới dạng trình duyệt, nó sẽ hiển thị đầu ra được cung cấp bên dưới trong trình duyệt

Nếu chúng tôi muốn văn bản này được hiển thị ở trung tâm, chúng tôi sẽ thay đổi thẻ

< p kiểu= ”văn bản- align: center ;”>

Thẻ này là thẻ nội tuyến. Chúng tôi sẽ viết thẻ này khi chúng tôi giới thiệu thẻ đoạn văn trong phần thân html. Sau văn bản, sau đó đóng thẻ đoạn văn. Lưu và sau đó mở tệp trong trình duyệt

Đoạn được căn chỉnh ở giữa, vì nó được hiển thị trong trình duyệt. Thẻ được sử dụng trong ví dụ này được sử dụng cho bất kỳ căn chỉnh nào, tôi. e. , cho trái, phải và trung tâm. Nhưng nếu bạn chỉ muốn căn chỉnh văn bản ở giữa, thì một thẻ cụ thể sẽ được sử dụng cho mục đích này

< trung tâm >……. < /trung tâm >

Thẻ center được sử dụng trước và sau văn bản. Điều này cũng sẽ hiển thị kết quả tương tự như ví dụ trước

ví dụ 2

This is an example of aligning the heading instead of a paragraph in the html text. The syntax for this alignment of heading is the same. This can be done through both the

tag or by inline styling or adding the align tag inside the heading tag.

The output is shown in the browser. The heading tag has converted the plain text into a heading, and the

tag has aligned it in the center.

ví dụ 3

Căn chỉnh văn bản ở giữa

Hãy xem xét một ví dụ trong đó có một đoạn văn được hiển thị trong trình duyệt. Chúng ta cần căn chỉnh cái này ở trung tâm

Chúng tôi sẽ mở tệp này trong notepad và sau đó căn chỉnh nó ở vị trí trung tâm bằng cách sử dụng thẻ

< p kiểu = “văn bản- align: center ;”>

Sau khi thêm thẻ này vào thẻ đoạn văn, hãy lưu tệp và chạy nó trên trình duyệt. Bạn sẽ thấy rằng đoạn văn hiện đã được căn giữa. Xem hình ảnh bên dưới

Căn chỉnh văn bản sang phải

Để văn bản nghiêng về bên phải cũng tương tự như đặt văn bản ở giữa trang. Chỉ từ “trung tâm” được thay thế bằng từ “phải” trong thẻ đoạn văn

< p kiểu = “văn bản-………. < align: right ;”>………..</p >

Những thay đổi có thể được nhìn thấy thông qua hình ảnh được thêm vào bên dưới

Lưu và làm mới trang web trong trình duyệt. Văn bản hiện được chuyển sang bên phải của trang

Kiểu nội bộ của văn bản

Ví dụ 1

Như đã mô tả ở trên, css nội bộ (biểu định kiểu xếp tầng) hoặc kiểu dáng nội bộ là một loại css được xác định trong phần đầu của html của trang. Nó hoạt động tương tự như các thẻ nội bộ

Xem xét trang được hiển thị ở trên; . Chúng tôi có một yêu cầu để xem văn bản ở trung tâm. Căn chỉnh nội tuyến yêu cầu viết thủ công các thẻ bên trong mỗi đoạn văn. Nhưng kiểu nội bộ có thể được tự động áp dụng cho từng đoạn văn bản bằng cách nhắc đến p trong câu lệnh kiểu. Sau đó, không cần phải viết bất kỳ thẻ nào bên trong thẻ đoạn. Bây giờ hãy quan sát mã và nó đang hoạt động

< kiểu >

P { Văn bản- căn chỉnh . trung tâm }

< /kiểu >

Thẻ này được viết trong thẻ kiểu ở phần đầu. Bây giờ hãy chạy mã trong trình duyệt

Khi bạn chạy trang trong trình duyệt, bạn sẽ thấy rằng tất cả các đoạn được căn chỉnh ở giữa trang. Thẻ này được áp dụng cho mọi đoạn có trong văn bản

ví dụ 2

Trong ví dụ này, giống như một đoạn văn, chúng ta sẽ căn lề tất cả các tiêu đề trong văn bản về bên phải. Với mục đích này, chúng tôi sẽ đề cập đến các tiêu đề trong tuyên bố phong cách bên trong đầu

h2, h3

{

Văn bản- căn chỉnh . phải

}

Bây giờ sau khi lưu tệp, hãy chạy tệp notepad trong trình duyệt. Bạn sẽ thấy rằng các tiêu đề được căn chỉnh ở phía bên phải của trang HTML

ví dụ 3

Trong kiểu nội bộ, có thể xảy ra trường hợp bạn chỉ cần căn chỉnh văn bản của một số đoạn trong văn bản trong khi các đoạn khác vẫn giữ nguyên. Do đó, chúng ta đang sử dụng khái niệm lớp. Chúng tôi giới thiệu lớp với phương thức dấu chấm bên trong thẻ kiểu. Cần thêm tên của lớp bên trong thẻ đoạn văn mà bạn muốn căn chỉnh

< kiểu >

.center{

Văn bản- căn chỉnh . trung tâm }

< /kiểu >

< p lớp = “trung tâm”>……< /p>

Chúng tôi đã thêm lớp trong ba đoạn đầu tiên. Bây giờ hãy chạy mã. Bạn có thể thấy ở đầu ra rằng ba đoạn đầu tiên được căn chỉnh ở giữa, trong khi những đoạn khác thì không

Phần kết luận

Bài viết này giải thích rằng việc căn chỉnh có thể được thực hiện theo nhiều cách khác nhau thông qua nội tuyến và thẻ nội bộ

Thẻ HTML nào dùng để căn chỉnh văn bản?

Thẻ đã được sử dụng trong HTML4 để căn giữa văn bản.

Căn chỉnh văn bản hoạt động như thế nào trong HTML?

Thuộc tính CSS căn chỉnh văn bản đặt căn chỉnh theo chiều ngang của nội dung cấp độ nội tuyến bên trong phần tử khối hoặc hộp ô bảng . Điều này có nghĩa là nó hoạt động giống như vertical-align nhưng theo hướng nằm ngang.