Thiết Kế Web

Các lệnh thường gặp trong CSS

Bài viết hôm trước mình đã giới thiệu cho các bạn về CSS là gì? Tổng quan về CSS. Tiếp theo bài viết hôm nay Hiếu Đặng sẽ giới thiệu đến các bạn một số lệnh căn bản và thường …

Bài viết hôm trước mình đã giới thiệu cho các bạn về CSS là gì? Tổng quan về CSS. Tiếp theo bài viết hôm nay Hiếu Đặng sẽ giới thiệu đế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:

 Ví dụ:

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:

 Ví dụ:

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

 Ví dụ:

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.

magin

Cú pháp:

ví dụ:

 

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

Ví dụ:

 

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

Ví dụ:

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:

Ví dụ:

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

Ví dụ:

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

Đang cập nhật……

Thẻ:, ,
comments powered by Disqus
Powered by HTH Company