Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
CÁC THUỘC TÍNH HAY SỬ DỤNG TRONG THIẾT KẾ WEB
NHẬP MÔN HTML VÀ THIẾT KẾ WEB
1
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
� Box Model,� Thuộc tính Float & Clear, � Thuộc tính Height, Width và Position
NỘI DUNG
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
� Box model: Box model mô tả cách mà CSSđịnh dạng khối không gian bao quanh mộtthành phần. Nó bao gồm:
� padding (vùng đệm),� border (viền),� margin (canh lề) và� các tùy chọn
BOX MODEL
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
� Box model:
BOX MODEL
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
� Thuộc tính margin: trong CSScũng được dùng để canh lềcho cả trang web hay mộtthành phần web.
�margin-top: canh lề trên�margin-bottom: canh lề
dưới�margin-left: canh lề trái�margin-right: canh lề phải
CSS
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
� Thuộc tính margin: Công thức rút gọn:margin:<margin-top> | <margin-right> |
<margin-bottom>| <margin-left>
hoặc: margin:<value1>|< value2>
với value 1 là giá trị margin-top và margin-bottom và value2 là giá trị margin-left và margin-right.
BOX MODAL
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
� Thuộc tính margin:
BOX MODAL
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
� Thuộc tính Padding: Quy định khoảng cáchgiữa phần nội dung và viền của một đốitượng. Nó không ảnh hưởng tới khoảng cácgiữa các các đối tượng như margin. Cú pháptương tự như margin.
�padding-top: trên�padding-right: phải�padding-bottom: dưới�padding-left: tráihoặc
padding:<padding-top>|<padding-right>|<padding-bottom> |<padding-left>
BOX MODEL
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
� Thuộc tính Border: Được dùng trong trang trí, đóngkhung cho một đối tượng cần nhấn mạnh, phâncách các đối tượng giúp trang web trông dễ nhìnhơn,…� Thuộc tính border-width: Quy định độ rộng cho viền: thin,
medium, thick , hay là một giá trị đo cụ thể như pixels.� Thuộc tính border-color: Quy định màu viền cho một đối
tượng web� Thuộc tính border-style: Quy định kiểu viền thể hiện của
một đối tượng web.
BOX MODAL
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
� Thuộc tính Border: Công thức viết gọnborder:<border-width> |<border-color> |<border-style>
BOX MODAL
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
� Thuộc tính width: Quy định chiều rộng cho một thành phần web.
� Thuộc tính max-width: Quy định chiều rộng tối đa cho một thành phần web.
� Thuộc tính min-width: Quy định chiều rộng tối thiểu cho một thành phần web.
Height & Width
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
� Thuộc tính height: Quy định chiều cao cho một thành phần web.
� Thuộc tính max-height: Quy định chiều cao tối đa cho một thành phần web.
� Thuộc tính min-height: Quy định chiều cao tối thiểu cho một thành phần web.
Height & Width
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
� Float & Clear:� Thuộc tính float: Dùng để cố định một thành
phần web về bên trái hay bên phải không gianbao quanh nó. Thuộc tính float có 3 giá trị:
Float & Clear
�Left: Cố định phần tửvề bên trái.�Right: Cố định phần tửvề bên phải.�None: Bình thường.
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
� Thuộc tính Clear: Đi cùng với thuộc tính float,trong CSS còn có một thuộc tính là clear.Thuộc tính clear là một thuộc tính thườngđược gán vào các phần tử liên quan tới phầntử đã được float để quyết định hướng xử sựcủa phần tử này. Gồm các giá trị:
� left (tràn bên trái), � right (tràn bên phải), � both (không tràn) và � none.
Float & Clear
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
Float & Clear
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
� posittion: { relaitve|absolite}� position : absolute : Định vị vị trí tuyệt đối của
phần tử, VD: Muốn di chuyển một phần tử con rangoài phần tử cha. Thường áp dụng để kéo 1phần tử đè lên phần tử khác. Có thể đặt ở bất cứđâu trên trang web
� position:relative : Định vị vị trí tương đối củaphần tử, kéo các phần tử con về nằm trong phầntử cha.Thường áp dụng trong menu.
�
Position
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
Position
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
� CSS hoạt động trên cả 3 chiều: cao, rộng,sâu. Thuộc tính z-index cho phép chúng tađịnh vị theo chiều sâu, bằng cách hiển thịcác phần tử đè lên phần tử khác.
� Gán cho mỗi phần tử một con số. Theo đó,phần tử có số cao hơn sẽ nằm trên, phần tửcó số thấp hơn sẽ nằm dưới.
Z-index
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
Ví dụ: Có 3 ảnh logo#logo1 { position:absolute;
top:70px; left:50px;z-index:1
}#logo2 { position:absolute;
top:140px; left:100px;z-index:2
}#logo3 { position:absolute;
top:210px; left:150px;z-index:3
}
Z-index
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
THẢO LUẬN – CÂU HỎI
Bộ môn Hệ thống thông tin – Khoa Công nghệ thông tin
� Thực hành các ví dụ� Tìm hiểu mở rộng CSS3� Nên ý tưởng thiết kế các chức năng cho
bài tập lớn
BÀI TẬP