Kích Cỡ Trong CSS - Học CSS Online - VietTuts

Trang chủ » Height Là Gì Trong Css » Kích Cỡ Trong CSS - Học CSS Online - VietTuts

Có thể bạn quan tâm

CSS Tuts

CSS là gì? Cú pháp CSS Bộ chọn CSS Liên kết css với html Đơn vị đo trong CSS Mã màu trong CSS Comment trong CSS

CSS Các thuộc tính

CSS Background CSS Border Font trong CSS Định dạng văn bản (Text) trong CSS Image trong CSS Link trong CSS Bảng trong CSS Căn lề trong CSS List trong CSS Thuộc tính padding trong CSS Con trỏ trong CSS Thuộc tính outline trong CSS Kích cỡ trong CSS Scrollbar trong CSS Thuộc tính visibility trong CSS Căn chỉnh vị trí trong CSS Thuộc tính z-index trong CSS Pseudo Class trong CSS Pseudo Element trong CSS Các quy tắc trong CSS Kiểu Media trong CSS Layout trong CSS Validation trong CSS

CSS nâng cao

Giới thiệu CSS3 Bo tròn góc trong CSS Border Image trong CSS Thuộc tính outline trong CSS Scrollbar trong CSS

Bài trước chúng ta đã bàn luận về cách tạo style cho border bao quanh mỗi phần tử, padding bên trong mỗi vùng và căn lề xung quanh chúng. Bài này chúng ta cùng tìm hiểu cách thay đổi kích cỡ của các vùng 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 width 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-width thiết lập độ rộng tối thiểu của một hộp.

  • Thuộc tính min-width thiết lập độ rộng tối thiểu của một hộp.

Nội dung chính

  • Các thuộc tính height và width trong CSS
  • Thuộc tính line-height trong CSS
  • Thuộc tính max-height trong CSS
  • Thuộc tính min-height trong CSS
  • Thuộc tính max-width trong CSS
  • Thuộc tính min-width trong CSS

Các thuộc tính height và width trong CSS

Hai thuộc tính height và width 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à width trong CSS.

<html> <head> <meta charset="UTF-8"> </head> <body> <p style="width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;"> Đoạn văn có độ rộng là 400 pixel và chiều cao là 100 pixel </p> </body> </html>

Kết quả:

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> <meta charset="UTF-8"> </head> <body> <p style="width:400px; height:100px; border:1px solid red; padding:5px; margin:10px; line-height:30px;"> Đoạn văn có độ rộng là 400 px và chiều cao là 100 px. Trong đó, line height la 30 px. Đoạn văn có độ rộng là 400 px và chiều cao là 100 px. Trong đó, line height la 30 px. Đoạn văn có độ rộng là 400 px và chiều cao là 100 px. Trong đó, line height la 30 px. </p> </body> </html>

Kết quả:

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> <meta charset="UTF-8"> </head> <body> <p style="width:400px; max-height:10px; border:1px solid red; padding:5px; margin:10px;"> Đoạn văn có độ rộng là 400 px và chiều cao là 10 px. Đoạn văn có độ rộng là 400 px và chiều cao là 10 px. Đoạn văn có độ rộng là 400 px và chiều cao là 10 px. Đoạn văn có độ rộng là 400 px và chiều cao là 10 px. </p> <br> <br> <br> <p> Ví dụ max-height trong CSS </p> </body> </html>

Kết quả:

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> <meta charset="UTF-8"> </head> <body> <p style="width:400px; min-height:200px; border:1px solid red; padding:5px; margin:10px;"> Đoạn văn có độ rộng là 400 px và chiều cao tối thiểu (min height) là 200 px. Đoạn văn có độ rộng là 400 px và chiều cao tối thiểu (min height) là 200 px. Đoạn văn có độ rộng là 400 px và chiều cao tối thiểu (min height) là 200 px. Đoạn văn có độ rộng là 400 px và chiều cao tối thiểu (min height) là 200 px. </p> <p> Ví dụ min-height trong CSS </p> </body> </html>

Kết quả:

Thuộc tính max-width 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-width 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-width trong CSS.

<html> <head> <meta charset="UTF-8"> </head> <body> <p style="max-width:100px; height:200px; border:1px solid red; padding:5px; margin:10px;"> Đoạn văn có chiều cao là 200 px và độ rộng tối đa (max width) là 100px. Đoạn văn có chiều cao là 200 px và độ rộng tối đa (max width) là 100px. </p> <p> Ví dụ max-width trong CSS </p> </body> </html>

Kết quả:

Thuộc tính min-width 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-width 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-width trong CSS.

<html> <head> <meta charset="UTF-8"> </head> <body> <p style="min-width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;"> Đoạn văn có chiều cao là 100 px va độ rộng tối thiểu (min width) là 400px. Đoạn văn có chiều cao là 100 px va độ rộng tối thiểu (min width) là 400px. </p> <p> Ví dụ min-width trong CSS </p> </body> </html>

Kết quả:

Thuộc tính outline trong CSS Scrollbar trong CSS

Recent Updates

Border Image trong CSSBo tròn góc trong CSSGiới thiệu CSS3Layout trong CSSCác quy tắc trong CSSPseudo Element trong CSSPseudo Class trong CSSThuộc tính z-index trong CSSCăn chỉnh vị trí trong CSSThuộc tính visibility trong CSSScrollbar trong CSSKích cỡ trong CSSSắp Tết 2024 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2024?

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring Học Excel | Excel VBA Học Servlet | JSP | Struts2 Học C | C++ | C# Học Python Học SQL

Bài Tập Có Lời Giải

Bài tập Java Bài tập C Bài tập C++ Bài tập C# Bài tập Python Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java 25 câu hỏi phỏng vấn servlet 75 câu hỏi phỏng vấn jsp 52 câu hỏi phỏng vấn Hibernate 70 câu hỏi phỏng vấn Spring 57 câu hỏi phỏng vấn SQL

Từ khóa » Height Là Gì Trong Css