cÁc thu Ộc tÍnh hay s Ử d Ụng trong thi Ết k Ế web · ph ần tử, vd: mu ốn di chuy...

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


� Box Model,� Thuộc tính Float & Clear, � Thuộc tính Height, Width và Position

NỘI DUNG


� 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


� Box model:

BOX MODEL


� 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


� 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


� Thuộc tính margin:

BOX MODAL


� 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


� 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


� Thuộc tính Border: Công thức viết gọnborder:<border-width> |<border-color> |<border-style>

BOX MODAL


� 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


� 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


� 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.


� 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


Float & Clear


� 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


Position


� 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


Ví dụ: Có 3 ảnh logo#logo1 { position:absolute;

top:70px; left:50px;z-index:1

}#logo2 { position:absolute;


}#logo3 { position:absolute;


}

Z-index


THẢO LUẬN – CÂU HỎI


� 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

cÁc thu Ộc tÍnh hay s Ử d Ụng trong thi Ết k Ế web · ph ần tử, vd: mu ốn di chuy...

Documents