Cách điều chỉnh nội dung, phần đệm, đường viền và lề của một phần tử HTML bằng CSS
Hướng dẫn này là một phần của loạt bài về cách tạo và tùy chỉnh trang web này bằng CSS, một ngôn ngữ biểu định kiểu được sử dụng để kiểm soát việc trình bày các trang web. Bạn có thể theo dõi toàn bộ loạt bài này để tạo lại trang web trình diễn và làm quen với CSS hoặc sử dụng các phương pháp được mô tả ở đây cho các dự án trang web CSS khác.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ử
,
và
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
. 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 containersthay đổ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
để 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:styles.css.yellow-div { background-color:yellow; width: 500px; }Lưu file và tải nó trong trình duyệt của bạn.
chứabạ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ử
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 containersnếu phần tử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ử
. 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:styles.css.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:
styles.css.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:
styles.css.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:
styles.css.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
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:styles.css. . . .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ử
vào file của bạn và gán cho nó lớp blue-div :index.htmlLư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.
Tags:Các tin liên quan
Tổng quan về Trang web HTML và CSS Trình diễn của Chúng tôi
2020-10-12
Cách tạo kiểu cho HTML phần tử div với CSS
2020-10-12
Cách tạo bảng trong HTML
2020-10-12
Cách điều chỉnh nội dung, phần đệm, đường viền và lề của một phần tử HTML bằng CSS
2020-10-12
Cách sử dụng thuộc tính Rel cho thẻ neo trong HTML
2020-10-12
Cách thêm các thực thể HTML trong Thuộc tính nội dung CSS
2020-10-12
Tham chiếu cú pháp thẻ liên kết HTML cho tệp CSS bên ngoài
2020-10-12
Cách tạo nhận xét HTML
2020-10-12
Cách điều chỉnh nội dung, phần đệm, đường viền và lề của một phần tử HTML bằng CSS
2020-10-12
Cách điều chỉnh nội dung, phần đệm, đường viền và lề của một phần tử HTML bằng CSS
2020-10-12
Video liên quan
Chủ Đề