Text transform css là gì
- Với việc sử dụng thuộc tính text-transform, ta có thể chuyển toàn bộ các ký tự trong phần tử sang dạng chữ in hoa. Show
- Chuyển toàn bộ các ký tự trong phần tử sang dạng chữ thường.
- Hoặc chuyển ký tự đầu tiên của mỗi từ trong phần tử sang dạng chữ in hoa.
2) Cách sử dụng thuộc tính text-transform trong CSS- Để sử dụng thuộc tính text-transform, ta dùng cú pháp như sau:
- Trong đó, ta thấy giá trị của thuộc tính text-transform có thể được xác định bởi một trong sáu loại: none- Không điều chỉnh. Xem ví dụcapitalize- Ký tự đầu tiên của mỗi từ trong phần tử được chuyển sang chữ in hoa. Xem ví dụuppercase- Tất cả các ký tự trong phần tử được chuyển sang chữ in hoa. Xem ví dụlowercase- Tất cả các ký tự trong phần tử được chuyển sang chữ thường. Xem ví dụinitial- Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính text-transform có giá trị là none) Xem ví dụinherit- Kế thừa giá trị thuộc tính text-transform từ phần tử cha của nó. Xem ví dụText-Transform là một thuộc tính cũng thường được sử dụng với chữ. Nó dùng để hiển thị chữ thường thành chữ hoa trên trình duyệt. Mời bạn cùng quachquynh.com tìm hiểu về thuộc tính text-transform trong CSS qua bài này. Cú pháp viết: text-transform: none|capitalize|uppercase|lowercase; Giải thích:
Để hiểu hơn bạn chạy ví dụ sau:
Kết quả: Trên đây là các giá trị và ví dụ về thuộc tính text transform sử dụng trong viết chữ. Qua đây bạn đã hiểu cách sử dụng chưa nhỉ? Hãy tiếp tục theo dõi các bài viết khác tại chuyên mục học CSS online miễn phí nhé! Khi làm web cần căn giữa theo chiều dọc, yêu cầu này có vẻ khó khăn với người không thông thạo với css . Một số gợi ý sử dụng display: inline với vertical-align: middle hay display: table với 1số kiểu style đi kèm. Ngoài ra có thể giải quyết bằng Flexbox và Grids, nhưng đối với các component nhỏ hơn, sử dụng transform có thể là 1 lựa chọn đơn giản Căn giữa theo chiều dọc có thể phức tạp khi chiều cao của phần tử thay đổi. Tuy nhiên với việc sử dụng transform css lại giúp ta giải quyết vấn đề đó Xem ví dụ dưới đây:
Và kết qủa chúng ta nhận được như hình ảnh sau: ngocyen @ngocyen Theo dõi 3.4K 107 57 Đã đăng vào thg 8 20, 2019 7:55 SA 8 phút đọc 4.3K 1 6 Sử dụng css Transform trong thực tế
Bài đăng này đã không được cập nhật trong 3 năm
1. Căn giữa theo chiều dọc
Và kết qủa chúng ta nhận được như hình ảnh sau:
2. Tạo mũi tên( Arrows)
như hình ảnh này:
Bây giờ di chuyển mũi tên sang phải và căn chỉnh nó theo chiều dọc:
3. Tạo icon Loading với SVG
|