Home-theater-designers
Một trong những tính năng đầu tiên mà tất cả các nhà phát triển học được khi hiểu rõ về xử lý văn bản là căn chỉnh văn bản. Công cụ nhỏ bé đó rất quan trọng đối với những người sắp chữ chuyên nghiệp cũng như các nhà thiết kế tờ rơi nghiệp dư. Không có gì ngạc nhiên khi CSS hỗ trợ căn chỉnh văn bản khi nói đến thiết kế web.
Các căn chỉnh văn bản cùng với một hoặc hai thuộc tính khác, kiểm soát cách một phần tử căn chỉnh theo chiều ngang văn bản của nó. Ngoài những điều cơ bản, các trình duyệt đang dần triển khai nhiều thông số kỹ thuật hơn, nhưng hỗ trợ đầy đủ sẽ khác nhau. Tìm hiểu cách căn chỉnh văn bản và các tính năng mà các trình duyệt phổ biến hỗ trợ ngày nay.
Kiến thức cơ bản về Thuộc tính căn chỉnh văn bản CSS
Căn chỉnh là một trong những thuật ngữ kiểu chữ quen thuộc nhất. Trong ngữ cảnh của CSS, căn chỉnh văn bản đề cập đến sự liên kết theo chiều ngang.
Căn chỉnh văn bản theo chiều ngang chỉ áp dụng cho các vùng chứa khối. Đây là các phần tử có chiều rộng đầy đủ như đoạn văn và div. Sử dụng căn chỉnh văn bản thuộc tính trên một phần tử nội tuyến chẳng hạn như trong sẽ không có hiệu lực. Bạn cũng có thể căn chỉnh các mục trong danh sách và các ô trong bảng:
cách nhận thẻ giao dịch trên Steam
Theo mặc định, bằng ngôn ngữ từ trái sang phải (sau này sẽ có thêm ngôn ngữ này), văn bản căn chỉnh sang trái:
Trong CSS, điều này giống như:
p { text-align: left; }Hoặc:
p { text-align: start; }Có liên quan: Cascading Style Sheets là gì và CSS được sử dụng để làm gì?
Bạn có thể sử dụng các giá trị khác cho căn chỉnh văn bản thuộc tính để thay đổi căn chỉnh theo chiều ngang. Các giá trị phổ biến nhất quen thuộc từ các ứng dụng xử lý văn bản:
text-align: left
text-align: center
text-align: rightSử dụng biện minh để căn chỉnh các cạnh trái và phải
Một giá trị chung khác cho căn chỉnh văn bản Là biện minh . Trình duyệt thêm không gian vào văn bản căn lề để mỗi dòng mở rộng để lấp đầy khoảng trống có sẵn:
Khi bạn căn chỉnh văn bản, dòng cuối cùng có thể phức tạp. Vì nó có thể rất ngắn (có thể chỉ là một từ duy nhất), việc giãn cách nó trên toàn bộ chiều rộng có thể rất xấu. Theo mặc định, văn bản được căn đều sẽ căn chỉnh dòng cuối cùng sang bên trái.
chèn một đường ngang trong từ
Đôi khi bạn có thể muốn một hiệu ứng khác. Việc triển khai trình duyệt đang bắt kịp thông số kỹ thuật, nhưng có thể có hai cách tiếp cận.
Các biện minh cho tất cả giá trị phải có nghĩa là các trình duyệt coi dòng cuối cùng giống như tất cả các dòng khác và kéo dài nó ra toàn bộ chiều rộng. Tuy nhiên, tại thời điểm viết bài, không có trình duyệt nào hỗ trợ giá trị này. Bạn có thể kiểm tra caniuse để xem nếu họ làm khi bạn đang đọc bài viết này.
Một thuộc tính CSS khác, text-align-last , linh hoạt hơn và có hỗ trợ tốt hơn. Bạn có thể coi nó giống như căn chỉnh văn bản , nhưng nó chỉ áp dụng cho dòng cuối cùng:
Hỗ trợ trình duyệt cho thuộc tính này tốt hơn, nhưng không hoàn hảo. Lần nữa, kiểm tra caniuse trước khi bạn sử dụng nó . Nếu một trình duyệt không nhận ra thuộc tính này, nó sẽ bỏ qua nó.
Căn chỉnh văn bản và hướng đọc
Bạn có thể đang làm việc với một ngôn ngữ, chẳng hạn như tiếng Ả Rập hoặc tiếng Do Thái, đọc từ phải sang trái. CSS sử dụng phương hướng thuộc tính để chỉ định điều này, ví dụ:
direction: rtl;Các ngôn ngữ này thường căn chỉnh văn bản sang bên phải theo mặc định.
Thay vì phải chỉ định bên trái / đúng , cách ưu tiên để căn chỉnh văn bản sử dụng các giá trị bắt đầu và kết thúc . Điều này chỉ định xem văn bản nên xếp hàng ở đầu mỗi dòng hay cuối mỗi dòng. Trong các ngôn ngữ từ trái sang phải, bắt đầu tương đương với bên trái . Trong ngôn ngữ từ phải sang trái, văn bản bắt đầu ở bên phải và kết thúc ở bên trái.
cách di chuyển một trang trong word
Sử dụng bắt đầu hoặc kết thúc có nghĩa là, bất kể hướng văn bản, căn chỉnh là nhất quán.
Cách các phần tử kế thừa Thuộc tính text-align
Bạn nên biết rằng căn chỉnh văn bản tài sản được thừa kế. Ví dụ: nếu bạn đặt nó trên cơ thể người , nó sẽ áp dụng cho mọi phần tử trên trang. Tất nhiên, bạn có thể ghi đè nó lên bất kỳ phần tử nào.
Sử dụng Thuộc tính căn chỉnh văn bản để Kiểm soát Bố cục
Bạn có thể dùng căn chỉnh văn bản Thuộc tính CSS để xác định cách trình duyệt sắp xếp văn bản theo chiều ngang. Các giá trị phổ biến nhất là bên trái , đúng , Trung tâm , và biện minh . Những điều này khá đơn giản, mặc dù biện minh giới thiệu một số phức tạp.
Bạn nên sử dụng căn chỉnh văn bản một cách tiết kiệm. Trên bảng quảng cáo và áp phích, căn chỉnh trung tâm có thể phù hợp, nhưng nó có thể khiến các khối văn bản dài hơn khó đọc. Sự biện minh thường dễ đọc hơn khi các dòng văn bản dài hơn. Việc căn chỉnh các cột văn bản ngắn có thể tạo ra khoảng cách xấu.
Các căn chỉnh văn bản thuộc tính là một trong nhiều thuộc tính CSS cung cấp định dạng hữu ích và định vị cơ bản.
Đăng lại Đăng lại tiếng riu ríu E-mail 10 ví dụ về mã CSS đơn giản mà bạn có thể học trong 10 phútCần trợ giúp với CSS? Hãy thử các ví dụ mã CSS cơ bản này để bắt đầu, sau đó áp dụng chúng cho các trang web của riêng bạn.
Đọc tiếp Chủ đề liên quan- Lập trình
- Phát triển web
- Thiết kế web
- CSS
Bobby là một người đam mê công nghệ, người đã làm việc như một nhà phát triển phần mềm trong gần hai thập kỷ. Anh ấy đam mê chơi game, làm Biên tập viên đánh giá tại Tạp chí Switch Player và đắm mình trong tất cả các khía cạnh của xuất bản trực tuyến và phát triển web.
Xem thêm từ Bobby JackTheo dõi bản tin của chúng tôi
Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!
Bấm vào đây để đăng ký