CSS - Văn bản
Xin chào các bạn future web developers! Hôm nay, chúng ta sẽ cùng lặn sâu vào thế giới kỳ diệu của các thuộc tính văn bản trong CSS. Như một người giáo viên máy tính gần gũi, tôi rất háo hức dẫn dắt các bạn trong hành trình này. Nhớ rằng, giống như học骑自行车, việc thành thạo CSS đòi hỏi phải thực hành, nhưng tôi诺言 nó sẽ rất thú vị!
CSS Văn bản - Màu văn bản
Hãy bắt đầu với điều gì đó đầy màu sắc! Trong CSS, chúng ta có thể dễ dàng thay đổi màu sắc của văn bản bằng cách sử dụng thuộc tính color. Nó giống như có một c这支魔法 cọ để vẽ lên từ ngữ của bạn!
p {
color: blue;
}Dòng đơn giản này sẽ làm cho tất cả văn bản trong đoạn được viết bằng màu xanh lam. Nhưng đợi đã, còn nhiều hơn nữa! Bạn có thể sử dụng tên màu, mã HEX hoặc giá trị RGB:
h1 {
color: #FF5733; /* Mã HEX cho màu cam rực rỡ */
}
span {
color: rgb(50, 205, 50); /* Giá trị RGB cho màu xanh lá cây lime */
}CSS Văn bản - Canh lề văn bản
Tiếp theo, hãy nói về việc canh lề văn bản. Nó giống như sắp xếp sách trên kệ - bạn có thể đặt chúng bên trái, bên phải hoặc canh giữa một cách đẹp mắt.
.left-align {
text-align: left;
}
.right-align {
text-align: right;
}
.center-align {
text-align: center;
}
.justify-align {
text-align: justify;
}Giá trị justify đặc biệt thú vị. Nó phân bố văn bản đều đặn trên toàn bộ dòng, giống như cách báo chí sắp xếp các cột của họ.
CSS Văn bản - Canh dọc
Canh dọc là một chút phức tạp, nhưng đừng lo lắng! Nó thường được sử dụng với các phần tử inline hoặc table-cell.
img {
vertical-align: middle;
}
td {
vertical-align: top;
}Thuộc tính này có thể nhận các giá trị như top, middle, bottom, sub, super, và thậm chí là các giá trị độ dài cụ thể!
CSS Văn bản - Hướng văn bản
Trong làng toàn cầu của chúng ta, chúng ta thường cần làm việc với các ngôn ngữ đọc từ phải sang trái. Đó là khi thuộc tính direction trở nên hữu ích:
.arabic-text {
direction: rtl; /* Phải sang Trái */
}
.english-text {
direction: ltr; /* Trái sang Phải */
}CSS Văn bản - Trang trí văn bản
Muốn thêm chút phong cách cho văn bản của bạn? Trang trí văn bản sẽ là người bạn đồng hành của bạn! Nó giống như thêm trang sức cho từ ngữ của bạn.
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.line-through {
text-decoration: line-through;
}
.no-decoration {
text-decoration: none;
}Mẹo nhỏ: Sử dụng text-decoration: none; để loại bỏ gạch chân mặc định từ các liên kết!
CSS Văn bản - Bỏ qua trang trí
Thuộc tính này xác định phần nào của văn bản nên được bỏ qua khi áp dụng trang trí văn bản.
p {
text-decoration: underline;
text-decoration-skip: spaces;
}Điều này sẽ gạch chân văn bản nhưng bỏ qua các khoảng trống, tạo ra một的外观Appearance polish hơn.
CSS Văn bản - Bỏ qua mực in
Đây là một tính năng thú vị! Nó quyết định xem trang trí văn bản có nên được vẽ trên hoặc dưới "mực" (tức là văn bản本身的本身).
p {
text-decoration: underline;
text-decoration-skip-ink: auto;
}Với auto, trình duyệt sẽ thông minh để bỏ qua các phần dưới của các chữ cái như 'g' hoặc 'y'.
CSS Văn bản - Chuyển đổi văn bản
Muốn喊口号 trong ALL CAPS hoặc则whisper trong lowercase? Thuộc tính text-transform chính là lựa chọn của bạn!
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.capitalize {
text-transform: capitalize;
}Giá trị capitalize đặc biệt thú vị - nó chuyển đổi chữ cái đầu tiên của mỗi từ thành chữ cái in hoa.
CSS Văn bản - Nhấn mạnh văn bản
Thuộc tính text-emphasis cho phép bạn thêm các dấu nhấn mạnh vào văn bản. Nó giống như thêm các chấm hoặc vòng tròn nhỏ trên hoặc dưới văn bản của bạn.
.emphasis {
text-emphasis: filled;
text-emphasis-position: over right;
}Điều này thêm các vòng tròn đầy trên và bên phải của mỗi ký tự.
CSS Văn bản - Đ indent
Nhớ khi giáo viên của bạn yêu cầu bạn缩进 đầu dòng của mỗi đoạn? CSS có thể tự động làm điều đó!
p {
text-indent: 50px;
}Điều này 缩进 đầu dòng của mỗi đoạn bằng 50 pixel.
CSS Văn bản - Khoảng cách giữa các chữ cái
Khoảng cách giữa các chữ cái cho phép bạn điều chỉnh không gian giữa các ký tự. Nó giống như cho các chữ cái một chút không gian cá nhân!
h1 {
letter-spacing: 5px;
}Điều này thêm 5 pixel không gian giữa mỗi chữ cái trong tiêu đề của bạn.
CSS Văn bản - Khoảng cách giữa các từ
Tương tự như khoảng cách giữa các chữ cái, nhưng cho toàn bộ từ:
p {
word-spacing: 10px;
}Điều này thêm 10 pixel không gian bổ sung giữa mỗi từ.
CSS Văn bản - White space
Thuộc tính white-space xác định cách xử lý không gian trắng bên trong một phần tử.
.nowrap {
white-space: nowrap;
}
.pre {
white-space: pre;
}
.pre-wrap {
white-space: pre-wrap;
}nowrap ngăn không cho văn bản xuống dòng, pre giữ nguyên không gian như trong HTML, và pre-wrap giữ nguyên không gian nhưng cho phép xuống dòng.
CSS Văn bản -Collapse white space
Thuộc tính này thực ra là một phần của thuộc tính white-space mà chúng ta vừa thảo luận. Nó xác định cách không gian trắng bị thu hẹp.
CSS Văn bản - Text shadow
Muốn thêm một chút深度 vào văn bản của bạn? Text shadow chính là để giúp bạn!
h1 {
text-shadow: 2px 2px 5px red;
}Điều này thêm một bóng đỏ 2 pixel sang phải, 2 pixel xuống, với 5 pixel mờ.
CSS Văn bản - Line break
Thuộc tính line-break xác định cách xuống dòng trong từ.
p {
line-break: strict;
}Điều này thực thi các quy tắc xuống dòng nghiêm ngặt hơn.
CSS Văn bản - Word break
Tương tự như line-break, nhưng cho xuống dòng ở cuối từ:
p {
word-break: break-all;
}Điều này cho phép từ bị断裂 ở bất kỳ ký tự nào.
CSS Văn bản - Các thuộc tính liên quan
Dưới đây là bảng tham khảo nhanh tất cả các thuộc tính mà chúng ta đã thảo luận:
| Thuộc tính | Mô tả |
|---|---|
| color | Đặt màu sắc của văn bản |
| text-align | Xác định canh lề horizontals của văn bản |
| vertical-align | Đặt canh lề verticales của một phần tử inline hoặc table-cell |
| direction | Xác định hướng văn bản/viết văn bản |
| text-decoration | Xác định trang trí được thêm vào văn bản |
| text-decoration-skip | Xác định phần nào của phần tử nội dung bất kỳ trang trí văn bản nào ảnh hưởng đến phần tử đó phải bỏ qua |
| text-decoration-skip-ink | Xác định cách gạch chân và gạch trên được vẽ khi chúng đi qua các phần ascender và descender của ký tự |
| text-transform | Điều khiển cách viết hoa của văn bản |
| text-emphasis | Áp dụng dấu nhấn mạnh vào văn bản |
| text-indent | Xác định 缩进 của dòng đầu tiên trong một khối văn bản |
| letter-spacing | Tăng hoặc giảm không gian giữa các ký tự trong văn bản |
| word-spacing | Tăng hoặc giảm không gian trắng giữa các từ |
| white-space | Xác định cách xử lý không gian trắng bên trong một phần tử |
| text-shadow | Thêm bóng vào văn bản |
| line-break | Xác định cách xuống dòng trong từ |
| word-break | Xác định quy tắc xuống dòng cho từ |
Và thế là bạn đã có tất cả kiến thức để tạo样式 văn bản theo nhiều cách khác nhau. Nhớ rằng, chìa khóa để thành thạo CSS là thực hành. Vậy hãy đi forth, experiment, và tạo ra các trang web đẹp và dễ đọc. Chúc các bạn may mắn!
Credits: Image by storyset