Bài giảng Nhập môn HTML và thiết kế Web: Bài 8 - Các thuộc tính hay sử dụng trong thiết kế Web

Bài giảng Nhập môn HTML và thiết kế Web: Bài 8 - Các thuộc tính hay sử dụng trong thiết kế Web cung cấp cho các bạn những kiến thức về Box Model, thuộc tính Float & Clear, thuộc tính Height, Width và Position.

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

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 ộ t thành ph ầ n Nó bao g ồ m:

Box model:

BOX MODEL

Thu ộ c tính margin: trong CSS

Thu ộ c tính margin: Công th ứ c rút g ọ n:

Thu ộ c tính margin:

BOX MODAL

Thu ộ c tính Padding: Quy đị nh kho ả ng cách

Thu ộ c tính Border: Đượ c dùng trong trang trí, đ óng khung cho m ộ t đố i t ượ ng c ầ n nh ấ n m ạ nh, phân cách các đố i t ượ ng giúp trang web trông d ễ nhìn

Thu ộ c tính Border: Công th ứ c vi ế t g ọ n

border:<border-width> |<border-color> |<border-style>

BOX MODAL

Thu ộ c tính width: Quy đị nh chi ề u r ộ ng cho m ộ t

Thu ộ c tính height: Quy đị nh chi ề u cao cho m ộ t

Float & Clear:

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 ầ n

t ử đ ã đượ 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 ra ngoài ph ầ n t ử cha Th ườ ng áp d ụ ng để kéo 1

ph ầ 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 ủ a

ph ầ n t ử , kéo các ph ầ n t ử con v ề n ằ m trong ph ầ n

t ử 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 ị

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

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