Trước khi tiếp tục, ta khuyên bạn nên có một số kiến thức về HTML, ngôn ngữ đánh dấu tiêu chuẩn được sử dụng để hiển thị tài liệu trong trình duyệt web. Nếu bạn chưa quen với HTML, bạn có thể làm theo mười hướng dẫn đầu tiên của loạt bài Cách tạo trang web với HTML trước khi bắt đầu loạt bài này.
Trong hướng dẫn này, bạn sẽ tìm hiểu về Mô hình Hộp CSS , một mô hình được sử dụng để tham chiếu đến nội dung, phần đệm, đường viền và lề của một phần tử HTML. Việc hiểu Mô hình hộp CSS rất hữu ích để điều chỉnh kích thước của bất kỳ phần nào trong số các phần này của phần tử HTML và hiểu cách xác định kích thước và vị trí của các phần tử. Hướng dẫn này sẽ bắt đầu bằng cách giải thích từng hộp của Mô hình hộp CSS và sau đó chuyển sang bài tập thực hành về cách điều chỉnh giá trị của chúng bằng cách sử dụng luật kiểu CSS.
Yêu cầu
Để làm theo hướng dẫn này, hãy đảm bảo bạn đã cài đặt các file và folder cần thiết như được hướng dẫn trong hướng dẫn trước trong loạt bài Cách cài đặt Dự án thực hành CSS và HTML cho bạn .
Mô hình hộp CSS
Phần tử HTML có thể được hiểu là một chuỗi bốn hộp chồng lên nhau:
- Hộp nội dung là hộp trong cùng nơi đặt nội dung văn bản hoặc hình ảnh. Theo mặc định, kích thước của nó thường được đặt bằng kích thước của nội dung mà nó chứa. Nó cũng là hộp duy nhất trong mô hình hộp có giá trị thường không bằng 0 theo mặc định (nếu nó chứa nội dung); ngược lại, phần đệm, đường viền và lề của một phần tử được mặc định bằng 0 đối với nhiều phần tử HTML (chẳng hạn như phần tử
<p>,<h1>và<img>) trừ khi bạn chỉ định khác. Khi bạn đặt giá trị cho chiều rộng và chiều cao của một phần tử, bạn thường thay đổi chiều rộng và chiều cao của hộp nội dung. - Hộp đệm là hộp chồng chéo thứ hai, bao gồm một không gian trong suốt bao quanh hộp nội dung. Theo mặc định, phần đệm của nhiều phần tử HTML được đặt thành 0. Việc tăng kích thước phần đệm của phần tử sẽ làm tăng khoảng cách giữa hộp nội dung và hộp viền.
- Hộp viền là hộp chồng chéo thứ ba bao quanh hộp đệm. Theo mặc định, giá trị đường viền của hầu hết các phần tử HTML được đặt thành 0. Tăng kích thước đường viền của phần tử sẽ tăng khoảng cách giữa hộp đệm và hộp lề. Lưu ý màu sắc, độ dày và kiểu của đường viền có thể được điều chỉnh.
- Hộp lề là hộp chồng chéo thứ tư và cuối cùng bao gồm không gian trong suốt bên ngoài đường viền của một phần tử. Theo mặc định, giá trị lề của một số phần tử HTML được đặt bằng 0, mặc dù một số phần tử đã chỉ định giá trị lề làm mặc định của chúng, chẳng hạn như thẻ tiêu đề
<h1>đến<h6>. Lề của hai yếu tố khác nhau đôi khi cũng được phép chồng lên nhau trong một hành vi được gọi là thu gọn lề . Khi điều này xảy ra, kích thước lề được mặc định là kích thước của lề của phần tử nào lớn nhất.
Đến đây bạn đã quen thuộc với các thành phần của CSS Box Model, bạn có thể thực hành tạo kiểu cho các hộp khác nhau này để khám phá cách chúng hoạt động cùng nhau để bố trí và tạo kiểu cho một phần tử HTML. Bạn sẽ bắt đầu bằng cách tạo một phần tử <div> có chứa nội dung văn bản và sau đó điều chỉnh giá trị của từng hộp này để giúp chứng minh vị trí của chúng trong một phần tử.
Điều chỉnh kích thước nội dung của một phần tử HTML bằng CSS
Trước tiên, hãy đảm bảo bạn đã cài đặt các file và folder cần thiết như đã hướng dẫn trong phần hướng dẫn trước trong loạt bài Cách cài đặt dự án thực hành CSS và HTML cho bạn .
Xóa mọi thứ trong file styles.css của bạn (nếu file chứa nội dung từ các hướng dẫn trước) và thêm luật CSS sau vào file styles.css của bạn:
.yellow-div { background-color:yellow; } Lưu file styles.css . Bạn vừa tạo một lớp bằng cách sử dụng bộ chọn lớp yellow-div . Bất kỳ phần tử <div> nào bạn gán cho lớp này sẽ có màu nền vàng.
Tiếp theo, xóa tất cả nội dung trong index.html của bạn (ngoại trừ dòng mã đầu tiên: <link rel="stylesheet" href="css/styles.css"> ) và thêm đoạn mã sau:
<div class="yellow-div"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div> Lưu file và tải nó trong trình duyệt. Bạn sẽ nhận được các kết quả sau:
Trang web sẽ hiển thị một hộp màu vàng chứa nội dung văn bản bạn đã thêm vào file HTML. Hiện tại, chỉ hộp trong cùng - hộp nội dung - có kích thước và giá trị; phần đệm, đường viền và lề đều được đặt thành 0. Cũng lưu ý chiều rộng và chiều cao của hộp màu vàng được tự động xác định bởi kích thước của nội dung văn bản bên trong containers <div> . Hãy thử thêm hoặc bớt nội dung văn bản để thử nghiệm xem kích thước của containers <div> thay đổi như thế nào cho phù hợp.
Lưu ý : Bạn có thể sử dụng công cụ Nhà phát triển Web của Firefox để xem mô hình hộp của phần tử HTML và các giá trị được đặt cho mỗi hộp. Điều hướng đến mục menu Công cụ ở thanh menu trên cùng và chọn “Công cụ phát triển / chuyển đổi web” từ menu thả xuống. Công cụ dành cho nhà phát triển sẽ xuất hiện ở cuối cửa sổ của bạn. Nhấp vào biểu tượng mũi tên ở ngoài cùng bên trái của bộ công cụ và sau đó nhấp vào phần tử bạn muốn kiểm tra. Mô hình hộp của phần tử đã chọn sẽ hiển thị ở phía dưới bên phải của ngăn cửa sổ Công cụ dành cho nhà phát triển. Bạn có thể cần phải mở rộng cửa sổ để xem nó.
Tiếp theo, hãy chỉ định chiều rộng của containers <div> để nghiên cứu cách mà điều đó thay đổi cách trình bày của phần tử trong trình duyệt. Thêm dòng được đánh dấu sau vào luật CSS trong file styles.css của bạn để đặt width thành 500 pixel:
.yellow-div { background-color:yellow; width: 500px; } Lưu file và tải nó trong trình duyệt của bạn. <div> chứa <div> bạn bây giờ phải rộng 500 pixel, với chiều cao tự động điều chỉnh để cho phép nội dung văn bản vừa với bên trong:
Lưu ý bạn cũng có thể chỉ định chiều cao của phần tử <div> thay thế và cho phép chiều rộng tự động điều chỉnh. Hoặc bạn có thể chỉ định cả chiều cao và chiều rộng, nhưng lưu ý nội dung sẽ tràn qua containers <div> nếu phần tử <div> quá nhỏ.
Cách điều chỉnh kích thước đệm của phần tử HTML bằng CSS
Tiếp theo, hãy tăng kích thước phần đệm để nghiên cứu cách nó thay đổi cách hiển thị của phần tử <div> . Thêm dòng được đánh dấu sau vào luật CSS trong file styles.css của bạn để đặt padding thành 25 pixel:
.yellow-div { background-color:yellow; width: 500px; padding:25px; } Lưu file styles.css và reload index.html trong trình duyệt của bạn. Kích thước của hộp màu vàng phải được mở rộng để cho phép khoảng trống 25 pixel giữa nội dung văn bản và chu vi của hộp:
Bạn có thể thay đổi kích thước của phần đệm bằng cách điều chỉnh kích thước giá trị của phần đệm. Bạn cũng có thể thay đổi kích thước phần đệm của các mặt cụ thể của phần tử bằng cách sử dụng các thuộc tính sau: padding-left , padding-right , padding-top , padding-bottom . Ví dụ: hãy thử thay thế khai báo padding:25px; trong file styles.css của bạn với đoạn mã được đánh dấu bên dưới:
.yellow-div { background-color:yellow; width: 500px; padding-left:25px; padding-right: 50px; padding-top: 100px; padding-bottom: 25px; } Lưu file styles.css và tải index.html trong trình duyệt của bạn. Bạn sẽ nhận được thông tin như thế này:
Biết cách chỉ định kích thước phần đệm cho các cạnh riêng lẻ của một phần tử có thể hữu ích khi sắp xếp nội dung trên trang web.
Điều chỉnh kích thước đường viền, màu sắc và kiểu của một phần tử HTML bằng CSS
Bây giờ ta hãy thực hành cài đặt các giá trị cho đường viền của một phần tử HTML. Thuộc tính biên giới cho phép bạn cài đặt kích thước, màu sắc, và phong cách (chẳng hạn như solid , dashed , dotted , inset , và outset ) của một phần tử HTML. Ba giá trị này được đặt bằng cách gán chúng cho thuộc tính border như sau:
selector { border: size style color; } Hãy thử thêm phần khai báo được đánh dấu sau đây để thêm đường viền đen liền mạch rộng năm pixel:
.yellow-div { background-color:yellow; width: 500px; padding: 25px; border: 5px solid black; } (Bạn có thể cần xóa các khai báo padding khác nhau của bạn từ phần hướng dẫn trước và thay thế chúng bằng khai báo padding:25px; để giữ cho bộ luật có thể quản lý được). Lưu file styles.css và reload index.html trong trình duyệt của bạn để kiểm tra các thay đổi. Hộp màu vàng của bạn bây giờ sẽ có đường viền với các giá trị bạn đặt trong luật CSS:
Bạn có thể thử thay đổi các giá trị để nghiên cứu cách chúng thay đổi cách hiển thị của phần tử trong trình duyệt. Giống như với padding, bạn cũng có thể chỉ định cạnh đường viền mà bạn muốn điều chỉnh bằng các thuộc tính border-right , border-left , border-top , border-bottom .
Điều chỉnh kích thước lề của một phần tử HTML bằng CSS
Tiếp theo, hãy thử điều chỉnh kích thước của lề của một phần tử bằng CSS. Trong bài tập này, ta sẽ cung cấp cho các lề một giá trị rất lớn để có thể dễ dàng xem kích thước lề được hiển thị như thế nào trong trình duyệt. Thêm khai báo được đánh dấu sau vào bộ luật của bạn trong file styles.css để đặt lề thành 100 pixel:
.yellow-div { background-color:yellow; width: 500px; padding: 25px; border: 5px solid black; margin:100px; } Lưu file styles.css và reload index.html trong trình duyệt của bạn để kiểm tra các thay đổi. Hộp màu vàng phải di chuyển 100 pixel xuống dưới và 100 pixel sang bên phải để cho phép 100 pixel không gian lề giữa đường viền của nó và các cạnh của khung nhìn:
Lưu ý : Bạn có thể nhận thấy rằng hộp màu vàng ban đầu có một khoảng trắng nhỏ lề giữa phía trên và bên trái của nó và các cạnh của khung nhìn. Lề này được tạo tự động bởi một số trình duyệt để tạo khoảng trống giữa các cạnh của khung nhìn và nội dung trang web. Bạn có thể loại bỏ lề này bằng cách đặt lề trên và lề trái bằng 0.
Giống như phần đệm và đường viền, kích thước của các cạnh cụ thể của lề có thể được đặt bằng cách sử dụng margin-left , margin-right , margin-top và margin-bottom .
Trước khi tiếp tục, hãy thêm một containers <div> vào trang để nghiên cứu cách lề ảnh hưởng đến vị trí của nội dung lân cận. Không xóa bất kỳ thứ gì, hãy thêm bộ luật CSS bổ sung vào file styles.css của bạn:
. . . .blue-div { height:100px; width:100px; background-color: blue; } Lưu file và quay lại index.html của bạn. Không xóa bất kỳ thứ gì, hãy thêm phần tử <div> vào file của bạn và gán cho nó lớp blue-div :
… <div class="blue-div"></div> Lưu index.html của bạn và tải nó trong trình duyệt. Bạn sẽ nhận được thông tin như thế này:
Bây giờ, trình duyệt sẽ hiển thị một hộp màu xanh lam, rộng 100 pixel và cao 1000 pixel. Hộp màu xanh lam này phải thấp hơn hộp màu vàng 100 pixel tính theo lề của hộp màu vàng. Nói chung, theo mặc định, các phần tử xung quanh sẽ bị đẩy ra khỏi một phần tử do biên của nó. Tuy nhiên, hãy lưu ý lề của các phần tử liền kề thường sẽ chồng lên nhau do sự sụp đổ của lề. Kích thước của lề chồng chéo được xác định bằng kích thước của lề lớn nhất giữa hai phần tử.
Kết luận
Trong hướng dẫn này, bạn đã học về mô hình hộp CSS và cách điều chỉnh kích thước của từng thuộc tính nội dung, phần đệm, đường viền và lề của nó. Hiểu hoạt động của các thuộc tính này và cách đặt giá trị cho chúng rất hữu ích khi tổ chức và tạo kiểu nội dung trên trang web. Những kiến thức này sẽ hữu ích khi xây dựng trang web trình diễn trong các bài hướng dẫn còn lại. Trong hướng dẫn tiếp theo, bạn sẽ cài đặt một index.html để làm trang chủ của trang web.
Các tin liên quan
