Cách chia văn bản bên trong phần tử ra thành nhiều cột – 24
– Trong bài học này, tôi sẽ hướng dẫn các bạn cách sử dụng nhóm thuộc tính column để chia văn bản bên trong một phần tử ra thành nhiều cột.
– Dưới dây là danh sách các thuộc tính thuộc nhóm column
- column-count: Thuộc tính này dùng để xác định “số lượng cột” mà các bạn muốn văn bản bên trong phần tử được chia thành.
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<style type="text/css">
#text{
text-align:justify;
column-count:3;
}
</style>
</head>
<body>
<h3>Văn bản nằm bên trong phần tử #text được chia ra làm ba cột.</h3>
<p id="text">- Tình yêu, hay ái tình, là một loạt các cảm xúc, trạng thái tâm lý, và thái độ khác nhau dao động từ tình cảm cá nhân đến niềm vui sướng. Tình yêu thường là một cảm xúc thu hút mạnh mẽ và nhu cầu muốn được ràng buộc gắn bó. Nó cũng có thể là một đức tính đại diện cho lòng tốt của con người, sự nhân từ, và sự thông cảm mối quan tâm trung thành và vị tha hướng tới người khác. Nó cũng có thể mô tả các hành động nhân văn và thông cảm đối với người khác, chính bản thân mình hoặc các con vật. Người Hy Lạp cổ đại xác định bốn hình thức của tình yêu: Quan hệ gần gũi của họ hàng hay người thân, tình bạn, ham muốn tình dục hoặc cảm xúc lãng mạn, và xúc cảm dành cho các giá trị tôn giáo. Các tác giả hiện đại đã phân biệt các biến thể chi tiết hơn nữa của tình yêu lãng mạn. Các nền văn hóa không phải của phương Tây cũng có các biến thể khác nhau cho các trạng thái cảm xúc này. Sự đa dạng của việc sử dụng và ý nghĩa kết hợp với sự phức tạp của những cảm giác của tình yêu làm cho việc thống nhất xác định thế nào là tình yêu trở nên cực kỳ khó khăn khi so với các trạng thái cảm xúc khác.</p>
</body>
</html>- column-gap: Thuộc tính này dùng để thiết lập “khoảng cách” nằm giữa hai cột văn bản.
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<style type="text/css">
#text{
text-align:justify;
column-count:3;
column-gap:50px;
}
</style>
</head>
<body>
<h3>Khoảng cách nằm giữa mỗi hai cột văn bản bên trong phần tử #text là 50px</h3>
<p id="text">- Tình yêu, hay ái tình, là một loạt các cảm xúc, trạng thái tâm lý, và thái độ khác nhau dao động từ tình cảm cá nhân đến niềm vui sướng. Tình yêu thường là một cảm xúc thu hút mạnh mẽ và nhu cầu muốn được ràng buộc gắn bó. Nó cũng có thể là một đức tính đại diện cho lòng tốt của con người, sự nhân từ, và sự thông cảm mối quan tâm trung thành và vị tha hướng tới người khác. Nó cũng có thể mô tả các hành động nhân văn và thông cảm đối với người khác, chính bản thân mình hoặc các con vật. Người Hy Lạp cổ đại xác định bốn hình thức của tình yêu: Quan hệ gần gũi của họ hàng hay người thân, tình bạn, ham muốn tình dục hoặc cảm xúc lãng mạn, và xúc cảm dành cho các giá trị tôn giáo. Các tác giả hiện đại đã phân biệt các biến thể chi tiết hơn nữa của tình yêu lãng mạn. Các nền văn hóa không phải của phương Tây cũng có các biến thể khác nhau cho các trạng thái cảm xúc này. Sự đa dạng của việc sử dụng và ý nghĩa kết hợp với sự phức tạp của những cảm giác của tình yêu làm cho việc thống nhất xác định thế nào là tình yêu trở nên cực kỳ khó khăn khi so với các trạng thái cảm xúc khác.</p>
</body>
</html>- column-rule-style: Thuộc tính này dùng để xác định “kiểu” của cái đường kẻ nằm ngăn cách giữa mỗi hai cột văn bản.
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<style type="text/css">
#text{
text-align:justify;
column-count:3;
column-gap:50px;
column-rule-style:dashed;
}
</style>
</head>
<body>
<p id="text">- Tình yêu, hay ái tình, là một loạt các cảm xúc, trạng thái tâm lý, và thái độ khác nhau dao động từ tình cảm cá nhân đến niềm vui sướng. Tình yêu thường là một cảm xúc thu hút mạnh mẽ và nhu cầu muốn được ràng buộc gắn bó. Nó cũng có thể là một đức tính đại diện cho lòng tốt của con người, sự nhân từ, và sự thông cảm mối quan tâm trung thành và vị tha hướng tới người khác. Nó cũng có thể mô tả các hành động nhân văn và thông cảm đối với người khác, chính bản thân mình hoặc các con vật. Người Hy Lạp cổ đại xác định bốn hình thức của tình yêu: Quan hệ gần gũi của họ hàng hay người thân, tình bạn, ham muốn tình dục hoặc cảm xúc lãng mạn, và xúc cảm dành cho các giá trị tôn giáo. Các tác giả hiện đại đã phân biệt các biến thể chi tiết hơn nữa của tình yêu lãng mạn. Các nền văn hóa không phải của phương Tây cũng có các biến thể khác nhau cho các trạng thái cảm xúc này. Sự đa dạng của việc sử dụng và ý nghĩa kết hợp với sự phức tạp của những cảm giác của tình yêu làm cho việc thống nhất xác định thế nào là tình yêu trở nên cực kỳ khó khăn khi so với các trạng thái cảm xúc khác.</p>
</body>
</html>- column-rule-width: Thuộc tính này dùng để thiết lập “độ dày” của cái đường kẻ nằm ngăn cách giữa mỗi hai cột văn bản.
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<style type="text/css">
#text{
text-align:justify;
column-count:3;
column-gap:50px;
column-rule-style:dashed;
column-rule-width:10px;
}
</style>
</head>
<body>
<p id="text">- Tình yêu, hay ái tình, là một loạt các cảm xúc, trạng thái tâm lý, và thái độ khác nhau dao động từ tình cảm cá nhân đến niềm vui sướng. Tình yêu thường là một cảm xúc thu hút mạnh mẽ và nhu cầu muốn được ràng buộc gắn bó. Nó cũng có thể là một đức tính đại diện cho lòng tốt của con người, sự nhân từ, và sự thông cảm mối quan tâm trung thành và vị tha hướng tới người khác. Nó cũng có thể mô tả các hành động nhân văn và thông cảm đối với người khác, chính bản thân mình hoặc các con vật. Người Hy Lạp cổ đại xác định bốn hình thức của tình yêu: Quan hệ gần gũi của họ hàng hay người thân, tình bạn, ham muốn tình dục hoặc cảm xúc lãng mạn, và xúc cảm dành cho các giá trị tôn giáo. Các tác giả hiện đại đã phân biệt các biến thể chi tiết hơn nữa của tình yêu lãng mạn. Các nền văn hóa không phải của phương Tây cũng có các biến thể khác nhau cho các trạng thái cảm xúc này. Sự đa dạng của việc sử dụng và ý nghĩa kết hợp với sự phức tạp của những cảm giác của tình yêu làm cho việc thống nhất xác định thế nào là tình yêu trở nên cực kỳ khó khăn khi so với các trạng thái cảm xúc khác.</p>
</body>
</html>- column-rule-color: Thuộc tính này dùng để thiết lập “màu sắc” của cái đường kẻ nằm ngăn cách giữa mỗi hai cột văn bản.
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<style type="text/css">
#text{
text-align:justify;
column-count:3;
column-gap:50px;
column-rule:dotted blue;
}
</style>
</head>
<body>
<p id="text">- Tình yêu, hay ái tình, là một loạt các cảm xúc, trạng thái tâm lý, và thái độ khác nhau dao động từ tình cảm cá nhân đến niềm vui sướng. Tình yêu thường là một cảm xúc thu hút mạnh mẽ và nhu cầu muốn được ràng buộc gắn bó. Nó cũng có thể là một đức tính đại diện cho lòng tốt của con người, sự nhân từ, và sự thông cảm mối quan tâm trung thành và vị tha hướng tới người khác. Nó cũng có thể mô tả các hành động nhân văn và thông cảm đối với người khác, chính bản thân mình hoặc các con vật. Người Hy Lạp cổ đại xác định bốn hình thức của tình yêu: Quan hệ gần gũi của họ hàng hay người thân, tình bạn, ham muốn tình dục hoặc cảm xúc lãng mạn, và xúc cảm dành cho các giá trị tôn giáo. Các tác giả hiện đại đã phân biệt các biến thể chi tiết hơn nữa của tình yêu lãng mạn. Các nền văn hóa không phải của phương Tây cũng có các biến thể khác nhau cho các trạng thái cảm xúc này. Sự đa dạng của việc sử dụng và ý nghĩa kết hợp với sự phức tạp của những cảm giác của tình yêu làm cho việc thống nhất xác định thế nào là tình yêu trở nên cực kỳ khó khăn khi so với các trạng thái cảm xúc khác.</p>
</body>
</html>- column-rule: Thuộc tính này là cú pháp tổng quát dùng để thiết lập cái đường kẻ nằm ngăn cách giữa mỗi hai cột văn bản (thay vì phải sử dụng kết hợp ba thuộc tính column-rule-width, column-rule-style, column-rule-color được nêu ở phía trên thì bây giờ chúng ta chỉ cần dùng duy nhất mỗi thuộc tính này là đủ)
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<style type="text/css">
#text{
text-align:justify;
column-count:3;
column-gap:50px;
column-rule:dotted blue;
}
</style>
</head>
<body>
<p id="text">- Tình yêu, hay ái tình, là một loạt các cảm xúc, trạng thái tâm lý, và thái độ khác nhau dao động từ tình cảm cá nhân đến niềm vui sướng. Tình yêu thường là một cảm xúc thu hút mạnh mẽ và nhu cầu muốn được ràng buộc gắn bó. Nó cũng có thể là một đức tính đại diện cho lòng tốt của con người, sự nhân từ, và sự thông cảm mối quan tâm trung thành và vị tha hướng tới người khác. Nó cũng có thể mô tả các hành động nhân văn và thông cảm đối với người khác, chính bản thân mình hoặc các con vật. Người Hy Lạp cổ đại xác định bốn hình thức của tình yêu: Quan hệ gần gũi của họ hàng hay người thân, tình bạn, ham muốn tình dục hoặc cảm xúc lãng mạn, và xúc cảm dành cho các giá trị tôn giáo. Các tác giả hiện đại đã phân biệt các biến thể chi tiết hơn nữa của tình yêu lãng mạn. Các nền văn hóa không phải của phương Tây cũng có các biến thể khác nhau cho các trạng thái cảm xúc này. Sự đa dạng của việc sử dụng và ý nghĩa kết hợp với sự phức tạp của những cảm giác của tình yêu làm cho việc thống nhất xác định thế nào là tình yêu trở nên cực kỳ khó khăn khi so với các trạng thái cảm xúc khác.</p>
</body>
</html>- column-fill: Thuộc tính này dùng để tùy chỉnh cách thức phân chia văn bản ra các cột.
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<style type="text/css">
#text{
text-align:justify;
column-count:3;
column-gap:50px;
column-rule:dotted blue;
}
</style>
</head>
<body>
<p id="text">- Tình yêu, hay ái tình, là một loạt các cảm xúc, trạng thái tâm lý, và thái độ khác nhau dao động từ tình cảm cá nhân đến niềm vui sướng. Tình yêu thường là một cảm xúc thu hút mạnh mẽ và nhu cầu muốn được ràng buộc gắn bó. Nó cũng có thể là một đức tính đại diện cho lòng tốt của con người, sự nhân từ, và sự thông cảm mối quan tâm trung thành và vị tha hướng tới người khác. Nó cũng có thể mô tả các hành động nhân văn và thông cảm đối với người khác, chính bản thân mình hoặc các con vật. Người Hy Lạp cổ đại xác định bốn hình thức của tình yêu: Quan hệ gần gũi của họ hàng hay người thân, tình bạn, ham muốn tình dục hoặc cảm xúc lãng mạn, và xúc cảm dành cho các giá trị tôn giáo. Các tác giả hiện đại đã phân biệt các biến thể chi tiết hơn nữa của tình yêu lãng mạn. Các nền văn hóa không phải của phương Tây cũng có các biến thể khác nhau cho các trạng thái cảm xúc này. Sự đa dạng của việc sử dụng và ý nghĩa kết hợp với sự phức tạp của những cảm giác của tình yêu làm cho việc thống nhất xác định thế nào là tình yêu trở nên cực kỳ khó khăn khi so với các trạng thái cảm xúc khác.</p>
</body>
</html>- column-width: Thuộc tính này dùng để thiết lập chiều rộng của mỗi cột văn bản.
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<style type="text/css">
#text{
text-align:justify;
column-gap:30px;
column-width:100px;
}
</style>
</head>
<body>
<p id="text">- Tình yêu, hay ái tình, là một loạt các cảm xúc, trạng thái tâm lý, và thái độ khác nhau dao động từ tình cảm cá nhân đến niềm vui sướng. Tình yêu thường là một cảm xúc thu hút mạnh mẽ và nhu cầu muốn được ràng buộc gắn bó. Nó cũng có thể là một đức tính đại diện cho lòng tốt của con người, sự nhân từ, và sự thông cảm mối quan tâm trung thành và vị tha hướng tới người khác. Nó cũng có thể mô tả các hành động nhân văn và thông cảm đối với người khác, chính bản thân mình hoặc các con vật. Người Hy Lạp cổ đại xác định bốn hình thức của tình yêu: Quan hệ gần gũi của họ hàng hay người thân, tình bạn, ham muốn tình dục hoặc cảm xúc lãng mạn, và xúc cảm dành cho các giá trị tôn giáo. Các tác giả hiện đại đã phân biệt các biến thể chi tiết hơn nữa của tình yêu lãng mạn. Các nền văn hóa không phải của phương Tây cũng có các biến thể khác nhau cho các trạng thái cảm xúc này. Sự đa dạng của việc sử dụng và ý nghĩa kết hợp với sự phức tạp của những cảm giác của tình yêu làm cho việc thống nhất xác định thế nào là tình yêu trở nên cực kỳ khó khăn khi so với các trạng thái cảm xúc khác.</p>
</body>
</html>
