15 Thủ thuật CSS Hữu ích có thể bạn Chưa biết

0
263

Nếu bạn đã từng là một lập trình viên web frontend, có khả năng cao là bạn đã có lúc từng cố gắng tìm hiểu cách viết CSS sao cho nó hoạt động tốt, ĐẸP, nhanh.

Thì đây, đây là những thủ thuật CSS hữu ích có thể bạn sẽ cần.

15 Thủ thuật CSS Hữu ích có thể bạn Chưa biết
15 Thủ thuật CSS Hữu ích có thể bạn Chưa biết

Bài đăng này là một tập hợp các ví dụ về CSS, có thể cung cấp cho bạn các tính năng như biến phần tử thành cố định, cung cấp cho bạn các đường gạch ngang có khả năng gạch chân, 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 hiển thị prallax.

Một số trong số thủ thuật CSS dưới đây được hỗ trợ rộng rãi trong khi một số khác được hỗ trợ trên các trình duyệt hiện đại.

1. Thủ thuật đánh số đề mục và phân nhóm bằng CSS

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.

Vì nó là từ một đặc tả CSS2, bạn có thể tin rằng nó đã được hỗ trợ bởi tất cả các trình duyệt, ngoại trừ em “IE 6”.

See the Pen 1. Thủ thuật đánh số đề mục và phân nhóm bằng CSS by Lập trình PHP (@laptrinhphpvietnam) on CodePen.

2. Thủ thuật css gạch chân

Đôi khi CSS chúng ta lạ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 mặc định.

Vì không có tùy chọn cho điều đó, chúng ta sử dụng border-bottom để giải quyết điều này. Nhưng border-bottom không phải là một giải pháp tốt nếu muốn gạch chân cho các đoạn text thật vừa vặn.

CSS3 đã chỉ định không chỉ một mà ba thuộc tính mới cho trang trí văn bản text-decoration-color, text-decoration-line và text-decoration-style có thể được sử dụng để chuyển thành trang trí văn bản cũ tốt.

Bạn có thể sử dụng chúng để tạo kiểu underline, overline, 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 của Cameron để sử dụng nó trên Chrome.

See the Pen 2. Thủ thuật css gạch chân by Lập trình PHP (@laptrinhphpvietnam) on CodePen.

3. Thủ thuật sử dụng trích dẫn bên trong trích dẫn

Trước hết, không cần phải bận tâm đến việc gõ các trích dẫn chính xác cho các trích dẫn ngắn vì có HTML cho điều đó: thẻ <q> để bạn làm điều này dễ dàng.

Thẻ <q> cũng đảm nhiệm việc trích dẫn các trích dẫn bên trong bằng các trích dẫn đơn. Vậy thì chỗ nào cho CSS thể hiện?

Giả sử bạn không muốn mặc định trích dẫn sử dụng nháy kép hoặc bạn muốn các trích dẫn kép lồng nhau…?

Bạn hoàn toàn có thể làm điều này bằng cách sử dụng thuộc tính qoutes trong CSS2.

See the Pen 3. Thủ thuật sử dụng trích dẫn bên trong trích dẫn by Lập trình PHP (@laptrinhphpvietnam) on CodePen.

4. Thủ thuật xử lý kích thước bảng table không như ý

Bạn có thể đã bắt gặp một bảng table với kích thước nội dung khác nhau trên mỗi ô mà không chịu đúng như kích thước bạn chỉ định, bất kể bạn cố gắng làm gì.

Lúc này, thuộc tính table-layout trong css sẽ phát huy giá trị của nó.

Để cụ thể, sử dụng giá trị table-layout: fixed;. 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 theo nội dung.

Thuộc tính này được hỗ trợ bởi tất cả các trình duyệt.

See the Pen 4. Thủ thuật xử lý kích thước bảng table không như ý by Lập trình PHP (@laptrinhphpvietnam) on CodePen.

5. Thủ thuật tạo phần tử dính theo layout nào đó

Các phần tử dính (sticky) 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 điều này bằng CSS bằng cách sử dụng position: stick;.

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 sau khi đạt đến ngưỡng cuộn. Hiện tại, chỉ có Firefox hỗ trợ nó.

See the Pen 5. Thủ thuật tạo phần tử dính theo layout nào đó by Lập trình PHP (@laptrinhphpvietnam) on CodePen.

6. Thủ thuật CSS tạo văn bản bao quanh các khối

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ó?

Nếu Có. Bạn có thể thử CSS Shapes. Để 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 shape-outsite, shape-marginshape-image-threshold. Kể từ tháng 4 năm 2015, CSS Shapes được hỗ trợ bởi các trình duyệt webkit.

See the Pen 6. Thủ thuật CSS tạo văn bản bao quanh các khối by Lập trình PHP (@laptrinhphpvietnam) on CodePen.

7. Thủ thuật CSS các trường bắt buộc

Nếu bạn có một biểu mẫu (form) thì có khả năng cao là một số trường trong đó được là bắt buộc phải nhập thông tin.

Thông thường nhất là sử dụng dấu * dạng text để cho người dùng biết những trường nào bắt buộc.

Tuy nhiên, bạn có rất nhiều tùy chọn khác. Một trong những thuộc tính CSS có thể làm điều này là lớp giả (pesudo element) ::selection . Tất cả các trình duyệt hiện đại đã hỗ trợ chúng.

See the Pen 7. Thủ thuật CSS các trường bắt buộc by Lập trình PHP (@laptrinhphpvietnam) on CodePen.

8. Thủ thuật tô màu text đã chọn bằng màu khác

Nếu bạn không thích một màu mặc định, như màu xanh lam khi bôi đen đoạn text, thì chúng ta có thể tô màu khu vực đã chọn bằng một số màu khác và phần tử giả ::seclection.

Thủ thuật CSS này được hỗ trợ bởi tất cả các trình duyệt hiện đại. Thử bôi đen đoạn text bên dưới để thấy kết quả:

See the Pen 8. Thủ thuật tô màu text đã chọn bằng màu khác by Lập trình PHP (@laptrinhphpvietnam) on CodePen.

9. Thủ thuật đánh dấu các lựa chọn nhanh chóng

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 để biết lựa chọn đó đã được chọn ngoài dấu tick bên trong checkbox.

Có CSS ​​cho việc khai thác liên kết giữa các phần từ anh chị em ngay lập tức. 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 lable bên cạnh checkbox.

Sử dụng pesudo class :checked để biết các hộp đã được check.

See the Pen 9. Thủ thuật đánh dấu các lựa chọn nhanh chóng by Lập trình PHP (@laptrinhphpvietnam) on CodePen.

10. Thủ thuật CSS đoạn văn bản giống như một quyển truyện

Chúng ta có thể làm cho đoạn văn bản trông đẹp hơn, giống cuốn truyện hơn với CSS.

Đây là nơi ::first-letter làm cho chữ cái đầu tiên của đoạn được chỉ định, và bạn muốn viết CSS gì cho nó?

See the Pen 10. Thủ thuật CSS đoạn văn bản giống như một quyển truyện by Lập trình PHP (@laptrinhphpvietnam) on CodePen.

11. Thủ thuật hiển thị nội dung thuộc tính của phần tử

Một phần tử có thể có class 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 content: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ử. Sau đó nếu bạn bấm chọn text thì radio button cũng được chọn.

See the Pen 11. Thủ thuật hiển thị nội dung thuộc tính của phần tử by Lập trình PHP (@laptrinhphpvietnam) on CodePen.

12. Thủ thuật căn giữa mọi thứ trong CSS

Các phần tử cần phải căn giữa thường làm cho người mới bắt đầu học CSS đau đầu.

Các phần 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 ta 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 ​​để căn giữa mọi thứ.

See the Pen mdbLvaz by Lập trình PHP (@laptrinhphpvietnam) on CodePen.

13. Thủ thuật tiết lộ định dạng tập tin của các 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 nói lên liên kết đó là loại tệp gì chưa?

  • Một bản PDF?
  • Hay một tài liệu DOC?

Vâng, CSS có ​​để làm được điều đó rất đơn giản thay vì tự nhận định loại tệp và tự thêm icon.

content:url() là những gì chúng ta sẽ sử dụng để hiển thị hình ảnh / icon đằng sau các liên kết.

See the Pen 13. Thủ thuật tiết lộ định dạng tập tin của các liên kết by Lập trình PHP (@laptrinhphpvietnam) on CodePen.

14. Thủ thuật kích hoạt hiệu ứng Prallax

Hiệu ứng Prallax là một hiệu ứng được sử dụng để mô tả sự chuyển động dường như chậm của background relative so với background 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 background-attachment: fixed;.

See the Pen 14. Thủ thuật kích hoạt hiệu ứng Prallax by Lập trình PHP (@laptrinhphpvietnam) on CodePen.

15. Sức mạnh của CSS Animation

Có lẽ không phải gì quá lạ lẫm, bởi vì mình nghĩ tất cả các bạn đều có thể biết về CSS Animation rồi.

Nhưng một chút nhắc lại là không có chết ai cả. Có nhiều cách sử dụng CSS Animation nhưng đây là một cách cho một bài tập tô màu đơn giản.

See the Pen 15. Sức mạnh của CSS Animation by Lập trình PHP (@laptrinhphpvietnam) on CodePen.

Lời kết

CSS thực sự có rất nhiều điều thú vị mà bạn có thể khai thác. Có rất nhiều thủ thuật CSS để giúp bạn tiết kiệm thời gian viết CSS mà vẫn mang lại kết quả như ý muốn.

Và chắc chắn học CSS với các hình ảnh sinh động, trực quan có thể khiến bạn thoải mái hơn nhiều là ngồi Học Backend chứ nhỉ?

Và đừng lo là phải giỏi hết mọi thứ. Bạn không thể. Bạn chỉ cần giỏi 1 thứ, những thứ khác biết sơ qua là được thôi.

LEAVE A REPLY

Please enter your comment!
Please enter your name here