Hướng dẫn tự sửa css đơn giản nhất

Mã css giúp các bạn trang trí chỉnh sửa website cho đẹp hơn, nhiều hiệu ứng hơn, tuy nhiên mã này tương đối phức tạp và các bạn ko biết phải bắt đầu từ đâu, bài viết này mình sẽ hướng dẫn các bạn tự chỉnh css theo cách đơn giản nhất

Đăng nhập quản trị và bật chế độ sửa trực tiếp trên web

Nhắp phải vào chỗ bạn muốn sửa css, vd mình sẽ nhắp phải vào giá tiền và sửa css cho giá tiền ( dùng trình duyệt chrome )

Ô mã bên phải của đối tượng này sẽ hiện ra, phía trên phải là đoạn mã html

vd <p class="gia"> ... </p> là đoạn mã html của phần giá sản phẩm, class của nó là gia, trong mã css mình sẽ đặt là .gia

bạn nhắp phải chuột và copy đoạn css .bocuc_17 .gia {} ở ô phía dưới, bên phải như hình

Ấn vào hình bánh răng ở chức năng để vào sửa cấu hình

Chuyển sang tab "Cấu hình box"

nhập đoạn mã vừa copy ở trên vào và sửa theo ý muốn, vd mình sửa thành

.bocuc_17 .gia {
font-size:30px !important;
background:yellow;
}

.bocuc_17 .gia  là đối tượng css, cụ thể là lớp đối tượng gia, nằm trong lớp đối tượng .bocuc_17 ( bố cục 17 ở đây là module đồ uống )

nếu css ko nhận vì có thể có các đoạn mã css khác đã được ưu tiên hơn thì bạn có thể thêm đoạn mã !important vào đề đè các mã css có sẵn khác

kết quả

nếu muốn css này áp dụng cho toàn bộ giá tiền ở các chức năng sản phẩm tương tự khác để đỡ phải sửa từng chức năng thì bạn sửa thành

.gia {
font-size:30px !important;
background:yellow;
}

và nhập code này vào trong mục "Giao diện > tùy chọn > tự nhập css " như hình sau

như vậy toàn bộ đối tượng .gia sẽ được nhận mã css này chứ ko chỉ trong bocuc_17

Nếu muốn làm hiệu ứng css khi di chuột vào giá thì bạn thêm :hover vào sau đối tượng

vd

hiệu ứng :hover sẽ làm cho website sinh động hơn

Các bạn có thể tham khảo kỹ hơn về css trên google

https://www.google.com/search?q=css&safe=active&client=firefox-b&source=lnt&tbs=lr:lang_1vi&lr=lang_vi&sa=X&ved=0ahUKEwiWmu_m45jcAhXFE4gKHbU8A_wQpwUIHQ&biw=1920&bih=966

phần lớn css viết bằng tiếng anh rất dễ để hiểu , các bạn cứ đánh đúng cú pháp là nó sẽ nhận, đánh sai cũng ko sao xóa đi làm lại nên các bạn cứ thử thoải mái.

Chúc các bạn thành công !