Ở giá trị mặc định đường viền cũng như màu sắc của hộp là trong suốt
do vậy bạn không thấy được. Nhưng với CSS bạn có thể cho hiển thị đường
viền cũng như màu nền của bất cứ đối tượng nào trong trang mà bạn muốn.
Ở ví dụ dưới đây tôi cho hiển thị đường viền của thẻ p và thẻ h1 và màu nền là màu #EEE để bạn thấy được khái niệm hộp bao quanh đối tượng.
view plaincopy to clipboardprint? - p {border: solid 1px red; background-color:#bbeeff;}
- h1 {border: solid 1px red; background-color:#bbeeff;}
p {border: solid 1px red; background-color:#bbeeff;}
h1 {border: solid 1px red; background-color:#bbeeff;}
Dòng chữ với đường viền và màu nền
Nhưng
với CSS bạn có thể cho hiển thị đường viền cũng như màu nền của bất cứ
đối tượng nào trong trang mà bạn muốn. Ở ví dụ dưới đây tôi cho hiển
thị đường viền của thẻ
Box Model
Box Model là khái niệm rất cơ bản và cũng là quan trọng nhất của
CSS. Bởi vì nó quyết định các thành phần trên trang web sẽ được xuất
hiện như thế nào và chúng tương tác với nhau ra làm sao. Dưới đây là
hình minh hoạ cho bạn thấy rõ được những thành phần của hộp và chúng ta
có thể tác động đến nó như thế nào
Padding: là vùng nằm giữa đường viền và nội dung.
Padding thường được sử dụng để tạo ra khoảng trống giữa đường biên và
chữ như 2 ví dụ dưới đây.
Đoạn văn này có đường viền mà không có padding
Đoạn văn này có đường viền và giá trị padding là 5px.
Rõ ràng bạn thấy ở đoạn văn thứ 2 dễ đọc hơn và nhìn nó cũng “dễ thở” hơn. Ở đoạn văn thứ 2 khi giá trị border-style được khai báo, nó sẽ tạo ra một đường viền bao quanh lấy vùng padding.
Border
Khi khai báo đường viền, bạn nên nhớ luôn phải khai báo giá trị border-style.
Nếu giá trị này không được khai báo, tất cả những giá trị như màu sắc,
độ dày sẽ không được hiển thị. Đơn giản là vì khi giá trị border-style
không được khai báo, trình duyệt sẽ cho rằng nó bằng 0. Một khi đã bằng
0 rồi thì màu sắc cũng như độ dày không được xuất hiện là điều tất
nhiên. Ở ví dụ dưới đây bạn thấy các thành phần sẽ được hiển thị như
thế nào khi bạn tác động đến đường viền của nó
Hiển thị đường viền với giá trị là solid
Hiển thị đường viền với giá trị là dotted
Hiển thị đường viền với giá trị là dashed
Hiển thị đường viền với giá trị là double
Hiển thị đường viền với giá trị là groove
Hiển thị đường viền với giá trị là ridge
Hiển thị đường viền với giá trị là inset
Hiển thị đường viền với giá trị là outset
Ở những ví dụ trên mỗi một loại đều có 3 giá trị tương ứng và theo thứ tự là: border-style, border-width và border-color. Bạn có thể khai báo chúng riêng biệt như sau:
view plaincopy to clipboardprint? - p {border-style: dashed; border-width: 3px; border-color: yellow;}
p {border-style: dashed; border-width: 3px; border-color: yellow;}
hoặc gộp chung vào một như sau
view plaincopy to clipboardprint? - p {border: 3px dashed yellow;}
p {border: 3px dashed yellow;}
Margin
Bên ngoài border là margin, nó được dùng để tạo khoảng cách giữa các
thành phần. Các thành phần margin, border và padding đều được mặc định
là 0. Nhưng mỗi trình duyệt lại mặc định một kiểu, do vậy khi viết code
CSS bạn nên luôn reset các giá trị này lại thành 0 để tránh phiền phức
sau này.
view plaincopy to clipboardprint? - * {margin: 0; padding: 0;}
* {margin: 0; padding: 0;}
Tính bù của Margin
Tính năng cuối cùng của Margin mà bạn cần biết là tính bù của nó. Ví
dụ ở hình dưới đây tôi có ba đoạn văn bản và đều có margin-top: 50px và
margin-bottom: 30px được xếp chồng lên nhau. Có thể bạn nghĩ vì
margin-bottom của đoạn văn bản trên là 30px và margin-top của đoạn văn
bản kế tiếp là 50px thì tổng cộng 2 đoạn văn này sẽ phải cách nhau một
khoảng là 80 px. Nhưng trong thực tế lại không phải vậy. Khi có hai giá
trị margin được thiết lập, thì margin lớn sẽ “nuốt” margin bé hay nó bù
vào nhau. Do vậy ở ví dụ dưới, nó chỉ cách nhau 50 px và khoảng cách
giữa chúng là khoảng cách của margin được thiết lập lớn hơn.
Đoạn văn thứ nhất
Đoạn văn thứ hai
Đoạn văn thứ ba
Code CSS
view plaincopy to clipboardprint? - p {border: 1px solid red; margin: 50px 0px 30px 0px;}
p {border: 1px solid red; margin: 50px 0px 30px 0px;}
Cách viết rút gọn
Trong ví dụ trên bạn thấy tôi dùng {margin: 50px 0px 30px 0px;}
đây chính là cách viết tắt trong CSS khi bạn phải làm việc với Border,
Padding và Margin. Thứ tự của nó luôn theo chiều kim đồng hồ Top,
Right, Bottom và Left. Bạn có thể nhớ như kiểu 12 giờ, 3 giờ, 6 giờ và
9 giờ.
Ví dụ khi bạn muốn tác động đến Margin của một thành phần bất kỳ bạn có thể viết đầy đủ là:
view plaincopy to clipboardprint? - {margin-top: 5px; margin-right: 10px; margin-bottom: 15px; margin-left: 20px;}
{margin-top: 5px; margin-right: 10px; margin-bottom: 15px; margin-left: 20px;}
hoặc bạn có thể giản lược nó đơn giản như sau để tiết kiệm thời gian và công sức, bạn chỉ cần dấu cách giữa các giá trị:
view plaincopy to clipboardprint? - {margin:5px 10px 15px 20px;}
{margin:5px 10px 15px 20px;}
Bạn không cần phải viết hết toàn bộ 4 giá trị, nếu một trong 4 giá
trị ở trên bị thiếu, thì nó sẽ lấy giá trị của cạnh đối diện với nó.
view plaincopy to clipboardprint? - {margin:12px 10px 6px;}
{margin:12px 10px 6px;}
Trong ví dụ này, bởi vì cạnh bên trái không có do vậy giá trị của
cạnh bên phải được sử dụng và nó có độ dày là 10 px. Còn nếu như chỉ có
duy nhất một giá trị như sau
view plaincopy to clipboardprint? - {margin:12px;}
{margin:12px;}
Thì cả 4 cạnh sẽ có độ dày là 12px. Chính vì thế bạn không thể bỏ
trống giá trị nào cả. Nếu bạn muốn một cạnh nào đó không hiển thị, bạn
phải khai báo nó với giá trị là 0. Tuy nhiên, khi giá trị đó là 0 bạn
không cần phải khai báo đơn vị.
view plaincopy to clipboardprint? - {border:0px 0px 2px 4px;}
{border:0px 0px 2px 4px;}
Nếu bạn khai báo giá trị bằng 0, bạn không bắt buộc phải thêm đơn vị
đo vào đằng sau. Nhưng để tránh nhầm lẫn và sau này có phải chỉnh sửa
sẽ tiết kiệm thời gian hơn.
|