Trang trí văn bản css: không có
Đây là bài mở đầu cho hàng loạt bài viết tìm hiểu về các thuộc tính quan trọng trong CSS mà bạn cần ôm. Một trong các loại thuộc tính đơn giản nhất nhưng được sử dụng lại nhiều nhất là các thuộc tính được sử dụng để thay đổi cách hiển thị của văn bản, được gọi là Kiểu văn bản Text Styles in CSS hiện có khoảng 13 thuộc tính được sử dụng bao gồm căn lề văn bản, trang trí văn bản, định hướng văn bản,…. Cụ thể là có các thuộc tính thông thường được sử dụng sau
Tham khảo. https. // nhà phát triển. mozilla. org/en-US/docs/Web/CSS/Tham khảo căn chỉnh văn bảnThuộc tính 9 này sẽ giúp bạn tùy chỉnh canh lề cho các đoạn văn bản bên trong trang web. Thuộc tính này hỗ trợ cho bạn các giá trị sau
Xem ví dụ về sự khác biệt của các giá trị 9 tại đây trang trí văn bảnThuộc tính này sẽ giúp bạn trang trí lại văn bản được hiển thị trên tài liệu theo một số định dạng nhất định text-decoration: overline | underline | line-through| none
Ví dụ Xem Pen myZyJX của Thạch Phạm (@thachpham92) trên CodePen Ngoài ra thuộc tính này còn có thêm một số thuộc tính con của nó nhưng lại không được hỗ trợ bởi các trình duyệt thông tin, đó là text-decoration-color, text-decoration-line và text-decoration-style thụt lề văn bảnThuộc tính này sẽ tạo ra một khoảng trắng bên trái của văn bản (hoặc bên phải của văn bản với các ngôn ngữ hiển thị từ bên phải sang trái), giá trị của nó là một số kèm theo đơn vị đo lường Ví dụ ________số 8Xem Pen PwrwPB của Thạch Phạm (@thachpham92) trên CodePen bóng văn bảnThuộc tính này để thêm bóng đổ cho văn bản nếu bạn thích bóng tối hơn Cách viết như sau text-shadow: [màu sắc] [tọa độ x y] [độ mờ]; Trong đó, ghế text-decoration: overline | underline | line-through| none8 là giá trị kiểu đo lường và số đứng trước được xem là text-decoration: overline | underline | line-through| none9 và số đứng sau là 0, độ mờ nếu không khai báo thì có giá trị là 0 và giá trị của độ mờ luôn đứng sau giá trị của học vị Ví dụ text-decoration: overline | underline | line-through| none3 Đoạn trên nghĩa là văn bản mang id 1 sẽ có bóng đổ màu xanh, tọa độ text-decoration: overline | underline | line-through| none9 là 3, tọa độ 0 là 5 và 6 là 7 Ngoài ra, bạn cũng có thể tạo ra nhiều bóng đổ cho một văn bản bằng cách viết nhiều cú pháp và mỗi đoạn sẽ cách nhau bằng dấu phẩy, ví dụ: 1 Ví dụ thực tế Xem Pen GgbgZd của Thạch Phạm (@thachpham92) trên CodePen chuyển đổi văn bảnNếu bạn muốn tùy chỉnh việc hiển thị chữ hoa hay thông thường trong đoạn văn bản mà không cần viết thủ công cả đoạn văn bản thì có thể sử dụng thuộc tính text-decoration: overline | underline | line-through| none1 này Thuộc tính này có 3 giá trị chính là 9 (trong hoa chữ cái đầu tiên của mỗi từ), text-shadow: [màu sắc] [tọa độ x y] [độ mờ];0 (trong hoa cả đoạn văn bản), text-shadow: [màu sắc] [tọa độ x y] [độ mờ];1 (viết thường cả đoạn văn) và text-decoration: overline | underline | line-through| none7 (không có gì cả) Ví dụ 7 Xem Bút wBLBWR của Thạch Phạm (@thachpham92) trên CodePen Có một vấn đề bạn nên lưu ý là ở giá trị 9, nó chỉ có tác dụng với chữ cái đầu tiên của văn bản, còn các chữ cái tiếp theo nó vẫn hiển thị theo cách văn bản mà bạn soạn ra. Lời kếtMặc dù các thuộc tính dành cho công việc trang trí văn bản không chỉ có nhiều ít nhưng các thuộc tính của mình không đề cập đến việc ít sử dụng hoặc không tương thích với số lượng lớn các trình duyệt hiện nay. Nhưng mình tin chỉ là sánh ít thôi cũng đủ để bạn trang trí văn bản cực đẹp mắt rồi. . D Ở bài sau, mình sẽ nói qua về các thuộc tính được sử dụng để trang trí chữ viết để các bạn làm văn bản của mình thêm “sức sống” nhé |