Tài liệu CSS Nâng cao (Kỹ thuật hack, dàn layout) – Lập trình web
Tài liệu CSS Nâng cao (Kỹ thuật hack, dàn layout) – Lập trình web :
Sách này khá phổ biến trên mạng, có thể nhiều bạn đã có rồi. Nay mình up lên để cho bạn nào chưa có và muốn tìm hiểu nhìu hơn về css.
Tên sách: CSS.Mastery.Advanced.Web.Standards.Solutions.Feb.2 006
Tác giả: Andy Budd
Ngôn ngữ: Tiếng Anh
Định dạng file: *.pdf
Kiến thức tiên quyết: html, css cơ bản
Dung lượng: 9.85 MB
Số trang: 244 trang
Giới thiệu nội dung:
Chương 1: Các bạn sẽ được học về:
- Cách viết mà css tốt
- Những lỗi phổ biến nhất thường gặp khi viết mã
- Những loại tài liệu, Doctype là gì?
- Các cách đặc mã css
Chương 2: Giới thiệu về Mô hình hộp trong css
- Mô hình hộp hiển thị như thế nào trong IE và FF, một số trình duyệt hiện đại khác –> Các sửa lỗi này???
- Giới thiệu một số thuộc tính để canh vị trí Hộp,…
Chương 3: Cách làm ảnh nền, tạo góc bo tròn cho Mô hình hộp, tạo hiệu ứng bóng đổ,…
Chương 4: Cách tạo danh sách menu, giới thiệu các thuộc tính đặc biệt như:
- a:link : kiểu của liên kết
- a:hover: kiểu của liên kết khi rê chuột đến
- a:visited: kiểu của lk đã viếng thăm (đã kich)
- a:active: kiểu của lk khi kick vào liên kết
Chương 5: Tương tự như chương 4
Chương 6: Không hiểu sao không có chương 6 mà qua chương 7 lun 
Chương 7: Kỹ thuật dàn trang bằng thẻ div (nghĩa là thay thế hoàn toàn table bằng div)
Bạn sẽ được giới thệu kỹ thuật dàn trang theo 2 cách:
- cách 1: sử dụng kich thước cố định px
- cách 2: sử dụng kich thước % theo phần tử
—> Chương này rất quan trọng: Giúp cho bạn dàn trang hoàn toàn bằng css mà ko phụ thuộc nhiều vào các thẻ html
Chương 8: Kỹ thuật hack và Filters
- Hack ở đây có nghĩa là sẽ giúp bạn sửa lỗi hiển thị css trên mỗi trình duyệt khác nhau: Mõi trình duyệt web sẽ hiển thị css một các khác nhau.
Ví dụ: Mình có 1 Mô hình hộp như sau
#box
{
width:100px;
border:1px solid black;
}
Kết quả hiển thị sẽ là:
- IE 5.x: hiển thị Hộp với tổng chiều rộng (tính luôn 1px bên trái và 1px bên phải của border) là 100px.
- FF, trình duyệt hiện đại khác:hiển thị Hộp với tổng chiều rộng (tính luôn 1px bên trái và 1px bên phải của border) là 102px 
Chương này sẽ giúp bạn sửa lỗi đó — Cực kỳ quan trong lun 
Chương 9: Một số lỗi hiển thị bất thường nhất trong css mà bạn ko thể nào hiểu nổi sẽ được giải quyết trong chương này
Ví dụ: Bạn có 1 đoạn code như sau:
<div style=”float:left; width:100px”>
<p style=”width:50xp; float:left; margin-left:10px”>nội dung ở đây</p>
</div>
“Nội dung ở đây” sẽ canh lề trái là 10px.
Kết quả hiển thị:
- IE 5.x: “Nội dung ở đây” sẽ canh lề trái là 20px (Gấp 2)
- IE 6, FF: Canh lề trái là 10px (Bình thường)
—> Làm sao giải quyết???? —> Có ngay trong chương này 
2 phần cuối case study 1,2 là bài tập ứng dụng cụ thể: có thể không xem phần này
Qua quá trình đọc và test thử (chương 
mình đã rút ra một số cách hack thường được sử dụng nhất, còn những cách khác thì được sử dụng ít hơn và chỉ áp dụng cho những website phức tạp. Sau đây là 5 cách:
1. Hack bộ chọn (selector) con:
html>body {
background-image: url(bg.png);
}
- IE 5.x sẽ bỏ qua đoạn mã trên
- Các trình duyệt còn lại hỗ trợ: IE 6,7; FF; Opera;…
2. Hack HTML sao:
* html {
font-size: small;
}
- Đoạn mã trên chỉ hỗ trợ cho IE 6 và thấp hơn
- Các Browse còn lại sẽ bỏ qua
3. Hack trong comment: Thêm dấu vào comment trước */
/* Hiding from IE5/Mac */
#nav a {
width: 5em;
}
/* End Hack */
- IE 5 của HDH Mac sẽ bỏ qua đoạn mã trên
- Các trình duyệt còn lại hỗ trợ
4. Hack trong thuộc tính:
#content {
width: 100px
}
- IE 5.x sẽ bỏ qua đoạn mã trên
- Browse còn lại hỗ trợ
5. Hack !Important
#nav {
position: fixed !important;
position: static;
}
- IE 4-6/win sẽ bỏ qua đoạn mã thứ nhất và thực thi đoạn mã 2
- Các trình duyệt còn lại sẽ chạy cả 2 đoạn mã trên
Cám ơn bạn đã theo dõi bài viết: "Tài liệu CSS Nâng cao (Kỹ thuật hack, dàn layout) – Lập trình web"
// Từ khóa : downloadTìm kiếm bài viết khác trong: SiteMaps
Click vào Quảng Cáo hỗ trợ hoạt động của MjnhKata.Info:
