Xóa đường viền của ảnh

- Đâ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ẻ

<img src="{link ảnh}"/>

Ả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ụ:

<img src="{link ảnh}"
border="1"/>

Ả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, hư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
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.