Xây dựng Website: Thủ thuật viết lệnh với CSS

Bài viết này sẽ giới thiệu với bạn đọc một số thủ thuật viết lệnh với CSS (Lưu ý: CSS – Cascading Style Sheet - tạm dịch: Mẫu định dạng phân tầng - là một phần của trang web giữ chức năng định nghĩa các định dạng quy định sự hiển thị của một trang web hoặc một phần của trang web trên trình duyệt. Microsoft Office lưu giữ các mẫu định dạng được sử dụng ở đầu mỗi trang web – Phan Long) 01. Các ví dụ mẫu Bởi bản chất khá trừu tượng của cấu trúc hiển thị CSS, bạn có thể sẽ cảm thấy khó khăn khi sử dụng nó so với kiểu thiết kế trang web theo định dạng bảng. Tuy nhiên, có khá nhiều nguồn trực tuyến tuyệt vời cho phép bạn có thể copy và thử nghiệm với các ví dụ mẫu CSS. Các website này gồm có: http://www.bluerobot.com/web/layouts, http://www.thenoodleincident.com và http://www.glish.com/css. 02. Lưu tâm tới các trình duyệt cũ Một trong những vấn đề đối với CSS là nhiều trình duyệt phiên bản cũ không hiểu được phần lớn cấu trúc của nó. Ví dụ điển hình nhất là Netscape Navigator 4. Để khắc phục, hãy sử dụng phương pháp kết xuất @import để nhập các mẫu định dạng vào trình duyệt, thủ thuật này hiệu quả hơn nhiều so với phương pháp liên kết (xem thêm http://www.alistapart.com/stories/journey/5.html để có thêm thông tin). Các trình duyệt thông dụng hiện nay có khả năng hiển thị tốt các cấu trúc CSS trong khi các trình duyệt cũ (cùng với các PDA và các thiết bị truy nhập web khác) có thể sẽ bỏ qua nó mà không làm mất đi nội dung của trang web. 03. Thủ thuật với mô hình hiển thị dạng hộp CSS được xây dựng trên cơ sở mô hình dạng hộp (box model) trong đó mỗi thành tố đều có các thông số về nội dung, đường viền, lề và khoảng cách từ văn bản tới đường viền. Các trình duyệt không tương thích (trong đó bao gồm cả phiên bản rất phổ thông Internet Explorer 5.5 cho Windows) đặt các đường viền và khoảng cách từ văn bản tới đường viền bên trong các khoảng rộng của mô hình dạng hộp đó. Do đó, nếu bạn có một thành phần nội dung có chiều rộng 300px với đường viền 10px và khoảng cách 25px, các trình duyệt tương thích sẽ chỉ cần CSS định dạng độ rộng là 300px trong khi các trình duyệt không tương thích sẽ xác định độ rộng là 370px (tức là 10px+25px+300px+25px+10px). Để hoà hợp với cả hai loại trình duyệt này, chúng ta sử dụng một thủ thuật với mô hình dạng hộp do Tantek Celik giới thiệu trên http://www.tantek.com/CSS/Examples/boxmodelhack.html. Đoạn mã này cũng có một ngoại lệ với trình duyệt tương thích Opera, do đó chúng tôi thêm phần dành cho Opera: #content { padding: 25px; border: 10px; /* width for non-compliant browsers */ width: 370px; /* this blocks non-compliant browsers from going further in this rule */ voice-family: "\"}\""; voice-family: inherit; /* correct width for compliant browsers */ width: 300px; } /* A separate be nice to Opera rule */ html>body #content {width: 300px;} 04. Điều khiển in Mặc dù bản chất điều khiển in của CSS - khả năng định nghĩa các họ font và kích cỡ font – không mấy bí mật, song nhiều người lại không tận dụng được các ưu điểm của nó khi căn chiều cao dòng (line-height) và khoảng cách giữa các ký tự. Bạn cũng có thể sử dụng CSS để kiểm soát dạng ký tự qua lệnh text-transform với các giá trị chữ hoa, chữ hoa đầu từ, chữ thường và không định dạng (capitalize, uppercase, lowercase và none). Ví dụ, khi thêm lệnh h1,h2 (text-transform: lowercase) vào mẫu định dạng sẽ làm cho toàn nội dung trong thẻ h1 và h2 được hiển thị dưới dạng chữ cái thường. 05. Chuyển đổi giữa các mẫu định dạng Hầu hết với các nhà thiết kế, kích cỡ font đều được xác định bằng điểm ảnh pixel bởi đó là những phần tử nhỏ nhât có thể hiển thị. Tuy nhiên, trình duyệt phổ biến nhất hiện nay, Windows Internet Explorer 6 không có khả năng phóng đại các văn bản (trong khi đó, đây lại là điều bình thường với nhiều trình duyệt khác, bao gồm cả Internet Explorer 5 cho Mac). Đó có thể là một khó khăn với những người khiếm thị, và bạn có thể khắc phục vấn đề bằng cách sử dụng các mẫu định dạng thay thế với các cỡ font khác nhau. Paul Snowden có một bài viết thú vị về vấn đề này tại http://www.alistapart.com/stories/alternate/. 06. Thêm đường viền Mọi người thường thêm đường viền quanh các hình ảnh, tuy nhiên nếu đường viền đơn giản thì công việc này trở nên lãng phí thời gian. Thay vào đó, hãy thêm đường viền vào tất cả các hình ảnh có trong trang web của bạn bằng lệnh img (border: 1px solid #000000;) hoặc lệnh img.borderOn (border: 1px solid #000000;) trong tệp CSS của bạn hoặc thẻ trong tệp HTML với những trường hợp riêng lẻ. Bạn có thể chỉnh sửa độ đậm của đường viền bằng việc thay đổi thông số trong CSS. 07. Đoạn định dạng kiểu tạp chí Hầu hết các trang web đều có khoảng trống giữa các đoạn để giúp người sử dụng dễ theo dõi, song bạn cũng có thể tạo ra các đoạn có định dạng giống như trong các tạp chí giấy. Hãy thêm đoạn lệnh sau đây vào tệp CSS: p (margin-top: 0; margin-bottom: 1em;) p+p (text-indent: 2em; margin-top: -1em;). Bạn có thể chỉnh sửa khoảng cách giữa các đoạn bằng việc thay đổi giá trị của text-indent. 08. Tuỳ biến với ảnh nền Bạn có thể đã quen với phương pháp sử dụng HTML để đưa các tệp đồ hoạ vào hình nền của trang web, bảng, v.v… nhưng bạn có thể làm nhiều hơn thế với CSS. Lấy ví dụ, bạn có thể thêm các đoạn lệnh sau: (background: #444 url(assets/page_background.gif) no-repeat fixed top left;) để đặt một tệp ảnh vào vị trí trên cùng bên trái của trang với thuộc tính cố định khi cuộn trang web và không được nhân lên kín trang. Để tìm hiểu danh sách các giá trị khác, bạn có thể truy nhập vào http://www.w3schools.com/css/css_background.asp.