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%

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

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); opacity:0.4;

/* for IE */ /* CSS3 standard */