15 thủ thuật CSS hữu ích mà bạn có thể đã bỏ qua

Nếu bạn đã là một nhà phát triển web frontend trong một thời gian, có khả năng cao là bạn đã có lúc cố gắng tìm hiểu cách mã hóa một cái gì đó và nhận ra sau một chút loay hoay, rằng “Có CSS ​​cho điều đó”. Nếu bạn đã không, tốt, bạn sẽ.

Bài đăng này là một tập hợp các mã CSS như vậy, có thể cung cấp cho bạn các tính năng như biến thành phần tử dính, cung cấp cho bạn khả năng gạch chân dòng, chuyển văn bản của trang của bạn theo hình dạng đặc biệt hoặc đạt được hiệu ứng thị sai. Một số trong số chúng được hỗ trợ rộng rãi trong khi một số khác đang trên đường được hỗ trợ đầy đủ bởi tất cả các trình duyệt.

1. Đánh số đề mục và phân nhóm

   Giả sử bạn có một bộ tiêu đề và tiêu đề phụ trong tài liệu của mình và bạn đang đánh số chúng theo cách thủ công hoặc thông qua một tập lệnh. Thay vào đó, bạn có thể sử dụng bộ đếm CSS để làm điều này. Đã có một bài viết chuyên sâu về nó ở đây. Và vì là từ thông số CSS2, bạn có thể đặt cược rằng nó được hỗ trợ bởi tất cả các trình duyệt, ngoại trừ IE 6.

2. Spice Up Plain Underlines

   Đôi khi chúng tôi muốn gạch chân với một đường chấm chấm đẹp hoặc nét đứt thay vì một đường liền nét. Vì không có lựa chọn nào cho điều đó, chúng tôi giải quyết cho đáy biên giới. Nhưng đáy biên giới không phải là một giải pháp tốt nếu văn bản bạn gạch chân kết thúc tốt đẹp.

   CSS3 chỉ định không chỉ một mà ba thuộc tính mới để trang trí văn bản văn bản trang trí-màu sắc, văn bản trang trí-dòng, và văn bản trang trí-phong cách có thể được viết tắt thành cũ trang trí văn bản.

   Bạn có thể sử dụng chúng để tạo kiểu gạch chân, gạch chân, thậm chí làm cho văn bản nhấp nháy và hơn thế nữa. Kể từ tháng 4 năm 2015, chỉ có Firefox hỗ trợ thuộc tính này, nhưng bạn có thể kích hoạt “tính năng nền tảng web thử nghiệm” sử dụng nó trên Chrome.

3. Trích dẫn một trích dẫn

   Trước hết, không cần bận tâm đến việc gõ các trích dẫn xoăn chính xác cho các trích dẫn ngắn vì có HTML cho điều đó: thẻ cho biết trích dẫn nội tuyến.

   Các thẻ cũng chăm sóc trích dẫn các trích dẫn bên trong với dấu ngoặc đơn. Vậy, đâu là “có 'CSS' cho điều đó” thời điểm này?

   Hãy nói rằng bạn không muốn dấu ngoặc kép mặc định hoặc bạn có nhiều hơn một mức trích dẫn lồng nhau, bạn có thể xác định tùy chọn trích dẫn của mình cho phần tử trích dẫn bằng CSS bằng cách sử dụng CSS2 trích dẫn bất động sản.

4. Quản lý các bảng không đáng tin cậy

   Bạn có thể đã bắt gặp một bảng lớn với kích thước nội dung khác nhau trên mỗi ô mà từ chối duy trì trong phạm vi chiều rộng bạn đã chỉ định, bất kể bạn cố gắng gì. Chế ngự cái bàn đó với bố trí bàn thuộc tính (cho chiều cao cột bằng nhau, theo liên kết này).

   Để cụ thể, sửa chữa là trong bố trí bảng: cố định; giá trị. Khi bạn chỉ định bố cục cố định cho bảng, bảng và chiều rộng ô được xác định theo chiều rộng của bảng hoặc của hàng ô đầu tiên (có thể được xác định bởi người dùng) chứ không phải bởi nội dung. Điều này được hỗ trợ bởi tất cả các trình duyệt.

5. Làm cho nó dính

   Các phần tử dính là các phần tử trên một trang sẽ không được cuộn ra khỏi chế độ xem. Nói cách khác, nó dính vào một khu vực có thể nhìn thấy (khung nhìn hoặc hộp cuộn). Bạn có thể tạo cái này bằng CSS bằng cách sử dụng vị trí: dính;.

   Chúng hoạt động như các phần tử tương đối được đăng trước khi cuộn và sau đó giống như các phần tử cố định khi đạt đến ngưỡng cuộn. Để bây giờ, chỉ có Firefox hỗ trợ nó.

6. Nhận văn bản của bạn trong hình dạng

   Bạn có muốn văn bản trên trang của bạn cong độc đáo trên một số hình ảnh bạn hiển thị bên cạnh nó? Bạn co thể thử Hình dạng CSS. Để triển khai các hình dạng CSS, chúng ta có thể sử dụng ba thuộc tính hình dạng bên ngoài, lề hình và hình dạng ngưỡng hình ảnh. Kể từ tháng 4 năm 2015, CSS Shapes được hỗ trợ bởi trình duyệt webkit.

7. Các trường bắt buộc

   Nếu bạn có một biểu mẫu thì có khả năng cao là một số trường trong đó được yêu cầu trong khi những trường khác thì không. Bạn sẽ cần phải cho người dùng biết đó là cái nào. CSS cho điều này là :cần thiết :không bắt buộc lớp giả. Tất cả các trình duyệt hiện đại đều hỗ trợ chúng.

8. Kén chọn với màu sắc

   Nếu bạn không thích một màu nào đó, như màu xanh lam, chúng ta có thể tô màu khu vực đã chọn bằng một số màu khác và :: lựa chọn yếu tố giả là CSS cho điều đó. Điều này được hỗ trợ bởi tất cả các trình duyệt hiện đại.

9. Tôi đã kiểm tra chưa?

   Trong trường hợp hộp kiểm đã được chọn, sẽ rất tốt nếu có một dấu hiệu khác ngoài dấu kiểm nhỏ bên trong hộp kiểm mặc định để biểu thị rằng mục đó đã được chọn.

   Có CSS ​​cho việc khai thác liên kết giữa anh chị em ngay lập tức, hai yếu tố cạnh nhau. CSS có bộ chọn anh chị em liền kề được biểu thị bằng dấu cộng + và chúng ta có thể sử dụng nó để nhắm mục tiêu nhãn bên cạnh hộp kiểm. Nhưng những gì về việc nhắm mục tiêu hộp kiểm tra đầu tiên? Có :đã kiểm tra lớp giả cho điều đó.

10. Giống như một cuốn truyện

    Sau đó, sẽ không tốt nếu là người đầu tiên “Ôi” bên trong “Ngay xửa ngay xưa” trông có xinh không? Chúng ta có thể làm cho nó trông đẹp hơn, sau tất cả có CSS ​​cho điều đó. Đây là đâu :: chữ cái đầu yếu tố giả đến để giải cứu. Nó nhắm mục tiêu chữ cái đầu tiên của dòng đầu tiên của phần tử được nhắm mục tiêu. Tìm hiểu thêm về nó ở đây.

11. Bạn có muốn biết nhiều hơn?

    Một phần tử có thể có lớp X hoặc dữ liệu Y hoặc một số giá trị khác cho một thuộc tính. Nếu chúng ta cần hiển thị giá trị thuộc tính như vậy của một phần tử gần nó, chúng ta có thể sử dụng nội dung: attr (X). Nó lấy giá trị thuộc tính X của phần tử, sau đó chúng ta có thể hiển thị nó bên cạnh phần tử.

12. Một chút nữa về bên trái

    Các yếu tố trung tâm cho người mới bắt đầu CSS là một kỳ công. Các yếu tố khác nhau đòi hỏi tập các thuộc tính CSS khác nhau để căn giữa chúng. Chúng tôi sẽ xem xét một ví dụ trong số nhiều ví dụ có sẵn trên web trên toàn thế giới, để bạn có thể nhớ lại rằng có CSS ​​để tập trung mọi thứ.

13. Tiết lộ định dạng tệp của liên kết

    Bạn đã bao giờ nhìn thấy một hình ảnh nhỏ gần một liên kết chỉ ra liên kết đó là gì chưa? Một bản PDF? hay một DOC? Vâng, có CSS ​​để đạt được điều đó. Các nội dung: url () là những gì chúng ta sẽ sử dụng để hiển thị hình ảnh đằng sau các liên kết.

14. Hiệu ứng Parallax kích hoạt

    Hiệu ứng thị sai là một hiệu ứng được sử dụng để mô tả sự chuyển động dường như chậm của nền so với nền trước. Hiệu ứng này là phổ biến trong các trang web thực hiện cuộn parallax. Có nhiều cách khác nhau để thực hiện nó, ví dụ dưới đây hoạt động trong Firefox với đính kèm nền: cố định;.

15. Sức mạnh của hoạt hình CSS

    Có lẽ không phải là rất lớn “Có CSS ​​cho điều đó” Hiện tại, bởi vì tất cả các bạn đều có thể biết về hoạt hình CSS. Nhưng một chút nhắc nhở là không có hại. Có nhiều cách sử dụng cho hoạt hình CSS nhưng đây là một cách cho một bài tập tô màu đơn giản.

Đọc ngay: 50 đoạn CSS hữu ích mỗi nhà thiết kế nên có