Slide 4 - Thiết kế Web cơ bản

Bài 4Định vị trí box

NHẮC LẠI BÀI TRƯỚC

Giới thiệu về fontMột số thuộc tính quan trọng của FontMột số thuộc tính quan trọng của TextKích thước của font, text trong HTMLCách viết CSS rút gọn (shorthand)

Giới thiệu về fontMột số thuộc tính quan trọng của FontMột số thuộc tính quan trọng của TextKích thước của font, text trong HTMLCách viết CSS rút gọn (shorthand)

Bài 4 - Định vị trí box 2

MỤC TIÊU BÀI HỌC

Tìm hiểu về box (hộp), cấu trúc box trên một trangcủa website:

Tầm quan trọngKích thướcVị trí

Thuộc tính của box:Thuộc tính về nội dungThuộc tính về vị tríThuộc tính về hiển thị

Tìm hiểu về box (hộp), cấu trúc box trên một trangcủa website:

Tầm quan trọngKích thướcVị trí

Thuộc tính của box:Thuộc tính về nội dungThuộc tính về vị tríThuộc tính về hiển thị

Bài 4 - Định vị trí thẻ 3

BOX, CẤU TRÚC BOX TRÊN TRANG WEB

BOX, CẤU TRÚC BOX

Là thành phần cấu thành nên trang của websiteSự sắp xếp hợp lý các box sẽ tạo nên bố cục trang



backgroundimage

backgroundcolor

border

margin

padding

Bài 4 - Định vị trí thẻ

boxkích thước

(width)

backgroundimage padding

nội dung

8


Border (đường viền): bạn có thể đặt độ dày, kiểudáng, và màu sắc cho đường viền.Margin (lề): thiết lập khoảng cách giữa box và cácthành phần bên ngoài, xung quanh (tính từ đườngviền ra ngoài)Padding (khoảng đệm): thiết lập khoảng cách từđường viền vào trong nội dung của box


Border (đường viền): bạn có thể đặt độ dày, kiểudáng, và màu sắc cho đường viền.Margin (lề): thiết lập khoảng cách giữa box và cácthành phần bên ngoài, xung quanh (tính từ đườngviền ra ngoài)Padding (khoảng đệm): thiết lập khoảng cách từđường viền vào trong nội dung của box

10

BOX BORDER

Box border

Width: thin, medium,thick, hoặc số cụ thể

(ems, px, %)

Style: none, hidden,dotted, dashed, solid,double,groove, ridge,

inset, outset


Box border

Style: none, hidden,dotted, dashed, solid,double,groove, ridge,

inset, outset

Color: giá trị mã màu

11

BOX BORDER

CSS:p { border-color:#F00; border-style:solid; border-width: 1px}Hoặcp { border:#F00 solid 1px}XHTML:Bạn đã được cảnh báo!

BOX PADDING

top

left

Padding: thiết lập khoảng cách từ đường viền vào trong nội dung của box


paddingleft

right

bottom13

BOX PADDING

CSS:p { border:#F00 solid 1px ; padding-top:5px; padding-left:10px; padding-right:15px;padding-bottom:20px}


BOX PADDING

Áp dụng được cách viết rút gọn (shorthand)CSS:p { border:#F00 solid 1px ; padding:5px 15px 20px 10px}

top Thứ tự: trên, phải,dưới, trái


padding right

bottom

left

Thứ tự: trên, phải,dưới, trái

BOX MARGIN

margin

top

left

Margin: thiết lập khoảng cách giữa box và các thành phần bên ngoài


marginleft

right

bottom16

BOX MARGINCSS:.boxone { border:#F00 solid 1px; margin-top:5px; margin-left:20px; margin-right:20px;margin-bottom:25px}.boxtwo { border:#903 solid 1px; margin-top:5px; margin-right:10px; margin-bottom:12px; margin-left:8px;}


FLOATING & CLEARING

FLOAT

Dùng để nổi những thành phần (box, image, text,…) trên trangLà nền tảng để tạo bố cục nhiều cột

CSS:p {float:left; margin:0 4px 4px 0;}


CSS:p {float:left; margin:0 4px 4px 0;}

19

Đoạn văn bản được thả nổi về phíabên phải so với ảnh

FLOAT

float

left

right


floatright

none

inherit

20

CLEAR

Không cho phép thẻ nổi

clear

Both

left

right


clear right

none

inherit

21

CLEAR

Dùng để cố định những thành phần (box, image,text, …) trên page

CSS:p {margin:0 0 10px 0;}img {float:left; margin:0 4px 4px 0;}.clearthefloats {clear:both;}

HTML:<img src="../images/dartmoor-view.jpg" /> Here’s a lovely picture of Dartmoor... <img src="../images/english-cottage.jpg" /> My sister lived in this delightful cottage... <div class="clearthefloats"></div><img src="../images/winsor-castle_walls.jpg" /> The Queen of England...


CSS:p {margin:0 0 10px 0;}img {float:left; margin:0 4px 4px 0;}.clearthefloats {clear:both;}

HTML:<img src="../images/dartmoor-view.jpg" /> Here’s a lovely picture of Dartmoor... <img src="../images/english-cottage.jpg" /> My sister lived in this delightful cottage... <div class="clearthefloats"></div><img src="../images/winsor-castle_walls.jpg" /> The Queen of England...

CLEAR


THUỘC TÍNH VỀ VỊ TRÍ BOX

THUỘC TÍNH VỀ VỊ TRÍ BOX

absolute

relative

fixed

positionstatic inherit


STATIC

Là giá trị mặc định của thuộc tính positionMỗi thành phần được đặt sau thành phần khác theodòng chảy trangKhông xảy ra hiện tượng chồng chéo giữa nhiềuthành phầnKhông cần thiết phải sử dụng các yếu tố căn chỉnhtọa độ: top, left, right, bottom


Là giá trị mặc định của thuộc tính positionMỗi thành phần được đặt sau thành phần khác theodòng chảy trangKhông xảy ra hiện tượng chồng chéo giữa nhiềuthành phầnKhông cần thiết phải sử dụng các yếu tố căn chỉnhtọa độ: top, left, right, bottom

26

STATIC

CSS:p#specialpara {color:red; background:#EEE; position:static}XHTML:Đây là đoạn thứ ba của ví dụ về định vị. Đoạn này cómột ID để ta có thể thay đổi giá trị vị trí của nó mà không ảnh hưởng tới cácđoạn khác.Mục đích của ví dụ này là thể hiện cho bạn thấy sự khác biệt giữabốn giá trị định vị: static, relative, absolute và fixed.

ABSOLUTE

Định vị hộp theo tọa độ tuyệt đối, thay đổi vị trítheo các thuộc tính:

TopLeftRightBottom

Có thể xếp chồng đè lên các hộp khácKhông phụ thuộc vào margin, float


Định vị hộp theo tọa độ tuyệt đối, thay đổi vị trítheo các thuộc tính:

TopLeftRightBottom

Có thể xếp chồng đè lên các hộp khácKhông phụ thuộc vào margin, float

28

ABSOLUTE

CSS:p#specialpara {position:absolute; top:25px; left:30px; color:red; background:#EEE;}XHTML:Đây là đoạn thứ ba của ví dụ về định vị. Đoạn này cómột ID để ta có thể thay đổi giá trị vị trí của nó mà không ảnh hưởng tới cácđoạn khác.Mục đích của ví dụ này là thể hiện cho bạn thấy sự khác biệt giữabốn giá trị định vị: static, relative, absolute và fixed.

RELATIVE

Định vị tương đối so với hộp ngữ cảnh của nóKết hợp căn chỉnh tọa độ với:

TopLeftRightBottom

Có thể kết hợp với margin, padding để căn chỉnhkhông xảy ra hiện tượng chồng chéo


Định vị tương đối so với hộp ngữ cảnh của nóKết hợp căn chỉnh tọa độ với:

TopLeftRightBottom

Có thể kết hợp với margin, padding để căn chỉnhkhông xảy ra hiện tượng chồng chéo

30

RELATIVE

CSS:p#specialpara {position:relative; top:25px; left:30px; color:red; background:#EEE;}XHTML:Đây là đoạn thứ ba của ví dụ về định vị. Đoạn này cómột ID để ta có thể thay đổi giá trị vị trí của nó mà không ảnh hưởng tới cácđoạn khác.Mục đích của ví dụ này là thể hiện cho bạn thấy sự khác biệt giữabốn giá trị định vị: static, relative, absolute và fixed.

FIXED VÀ INHERIT

Fixed (định vị cố định): tương tự như định vị tuyệtđối, ngoại trừ việc ngữ cảnh định vị của hộp là côngcụ hiển thị (ví dụ như cửa sổ trình duyệt hoặc mànhình của một thiết bị cầm tay).Hộp không di chuyển khi trang được cuộn khi sửdụng fixedInherit: kế thừa được thuộc tính định vị của các hộpliền kề


Fixed (định vị cố định): tương tự như định vị tuyệtđối, ngoại trừ việc ngữ cảnh định vị của hộp là côngcụ hiển thị (ví dụ như cửa sổ trình duyệt hoặc mànhình của một thiết bị cầm tay).Hộp không di chuyển khi trang được cuộn khi sửdụng fixedInherit: kế thừa được thuộc tính định vị của các hộpliền kề

32

THUỘC TÍNH DISPLAY

THUỘC TÍNH DISPLAY

Cung cấp khả năng mạnh mẽ, cho phép bạn nhữngkhả năng như buộc một thẻ cục bộ lấp đầy thẻ chứanóPhạm vi ứng dụng: tạo menu drop down

CSS:p {display:inline;}a {display:block}


Cung cấp khả năng mạnh mẽ, cho phép bạn nhữngkhả năng như buộc một thẻ cục bộ lấp đầy thẻ chứanóPhạm vi ứng dụng: tạo menu drop down

CSS:p {display:inline;}a {display:block}

display

block inline


Block: cho phép những thành phần (đoạn văn, tiêuđề, danh sách, …) được hiển thịInline: cho phép những thành phần được hiển thịtrên trình duyệt và chỉ xuất hiện trên dòng mới khikhông có không gian hiển thịÁp dụng mạnh mẽ để dàn layout cho những thànhphần trên trang web (menu dropdown, …)


Block: cho phép những thành phần (đoạn văn, tiêuđề, danh sách, …) được hiển thịInline: cho phép những thành phần được hiển thịtrên trình duyệt và chỉ xuất hiện trên dòng mới khikhông có không gian hiển thịÁp dụng mạnh mẽ để dàn layout cho những thànhphần trên trang web (menu dropdown, …)

35

TỔNG KẾT

Tất cả những thành phần được bố trí trên trang webđược gọi là boxThuộc tính chính của box bao gồm:

BorderMarginPaddingNội dungBackground

Dùng thuộc tính float để làm nổi box và clear để hủynổi

Tất cả những thành phần được bố trí trên trang webđược gọi là boxThuộc tính chính của box bao gồm:

BorderMarginPaddingNội dungBackground

Dùng thuộc tính float để làm nổi box và clear để hủynổi


TỔNG KẾT

Thuộc tính quan trọng của box:Thuộc tính về vị trí (position): thường sử dụng giá trịrelative, staticThuộc tính về hiển thị (display): thường được ápdụng trong cách dàn menu dropdown

Thuộc tính quan trọng của box:Thuộc tính về vị trí (position): thường sử dụng giá trịrelative, staticThuộc tính về hiển thị (display): thường được ápdụng trong cách dàn menu dropdown


Slide 4 - Thiết kế Web cơ bản

Education

Transcript of Slide 4 - Thiết kế Web cơ bản