›
›

Giáo trình CSS Advanced - Chương 5 - Phạm Đào Minh Vũ

pdf 42 trang huongle 2800
Download
Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình CSS Advanced - Chương 5 - Phạm Đào Minh Vũ", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfgiao_trinh_css_advanced_chuong_5_pham_dao_minh_vu.pdf

Nội dung text: Giáo trình CSS Advanced - Chương 5 - Phạm Đào Minh Vũ

  1. CSS ADVANCED Giảng viên : Ths. PHẠM ĐÀO MINH VŨ Email : phamdaominhvu@yahoo.com
  2. Nội dung  CSS Display  CSS Position  CSS Float  CSS Align  CSS Navigation Bar  CSS Image Gallery  CSS Image Sprite  CSS Image Opacity 2
  3. Nội dung  CSS Display  CSS Position  CSS Float  CSS Align  CSS Navigation Bar  CSS Image Gallery  CSS Image Sprite  CSS Image Opacity 3
  4. CSS Display  Thuộc tính display qui định cách 1 element hiển thị.  Thuộc tính visibility qui định 1 element sẽ được hiển thị hay ẩn đi
  5. Ẩn element  Ta có thể ẩn 1 element bằng cách sử dụng : – display:none; – visibility :hidden;  visibility:hidden; ẩn element nhưng khoảng không tại vị trí element vẫn được giữ nguyên  display:none; element sẽ không chiếm giữ bất kỳ khoảng không nào. Trình duyệt sẽ hiển thị như không có element này.
  6. Demo ẩn element  DisplayHidden.html
  7. Demo ẩn element
  8. Block và inline element  Block element là 1 element khi hiển thị sẽ chiếm toàn bộ chiều ngang có thể và có xuống dòng phía trước và phía sau nó. – Ví dụ block element : , , ,  Inline element là 1 element khi hiển thị chỉ chiếm đủ chiều ngang để hiển thị nội dung, và không có xuống dòng phía trước hay phía sau – Ví dụ inline element : ,  Ta có thể thay đổi cách hiển thị mặc định của 1 element sử dụng display: – display:inline; – display:block;
  9. Demo đổi kiểu hiển thị  DisplayBlockInline.html
  10. Nội dung  CSS Display  CSS Position  CSS Float  CSS Align  CSS Navigation Bar  CSS Image Gallery  CSS Image Sprite  CSS Image Opacity 10
  11. CSS position  Các thuộc tính CSS position cho phép : – Qui định vị trí của các Element. Ta có thể đặt vị trí xuất hiện ở bất cứ nơi nào tùy thích. – Thậm chí đặt 1 element phía trên hay phía dưới 1 element khác. – Hoặc qui định cách hiển thị khi nội dung element lớn vượt quá kích thước của element – Thuộc tính Position có 4 kiểu : position-static, position-fixed, position-relative, position- absolute
  12. Position-static – position:static : là kiểu hiển thị mặc định của trình duyệt. Các element sẽ hiển thị theo kiểu bình thường. Element nào xuất hiện trước sẽ ở phía trên, rồi đến các element kế tiếp
  13. Fixed position  position:fixed; => element sẽ có vị trí tương đối so với cửa sổ trình duyệt. Nó thậm chí không bị di chuyển khi cửa sổ bị cuộn  Lúc này ta kết hợp với các thuộc tính left, right, top, bottom để qui định các element sẽ cách bên trái, phải, trên hoặc dưới của cửa sổ bao nhiêu pixel – Lưu ý : IE chỉ hỗ trợ fixed postioned khi HTML có thẻ !DOCTYPE – fixed element sẽ bị loại khỏi cách hiển thị thông thường. Trình duyệt sẽ hiển thị vị trí các element khác như không có fixed element
  14. Demo fixed element  PositionFixed.html
  15. Relative position  position:relative; => element sẽ có vị trí tương đối so với vị trí của nó lúc hiển thị bình thường (static)  Nội dung của relative position có thể di chuyển đè lên các element khác (tùy thuộc vào thuộc tính left, right, top, bottom) nhưng khoảng không dành cho element này vẫn được giữ lại.
  16. Demo relative element  PositionRelative.html
  17. Absolute position  position:absolute; => Element sẽ nhận giá trị tuyệt đối và có vị trí không đổi khi thu giảm hoặc tăng kích thướt trình duyệt  các thành phần được định vị không để lại bất cứ một khoảng trống nào trong tài liệu
  18. Demo absolute position  AbsolutePosition.html
  19. Overlap element  Nếu 2 element bị chồng lên nhau(overlap) khi hiển thị thì ta có thể sử dụng thuộc tính z-index để qui định element nào sẽ được nằm trên  Giá trị z-index là 1 số nguyên (có thể âm)  z-index càng cao thì sẽ nằm trên.
  20. Demo overlap  PositionOverlap.html
  21. Nội dung  CSS Display  CSS Position  CSS Float  CSS Align  CSS Navigation Bar  CSS Image Gallery  CSS Image Sprite  CSS Image Opacity 21
  22. CSS Float  Với CSS float, 1 element có thể trôi về bên trái hoặc bên phải để cho các element khác có thể nằm bao quanh nó
  23. CSS Float – Đặc điểm  CSS float rất hữu ích khi hiển thị ảnh hoặc làm layout  1 float element sẽ trôi về bên trái hoặc phải cho đến khi đụng biên hoặc 1 element khác  Các element phía sau 1 float element sẽ nằm bao quanh nó  Các element phía trước 1 float element sẽ không bị ảnh hưởng
  24. Demo float  Float.html
  25. Tắt float  Các element phía sau sẽ tự động bao quanh float element. Để tránh chuyện này xảy ra ta có thể thêm thuộc tính clear – clear:left; => không cho float bên trái – clear:right; => không cho float bên phải – clear:both; => không cho float cả 2 bên
  26. Demo float clear  FloatClear.html
  27. Nội dung  CSS Display  CSS Position  CSS Float  CSS Align  CSS Navigation Bar  CSS Image Gallery  CSS Image Sprite  CSS Image Opacity 27
  28. Align  Ta có thể align 1 block element sử dụng : – margin – position  Nếu muốn align text sử dụng thuộc tính text-align
  29. Align giữa  Ta có thể align 1 block element chính giữa bằng cách – Đặt width – Đặt margin-left và margin-right là auto  Ví dụ :
  30. Align trái, phải  Để align trái 1 element ta : – Đặt position: absolute; – Đặt left : 0px;  Để align phải 1 element ta : – Đặt position: absolute; – Đặt right: 0px;
  31. Demo align block left,right,center
  32. Nội dung  CSS Display  CSS Position  CSS Float  CSS Align  CSS Navigation Bar  CSS Image Gallery  CSS Image Sprite  CSS Image Opacity 32
  33. Demo cách tạo navigation bar ngang  Là dạng CSS thông thường dùng để tạo Menu cho trang web. div.horizontal a {  Code CSS display: block; div.horizontal { width: 86px; width: 100%; } height: 63px; } div.horizontal a:link, div.horizontal a:visited { font-weight: bold; div.horizontal ul { color: #FFFFFF; list-style-type: none; background-color: #98bf21; margin: 0; text-align: center; padding: 0; padding: 4px; } text-transform: uppercase; } div.horizontal li { float: left; div.horizontal a:hover, div.horizontal a:active { } background-color: #7A991A; }
  34. Demo cách tạo navigation bar dọc HTML file Demo: Navigation Bar
  35. Nội dung  CSS Display  CSS Position  CSS Float  CSS Align  CSS Navigation Bar  CSS Image Gallery  CSS Image Sprite  CSS Image Opacity 35
  36. Làm 1 gallery
  37. Nội dung  CSS Display  CSS Position  CSS Float  CSS Align  CSS Navigation Bar  CSS Image Gallery  CSS Image Sprite  CSS Image Opacity 37
  38. Image sprite  Khi 1 trang web sử dụng nhiều ảnh thì cần nhiều yêu cầu gửi tới server để xử lý => làm sao để giảm số lần gửi yêu cầu ảnh về server???  Image sprite : Là cách nhóm các ảnh đơn lại với nhau để tạo thành 1 ảnh duy nhất.  Khi đó chỉ cần 1 yêu cầu là có thể đáp ứng được yêu cầu
  39. Demo image sprite  ImageSprite.html
  40. Nội dung  CSS Display  CSS Position  CSS Float  CSS Align  CSS Navigation Bar  CSS Image Gallery  CSS Image Sprite  CSS Image Opacity 40
  41. Opacity  Ta có thể làm mờ đi 1 hình ảnh bằng cách sử dụng thuộc tính : – opacity :1.0; (cho FF) – filter:alpha(opacity=100); (cho IE)  1.0 (100) : Không trong suốt  0.0 (0) : Trong suốt hoàn toàn (không thể nhìn thấy)
  42. Demo image opacity  ImageOpacity