Hướng dẫn chi tiết học CSS cơ bản [Phần 2]

Box Model và các thuộc tính

Tiếp tục với serie học CSS cơ bản, chúng ta sẽ cùng tìm hiểu về Box Model. Box Model được sử dụng để mô tả về khoảng cách của mỗi phần tử trên website, tức là nó được dùng để tinh chỉnh khoảng cách hiển thị cho từng phần tử trên website.

Những thành phần quan trọng của kỹ thuật Box Model trong CSS:

• Margin: Khoảng cách tính từ bên ngoài của phần tử.
• Border: Đường viền của phần tử.
• Padding: Khoảng cách tính từ bên trong của phần tử.
• Content: Nội dung.

Trong 4 thành phần này thì phần content sẽ không có thuộc tính CSS đại diện vì nó là nội dung trong phần tử, 3 phần còn lại có các thuộc tính CSS đại diện như sau:

margin: top right bottom left;
 
border: top right bottom left;
 
padding: top right bottom left;

Padding

Padding dùng để thiết lập khoảng cách tính từ phần content trở ra viền của phần tử và nó được khai báo trong CSS theo tuần tự top right bottom left, giá trị là số đi kèm đơn vị đo lường.

Ví dụ:

Trong ví dụ trên tôi đã sử dụng padding để tạo khoảng cách cho top và bottom là 20px, còn right và left là 15px. Ngoài ra thuộc tính padding còn có 4 thuộc con khác là padding-top, padding-bottom, padding-right, padding-left.

Border

Border là thuộc tính dùng để tạo viền cho phần tử. Cấu trúc của thuộc tính border như sau:

border: [size] [type] [color];

Ví dụ: tôi tạo một viền có kích thước là 0.5 px, kiểu trơn, màu viền là màu xanh.

border: 0.5px solid blue;

Trong border hỗ trợ một số type như solid, dotted, double, groove, ridge, inset, outset. Thẻ border cũng có các thẻ con khác như border-top, border-bottom, border-right và border-left.

Margin

Margin có nhiệm vụ tạo khoảng cách từ Border trở ra ngoài.Ví dụ:

Margin chính là khoảng trắng giữa #box1 và #box 2. Trong phần CSS tôi có gắn margin: 20px 0 0 0 ở #box2 có nghĩa là nó sẽ tạo ra một khoảng trắng trên đầu của #box2 và nó cũng có các thuộc tính con như margin-top, margin-bottom, margin-right và margin-left.

Kiểm tra Box Model với Developer Tools

Để bật Developer Tools bạn nhấn F12 và trỏ chuột vào phần như dưới đây sẽ thấy nó nằm bên phải.

Trong khung trên, vùng màu xanh là Content, xanh lá là Padding, cam là Border và màu da là Margin.

Để xem thông tin của phần tử  thì ấn vào nút tìm kiếm phần tử.

Giờ bạn có thể rê chuột đến một phần tử trên website và nhấp vào để xem Box Model, bạn có thể nhấp vào từng ô giá trị trong khung Box Model và thay đổi giá trị của nó nhưng nó sẽ mất sau khi bạn refresh trình duyệt.

Thuộc tính tùy chỉnh kích thước

Khi làm việc với CSS Layout hay cụ thể là làm việc với Box Model thì ngoài việc tinh chỉnh cách hiển thị cho mỗi phần tử thì bạn cần phải thiết lập kích thước cho các phần tử như thiết lập chiều rộng và chiều cao cho một phần tử nào đó.

Dưới đây là các thuộc tính giúp bạn thiết lập chiều rộng và chiều cao của phần tử:

• length: kiểu giá trị kèm theo các đơn vị như px, pt, em, rem, %
• none: bỏ thiết lập
• auto: tự động tính dựa theo chiều còn lại
• inherit: kế thừa giá trị đã thiết lập trước đó cho thuộc tính

Lưu ý: Chỉ có thể thiết lập kích thước với các phần tử Block, Table và các đối tượng như hình ảnh, video, flash,… nhưng không thể thiết lập kích thước cho các phần tử Inline.

Đối với các thuộc tính min-*, max-* tức là nó sẽ căn độ dài của phần tử dựa trên nội dung bên trong nhưng sẽ có kích thước tối thiểu/tối đa được phép sử dụng.

Ví dụ: Bạn có phần #content, trong #content có phần #post và thiết lập chiều rộng cho #post là 600px. Nếu bạn đặt thuộc tính max-width cho #content là 500px thì phần #post cũng chỉ dãn tối đa được 500px.

Tìm hiểu box-sizing

Khi sử dụng Padding và Border, nếu bạn đặt thêm thuộc tính width và height để thiết lập kích thước thì khung phần tử sẽ bị biến đổi kích thước.

Ví dụ: Box có kích thước width là 400px và height là 400px, nếu bạn đặt thêm padding là 20px thì khung của bạn sẽ có kích thước là 440×440 px. Có nghĩa là nếu cộng thêm padding là 20px thì khung của bạn sẽ tự động cộng thêm 40px (20px cho top và 20px cho bottom, tương tự với left và right).

Và trong serie học CSS cơ bản này, tôi sẽ hướng dẫn các bạn cách giữ nguyên kích thước của phần tử dù có cộng thêm padding và border bằng cách sử dụng thuộc tính box-sizing bởi box-sizing là thuộc tính giúp bạn tính toán và làm chủ kích thước của một phần tử dựa theo thuộc tính width và height được thiết lập bên trong, có nghĩa là thuộc tính width và height là kích thước đã bao gồm cả padding và border.

Lưu ý cách viết

box-sizing là thuộc tính trong CSS3 nên phải viết thành 3 lần với các tiền tố khác nhau:

box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

• box-sizing: dành cho trình duyệt IE8, Opera 7, Firefox và Google Chrome bản mới
• -moz-box-sizing: dành cho Firefox bản cũ
• -webkit-box-sizing: dành cho Google Chrome bản cũ

Các giá trị của box-sizing

• content-box: là giá trị mặc định, tức là giá trị width và height chỉ áp dụng cho khu vực nội dung bên trong, không áp dụng cho padding, margin và border.
• border-box: nếu thiết lập giá trị này thì giá trị width và height sẽ áp dụng cho cả khu vực nội dung, padding và border nhưng không áp dụng cho khu vực margin.
• padding-box: Với giá trị này thì width và height chỉ áp dụng cho phần nội dung và padding, không áp dụng cho phần border và margin.

Chú ý: padding-box chỉ áp dụng được trên trình duyệt Firefox

Sử dụng box-sizing cho toàn bộ phần tử

Khi viết CSS cho website, bạn nên sử dụng box-sizing với giá trị là border-box cho toàn bộ phần tử để các phần tử có được kích thước chính xác khi khai báo, việc này để tránh cộng thêm border và padding dễ gây rối.

Để thiết lập box-sizing: content-box cho toàn bộ phần tử, bạn dùng vùng chọn là *

* {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
}

Màu nền và ảnh nền

Tiếp tục với serie học CSS cơ bản, tôi sẽ giới thiệu đến các bạn một loại thuộc tính khá hay và giúp cho website của bạn trở nên đẹp hơn, đó là thuộc tính thêm màu nền và ảnh nền cho website hoặc phần tử dạng block.

Màu nền với thuộc tính background-color

Thuộc tính background-color giúp bạn thiết lập màu nền bằng CSS và giá trị là tên màu hoặc mã màu HEX/RBG.

Ảnh nền với thuộc tính background-image

Bạn sử dụng thuộc tính background-image để thêm ảnh nền. Ví dụ:

Lưu ý: Đối với các giá trị loại URL thì bạn cần phải có một hàm url() để bọc đường dẫn URL.

Bạn cũng có thể thêm nhiều ảnh nền trên cùng block bằng việc sử dụng nhiều giá trị url() và các giá trị cách nhau bởi dấu phẩy. Ví dụ:

background-image: url('ảnh 1'), url('ảnh 2');

Tùy chỉnh lặp lại ảnh nền với background-repeat

Khi sử dụng ảnh nền, mặc định hình ảnh sẽ lặp đi lặp lại theo cả chiều ngang và dọc cho đến khi lấp toàn bộ phần tử. Nhưng bạn cũng có thể tùy chỉnh lại việc lặp lại ảnh nền thông qua thuộc tính background-repeat. Các giá trị của nó bao gồm:

• no-repeat: Không lặp
• repeat-x: Lặp theo chiều ngang
• repeat-y: Lặp theo chiều dọc
• space: Lặp đều theo cả chiều ngang và dọc, ảnh nền cách nhau bằng khoảng trắng
• repeat: Mặc định

VÍ dụ:

Đổi vị trí ảnh nền với thuộc tính background-position

Để đổi vị trí hiển thị của ảnh nền bạn sử dụng thuộc tính background-position. Nó bao gồm một vài giá trị sau:

• top: hiển thị ở đầu phần tử
• bottom: hiển thị bên dưới phần tử
• left: hiển thị bên trái phần tử
• right: hiển thị bên phải phần tử
• center: hiển thị chính giữa phần tử

y-x: tùy biến vị trí hiển thị theo tọa độ, giá trị đứng trước là y và đứng sau là x.

Với thuộc tính này thì bạn có thể sử dụng tối đa cùng lúc hai giá trị. Ví dụ bạn muốn ảnh nằm chính giữa bên trên phần tử thì giá trị sẽ là center top.

Chia cột với float và clear float

Trong phần này của serie học CSS cơ bản, tôi sẽ giới thiệu tới các bạn một kỹ thuật rất quan trọng trong CSS Layout, đó là cách chia cột trên CSS.

Chia cột trong CSS là gì?

Chia cột trong CSS có nghĩa là bạn thiết lập cho những phần tử con trong một phần tử mẹ nằm trên cùng một hàng. Ví dụ tôi muốn phần nội dung có 2 cột thì tôi sẽ cần tạo ra 3 cái, một gọi là phần tử mẹ hay container, 2 thẻ div còn lại gọi là column (cột).

Trong ví dụ này, tôi có phần #content chứa 2 cột là #post và #sidebar. Ở đây, tôi dùng thêm class container cho #content vì sau này nếu muốn chia thêm cột cho các phần tử khác thì có thể dùng lại class này.

.container {
   width: 900px;
   border: 1px solid #333;
   padding: 10px;
}

#post {
   width: 600px;
   height: 150px;
   background: #e8e8e8;
}

#sidebar {
 width: 300px;
 height: 150px;
 background: #b1b1b1;
}

float: right;

float: left;

.clear { clear: both }

* {
 
padding: 0;
 
margin: 0;
 
border: none;
 
}

list-style: <list-style-type> <list-style-position> <list-style-image>;

list-style-image: url('link ảnh');

list-style: circle inside;