Thủ thuật cơ bản : xóa đường viền của ảnh

Thứ Năm, 23 tháng 4, 2009

Tips To Delete the Image Border

[FD's BlOg] - Đây là một trong những kiến thức cơ bản về CSS, ở đây mình cũng xin giới thiệu cho các bạn biết. (thủ thuật áp dụng cho nhưng template mặc định sẵn thuộc tính border cho ảnh).

Thực ra bình thường trong blog, nếu ta muốn post ảnh, thì chỉ cần đặt trong thẻ

Ảnh minh họa :

Là mặc định nó sẽ không có đường viền bao quanh ảnh. Khi muốn tạo đường viền bao quanh ảnh thì ta chỉ cần thêm thuộc tính border vào là xong.
Ví dụ:

Ảnh minh họa:

Tuy nhiên đối với 1 số template, mặc dù ta không gán thuộc tính border cho ảnh, nhưng ảnh post ra vẫn có dường viền bao quanh. Bạn cố gắng thêm thuộc tính border="0" vào để làm mất border của ảnh nhưng vẫn không có tác dụng. Điều này là do CSS trong tempate của bạn đã mặc định sẵn thuộc tính này. Như vậy chỉ còn cách vào CSS gỡ bỏ thuộc tính này mà thôi.
Mình đã test thử với blog của mình, trong CSS đã mặc định thuộc tính ảnh không có đường viền nên dù mình có gán border ="3" hay mấy đi nữa thì vẫn không xuất hiện border khi xuất bản bài viết.

Dưới đây là cách khác phục:
1. Đăng nhập vào blog
2. Vào bố cục (Layout)
3. Vào chỉnh sửa Code HTML (Edit Code HTML) (không cần chọn mở rộng tiện ích)
4. Tìm đọan code CSS sau (hoặc tương tự) :

.post img {
padding:4px;
border:1px solid $bordercolor;
}

- Với thuộc tính CSS của ảnh trên, ảnh post ra sẽ được mặc định có đường viền, và được padding (thụt vào) từ 4 cạnh là 5px. Đọan CSS này thích hợp cho việc tạo các ảnh kiểu tạp chí, trông cũng khá ấn tượng.
- Và đọan code border:1px solid $bordercolor; chính là code tạo đường viền bao quanh ảnh. Xóa chúng đi nếu bạn không muốn xuất hiện đường viền này.

và như vậy nó sẽ trông như thế này:

.post img {
padding:4px;
}

5. Save template của bạn lại. Như vậy đã xong.

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

Xem nhiều trong tuần

Giới thiệu về tôi

Phim Vui lắm

Lưu trữ Blog

Thủ thuật cơ bản : xóa đường viền của ảnh

Comments[ 0 ]

Đăng nhận xét