Tư vấn thiết kế website

Cách lấy css của 1 trang web với công cụ Snappy Snippet

Thứ tư - 21/03/2018 10:13/ Uncategorized

Cách lấy css của 1 trang web thì có rất nhiều từ thủ công cho đến sử dụng những công cụ hổ trợ như Chrome Devtools hay Firebug của trình duyệt firefox.


Đối với người thiết kế website, mỗi khi họ gặp một ý tưởng thiết kế mới lạ trên internet, họ luôn luôn tự hỏi rằng “làm thế nào mà họ có thể làm được như vậy?”, và họ sẽ ngay lập tức muốn học hỏi nó hay làm theo ý tưởng thiết kế kia. Vậy cách lấy css của 1 trang web là như thế nào? Hiện nay công cụ mà đơn giản, phổ biến và được nhiều người lựa chọn nhất vì sự tiện lợi của nó là Snappy Snippet.
 

Cách lấy css của 1 trang web với công cụ Snappy Snippet


Snappy Snippet là một tiện ích của google Chrome giúp bạn sao chép những đoạn css mà bạn muốn học hỏi hay làm theo. Để làm được điều này bạn cần download Snappy Snippet

Sau khi cài đặt xong, bạn nhấn f12 ở website mà bạn muốn sao chép thì bạn sẽ trong thấy công cụ Snappy Snippet. 
 
Phầm mềm đã cài đặt xong
Hình 1 : Công cụ Snappy Snippet khi cài đặt xong

Và dưới đây là hình ảnh của Snappy Snippet sau khi được cài đặc xong và mở lên. Chúng ta cùng bắt đầu xem ứng dụng này nhé.
 
hình ảnh của tiện ích
Hình 2 : Hình ảnh Snappy Snippet khi mở lên

Đầu tiên bạn cần chọn phần muốn sao chép CSS và bấm vào “Create a snippet from inspected element” để công cụ này load.

Sau khi có kết quả các bạn có thể thấy rằng một cột sẽ chứa HTML và một cột chứa CSS. Bạn chỉ cần Copy phần CSS về là bạn có thế lấy CSS từ một trang web.
 
Phần hiển thị HTML và CSS
Hình 3 : Phần hiển thì CSS và HTML

Cài đặt phần setting Snappy Snippet

 
Phần setting của ứng dụng
Hình 4 : Phần setting của công cụ Snappy Snippet

Bạn có thể tuỳ chỉnh nhanh Code Css ở phần bên dưới của Snappy Snippet. Những phần cài đặt đó là :

- Chỉ giữ các thuộc tính viết tắt (ví dụ: giữ "đường viền", nhưng bỏ "border-width")

- Xóa thuộc tính với giá trị trình duyệt mặc định

- Xóa các thuộc tính bắt đầu bằng "-webkit"

- Kết hợp cùng một quy tắc với nhau

- Định dạng và làm sạch HTML

- Bao gồm các phần tử đầu trong đoạn mã

- Đặt trước tất cả ID CSS

- Tuỳ vào từng trường hợp và mong muốn chỉnh sửa của bạn mà có nhưng cách khác nhau. 

Snappy Snippet là một công cụ vô cùng tiện lợi và cũng là cách lấy css của 1 trang web. Tuy nhiên, bạn hãy sử dụng công cụ này cho mục đích tham khảo và học tập của bạn. Những hành vi sao chép và sử dụng của người khác luôn được xem là phạm pháp, hơn nữa nếu phạm lạm dụng nó quá mức thì Snappy Snippet sẽ làm thui chột năng lực bản thân của bạn.

Vì thế hãy sử dụng đúng cách bạn nhé.

Tổng số điểm của bài viết là: 5 trong 1 đánh giá

Xếp hạng: 5 - 1 phiếu bầu
Click để đánh giá bài viết

Ý KIẾN BẠN ĐỌC

TIN LIÊN QUAN

5 phần mềm thiết kế web tốt nhất hiện nay

5 phần mềm thiết kế web tốt nhất hiện nay

Thiết kế website đã đang phát triển một cách vượt bậc và nhanh chóng ở thời điểm hiện tại. Đi kèm đó là việc luôn luôn...

bởi Vidoco, T03 21, 2018 / Danh mục
Điểm chất lượng trong google adwords là gì?

Điểm chất lượng trong google adwords là gì?

Điểm chất lượng trong google adwords rất quan trọng trong quảng cáo google, yếu tố này quyết định đến giá thầu của từ...

bởi Vidoco, T03 22, 2018 / Danh mục
Các trang web bán hàng online uy tín và hiệu quả nhất hiện nay

Các trang web bán hàng online uy tín và hiệu quả nhất hiện nay

Như các bạn đã biết muốn bán hàng online hiệu quả thì cần phải có sự hổ trợ của các trang web bán hàng online uy tín.

bởi Vidoco, T03 22, 2018 / Danh mục
Cách lấy HTML của 1 trang web nhanh chóng và đơn giản

Cách lấy HTML của 1 trang web nhanh chóng và đơn giản

Hôm nay, VIDOCO chúng tôi sẽ chia sẽ đến các bạn cách lấy html của 1 trang web. Việc này sẽ hổ trợ các bạn trong việc...

bởi Vidoco, T03 21, 2018 / Danh mục
Định nghĩa tên miền và hosting là gì?

Định nghĩa tên miền và hosting là gì?

Tên miền và hosting là gì? Đây là câu hỏi mà chắc chắn những nhà thiết kế website thường gặp phải từ khách hàng. Do đó...

bởi Vidoco, T03 21, 2018 / Danh mục
Hướng dẫn thiết kế web responsive

Hướng dẫn thiết kế web responsive

Thế giới công nghệ luôn thay đổi theo thời gian, cái mới đang dần thay thế cho cái cũ, có những cập nhập mới để phù hợp...

bởi Vidoco, T03 19, 2018 / Danh mục