Cách căn giữa trang Web sử dụng CSS

Những đoạn mã ngắn gọn dưới đây sẽ hướng dẫn bạn làm quen với việc sử dụng CSS để tạo ra các cách trình bày trang Web của bạn.. Đoạn mã B Dàn một trang căn giữa với CSS Hướng d

Trang 1

Cách căn giữa trang Web sử dụng CSS

Chủ nhật, 04 Tháng 4 2010 10:29 Web - Tài liệu Web

Xem kết quả: / 1

Bình thường Tuyệt vời B? phi?u

Hầu hết các màn hình LCD phổ biến trên thị trường ngày nay là màn ảnh rộng Tỷ lệ màn hình rộng này có thể gây ảnh hưởng tới các nhà thiết kế web và cách họ trình bày trang Web

Tuy nhiên, với một đoạn mã Cascading Style Sheet (CSS) ngắn gọn, bạn có thể điều chỉnh thiết

kế trang Web vào vị trí trung tâm trên bất kỳ màn hình nào cho dù màn hình đó theo tỷ lệ nằm ngang hay thẳng đứng

Nếu bạn bước vào cửa hàng để chọn mua màn hình máy tính thì hãy chú ý rằng tỷ lệ màn hình đang có xu hướng chuyển sang quy mô tỷ lệ co giãn tương tự các rạp chiếu phim (hình chữ nhật) hơn là tỷ lệ 4: 3 của vô tuyến (hình vuông), tỷ lệ màn hình càng to thì độ rộng của nó càng lớn

Màn hình này rất thích hợp để xem phim, chơi trò chơi hay chạy các chương trình bảng màu nặng như Photoshop, nhưng còn vấn đề truy cập mạng thì sao? Các dòng văn bản và chữ đoạn chữ dài gây khó chịu và mỏi mắt người dùng, đó là lý do mà tại sao rất nhiều trang web sử dụng hình thức căn giữa trang Điều này cho phép thiết lập cố định chiều rộng cho nội dung trang và hiển thị nó theo kiểu cách động phù hợp với chiều rộng cửa sổ trình duyệt người dùng

Tất nhiên là bạn có thể tạo ra một bảng có chiều rộng cố định và đặt nó vào trung tâm trên trang web, nhưng các nhà thiết kế và phát triển web ngày nay đang cố gắng bỏ bớt bảng và thay vào

Trang 2

đó là kiểm soát toàn bộ trang web bằng CSS Những đoạn mã ngắn gọn dưới đây sẽ hướng dẫn bạn làm quen với việc sử dụng CSS để tạo ra các cách trình bày trang Web của bạn

Mở trình soạn thảo HTML và tạo một trang mới Nhập đoạn mã bên dưới (Đoạn mã A) để bắt đầu

Đoạn mã A

<html>

<head>

<title>Dàn một trang căn giữa với CSS</title>

</head>

<body>

</body>

</html>

Đặt một số đoạn text bên trong thẻ Body của tài liệu HTML (Đoạn mã B), sau đó bạn có thể thấy ngay ảnh hưởng của đoạn mã CSS mà bạn vừa xây dựng

Đoạn mã B

<html>

<head>

<title> Dàn một trang căn giữa với CSS</title>

</head>

<body>

<h1>Hướng dẫn dàn trang căn giữa sử dụng CSS</h1>

<h2>Ngày 7 tháng 1 năm 2008</h2>

Bạn có thể tạo ra một bảng có chiều rộng cố định và đặt nó vào trung tâm trên trang web, nhưng các nhà thiết kế và phát triển web ngày nay đang cố gắng bỏ bớt bảng và thay vào đó là kiểm soát toàn bộ trang web bằng CSS Những đoạn mã ngắn gọn dưới đây sẽ hướng dẫn bạn làm quen với việc sử dụng CSS để tạo ra các cách trình bày trang Web của bạn

Trang 3

</body>

</html>

Lưu lại tài liệu HTML, sau đó xem thử tài liệu đó trên trình duyệt Thay đổi độ rộng của cửa sổ trình duyệt để thấy rõ khi mở rộng hay co trang web lại thì nó có phù hợp với kích thước của vùng hiển thị

Hãy bắt đầu bằng cách xây dựng thuần thục các đoạn mã CSS Tạo ra các mã CSS đơn giản ở phần đầu của tài liệu (Đoạn mã C) thay vì liên kết tới một trang bên ngoài Hãy đặt đoạn mã vào

đúng vị trí ngay sau thẻ đóng </TITLE>

Đoạn mã C

<html>

<head>

<style type="text/css">

<!

>

</style>

</head>

<body>

<h2>Ngày 7 tháng 1 năm 2008</h2>

</body>

Trang 4

Hầu hết các nhà thiết kế Web khi khai báo một lớp CSS sẽ được sử dụng như là phần tử căn giữa, đặt tên cho lớp là “wrapper” hoặc “container” Trong ví dụ này bạn sẽ sử dụng tên lớp là

“wrapper”, chúng ta có mã CSS như sau (Đoạn mã D):

Đoạn mã D

<html>

<head>

<!-

#wrapper

>

</style>

</head>

<body>

<h2>Ngày 7 tháng 1 năm 2008</h2>

</body>

</html>

Tiếp theo, bạn sẽ thiết lập độ rộng của “wrapper” là 720 pixels (Đoạn mã E), tỷ lệ này thích hợp với màn hình 800 x 600 Đương nhiên là bạn hoàn toàn có thể điều chỉnh chiều rộng dài hay ngắn tùy ý cho phù hợp với thiết kế của bạn

Trang 5

Đoạn mã E

<html>

<head>

<!-

#wrapper {

width: 720px;

>

</style>

</head>

<body>

<h2>Ngày 7 tháng 1 năm 2008</h2>

</body>

</html>

Bạn vừa thiết lập độ rộng cho nội dung nhưng làm cách nào để căn giữa nó? Hãy dùng thuộc tính căn chỉnh lề như trong Đoạn mã F với giá trị căn chỉnh tự động bằng 0, đặt tất cả nội dung vào trung tâm màn hình:

Đoạn mã F

Trang 6

<html>

<head>

<!-

#wrapper {

width: 720px;

margin: 0 auto;

}

>

</style>

</head>

<body>

<h2>Ngày 7 tháng 1 năm 2008</h2>

</body>

</html>

Chỉ một đoạn mã ngắn gọn mà tương thích với hầu hết các trình duyệt hiện đại Tuy nhiên đối với các phiên bản cũ hơn của IE và Netscape thì có nhiều phát sinh khi áp dụng CSS ví dụ như

nó sẽ căn giữa văn bản trong khi cái mà bạn thực sự muốn là văn bản sẽ được căn lề về bên trái nhưng được hiển thị ở giữa cửa sổ màn hình Bạn không phải lo lắng nhiều về vấn đề này, có một cách rất đơn giản để sửa lỗi do các trình duyệt đã quá cũ như sau:

Trang 7

Hãy thêm thuộc tính “text-align” tại thẻ <BODY> của tài liệu HTML như minh họa bên dưới (Đoạn

mã G) Bạn phải đặt đoạn mã này lên trước kiểu “wrapper” , hoặc nó sẽ không hoạt động phục thuộc vào sự sắp xếp tự nhiên của Cascading Style Sheets!

Đoạn mã G

<html>

<head>

<!

body {

text-align: center;

}

#wrapper {

width: 720px;

margin: 0 auto;

}

>

</style>

</head>

<body>

<h2>Ngày 7 tháng 1 năm 2008</h2>

Bạn có thể tạo ra một bảng có chiều rộng cố định và đặt nó vào trung tâm trên trang web, nhưng các nhà thiết kế và phát triển web ngày nay đang cố gắng bỏ bớt bảng và

Trang 8

thay vào đó là kiểm soát toàn bộ trang web bằng CSS Những đoạn mã ngắn gọn dưới đây sẽ hướng dẫn bạn làm quen với việc sử dụng CSS để tạo ra các cách trình bày trang Web của bạn

</body>

</html>

Sau đó thêm thuộc tính “text-align” ở phía dưới lớp “wrapper” và thiết lập giá trị “left” như trong Đoạn mã H

Đoạn mã H

<html>

<head>

<!-

body {

}

#wrapper {

width: 720px;

margin: 0 auto;

text-align: left;

}

>

</style>

</head>

Trang 9

<body>

<h2>Ngày 7 tháng 1 năm 2008</h2>

</body>

</html>

Thêm một số dòng mã cần thiết được đưa vào trước khi bạn có thể kiểm tra công việc “wrapper”

sẽ bị phá vỡ trên Netscape 6 nếu như cửa sổ trình duyệt ngắn hơn độ dài của “wrapper” Một thuộc tính (Đoạn mã I) trong thẻ body sẽ thực hiện điều này

Đoạn mã I

<html>

<head>

<!-

body {

min-width: 760px;

}

#wrapper {

width: 720px;

margin: 0 auto;

Trang 10

}

>

</style>

</head>

<body>

<h2>Ngày 7 tháng 1 năm 2008</h2>

</body>

</html>

Cuối cùng, áp dụng “wrapper” vào nội dung của tài liệu HTML bằng cách đặt thẻ <DIV> xung quanh tất cả đoạn văn bản như minh họa trong Đoạn mã J

Đoạn mã J

<html>

<head>

<!

body {

Trang 11

min-width: 760px;

}

#wrapper {

width: 720px;

margin: 0 auto;

}

>

</style>

</head>

<body>

<div id="wrapper">

<h2>Ngày 7 tháng 1 năm 2008</h2>

</div>

</body>

</html>

Hãy kiểm tra trang web trên nhiều trình duyệt khác nhau để nhìn thấy kết quả như mong muốn,

đó là văn bản được căn nằm về phía bên trái nhưng toàn bộ đoạn văn bản lại nằm chính giữa trình duyệt cho dù trình duyệt window lớn hay bé

Trang 12

Mặc dù không dử dụng một bảng nào trong ví dụ này nhưng bạn vẫn có thể đặt bất kì nội dung

mong muốn vào chính giữa thẻ <DIV> — các bảng bao gồm — và cấu trúc CSS sẽ giúp cho

trang web được đặt vào chính xác vị trí trung tâm ở giữa

Định dạng
Số trang	12
Dung lượng	109,5 KB