OBin's Blog: tự học css

New

Với một người thiết kế web thông thạo css thì 2 thuộc tính margin và padding có vẻ không có gì mơ hồ, nhưng đối với một người mới tiếp cận với css thì việc phân biệt cũng như sử dụng 2 thuộc tính này hay bị nhầm lẫn. Sau đây là một bài viết ngắn giúp các bạn phân biệt 2 thuộc tính này, sử dụng chúng thành thạo hơn trong làm web.

1. Margin
Nghĩa là lề, căn lề, trong css nó dùng để điều chỉnh khoản cách giữa các thành phần của trang web:

Sử dụng:
Thuộc tính Margin có 4 giá trị lần lượt là Top, Right, Bottom, Left và sử dụng theo các cách sau:

Cách 1: margin 5px 5px 0 5px;

Nghĩa là top:5px, right:5px, bottom:0px, left:5px;

Cách 2: margin: 10px 20px 5px;

Nghĩa là top:10px, right:20px, bottom:5px, left:20px;

Cách 3: margin: 10px 20px;

Nghĩa là Top: 10px và bottom:10px; right: 20px và left:20px;

Cách 3: margin: 10px;

Nghĩa là: top, right, bottom, left đều có giá trị là 10px;

Cách 3: Đưa ra từng vị trí cụ thể:

Ví dụ:
margin-top: 10px;
margin-right: 5px;
margin-bottom: 8px;
margin-left: 15px;

2. Padding
Thuộc tính padding tuy có cách dùng tương tự thuộc tính margin nhưng lại có ý nghĩa khác, nó dùng để phân cách giữa nội dung và viền (border) của một thành phần.

Sử dụng:
Thuộc tính Padding cũng có 4 giá trị lần lượt là Top, Right, Bottom, Left và sử dụng ương tự padding:

Cách 1: padding 5px 5px 0 5px;

Nghĩa là top:5px, right:5px, bottom:0px, left:5px;

Cách 2: padding: 10px 20px 5px;

Nghĩa là top:10px, right:20px, bottom:5px, left:20px;

Cách 3: padding: 10px 20px;

Nghĩa là Top: 10px và bottom:10px; right: 20px và left:20px;

Cách 3: padding: 10px;

Nghĩa là: top, right, bottom, left đều có giá trị là 10px;

Cách 3: Đưa ra từng vị trí cụ thể:

Ví dụ:
padding-top: 10px;
padding-right: 5px;
padding-bottom: 8px;
padding-left: 15px;

Lưu ý: Khi sử dụng thuộc tính padding thì độ lớn của một thành phần sẻ bao gồm cả padding, còn nếu sử dụng margin thì độ lớn của thành phần không đổi, giá trị của margin chỉ là khoản cách bên ngoài thành phần.

Còn bây giờ nếu các bạn đã hiểu thì bắt tay vào thực hiện một file html sử dụng padding và margin xem nhé.

Chúc các bạn thực hiện tốt!

Là một người làm web chắc hẳn ai cũng đau đầu việc layout web chạy tốt trên tình duyệt này nhưng sang trình duyệt khác thì bị vỡ rất xấu. Vậy phải làm sao? Sau đây là cách đơn giản để fix mọi trình duyệt bằng css, sau khi đọc bài hướng dẫn này chắc các bạn không phải lo về việc này nữa :))

1. Fix trình duyệt Internet Explorer
Cách 1:
Viết css cho từng ie, đặt trong thẻ <head> kiểm tra phiên bản ie tương ứng:

•    Tất cả phiên bản ie

•    Chạy với các trình duyệt khác, trừ trình duyệt ie

<link rel="stylesheet" type="text/css" href="not-ie.css" />

•    Chỉ chạy trên ie6

•    Chỉ chạy trên ie7

Có thể kết hợp gt (greater than), gte (greater than or equal), lt (less than), lte (less than or equal)
VD: chỉ chạy trên các trình duyệt từ ie7 trở về sau

Cách 2:
Hack css theo từng phiên bản ie
• Chỉ chạy trên ie6: thêm "* html " trước khối css mà bạn định nghĩa
Ví dụ:

* html #div {
height: 500px;
}

• Chỉ chạy trên ie7: thêm "*+html " trước khối css mà bạn định nghĩa
Ví dụ:

*+html #div {
height: 500px;
}

• Chỉ chạy trên ie8
Ví dụ:

#div {
height: 500px\0/;
}

• Không cho chạy trên ie6 và các phiên bản ie về trước
Ví dụ:

html > body #div {
height: 500px;
}

Cách 3:

.className
{
padding:10px\0/; /* chỉ chạy trên IE9 + IE8 */
}
@media all and (min-width:0) {
.className { color:pink \0/; } /* chỉ chạy trên IE9 */
}
.className{padding:10px\9;} /* chỉ chạy trên IE8 */
.className{padding:10px\0;} /* chỉ chạy trên IE8 */

.className{*padding :10px ;} /* chỉ chạy trên IE7 */
hoặc
* + html .class{margin-left:20px;} /* chỉ chạy trên IE7 */

.className{_padding :10px ;} /* chỉ chạy trên IE6 */
hoặc
* html .logo{margin-left:10px;} /*chỉ chạy trên IE6 */

2. Fix trình duyệt Chrome

Cách 1: Sử dụng 1 file css riêng cho trình duyệt Chrome

<script type="text/javascript">
    if(navigator.userAgent.toLowerCase().match('chrome'))
    document.write('<link rel="stylesheet" type="text/css" href="files/chrome.css">');
    </script>

Cách 2 : Fix ngay trên file css chính

<style>
@media screen and (-webkit-min-device-pixel-ratio:0)
{
div#search_form button
{
margin-left:-15px;
}
}
</style>

3. Fix trình duyệt Firefox

html>/**/body .className{margin-left:10px}

Hoặc

@-moz-document url-prefix() {
.className {font-size: .6em;}}

4. Fix trình duyệt Safari

@media screen and (-webkit-min-device-pixel-ratio:0)
{ .className { margin:10px; } }

5. Fix trình duyệt Opera

@media all and (min-width:0px) {head~body .className {margin-left:10px;}}
/* version 9 và các version trước đó /*

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

box-shadow là một thuộc tính css3 khá hay dùng để tạo bóng đổ cho một đối tượng bất kì mà trước kia chúng ta làm web phải dùng đến hiệu ứng của Photoshop sau đó cắt hình để làm. Sau đây là hướng dẫn sử dụng thuộc tính box-shadow trong css3, bài hướng dẫn chi tiết giúp bạn dễ dàng nắm bắt được cách dùng.

Đầu tiên là cách dùng như sau:

div
{
box-shadow: 10px 10px 5px 5px #999 inset;
}

Tương ứng với các giá trị phía dưới:

Selector
{
box-shadow: h-shadow v-shadow blur spread color inset;
}

Selector: Là đối trượng được chọn ví dụ như div, ul, li, a, class, id...
shadow : Đổ bóng theo chiều ngang (đơn vị px).
v-shadow: Đổ bóng theo chiều dọc (đơn vị px).
blur : Độ mờ bóng đổ (đơn vị px).
spread : Độ rộng của bóng đổ
color : Màu bóng đổ
inset: Đặt hiệu ứng bên trong đối tượng, nếu không dùng thuộc tính này thì mặc định bóng đổ sẻ ở bên ngoài đối tượng.

Ví dụ 1:

div
{
box-shadow: 0px 0px 6px 6px #000;
}

Ví dụ 2:

div
{
box-shadow: -5px -5px 5px 5px blue;
}

Ví dụ 3:

div
{
box-shadow: 5px 5px 5px 5px red;
}

Lưu ý: Thuộc tính box-shadow là css3 nên chỉ hỗ trợ trên IE9+, Firefox, Chrome, Opera, and Safari 5.1.1.

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

Có thể bạn quan tâm

Xem nhiều trong tuần

Giải đáp