Hướng dẫn thư viện css
|
Thư viện trong css là các đoạn mã css đã được thiết kế trước cho một mục đích nào đó. Việc sử dụng một thư viện css thường bao gồm 2 công đoạn: Show
Hướng dẫn khai báo thư viện cssThông thường, các thư viện css sẽ được đóng gói thành các file css. Như vậy, để khai báo, chúng ta sẽ sử dụng thẻ link tương tự như cách sau: Lưu ý: File thư viện css nếu có phải được khai báo trước file custom css. Trong ví dụ trên là cách khai báo thư viện fontawesome. Chúng ta thấy file CSS của thư viện font awesome được khai báo trước file my_custom. Mục đích của việc khai báo thư viện trước file custom là để chúng ta chủ động hơn trong việc điều phối thư viện và làm chủ mã nguồn website của mình. Nguyên tắc sử dụng thư viện css
Xét ví dụ sau: Giả sử chúng ta có file index.html, index.css và lib.css như sau: File index.html File index.css File thư viện lib.css Trong ví dụ này: Chúng ta đã sử dụng class btn và btn_primary của thư viện lib.css để định hình dạng nút cho thẻ span. Đồng thời, chúng ta sử dụng thêm class btn_goto_shoping để custom thêm cho nút chuyển tới cửa hàng. Như vậy, thứ tự đặt các class cho thẻ span phải như trên, nghĩa là theo dúng thứ tự: btn btn_primary btn_goto_shoping (class của thư viện viết trước, class của các file custom viết sau). Sử dụng nhiều thư viện trong một websiteVề mặt lý thuyết, và ngay cả trong thực tế, một website sẽ gồm nhiều thư viện css để tiết kiệm công sức của lập trình viên. Tuy nhiên, khi sử dụng nhiều thư viện css, chúng ta cần tuân theo các nguyên tắc sau:
Cập nhật thư viện cssCó một thực tế rất khắc nghiệt như sau: Các thư viện sẽ thường xuyên được cập nhật, với mục đích cập nhật công nghệ mới và sửa lỗi. Như vậy, chúng ta sẽ phải sử dụng phiên bản trực tiếp hoặc cập nhật thư viện về website. Cả hai cách, khi thực hiện chúng ta đều cần phải lưu ý các điều sau:
Bên trên là bài học về cách sử dụng chung cho các thư viện css. Các bạn có thể tham khảo cách sử dụng các thư viện phổ biến sau:
Đã đăng vào thg 6 20, 2021 9:06 SA 2 phút đọc Giới thiệuĐợt này có tìm hiểu mình thấy 1 số thư viện HTML, CSS, Javascipt hay nên hôm nay chia sẻ tới Anh Chị Em trong cộng đồng để tham khảo nhé. Những thư viện này củng cố kiến thức và thuận tiện khi chúng ta làm dự án. Libary - Resource1.Docz | Git Docz là 1 thư viện giúp chúng ta dễ dàng viết và public document cho code. Nó sẽ tạo ra MDX file để hiển thị code của bạn 1cách trực quan và còn làm được trên cả môi trường production
2.Magic of CSS | Git Magic of CSS là 1 thư viện về css với những tip thủ thuật rất hay mà rất hữu ích cho các bạn làm Frontend. Mình cá là sẽ nhiều bạn sẽ ngỡ ngàng vì những thủ thuật rất hay ở trang này đấy. 3. Awesome design tool | Git Tất cả các công cụ dùng để design thiết kế hiện nay hay pluin đều được tổng hợp trong repo này.Các bạn nào là Designer có thể vào xem có những tool nào mới hay để bổ sung thêm công cụ thiết kế cho mình nhé 4.Sweet alert | Git Nếu như muốn 1 popup hiển thị thông báo xá nhận thì đây là 1 thư viện nhỏ giúp bạn làm được điều đó với animation đẹp và ngộ nghĩnh 5.Flexbox Patterns | Git Flexbox Patterns là 1 thư viện tạo sẵn các Component UI sẵn sử dụng Flexbox cho chúng ta sử dụng nhanh nhất có thể và rất tiện ví dụ như Tab, Accordion, Menu ..vv. Chắc chắn các bạn sẽ thích sự tiện lợi của thư viện này 6.You-need-to-know-css | Git Thêm 1 thư viện về tất cả những gì về CSS mà chúng ta cần biết phù hợp cho mọi đối tượng nhất là các bạn Frontend mới. 7. Hover.css | Git Thư viện CSS về các loại hover cho button ,link vơi hiệu ứng bắt mặt rất đẹp và nhiều kiểu để chúng ta có thể tham khảo 8.Project Guidelines | Git Một thư viện cho phép chúng ta tạo Project Guideline cho dự án rất tiện lợi và nhanh chóng 9.React Query Thư viện Reactjs hỗ trợ việc Fetch , update data Lời kếtChỉ với 1 mẹo nho nhỏ bằng với CSS chúng ta có thêm 1 lựa chọn 1 phương pháp nữa khi làm thiết kế giao diện đúng không nào.Hi vọng mẹo này có ích với nhiều bạn và cảm ơn các bạn đã đọc bài. All rights reserved |
