Bài giảng Thiết kế Web 1 - Chương 6: CSS - Vũ Chí Hiếu

Vũ Chí Hiếu hieuvc@gmail.com  Giới thiệu CSS  Nhúng CSS vào trong trang web  Một số thuộc tính  Ví dụ  Liên kết đến file CSS bên ngoài (link)  Nhúng CSS trong phần  Nhúng CSS trong từng thẻ (inline)  Cú pháp  Id  Class  Background  Text  Font  Link  List  Table  Box Model  Border  Outline  Margin  Padding  height  max-height  min-height  width  max-width  min-width  Float: dùng để cố định một phần tử vào bên trái hay bên phải không gian bao quanh nó.  Float thường sử dụng để dàn trang (layout) hoặc định vị hình ảnh và văn bản  Các giá trị ◦ none: (mặc định) bình thường ◦ left: định vị về bên trái ◦ right: định vị về bên phải  Ví dụ 1: Định vị hình ảnh và văn bản  Clear: ◦ Khi đặt float cho một phần tử thì các phần tử phía sau sẽ bao quanh phần tử này. ◦ Sử dụng clear để loại bỏ float ◦ Các giá trị  none: (mặc định) coi như không sử dụng clear  left: không cho phép đặt các phần tử phía bên trái  right: không cho phép đặt các phần tử phía bên phải  both: không cho phép đặt các phần tử cả bên trái và bên phải  Ví dụ 2: Sử dụng các thẻ danh sách và liên kết để tạo menu  Ví dụ 3: Sử dụng div tạo layout web  display: chỉ ra cách hiển thị một phần tử  Các giá trị ◦ none: ẩn ◦ block: hiển thị theo từng khối ◦ inline: hiển thị trên cùng một dòng  Ví dụ  Position: vị trí của phần tử, có thể đặt trên hoặc dưới phần tử khác  Mỗi phần tử đều có các thuộc tính top, left, bottom và right (phải đặt sau thuộc tính position)  Các giá trị position ◦ static: (mặc định) các thuộc tính top, left, bottom, right không có giá trị ◦ fixed: đặt tọa độ cố định theo cửa sổ trình duyệt (không bị di chuyển khi scroll) ◦ relative: đặt tọa độ so với tọa độ bình thường của chính nó ◦ absolute: đặt tọa độ so với tọa độ phần tử chứa nó  Một số thuộc tính khác sử dụng kèm ◦ top, left, right, bottom: tọa độ các phía ◦ z-index: thứ tự sắp xếp các khối, z-index lớn nhất thì khối được xếp trên cùng  Ví dụ  Ví dụ 1: tạo ảnh trong suốt 40% <img src=“hinh.jpg“ style="opacity:0.4;filter:alpha(opacity=40)" /> Bình thường Trong suốt 40%  IE: this.filters.alpha.opacity=100  Firefox: this.style.opacity=1  Ví dụ 2: hiệu ứng di chuyển chuột <img src=“hinh.jpg" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.al pha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.a lpha.opacity=40" />  Class filter:alpha(opacity=40); /* for IE */ opacity:0.4; /* CSS3 standard */