Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Kids
Webdesign

Thiết kế web cho Trẻ em: Bố cục CSS

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: CSS
Web Design for Kids: Images

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Chào mừng đến với bài học thứ sáu trong loạt bài Thiết kế Web cho Trẻ em của chúng tôi, Bố cục CSS!

Đây là nơi chúng ta đặt tất cả các phần tử của chúng ta, chính xác ở nơi mà chúng ta muốn chúng xuất hiện ở trên màn hình. Chúng ta sẽ thêm vào cả hai tập tin HTML và CSS của chúng ta để làm điều đó.

Để nhắc cho mình nhớ, hãy xem trang web mà chúng ta đang xây dụng. Các tập tin cho khóa học này có thể được tải về tại đây và đừng quên hỏi bất kỳ câu hỏi nào mà bạn muốn trong phần ý kiến ở dưới cùng của trang này.

Trước khi chúng ta bắt đầu

Có một vài điều chúng ta cần phải biết trước khi nhảy ngay vào bố cục. Trong phần đầu tiên này, chúng ta sẽ tìm hiểu cách giữ cho mọi thứ được sắp xếp. Chúng ta sẽ bao quát một kỹ thuật định vị trí cơ bản và nói về những gì mà phần nào của các thuộc tính CSS được sử dụng cho bố cục.

Thứ tự CSS

Giữ một tài liệu CSS được gọn gàng là rất quan trọng. Việc tổ chức hợp lý sẽ giúp cho chúng ta dễ dàng tìm tất cả các phần bên trong tập tin của chúng ta, dễ dàng thay đổi và thêm vài thứ sau này vào trong nó. Nói chung, tốt nhất là sắp xếp các khai báo CSS theo thứ tự mà chúng xuất hiện trên trang.

Ví dụ chúng ta sẽ thêm phong cách trong bài học này vào phần main. Phong cách được thêm trên một phần tử chính như vậy nên được đặt trong tài liệu CSS của chúng ta trước bất kỳ các phần tử nào khác mà được lồng bên trong phần main.

Mô hình Chiếc hộp (Box Model)

Các phần tử HTML khá giống với các hộp hình chữ nhật. Mô hình Chiếc hộp CSS mô tả khoảng cách của các hộp này.

Mỗi hộp có bốn cạnh. Chúng ta có thể áp dụng một giá trị cho tất cả bốn mặt cùng một lúc trong CSS của chúng ta thông qua padding, border, và/hoặc margin. Tuy nhiên, nếu chúng ta muốn phong cách một cạnh của một phần tử chúng ta cũng có thể làm điều đó. Ví dụ:

Giả sử hộp màu hồng này đại diện cho văn bản. Chúng ta có thể thấy rằng padding (khoảng cách giữa nội dung và viền) đã được thêm vào chỉ bên trái và một đường viền dày màu xanh bao quanh tất cả bốn mặt của nội dung.

Flexbox

CSS cung cấp cho chúng ta một tập hợp các thuộc tính được tạo ra một cách đặc biệt để giúp chúng ta thiết lập bố cục trang web của chúng ta. Vì vậy trong khi mô hình chiếc hộp giúp làm rõ khoảng cách xung quanh các phần tử HTML, thì flexbox sẽ cho phép chúng ta di chuyển các phần tử này vào vị trí.

Khi chúng ta sử dụng flexbox trên một phần tử kho chứa thì phần tử này trở thành một kho chứa flex và tất cả các phần tử bên trong nó trở thành các phần tử flex.

Khi chúng ta áp dụng flexbox vào một kho chứa nó sẽ tự động bố trí các phần tử dọc theo một đường thẳng (nằm ngang) và sau đó chúng ta có thể làm quen chi tiết hơn với các thuộc tính flexbox khác.

Chúng ta không cần sử dụng flexbox quá nhiều cho trang web của chúng ta, nhưng quan trọng là xem flexbox như là cách hiện đại nhất, cách phù hợp để đặt những mẫu nội dung nhỏ của nội dung vào trang web.

Header

h1 và hình ảnh thị trấn bên trong header được canh giữa trên trang. Có nhiều cách khác nhau để canh giữa với CSS. nhưng bây giờ chúng ta sẽ sử dụng text-align: center; trong header.

Chúng ta sẽ trỏ tới tiêu đề bằng cách sử dụng tên lớp mà chúng ta đã thêm trước đó:

Đừng quên! Lưu các tài liệu và làm mới trình duyệt để xem các thay đổi mà chúng ta đã làm!

Các Section

Điều đầu tiên chúng ta sẽ muốn làm cho các section của chúng ta là làm cho nội dung, hình ảnh và danh sách, bên trong mỗi section nằm cạnh nhau thay vì xếp chồng lên nhau.

Để đạt điều này, chúng ta sẽ sử dụng flexbox. Flexbox được áp dụng cho các phần tử trong một phần tử kho chứa bằng cách sử dụng display: flex; trên container:

Để mang điều này trở lại những gì mà chúng ta đã nói trước đây, thì hình ảnh và thẻ div chứa danh sách cửa hàng bây giờ là các phần tử flex, bởi vì chúng ở bên trong kho chứa flex này.

Có nhiều tùy chọn để xác định chính xác nơi một phần tử nên được đặt, nhưng hành vi mặc định của flexbox ở đây hoạt động hoàn hảo cho chúng ta - và danh sách cửa hàng của chúng ta bây giờ nằm về bên phải của tấm hình cửa hàng.

Một lưu ý về "Vendor Prefixes" (Tiền tố cho các trình duyệt)

Vì Flexbox là khá mới, không phải tất cả các trình duyệt đều đã có một cơ hội để thêm các thuộc tính của nó. Để khắc phục điều này, chúng ta có thể thêm một vendor prefix (tiền tố cho trình duyệt) vào các thuộc tính flexbox, thêm sự hỗ trợ này ở thời điểm hiện tại. Mặc dù chúng ta chỉ tập trung vào các phiên bản gần đây nhất của các trình duyệt hiện đại cho dự án này, chúng ta vẫn phải bao gồm một tiền tố - webkit- cho flexbox để đảm bảo rằng nó hoạt động trong "Safari".

Hình ảnh & danh sách

Chúng ta có thể sử dụng một ít khoảng cách giữa các hình ảnh và các phần tử có chứa văn bản, vì vậy trong HTML của chúng ta hãy thêm một lớp store-details vào thẻ div có chứa văn bản.

Sau khi chúng ta lưu cái này chúng ta có thể vào CSS của chúng ta và thêm khoảng cách này, nhưng chỉ vào bên trái của div:

Khoảng cách mặc định của Danh sách

Có một số khoảng cách ở bên trái của danh sách không thứ tự của chúng ta. Điều này là bởi vì có một số phong cách mặc định đi kèm với việc sử dụng một danh sách HTML. Đôi khi phong cách mặc định này là OK, và đôi khi nó có thể không tạo ra hiệu ứng mà chúng ta dự định.

Chúng ta có thể loại bỏ khoảng cách mặc định của danh sách này bằng cách sử dụng padding: 0; trên danh sách không thứ tự, nhưng mà sẽ gây ra cho các biểu tượng đầu dòng lệch xa về bên trái so với phần đầu của danh sách.

Chúng ta muốn một ít padding ở đây, nhưng không nhiều như được cung cấp bởi phong cách mặc định của danh sách. Thiết lập padding-left là 15px trên danh sách sẽ sắp xếp biểu tượng đầu dòng với phần đầu khá đẹp, vì thế chúng ta sẽ thêm điều này vào những thứ mà chúng ta đã thêm vào danh sách trong bài học trước:

Khoảng cách giữa các Phần tử của Danh sách

Chúng ta vẫn còn có vấn đề mà chúng ta đã đề cập trong bài học trước đó với các phần tử của danh sách quá gần nhau. Để giải quyết điều này chúng ta hãy thêm một lớp store-name vào tất cả các phần tử của danh sách, <li>, trong HTML của chúng ta. Sau đó, chúng ta sẽ thêm một margin nhỏ ở dưới cùng của các phần tử này.

Khoảng cách lề và Canh giữa

Khoảng cách cần phải được thêm vào các section cũng như làm cho chúng canh giữa trong trang. Chúng ta sẽ làm điều này thông qua các thuộc tính marginwidth.

Một lần nữa, chúng ta sẽ thêm vào phong cách chúng tôi đã viết:

Giá trị 50px bên trong khoảng cách lề margin ở đây đang áp dụng khoảng cách đó ở trên cùng của mỗi section của cửa hàng. Theo sau điều này là auto nói cho trình duyệt biết chiều rộng của phần tử (chúng ta thiết lập 450px) và canh giữa nó bên trong cửa sổ trình duyệt một cách tự động.

Footer (Phần chân trang web)

Đối với footer chúng ta sẽ canh giữa văn bản và thêm một lượng nhỏ padding để đảm bảo văn bản này không quá gần các cạnh của footer.

Khoảng cách lề Body

Chúng ta đã nói chuyện về phong cách mặc định một chút khi chúng ta đã sắp đặt danh sách của chúng ta vào vị trí. Phần tử body đi kèm với các phong cách mặc định của chính nó, một trong số đó là một margin bao quanh toàn bộ trang. Mặc dù đôi khi điều này không là vấn đề, nhưng chúng ta có thể thấy rằng nó đang ngăn background-color của footer khỏi việc giãn ra toàn bộ hai cạnh của cửa sổ trình duyệt.

Giải pháp ở đây là quay trở lại phần body trong tài liệu CSS của chúng ta và thêm những thứ sau đây:

Kết luận

Trong khoá học này chúng ta đã sắp xếp tất cả các phần tử vào vị trí bằng các kỹ thuật bố cụ CSS. Mặc dù thường có nhiều cách khác nhau để đạt được một bố cục cụ thể, nhưng làm quen với mô hình chiếc hộp CSS và flexbox cung cấp một hiểu biết vững chắc đối với các cách khác nhau.

Từ đó trang web của chúng ta được hoàn tất (xin chúc mừng!) chúng ta sẽ nói tất cả về thiết kế, typography (kỹ thuật trình bày), và màu sắc trong các bài học tiếp theo. Điều này sẽ giúp bạn trở thành một nhà thiết kế web đa dạng và có hiểu biết.

Hẹn gặp bạn xung quanh thị trấn!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.