Công cụ yêu cầu
Để hiểu rõ hơn về khái niệm căn chỉnh trong HTML, chúng ta cần đề cập đến một số công cụ cần thiết cần thiết để chạy mã HTML. Một là trình soạn thảo văn bản và thứ hai là trình duyệt. Mộ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 căn chỉnh, trước tiên chúng ta cần có một số bí quyết 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 >
< cái đầu >...</ cái đầu >
< cơ thể người >….</ cơ thể người >
</ html >
HTML có hai phần chính. Một là đầu, và một là thân. Tất cả các thẻ được viết trong dấu ngoặc nhọn. Phần đầu đề cập đế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 kiểu bên trong phần đầu. Mặt khác, phần nội dung 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ứ thứ 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.
Một điều tôi cần làm nổi bật ở đây là thẻ mở và đóng. Mỗi thẻ được viết phải được đóng lại. Ví dụ: Html có thẻ bắt đầu là và thẻ kết thúc là. Vì vậy, có thể quan sát thấy rằng thẻ kết thúc có một dấu gạch chéo theo sau là tên thẻ. Tương tự, tất cả các thẻ khác cũng tuân theo cách tiếp cận tương tự. Mỗi trình soạn thảo văn bản sau đó được lưu với phần mở rộng là html. Ví dụ: chúng tôi đã sử dụng một tệp có tên example.html. Sau đó, bạn sẽ thấy rằng biểu tượng notepad đã thay đổi thành biểu tượng trình duyệt.
Vì căn chỉnh là nội dung của kiểu dáng. Kiểu trong html có ba kiểu. Một phong cách trong dòng, 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, kiểu bên ngoài được viết trong một tệp CSS riêng biệt.
Kiểu nội tuyến của văn bản
ví dụ 1
Bây giờ đã đến 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 đưa ra 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ẻ.
Thẻ này là một thẻ nội tuyến. Chúng tôi sẽ viết thẻ này khi chúng tôi sẽ giới thiệu thẻ đoạn trong nội dung 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 văn được căn ở 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ức là cho trái, phải và giữa. Nhưng nếu bạn chỉ muốn căn chỉnh văn bản ở trung tâm, thì một thẻ cụ thể được sử dụng cho mục đích này.
< Trung tâm > …… ..</ Trung tâm >Thẻ trung tâm đượ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
Đây là một ví dụ về căn chỉnh tiêu đề thay vì một đoạn trong văn bản html. Cú pháp cho việc căn chỉnh tiêu đề này giống nhau. Điều này có thể được thực hiện thông qua cả thẻ hoặc bằng cách tạo kiểu nội dòng hoặc thêm thẻ căn chỉnh bên trong thẻ tiêu đề.
Đầu ra được hiển thị trong trình duyệt. Thẻ tiêu đề đã chuyển đổi văn bản thuần túy thành tiêu đề và thẻ đã căn chỉnh nó ở giữa.
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 điều 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 Phong cách =chữ-căn chỉnh: center;>Sau khi thêm thẻ này trong thẻ đoạn, vui lòng lưu tệp và chạy trên trình duyệt. Bạn sẽ thấy rằng đoạn văn bây giờ đã được căn giữa. Xem hình ảnh bên dưới.
Căn chỉnh văn bản sang bên phải
Để nghiêng văn bản sang bên phải cũng tương tự như đặt nó ở giữa trang. Chỉ từ trung tâm được thay thế bằng ngay trong thẻ đoạn văn.
< P Phong cách =chữ-căn chỉnh: đúng;> ……… ..</ P >Các 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 bây giờ được chuyển sang phía 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ộ (trang định kiểu xếp tầng) hoặc kiểu nội bộ là một loại css được định nghĩa trong phần đầu của html của trang. Nó hoạt động tương tự như các thẻ nội bộ.
Hãy xem xét trang được hiển thị ở trên; nó chứa các tiêu đề và đoạn văn trong đó. 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 dòng 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 bên trong có thể được tự động áp dụng cho từng đoạn văn bản bằng cách đề cập đến p trong câu lệnh kiểu. Sau đó không cần viết bất kỳ thẻ nào bên trong thẻ đoạn văn. Bây giờ hãy quan sát mã và nó đang hoạt động.
< Phong cách >P{Chữ-căn chỉnh: Trung tâm}
</ Phong cách >
Thẻ này được viết trong thẻ style ở phần đầu. Bây giờ chạy mã trong trình duyệt.
Khi bạn thực thi trang trong trình duyệt, bạn sẽ thấy rằng tất cả các đoạn văn đều được căn chỉnh ở giữa trang. Thẻ này được áp dụng cho mọi đoạn vă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 chỉnh tất cả các tiêu đề trong văn bản sang phía 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ố kiểu bên trong phần đầu.
H2, h3{
Chữ-căn chỉnh: đúng
}
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 những đoạn khác vẫn giữ nguyên. Do đó, chúng tôi đ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 phải thêm tên của lớp vào bên trong thẻ đoạn văn mà bạn muốn căn lề.
< Phong cách >.Trung tâm{
Chữ-căn chỉnh: Trung tâm}
</ Phong cách >
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 trong đầ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 các thẻ nội tuyến và thẻ nội bộ.