Một số hàm CSS nâng cao trong thiết kế Website

Đã bao giờ bạn nghĩ đến việc dùng các hàm trong CSS chưa (Css Function). Thực tế CSS từ lâu đã cung cấp cho người dùng một số hàm cơ bản rất hữu ích. Với việc sử dụng linh động các hàm giúp cho các đoạn code css, html chúng ta tối ưu. Ngoài việc phải làm nhẹ hàm javascript ra, yếu tố dùng hàm css cũng giúp website tải nhanh hơn bởi sử dụng các version css mới nhất.

Sau đây là 1 số ít hàm thông dụng của CSS .

1. Hàm calc

Function calc dùng để tính chiều rộng (width) của các thẻ dạng block như DIV, SECTION….

Cách dùng: width:calc(100% - 500px); Có thể sử dụng các phép toán cộng trừ nhân chia (+ – * /)

Ví dụ :







Một số hàm trong Css






    
Đây là nội dung của tôi.

Hàm calc chỉ sử dụng được cho thuộc tính width của css, không vận dụng cho các thuộc tính khác .
Trình duyệt tương hỗ : Chrome, Internet Explorer / Edge, Safari, FireFox, Opera

2. Hàm attr

Function attr trả về giá trị của một thuộc tính của thẻ đang sử dụng .

Cách dùng: attr(tên thuộc tính)

Ví dụ :







Một số hàm trong Css






    
Đây là nội dung của tôi.

Kết quả:

3. Hàm counter

Function counter dùng để tăng giá trị biến đếm lên 1 đơn vị chức năng hoặc ghi lại theo dạng list, thường dùng để đánh số thứ tự .

Cách dùng: counter(tên, kiểu)

Ví dụ :







Một số hàm trong Css






    

Truyện Thủy Hử

Mở đầu

Hồi ký truyện

Giữa truyện hấp dẫn

Kết thúc

Kết quả:

Hoặc bạn có thể thay đổi kiểu counter giống như list-style-type của thẻ ul, ol như:

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

Cụ thể như sau: hãy chú ý đoạn code lower-alpha content: "Chương " counter(mycounter, lower-alpha) ": ";







Một số hàm trong Css






    

Truyện Thủy Hử

Mở đầu

Hồi ký truyện

Giữa truyện hấp dẫn

Kết thúc

Lúc này lưu lại theo thứ tự 1, 2, 3, 4 được thay thế sửa chữa bằng a, b, c, d như hình dưới .

4. Hàm var

Function var dùng để gọi biến được định nghĩa trong thuộc tính : root, dùng cho việc định nghĩa màu, chia cột, padding …. Giúp cho việc chỉ biến hóa duy nhất một chỗ, không phải tìm nhiều nơi trong css .

Cách dùng: var( biến );

Để gọi được hàm var, bạn cần phải khai báo các biến trong root trước .

:root {
  --my-bg: #ccc;
  --my-color: blue;
  --my-padding: 15px;
}

Chú ý bạn phải dùng chuẩn cấu trúc gồm –ten-bien (nếu dùng 1 dấu – hoặc 3 — sẽ bị sai)

Ví dụ :







Một số hàm trong Css






    

Truyện Thủy Hử

Mở đầu

Hồi ký truyện

Giữa truyện hấp dẫn

Kết thúc

Kết quả:

5. Hàm translate

Function translate được dùng cho thuộc tính transform, translate bao gồm translateX (theo trục ngang), translateY theo trục dọc. Translate được dùng khi cần dịch chuyển một thẻ html nào đó khỏi vị trí ban đầu.

Cách dùng: transform:translateX(30px); transform:translateY(30px); transform:translate(30px,30px);

Ví dụ :







Một số hàm trong Css






    

Truyện Thủy Hử

Thẻ này translateX 100px

Thẻ này translateY 20px

Thẻ này translate(100px,20px)

Kết quả:

6. Hàm rotate

Function rotate được dùng cho thuộc tính transform, khi cần quay một thẻ html bao nhiêu độ (deg) cùng chiều kim đồng hồ, nếu muốn quay ngược chiều kim đồng hồ thì ta thêm dấu trừ phía trước.

Cách dùng: transform:rotate(90deg); transform:rotate(-90deg);

Ví dụ :







Một số hàm trong Css






    

Một số hàm trong Css: rotate

Quay mũi tên > 1 góc 90 độ >

Kết quả:

7. Hàm scale

Function scale được dùng cho thuộc tính transform, scale bao gồm scaleX (theo trục ngang), scaleY theo trục dọc. Scale được dùng khi cần thu nhỏ hoặc phóng to một thẻ html, thường dùng để zoom hình ảnh. Đơn vị là phần trăm.

Cách dùng: transform: scaleX(0.8); transform: scaleY(0.8); transform: scale(0.1,0.9); transform: scale(1.1);

Ví dụ :







Một số hàm trong Css






    

Một số hàm trong Css: scale

Kết quả:

8. Hàm skew

Function skew được dùng cho thuộc tính transform, skew bao gồm skewX (theo trục ngang), skewY theo trục dọc. skew được dùng khi cần làm nghiêng một thẻ html.

Cách dùng: skewX(-45deg) skewY(-45deg) skew(-45deg,90deg)

Ví dụ:







Một số hàm trong Css






    

Một số hàm trong Css: skew

Kết quả:

Tiếp tục update … …