[Tip hay Flatsome]Hướng dẫn tùy biến CSS một cách nhanh chóng

[Tip hay Flatsome]Hướng dẫn tùy biến CSS một cách nhanh chóng

Thật ra mục này đã ấp ủ từ lâu để giới thiệu với anh em. Có thể gọi là tìm kiếm và sửa thuộc tính CSS của nó một cách nhanh chóng. Đơn giản và tiện lợi lại còn free nữa. Đây là một kĩ năng cần có đối với tất cả mọi người. Từ các thánh nhân Coder cho đến Newbie đều phải tu luyện để học.

Nếu như đối với người mới thì không biết vào đâu để sửa cái này hình tròn, cái kia có viền… Dĩ nhiên để có thể sửa được ưng ý. Các bạn phải học qua CSS, hoặc chí ít phải hiểu được nó. Với các bản chrome hay firefox hiện tại. Bạn hoàn toàn có thể thao tác các tác vụ như chỉnh màu, thêm thuộc tính, bổ sung layer để xem trực tiếp những thứ mình sửa trên web.

Để xem chi tiết các thuộc tính và tùy chỉnh theo ý mình. Bạn nên xem tại địa chỉ W3school CSS

Các bạn nên nhớ đây là kĩ năng của mọi người khi muốn tùy chỉnh web của mình. Một kĩ năng hết sức cơ bản, cố gắng học tập. Bài tập cơ bản nhất đó là sửa màu các thuộc tính. Bạn tùy chỉnh font chữ các tiêu đề, nội dung, thay màu link… Sau đó thực hành copy đoạn css ở mục Style bên cạnh vào CSS tùy chỉnh là được ( để vào css tùy chỉnh, bạn cần Đăng nhập, đến giao diện/tùy chỉnh, kéo xuống cuối, tìm css để dán vào). Kĩ năng này không giới hạn theme web nhé. Với theme nào bạn cũng có thể làm tương tự cái này để tạo 1 style mới cho web của mình.

Hướng dẫn này sẽ giúp bạn nhanh chóng tìm thấy một yếu tố và chỉnh sửa nó bằng CSS.

Hướng dẫn này dành cho Google Chrome, nhưng nó cũng có thể hoạt động trong Safari hoặc Firefox.

1) Nhấp chuột phải vào một yếu tố và nhấp vào ” Kiểm tra ” để mở Bảng điều khiển web.

2) Nhấp vào nút ” Thanh tra ” và nhấp vào yếu tố bạn muốn chỉnh sửa.

3) Bây giờ bạn có thể sao chép bộ chọn phần tử ” CSS ” bằng cách nhấp chuột phải vào phần tử trong chế độ xem “HTML” và đi đến Sao chép> Sao chép bộ chọn

4) Bạn sẽ không có được một chuỗi dài như thế này mà có thể được dán ở bất cứ đâu: 

#main> div> div.col.large-9> div> div> div.product-small.col.has-hover.post-328.product.type-sản phẩm.status-Publish.has-post-Thumb.product_cat -bag.product_tag-bag.product_tag-green.product_tag-leather.product_tag-nypd.first.instock.shipping-taxable.product-type-bên ngoài> div> div.product-small.box> div.box- -text-sản phẩm> div.title-trình bao bọc> p.name.product-title> a

Đây là chuỗi chọn CSS.

5) Bạn có thể loại bỏ hầu hết chuỗi và giữ hai mục tiêu cuối cùng. F.ex
p.name.product-title> a

6) Bây giờ bạn có thể bắt đầu thêm CSS tùy chỉnh vào thành phần này.

Ví dụ:

Ẩn phần tử:
p.name.product-title> a {display: none}

Kích thước phông chữ lớn hơn:
p.name.product-title> a {font-size: 200%}

Thay đổi màu:
p.name.product-title> a {color: # 777}


Bạn có thể thêm CSS tùy chỉnh vào Advanced> CSS tùy chỉnh.

Leave a Reply

avatar
  Subscribe  
Notify of
Hotline: 0974.0707.83(Zalo/Viber)