Phan Long Xây dựng Website: Thủ thuật viết lệnh với CSS Phan Long Xây dựng Website: Thủ thuật viết lệnh với CSS Chào mừng bạn đón đọc đầu sách từ dự án sách cho thiết bị di động Nguồn: http://vnthuquan.net/ Tạo ebook: Nguyễn Kim Vỹ MỤC LỤC Xây dựng Website: Thủ thuật viết lệnh với CSS Phan Long Xây dựng Website: Thủ thuật viết lệnh với CSS Bài viết giới thiệu với bạn đọc 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 - phần trang web giữ chức định nghĩa định dạng quy định hiển thị trang web phần trang web trình duyệt Microsoft Office lưu giữ mẫu định dạng sử dụng đầu trang web – Phan Long) 01 Các ví dụ mẫu Bởi chất trừu tượng cấu trúc hiển thị CSS, bạn cảm thấy khó khăn sử dụng so với kiểu thiết kế trang web theo định dạng bảng Tuy nhiên, có nhiều nguồn trực tuyến tuyệt vời cho phép bạn copy thử nghiệm với ví dụ mẫu CSS Các website gồm có: http://www.bluerobot.com/web/layouts, http://www.thenoodleincident.com http://www.glish.com/css 02 Lưu tâm tới trình duyệt cũ Một vấn đề CSS nhiều trình duyệt phiên cũ khơng hiểu phần lớn cấu trúc Ví dụ điển hình Netscape Navigator Để khắc phục, sử dụng phương pháp kết xuất @import để nhập mẫu định dạng vào trình duyệt, thủ thuật hiệu nhiều so Tạo Ebook: Nguyễn Kim Vỹ Nguồn truyện: vnthuquan.net Phan Long Xây dựng Website: Thủ thuật viết lệnh với CSS 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 có khả hiển thị tốt cấu trúc CSS trình duyệt cũ (cùng với PDA thiết bị truy nhập web khác) bỏ qua mà khơng làm nội dung trang web 03 Thủ thuật với mơ hình hiển thị dạng hộp CSS xây dựng sở mơ hình dạng hộp (box model) thành tố có thơng số nội dung, đường viền, lề khoảng cách từ văn tới đường viền Các trình duyệt khơng tương thích (trong bao gồm phiên phổ thông Internet Explorer 5.5 cho Windows) đặt đường viền khoảng cách từ văn tới đường viền bên khoảng rộng mơ hình dạng hộp Do đó, bạn có thành phần nội dung có chiều rộng 300px với đường viền 10px khoảng cách 25px, trình duyệt tương thích cần CSS định dạng độ rộng 300px trình duyệt khơng tương thích xác định độ rộng 370px (tức 10px+25px+300px+25px+10px) Để hoà hợp với hai loại trình duyệt này, sử dụng thủ thuật với mơ hình dạng hộp Tantek Celik giới thiệu http://www.tantek.com/CSS/Examples/boxmodelhack.html Đoạn mã có ngoại lệ với trình duyệt tương thích Opera, 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ù chất điều khiển in CSS - khả định nghĩa họ font kích cỡ font – khơng bí mật, song nhiều người lại không tận dụng ưu điểm chiều cao dòng (line-height) khoảng cách ký tự Bạn sử dụng CSS để kiểm soát dạng ký tự qua lệnh text-transform với giá trị chữ hoa, chữ hoa đầu từ, chữ thường không định dạng Tạo Ebook: Nguyễn Kim Vỹ Nguồn truyện: vnthuquan.net Phan Long Xây dựng Website: Thủ thuật viết lệnh với CSS (capitalize, uppercase, lowercase none) Ví dụ, thêm lệnh h1,h2 (text-transform: lowercase) vào mẫu định dạng làm cho toàn nội dung thẻ h1 h2 hiển thị dạng chữ thường 05 Chuyển đổi mẫu định dạng Hầu hết với nhà thiết kế, kích cỡ font xác định điểm ảnh pixel phần tử nhỏ nhât hiển thị Tuy nhiên, trình duyệt phổ biến nay, Windows Internet Explorer khơng có khả phóng đại văn (trong đó, lại điều bình thường với nhiều trình duyệt khác, bao gồm Internet Explorer cho Mac) Đó khó khăn với người khiếm thị, bạn khắc phục vấn đề cách sử dụng mẫu định dạng thay với cỡ font khác Paul Snowden có viết thú vị vấn đề http://www.alistapart.com/stories/alternate/ 06 Thêm đường viền Mọi người thường thêm đường viền quanh hình ảnh, nhiên đường viền đơn giản cơng việc trở nên lãng phí thời gian Thay vào đó, thêm đường viền vào tất hình ảnh có trang web bạn lệnh img (border: 1px solid #000000;) lệnh img.borderOn (border: 1px solid #000000;) tệp CSS bạn thẻ tệp HTML với trường hợp riêng lẻ Bạn chỉnh sửa độ đậm đường viền việc thay đổi thông số CSS 07 Đoạn định dạng kiểu tạp chí Hầu hết trang web có khoảng trống đoạn để giúp người sử dụng dễ theo dõi, song bạn tạo đoạn có định dạng giống tạp chí giấy Hãy thêm đoạn lệnh sau vào tệp CSS: p (margin-top: 0; margin-bottom: 1em;) p+p (text-indent: 2em; margin-top: -1em;) Bạn chỉnh sửa khoảng cách đoạn việc thay đổi giá trị text-indent 08 Tuỳ biến với ảnh Bạn quen với phương pháp sử dụng HTML để đưa tệp đồ hoạ vào hình trang web, bảng, v.v… bạn làm nhiều với CSS Lấy ví dụ, bạn thêm đoạn lệnh sau: (background: #444 url(assets/page_background.gif) no-repeat fixed top left;) để đặt tệp ảnh vào vị trí bên trái trang với thuộc tính cố định cuộn trang web khơng nhân lên kín trang Để tìm hiểu danh sách giá trị khác, bạn truy nhập vào http://www.w3schools.com/css/css_background.asp Lời cuối: Cám ơn bạn theo dõi hết truyện Nguồn: http://vnthuquan.net Phát hành: Nguyễn Kim Vỹ Nguồn: www.quantrimang.com.vn Tạo Ebook: Nguyễn Kim Vỹ Nguồn truyện: vnthuquan.net Xây dựng Website: Thủ thuật viết lệnh với CSS Phan Long Được bạn: mickey đưa lên vào ngày: tháng 12 năm 2004 Tạo Ebook: Nguyễn Kim Vỹ Nguồn truyện: vnthuquan.net ... qua lệnh text-transform với giá trị chữ hoa, chữ hoa đầu từ, chữ thường không định dạng Tạo Ebook: Nguyễn Kim Vỹ Nguồn truyện: vnthuquan.net Phan Long Xây dựng Website: Thủ thuật viết lệnh với CSS. . .Phan Long Xây dựng Website: Thủ thuật viết lệnh với CSS với phương pháp liên kết (xem thêm http://www.alistapart.com/stories/journey/5.html... www.quantrimang.com.vn Tạo Ebook: Nguyễn Kim Vỹ Nguồn truyện: vnthuquan.net Xây dựng Website: Thủ thuật viết lệnh với CSS Phan Long Được bạn: mickey đưa lên vào ngày: tháng 12 năm 2004 Tạo Ebook: Nguyễn