Hướng dẫn Tổng hợp một số lệnh thường gặp trong CSS

[PVS]

Tổng hợp một số lệnh thường gặp trong CSS

Bài viết này sẽ tổng hợp đến các bạn một số lệnh căn bản và thường hay gặp nhất trong CSS và để layout hoàn chỉnh một trang web thì không thể thiếu những lệnh này.

1. Lệnh margin:

Lệnh margin nói một cách để các bạn dễ hiểu và hình dung là nó giúp chúng ta căn khoảng cách bốn lề của các đối tượng (Đối tượng nằm bên ngoài) với nhau. Nói ngắn ngọn hơn là căn khoảng cách giữa các đối tượng với nhau.

Cú pháp:

.ClassName{
   margin:<Giá trị>;// Giá trị ở đây chúng ta có thể dùng "px", "%"...
}

Ví dụ:

.ClassName{
   margin:20px;
}

Nếu các bạn viết như thế này đồng nghĩa với việc lề trên, lề dưới, lề phải, lề trái các bạn đều cách với đối tượng khác 20px.

Ngoài ra nếu các bạn chỉ muốn căn cho lề trái và lề phải hoặc chỉ căn cho lề trên và lề dưới thì chúng ta có thể viết như sau.

Cú pháp:

.ClassName{
   margin-top:<Giá trị>;
   margin-bottom:<Giá trị>;
   margin-left:<Giá trị>;
   margin-right:<Giá trị>;
}

Ví dụ:

.ClassName{
   margin-top:10px; //Lề trên được căn là 10px
   margin-bottom:5px; //Lề dưới được căn là 5px
   margin-left:20px; //Lề trái được căn là 20px
   margin-right:15px; //Lề phải được căn là 15px
}

Ngắn gọn hơn các bạn có thể viết như thế này.

.ClassName{
   margin:<top> <right> <bottom> <left>; //Lưu ý là chúng ta đang tính theo chiều kim đồng hồ quay nhé.
}

Ví dụ:

.ClassName{
   margin:10px 15px 5px 20px; //Tương đương là Top 10px, Right 15px, Bottom 5px và Left 20px;
}

Tùy theo mỗi trường hợp mà các bạn sẽ chọn cú pháp cần sử dụng nhé. Làm sao chúng ta tiết kiệm được nhiều tài nguyên thì càng tốt.

2. Lệnh padding:

Tương tự như lệnh margin thì chức năng của lệnh padding cũng là căn khoảng cách lề giữa các đối tượng với nhau. Nhưng lệnh margin thì đối với các đối tượng bên ngoài với nhau, còn padding thì đối tượng nằm phía trong nó. Dưới đây là hình ảnh minh họa để các bạn dễ hình dung.

​

Cú pháp:

.ClassName { 
    padding:<Giá trị>;
}

Ví dụ:

.ClassName { 
    padding:10px;
}

Hoặc chúng ta có thể tách ra từng lề một bằng cách viết như sau:

.ClassName { 
    padding-top:<Giá trị>; //Căn lề trên
    padding-right:<Giá trị>; //Căn lề phải 
    padding-bottom:<Giá trị>; //Căn lề dưới
    padding-left:<Giá trị>; //Căn lề trái 
}

Ví dụ:

.ClassName{ 
    padding-top:10px; //Căn lề trên
    padding-right:20px; //Căn lề phải 
    padding-bottom:30px; //Căn lề dưới
    padding-left:40px; //Căn lề trái 
}

Ngắn gọn hơn chúng ta có thể viết:

.ClassName{ 
    padding:<top> <right> <bottom> <left>; //Lưu ý là chúng ta đang tính theo chiều kim đồng hồ quay nhé.
}

Ví dụ:

.ClassName{ 
    padding:10px 20px 5px 15px;
}

Tóm lại: Ta thấy 2 lệnh trên đều là căn lề, vậy chúng có gì khác nhau, chúng ta sẽ nói thêm về điều này:

• margin: khi dùng lệnh này để căn lề thì kích thước của khung nội dung của bạn sẽ được giữ nguyên.
• padding: với việc căn lề bằng lệnh padding thì kích thước của khung nội dung sẽ bị thay đổi.
• Lấy ví dụ: khung nội dung của bạn có độ rộng 100px, khi dùng lệnh căn lề trái padding-left:30px; thì khung sẽ bị dịch sang phải 30px, và khi đó độ rộng của khung sẽ được cộng thêm vào là 30px, tức là 130px. Đó chính là mấu chốt khiến các bạn mới làm quen thường bị xảy ra hiện tượng xô lệch do khi dùng padding vì chúng ta padding bao nhiêu thì sẽ + thêm vào chiều rộng cũ bấy nhiêu để tạo thành một chiều rộng mới.

3. Background:

Lệnh Background là lệnh giúp chúng ta tạo màu nên cho đối tượng hoặc hình nền cho đối tượng.

Cú pháp tạo màu nền cho đổi tượng:

.ClassName{ 
    background:<Mã màu> <Các thuộc tính kèm theo>;
}

Ví dụ:

.ClassName{ 
    background:#000000; //Màu nền của đối tượng là màu đen
}

Cú pháp tạo hình nền cho đổi tượng:

.ClassName{ 
    background:url(<Đường dẫn hình nền>) <Các thuộc tính kèm theo>;
}

Ví dụ:

.ClassName{ 
    background:url("images.jpg");//Hình nền của đổi tượng là hình images.jpg
}

Các thuộc tính cơ bản của lệnh:

.ClassName{ 
    background-color: transparent; //Làm trong nền trong suốt
    background-image: url('/image.jpg'); //Ảnh nền 
    background-repeat: no-repeat; //Thuộc tính lặp lại
    background-position: top right; //Vị trí nền 
    background-attachment: scroll; //Nền trượt
}

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

Nguồn: tuhocphp.com​