Hướng dẫn CSS cho mỗi item sản phẩm

Trong bài này chúng tôi sẽ hướng dẫn cho các quý khách hàng cách CSS cho mỗi item sản phẩm. Những item sản phẩm này, chúng ta sẽ CSS nó để làm các phần bao gồm: Border xung quanh mỗi item, kiểu chữ và màu giá. Vậy hãy cũng vào phần hướng dẫn của dịch vụ thiết kế website của chúng tôi ngay thôi nào.

Hướng dẫn CSS cho mỗi item sản phẩm

A. Làm Border cho mỗi Item sản phẩm

Đầu tiên để CSS bất kỳ đối tượng nào trên website, quý khách hãy vào Cấu hình giao diện nâng cao > Tùy chỉnh CSS/JS.

Xong rồi bây giờ ta sẽ vào phần chỉnh CSS làm border cho đối tượng, ở đây chúng tôi sẽ hướng dẫn chỉnh border cho những đối tượng item sản phẩm trên webiste.

Bước 1: Quý khách copy đoạn code dưới đây và sau đó dán đoạn code đó vào trong khung Tuỳ chỉnh CSS toàn cục.

.product-block.grid{

border: 1px solid black;

}

Trong đó quý khách chỉnh sửa lại theo ý muốn như sau:

Ở trên dòng border > 1px là độ đầy của border, solid là loại border gồm có các giá trị sau:

dotted – Xác định đường viền chấm
dashed – Xác định đường viền nét đứt
solid – Xác định đường viền chắc chắn
double – Xác định đường viền đôi
groove– Xác định đường viền có rãnh 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
ridge– Xác định đường viền có viền 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
inset– Xác định đường viền 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
outset– Xác định đường viền đầu 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
none – Xác định không biên giới
hidden – Xác định đường viền ẩn

Và cuối cùng chữ Black trên dòng border nó là màu của border quý khách. Ngoài sử dụng tên màu back, green, red, white, yellow..thì quý khách có thể thay thế bằng mã màu cũng được.

Khi đã thay đổi những giá trị border quý khách muốn. Quý khách nhấn Save changes ở nút trên cùng để lưu lại. Và ra ngoài trang chủ xem kết quả.

B. Đổi kiểu chữ tiêu đề cho mỗi Item sản phẩm

Quý khách sử dụng đoạn code dưới đây:

.product-block.grid .name>a{

text-transform: none;

}

Trong đó: None là hiện mặt định, Capitalize là chuyển đổi ký tự đầu tiên của mỗi từ thành chữ hoa, uppercase là chuyển đổi tất cả các ký tự thành chữ hoa, lowercase là chuyển đổi tất cả các ký tự thành chữ thường, initial là đặt thuộc tính này thành giá trị mặc định của nó, inherit kế thừa thuộc tính này từ phần tử cha của nó.