TVD Media
Trong thế giới phát triển web, việc hiểu rõ về các thuộc tính CSS là điều cực kỳ quan trọng để tạo ra các trang web đẹp mắt. Bài viết này TVD Media sẽ giúp bạn khám phá chi tiết về các thuộc tính CSS, cung cấp cho bạn cái nhìn sâu sắc vào cách chúng được sử dụng để nâng cao hình ảnh và hiệu suất của các trang web hiện đại.
Bảng danh sách các thuộc tính CSS
Để giúp bạn có cái nhìn tổng quan hơn, sau đây là danh sách về các thuộc tính của CSS cơ bản và nâng cao.
| Thuộc Tính CSS | Mô Tả |
| color | Thiết lập màu sắc của văn bản. |
| font-size | Điều chỉnh kích thước của phông chữ. |
| background-color | Đặt màu nền cho một phần tử. |
| margin | Thiết lập khoảng cách xung quanh phần tử. |
| padding | Đặt khoảng cách bên trong giữa nội dung và ranh giới của phần tử. |
| border | Thêm đường viền xung quanh phần tử. |
| width | Đặt chiều rộng của phần tử. |
| height | Đặt chiều cao của phần tử. |
| text-align | Căn chỉnh văn bản trong phần tử (left, right, center, justify). |
| font-weight | Thiết lập độ dày của phông chữ (normal, bold). |
| text-decoration | Thêm trang trí cho văn bản như underline, line-through. |
| opacity | Điều chỉnh độ trong suốt của 1 phần tử. |
| position | Đặt kiểu định vị cho phần tử (static, relative, absolute, fixed, sticky). |
| overflow | Xử lý nội dung vượt quá kích thước của phần tử (visible, hidden, scroll, auto). |
| display | Đặt chế độ hiển thị của phần tử (block, inline, inline-block, none). |
| text-transform | Thay đổi chữ cái thành hoa hoặc thường (capitalize, uppercase, lowercase, none). |
| z-index | Đặt thứ tự xếp chồng của các phần tử được định vị. |
| flex | Cho phép một phần tử có khả năng linh hoạt trong một container flex. |
| grid | Định nghĩa một lưới cho layout của trang web. |
| transition | Tạo hiệu ứng chuyển đổi giữa các trạng thái của phần tử. |
Text align trong css
Thuộc tính text-align trong CSS cho phép bạn điều chỉnh việc canh lề của văn bản trong một phần tử HTML. Bạn có thể sử dụng các giá trị sau để thay đổi cách hiển thị văn bản:
- text-align: left;: Căn lề trái cho văn bản. Đây là thiết lập mặc định và phù hợp cho hầu hết các ngôn ngữ viết từ trái sang phải.
- text-align: right;: Căn lề phải cho văn bản. Thường được dùng trong các ngôn ngữ viết từ phải sang trái hoặc để nhấn mạnh nội dung bên phải.
- text-align: center;: Căn giữa văn bản. Sử dụng cho tiêu đề hoặc bất cứ khi nào bạn muốn văn bản được đặt chính giữa khối chứa.
- text-align: justify;: Căn đều hai bên. Văn bản sẽ được căn sao cho cả hai cạnh trái và phải đều thẳng hàng, thường được sử dụng trong báo chí và sách để tạo vẻ ngoài gọn gàng và dễ đọc.
Xem thêm ví dụ, thực hành tại Mozilla Developer Network.
Text align trong css
Text decoration trong css
Thuộc tính text-decoration trong CSS được dùng để thêm các trang trí đặc biệt cho văn bản, giúp nó nổi bật hơn trong tài liệu. Bạn có thể sử dụng các giá trị sau để tạo các hiệu ứng khác nhau cho văn bản:
- text-decoration: overline;: Gạch trên chữ, Thường dùng để nhấn mạnh hoặc chỉ dẫn đặc biệt.
- text-decoration: underline;: Gạch dưới chữ. Đây là kiểu trang trí phổ biến để chỉ ra rằng văn bản là có thể click hoặc để nhấn mạnh.
- text-decoration: line-through;: Gạch ngang chữ. Thường được dùng để cho thấy văn bản này đã bị hủy bỏ hoặc không còn hiệu lực.
- text-decoration: none;: Không có trang trí nào. Đây là giá trị mặc định, sử dụng khi bạn muốn loại bỏ các hiệu ứng trang trí có sẵn.
Ngoài các giá trị cơ bản, text-decoration còn bao gồm một số thuộc tính phụ như text-decoration-color để thay đổi màu sắc của dòng trang trí, text-decoration-line để chỉ định loại dòng (như underline, overline, hoặc line-through), và text-decoration-style để thiết lập kiểu dáng của dòng (chẳng hạn như đứt đoạn, đậm, hoặc mảnh). Tuy nhiên, các thuộc tính phụ này chưa được hỗ trợ rộng rãi bởi tất cả các trình duyệt hiện đại.
Sử dụng text-decoration không chỉ giúp làm đẹp cho văn bản mà còn có thể góp phần vào cấu trúc và ý nghĩa của nội dung, tùy thuộc vào cách bạn chọn áp dụng các hiệu ứng này.
Kết hợp với một số thuộc tính CSS thay đổi font chữ HTML sẽ giúp web đẹp hơn rất nhiều.
Text decoration trong css
text-indent
Thuộc tính text-indent trong CSS được dùng để thiết lập khoảng trắng ở đầu dòng đầu tiên của một đoạn văn, giúp tạo khoảng cách giữa văn bản và lề trái của phần tử chứa nó. Trong các ngôn ngữ viết từ phải sang trái, khoảng trắng này sẽ nằm bên phải. Giá trị của text-indent được chỉ định bằng số và có thể đi kèm với các đơn vị đo như pixel (px), phần trăm (%), hoặc point (pt).
Ví dụ, bạn có thể sử dụng text-indent trong CSS như sau:
p {
text-indent: 15px; /* Khoảng trắng 15 pixel */
text-indent: 15%; /* Khoảng trắng bằng 15% của chiều rộng khối chứa */
text-indent: 1.5pt; /* Khoảng trắng 1.5 point */
}
text-indent
Text shadow trong css
Thuộc tính text-shadow trong CSS là công cụ dùng để thêm hiệu ứng bóng đổ cho văn bản, tạo ra hiệu ứng thị giác độc đáo và bắt mắt. Cách sử dụng của thuộc tính này khá đơn giản và bao gồm ba phần chính: màu sắc của bóng đổ, tọa độ x và y cho vị trí bóng đổ, và độ mờ của bóng.
Cú pháp của text-shadow được viết như sau:
text-shadow: [màu sắc] [tọa độ x] [tọa độ y] [độ mờ];
Trong đó, tọa độ x và tọa độ y định nghĩa vị trí bóng đổ so với văn bản gốc, và độ mờ chỉ độ mờ của bóng đổ. Nếu không khai báo độ mờ, giá trị mặc định sẽ là 0, tức là không có độ mờ.
Ví dụ, để thêm bóng đổ cho văn bản có ID là #title với bóng đổ màu xanh:
#title {
text-shadow: blue 2px 3px 4px;
}
Điều này có nghĩa là văn bản sẽ có bóng đổ màu xanh, với bóng đổ dịch chuyển 2px theo trục x, 3px theo trục y và có độ mờ là 4px.
Bạn cũng có thể tạo nhiều bóng đổ cho một văn bản bằng cách liệt kê chúng, mỗi bóng đổ được phân tách bởi dấu phẩy:
text-shadow: red 2px -2px 3px, blue -2px 1px 2px;
Trong ví dụ trên, văn bản sẽ có hai bóng đổ: một bóng đổ màu đỏ dịch chuyển 2px sang phải và -2px lên trên với độ mờ 3px, và một bóng đổ màu xanh dịch chuyển -2px sang trái và 1px xuống dưới với độ mờ 2px.
Sử dụng text-shadow không chỉ giúp làm nổi bật văn bản mà còn tăng cường tính thẩm mỹ cho trang web của bạn.
Text shadow trong css
text-transform
Thuộc tính text-transform trong CSS cho phép bạn điều chỉnh cách hiển thị chữ cái trong văn bản, giúp bạn định dạng văn bản mà không cần sửa đổi nội dung thực tế. Thuộc tính này rất hữu ích trong việc tạo nhất quán về cách hiển thị văn bản trên toàn bộ trang web của bạn. Có bốn giá trị chính cho text-transform:
- capitalize: Chuyển đổi chữ cái đầu tiên của mỗi từ trong văn bản thành chữ hoa. Các chữ cái khác trong từ sẽ không thay đổi và hiển thị theo dạng ban đầu.
- uppercase: Chuyển đổi tất cả các chữ cái trong văn bản thành chữ hoa, làm cho văn bản nổi bật và dễ đọc.
- lowercase: Chuyển đổi tất cả các chữ cái trong văn bản thành chữ thường, thường dùng để tạo sự nhất quán khi văn bản đến từ các nguồn khác nhau với các định dạng chữ cái khác nhau.
- none: Không áp dụng bất kỳ sự thay đổi nào lên văn bản, giữ nguyên định dạng ban đầu.
Ví dụ sử dụng text-transform trong CSS:
#title {
text-transform: uppercase;
}
Trong ví dụ trên, tất cả chữ cái trong phần tử có ID là #title sẽ được chuyển thành chữ hoa, làm cho văn bản trở nên bắt mắt và dễ đọc hơn.
Lưu ý khi sử dụng giá trị capitalize: thuộc tính này chỉ làm cho chữ cái đầu tiên của mỗi từ trở nên viết hoa, trong khi những chữ cái tiếp theo trong từ sẽ giữ nguyên định dạng như bạn đã nhập. Điều này có nghĩa là nếu một từ đã được nhập toàn bộ là chữ hoa, chỉ chữ cái đầu tiên mới được giữ nguyên và các chữ sau đó sẽ không bị thay đổi.
text-transform
Lời kết
Trong bài viết này, TVD Media đã giới thiệu một số thuộc tính CSS cơ bản và phổ biến nhất cho việc trang trí văn bản. Mặc dù còn nhiều thuộc tính khác không được đề cập tới do ít được sử dụng hoặc chưa được hỗ trợ rộng rãi bởi các trình duyệt hiện đại, những thuộc tính mà TVD Media đã trình bày vẫn đủ mạnh mẽ để bạn có thể tạo ra những đoạn văn bản đẹp mắt và thu hút. Hy vọng rằng, thông qua việc sử dụng hiệu quả các thuộc tính CSS này, bạn sẽ nâng cao được trải nghiệm người dùng và thẩm mỹ của trang web một cách đáng kể.
