Tạo Bố Cục

Thiết Lập CSS cho Body

Chúng ta sẽ bắt đầu bằng việc thêm các luật CSS áp dụng cho phần tử body. Việc thêm CSS cho trang bắt đầu từ phần tử body hoặc html là một tập quán phổ biến (common practice) vì luật CSS không những được áp dụng cho cả các phần tử hiện tại và được kế thừa bởi các phần tử con của nó. Và tất nhiên nếu như trong các phần tử con, bạn không muốn áp dụng các luật CSS từ phần tử mẹ thì bạn hoàn toàn có thể override (viết đè) lại các luật CSS kế thừ từ phần tử mẹ này.

Ở phía trên cùng tập tin main.css bạn chèn thêm vào đoạn mã CSS sau đây:

/* general style & layout */
body {
    position: relative;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #333;
}

/* menu */
#main-menu ul {
    padding-left: 0;
    list-style-type: none;
}
...

Ở trên chúng ta quy định giá trị cho các thuộc tính position là relative. Việc quy định position (vị trí) cho các phần tử hiển thị theo kiểu relative khá phổ biến, do đó việc đặt luật CSS này ngay từ đầu cho phần tử body sẽ rất tốt vì các phần tử con cũng sẽ được hiển thị mặc định theo cách này. Ngoài ra các luật CSS cơ bản khác cũng được áp dụng cho phần tử body như phông, kích thước phông và màu sắc của văn bản.

Phần Tử Container

Phần tử container hay wrapper là một phần tử bao bọc các phần tử khác được thêm vào với mục đích chính để áp dụng các luật CSS trang trí cho các phần tử con bên trong. Chúng ta thường sử dụng thẻ <div> cho phần tử container và về bản chất thì các phần tử container này thường sẽ không thêm vào bất cứ nội dung hay thay đổi cấu trúc HTML của trang.

Bạn có thể hình dung phần tử body là một dạng của container. Tuy nhiên thông thường chúng ta sẽ cần nhiều container phụ khác để hỗ trợ việc trang trí cho trang web.

Bây giờ chúng ta sẽ tạo ra 3 container vào trang home.html. Mở lại tập tin này và trong thẻ mở của phần tử div#main-menu:

...
    <!-- menu -->
    <div id="main-menu">
        ...

Bạn thêm vào class container cho thẻ này như sau:

...
    <!-- menu -->
    <div class="container" id="main-menu">
        ...

Tương tự bạn cũng thêm vào class container vào thẻ mở của phần tử div#main-content:

    <div class="container" id="main-content">

Và cuối cùng đối với phần tử div#footer:

    <div class="container" id="footer">

Bạn lặp lại bước trên để thêm các container vào mã HTML hai trang web còn lại là about.html và contact.html.

Quy Định Chiều Rộng

Ở bước này bạn sẽ thấy việc quy định chiều rộng cho các thành phần trên trang có thể được thực hiện dễ dàng và thuận tiên như thế nào nhờ sử dụng các container mới thêm vào vào ở mục trước.

Trong tập tin main.css bạn thêm vào trước luật CSS áp dụng cho phần tử body đoạn mã dưới đây:

...
.container {
    width: 780px;
}

/* menu */
...

Bây giờ nếu bạn mở lại trang home.html trên trình duyệt và ở bất cứ vị trí nào trên trang bạn nhấp chuột phải và trong cửa sổ popup nhỏ hiện ra bạn nhấp chọn Inspect (trên Chrome) hoặc Inspect Element (trên Firefox). Trình duyệt sẽ hiển thị tab Element (hoặc Inspector với Firefox) trong cửa sổ của công cụ dành cho nhà phát triển Developer Tools.

Ở tab này bạn có thể sử dụng phím mũi tên lên xuống để di chuyển giữa các thẻ HTML của phần tử hoặc click vào để mở rộng thẻ. Nếu bạn chọn các thẻ mở <div class="conntainer"> bạn sẽ thấy các phần tử tạo ra bởi thẻ này đều có kích thước bề ngang (hay chiều rộng) là 780px như hình phía dưới đây:

Ngoài ra nếu nhìn vào box model đại diện cho phần tử (các hình vuông lồng nhau nằm ở góc phải phía dưới màn hình, hoặc xem ảnh phía trên) bạn sẽ thấy kích thước hiển thị của phần tử container cũng là 780px.

Nếu sử dụng Firefox bạn sẽ cần click vào tab con Computed nằm ở phía góc phải trong tab Inspector để có thể quan sát được box model.

Canh Lề Cho Phần Tử Container

Phần việc tiếp theo sau khi quy định độ rộng cho container đó là chúng ta sẽ canh lề cho container để phần tử này được hiển thị ở giữa trang danh đều hai bên. Công việc này được thực hiện đơn giản nhờ áp dụng luật CSS sử dụng thuộc tính margin cho phần tử này như sau:

...
.container {
    width: 780px;
    margin: auto auto;
}

/* menu */
...

Nếu bây giờ tải lại trang home trên trình duyệt bạn sẽ thấy kết quả hiển thị sẽ là như sau:

Bạn thấy nội dung của các phần tử container giờ đã được canh với khoảng cách đều so với hai bên trên trình duyệt ngoại trừ hình ảnh hơi lố sang phải (chúng ta sẽ khắc phục điều này ở phần dưới đây). Việc canh lề giữa hai bên sử dụng margin: auto auto; chỉ hoạt động được khi hai điều kiện sau xảy ra:

Phần tử mẹ có thuộc tính postion: relative. Chúng ta đã thiết lập điều này cho phần tử mẹ body trước đó.
Phần tử hiện tại cần được quy định chiều rộng cụ thể. Chúng ta cũng đã thiết lập điều này cho phần tử div.container trước đó.

Cuối cùng bạn hãy tự kiểm tra lại hiển thị cho hai trang còn lại.

Độ Rộng Tối Đa Của Ảnh

Việc hình ảnh trên trang hiển thị lố sang phải là bởi vì kích thước ảnh vượt quá kích thước của container. Theo mặc định trình duyệt sẽ hiển thị ảnh dựa trên kích thước tự nhiên của nó. Do đó chúng ta sẽ khắc phục lỗi hiển thị này bằng việc thiết lập kích thước tối đa cho ảnh để nó không vượt quá phạm vi chiều rộng của container. Trong main.css bạn thêm đoạn mã CSS sau ngay sau luật CSS áp dụng cho container:

...
img {
    /*max-width: 100%;*/
}

/* menu */
...

Bây giờ bạn hãy tải lại trang home.html và hai trang còn lại trên trình duyệt để kiểm tra kết quả. Nếu làm đúng theo hướng dẫn bạn sẽ thấy ảnh lúc này được hiện thị giữa trang canh đều hai bên.