Kích cỡ trong CSS
Đến chương này, chúng ta đã biết cách tạo style cho border xung quanh mỗi phần tử, cho phần padding bên trong mỗi hộp và căn lề xung quanh chúng, …. Tiếp theo chúng ta cùng tìm hiểu cách thay đổi kích cỡ của các hộp trong CSS. Để thay đổi kích cỡ, bạn có thể sử dụng các thuộc ...
Đến chương này, chúng ta đã biết cách tạo style cho border xung quanh mỗi phần tử, cho phần padding bên trong mỗi hộp và căn lề xung quanh chúng, …. Tiếp theo chúng ta cùng tìm hiểu cách thay đổi kích cỡ của các hộp trong CSS.
Để thay đổi kích cỡ, bạn có thể sử dụng các thuộc tính trong CSS sau:
Thuộc tính height xác định chiều cao của hộp.
Thuộc tính awidth xác định độ rộng của hộp.
Thuộc tính line-height xác định chiều cao của một dòng văn bản.
Thuộc tính max-height thiết lập chiều cao tối đa của một hộp.
Thuộc tính min-height thiết lập chiều cao tối thiểu của một hộp.
Thuộc tính max-awidth thiết lập độ rộng tối thiểu của một hộp.
Thuộc tính min-awidth thiết lập độ rộng tối thiểu của một hộp.
Các thuộc tính height và awidth trong CSS
Hai thuộc tính height và awidth giúp bạn xác định chiều cao và độ rộng cho các hộp. Các thuộc tính này có thể nhận các giá trị dạng chiều dài (đơn vị px, pt, cm, …), dạng phần trăm, hoặc từ khóa auto.
Ví dụ sau minh họa cách thiết lập chiều cao và độ rộng của một hộp bởi sử dụng thuộc tính height và awidth trong CSS.
<html>
<head>
</head>
<body>
<p style="awidth:400px; border:1px solid red; padding:5px; margin:10px;">
Doan van nay co do rong la 400 pixel va chieu cao la 100 pixel
</p>
</body>
</html>
Kết quả là:
Thuộc tính line-height trong CSS
Thuộc tính line-height cho phép bạn tăng phần không gian giữa các dòng văn bản. Thuộc tính này có thể nhận giá trị dạng chiều dài (đơn vị px, pt, cm, …), dạng phần trăm.
Ví dụ sau minh họa cách sử dụng thuộc tính line-height trong CSS.
<html>
<head>
</head>
<body>
<p style="awidth:400px; border:1px solid red; padding:5px; margin:10px; line-height:30px;">
Doan van co do rong la 400 px va chieu cao la 100 px. Trong do, line height la 30 px.
Doan van co do rong la 400 px va chieu cao la 100 px. Trong do, line height la 30 px.
(ban tham khao thuoc tinh line-height trong chuong Tong hop thuoc tinh trong CSS)
</p>
</body>
</html>
Kết quả là:
Thuộc tính max-height trong CSS
Để xác định chiều cao tối đa cho một hộp, bạn có thể sử dụng thuộc tính max-height trong CSS. Thuộc tính này có thể nhận giá trị dạng chiều dài (đơn vị px, pt, cm, …), dạng phần trăm.
Ghi chú: IE 6 và Netscape không hỗ trợ thuộc tính này.
Ví dụ sau minh họa cách thiết lập chiều cao tối đa cho một hộp bởi sử dụng thuộc tính max-height trong CSS.
<html>
<head>
</head>
<body>
<p style="awidth:400px; max-height:10px; border:1px solid red; padding:5px; margin:10px;">
Doan van co do rong la 400 px va chieu cao la 10 px.
Doan van co do rong la 400 px va chieu cao la 10 px.
Doan van co do rong la 400 px va chieu cao la 10 px.
Doan van co do rong la 400 px va chieu cao la 10 px.
</p>
<br>
<br>
<br>
<img alt="logo" src="../css/images/logo.png" awidth="195" height="84" />
</body>
</html>
Kết quả là:
Thuộc tính min-height trong CSS
Để xác định chiều cao tối thiểu cho một hộp, bạn có thể sử dụng thuộc tính min-height trong CSS. Thuộc tính này có thể nhận giá trị dạng chiều dài (đơn vị px, pt, cm, …), dạng phần trăm.
Ghi chú IE 6 và Netscape không hỗ trợ thuộc tính này.
Ví dụ sau minh họa cách thiết lập chiều cao tối thiểu cho một hộp bởi sử dụng thuộc tính min-height trong CSS.
<html>
<head>
</head>
<body>
<p style="awidth:400px; min-height:200px; border:1px solid red; padding:5px; margin:10px;">
Doan van co do rong la 400 px va chieu cao toi thieu (min height) la 200 px.
Doan van co do rong la 400 px va chieu cao toi thieu (min height) la 200 px.
Doan van co do rong la 400 px va chieu cao toi thieu (min height) la 200 px.
Doan van co do rong la 400 px va chieu cao toi thieu (min height) la 200 px.
</p>
<img alt="logo" src="../css/images/logo.png" awidth="95" height="84" />
</body>
</html>
Kết quả là:
Thuộc tính max-awidth trong CSS
Để xác định độ rộng tối đa cho một hộp, bạn có thể sử dụng thuộc tính max-awidth trong CSS. Thuộc tính này có thể nhận giá trị dạng chiều dài (đơn vị px, pt, cm, …), dạng phần trăm.
Ghi chú: IE 6 và Netscape không hỗ trợ thuộc tính này.
Ví dụ sau minh họa cách thiết lập độ rộng tối đa cho một hộp bởi sử dụng thuộc tính max-awidth trong CSS.
<html>
<head>
</head>
<body>
<p style="max-awidth:100px; height:200px; border:1px solid red; padding:5px; margin:10px;">
Doan van co chieu cao la 200 px va do rong toi da (max awidth) la 100px.
Doan van co chieu cao la 200 px va do rong toi da (max awidth) la 100px.
</p>
<img alt="logo" src="../css/images/logo.png" awidth="95" height="84" />
</body>
</html>
Kết quả là:
Thuộc tính min-awidth trong CSS
Để xác định độ rộng tối thiểu cho một hộp, bạn có thể sử dụng thuộc tính min-awidth trong CSS. Thuộc tính này có thể nhận giá trị dạng chiều dài (đơn vị px, pt, cm, …), dạng phần trăm.
Ghi chú: IE 6 và Netscape không hỗ trợ thuộc tính này.
Ví dụ sau minh họa cách thiết lập độ rộng tối thiểu cho một hộp bởi sử dụng thuộc tính min-awidth trong CSS.
<html>
<head>
</head>
<body>
<p style="min-awidth:400px; border:1px solid red; padding:5px; margin:10px;">
Doan van co chieu cao la 100 px va do rong toi thieu (min awidth) la 400px.
Doan van co chieu cao la 100 px va do rong toi thieu (min awidth) la 400px.
<img alt="logo" src="../css/images/css.gif" awidth="95" height="84" />
</body>
</html>
Kết quả là:
Loạt bài hướng dẫn Học CSS cơ bản và nâng cao của chúng tôi dựa trên nguồn tài liệu của: và
Follow fanpage của team hoặc facebook cá nhân Nguyễn Thanh Tuyền để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.
Bài học CSS phổ biến khác tại vietjack.com:
