Cấu trúc trang web pdf

viết code trang web tạo hình nền cho trang web với thuộc tính lặp theo phương ngang như hình sauHình nền lặp theo 1 chiều ngang BACKGROUND... Tạo kiểu cho border theo 4 chiều viền Cú ph

CấU TRÚC TRANG WEB

CấU TRÚC TRANG WEB

Background

Định màu

BACKGROUND

Ví dụ 2 Tạo hình nền cho trang web có tên file hình là bgdesert.jpg như hình sau

Hình nền

BACKGROUND

Khai báo tên file hình nền

BACKGROUND

BACKGROUND

Tạo nền là một hình ảnh có kèm trạng thái vòng lặp (background-repeat)

repeat: sẽ lặp hình nền theo cả 2 chiều (mặc định)

repeat-x: lặp hình nền theo phương ngang

repeat-y: lặp hình nền theo phương đứng

no-repeat: chỉ hiện thị 1 lần

Ví dụ 3 Tạo hình nền cho trang web với thuộc tính lặp theo phương đứng như hình sau

Hình nền lặp theo

1 chiều đứng

BACKGROUND

Khai báo lặp hình nền

BACKGROUND

Ví dụ 4 viết code trang web tạo hình nền cho trang web với thuộc tính lặp theo phương ngang như hình sau

Hình nền lặp theo

1 chiều ngang

BACKGROUND

style = “background-image: url(URL)/none ;

background-position: value/x% y%/xpos ypos”

Trong đó:

value là giá trị: top left, top center, top right, center left,

center center, center right, bottom left, bottom center, bottom right.

x% y% là giá trị theo phương đứng và ngang của trang web tính theo %

xpos ypos là giá trị theo 2 phương (ví dụ: 30px 150px)

Ví dụ 5 Tạo hình nền cho trang web có thuộc

tính lặp theo phương đứng và ở giữa như

hình sau

Hình nền lặp theo 1 chiều đứng, ở giữa

BACKGROUND

Khai báo lặp hình nền

BACKGROUND

scroll : khai báo này sẽ làm hình nền di chuyển.

fixed : khai báo này sẽ làm hình nền cố định trên màn hình trình duyệt.

Ví dụ 6 Tạo hình nền có tên file

"bgdesert.jpg" và hình sẽ cố định ở góc trên trang web như hình sau

Hình nền cố định

trên màn hình trình

duyệt

BACKGROUND

Khai báo trạng thái cố định

BACKGROUND

Ví dụ 7 Tạo có màu xanh, hình nền tên file

"bgdesert.jpg“, không lặp, cố định và ở giữa trang web như hình sau

Màu xanh ( #00ff00)

BACKGROUND

Hình nền, không lặp,

cố định và ở giữa

-color

BACKGROUND

background -repeat

background -image

background -position background -attachment

Border

Tạo kiểu cho border

Cú pháp:

style = “ border-style: value”

Trong đó: value là các giá trị:

-none/hidden: không border

Ví dụ 1 Tạo các dạng border như hình

dotted

BORDER

dashed solid double groove ride

outset inset

Định kiểu border

BORDER

Tạo kiểu cho border theo 4 chiều viền

Cú pháp:

style = “ border-style: [top right bottom left] value”

Trong đó: value là các giá trị như đã học ở trên

Các trường hợp khai báo:

“ border-style: dotted”: 4

chiều có kiểu border là dotted

“ border-style: dotted dashed”:

top và bottom border là kiểu

dotted; left và right border là

dashed

“ border-style: dotted dashed solid”: top border là kiểu dotted; left và right border là kiểu

dashed; bottom border sẽ là kiểu solid

“ border-style: dotted dashed solid double”: hiển thị theo thứ

tự top, right, bottom, left

Ví dụ 2 Viết code tạo các dạng border như hình

BORDER

kiểu border

Ví dụ 3 Tạo các dạng border ( solid ) có màu

#ff0000 #00ff00

#0000ff

Định kiểu màu

BORDER

Ví dụ 4 Tạo các dạng border ( solid ) có độ dầy viền như hình

BORDER

border-top-width: 15px

Định độ dầy

BORDER

Ví dụ 5 Viết code tạo các dạng border ( solid ) có

độ dầy viền như hình

BORDER

độ dầy bottom 0.5cm

Ví dụ 6 Viết code tạo các dạng border ( solid ) có

độ dầy viền như hình

BORDER

độ dầy left 1cm

Ví dụ 7 Viết code tạo các dạng border ( solid ) có

độ dầy viền như hình

BORDER

độ dầy right 20px

BORDER

Định độ lớn cho border

Cú pháp:

style = “border-style: [top right bottom left] value

border-width: [top right bottom left]

Ví dụ 8 Tạo các dạng border ( solid ) có độ dầy viền như hình

Định độ dầy

BORDER

[border-top-width] [border-style] [border-color]”

Khai báo trên kết hợp 3 thuộc tính cho border Mỗi

thuộc tính cách 1 khoảng trống

Ví dụ 9 Tạo các dạng border ( solid ) có độ dầy viền như hình

BORDER

Border có độ dầy medium, kiểu viền solid, màu #ff0000

Định độ dầy, kiểu viền và

màu viền

BORDER

Ví dụ 10 viết code tạo các dạng border ( solid )

có độ dầy viền như hình

BORDER

Border có độ dầy thick, kiểu viền solid, màu #ff0000

[border-left-width] [border-style] [border-color]”

Khai báo trên kết hợp 3 thuộc tính cho border Mỗi

thuộc tính cách 1 khoảng trống

Ví dụ 11 viết code tạo các dạng border ( solid )

có độ dầy viền như hình

BORDER

Border có độ dầy 1cm, kiểu

viền solid, màu #ff0000

Ví dụ 12 viết code tạo các dạng border ( solid )

có độ dầy viền như hình

BORDER

Border có độ dầy 20px, kiểu viền solid, màu #ff0000

Định độ lớn border kết hợp thuộc tính style và color

Cú pháp:

style = “border:

[border-width] [border-style] [border-color]”

Khai báo trên kết hợp 3 thuộc tính cho border Mỗi

thuộc tính cách 1 khoảng trống

-border-width: sẽ định vị trí 4 chiều

Ví dụ 13 viết code tạo các dạng border ( solid )

có độ dầy viền như hình

BORDER

Border có độ dầy 15px, kiểu viền solid, màu #ff0000

Margin

-Number: giá trị số lần kích thước font

-Length: chỉ định khoảng cách bằng fixel, cm, -%: giá trị % so với kích thước font

Ví dụ 1 Định chiều cao dòng như hình

2cm

40px

100px

MARGIN

Định chiều cao

MARGIN

Ví dụ 2: Định khoảng cách ký tự như hình

khoảng cách 1cm

MARGIN

khoảng cách 10px

Định khoảng cách

MARGIN

Định vị trí

MARGIN

-Length: chỉ định khoảng cách bằng fixel, cm,

So với phần tử phía trên Mặc định là 0

-%: tính % so với trang web

Ví dụ 4 Định vị trí dòng như hình

MARGIN

2cm

4cm

Định vị trí

MARGIN

-Length: chỉ định khoảng cách bằng fixel, cm,

So với phần tử phía dưới Mặc định là 0

-%: tính % so với trang web

Ví dụ 5 Định vị trí dòng như hình và viết code cho ví dụ này

MARGIN

2cm

5cm

-Length: chỉ định khoảng cách bằng fixel, cm,

So với lề bên trái Mặc định là 0

-%: tính % so với trang web

Ví dụ 6 Định vị trí dòng như hình

MARGIN

1cm

80px

Định vị trí

MARGIN

-Length: chỉ định khoảng cách bằng fixel, cm,

So với phần tử bên phải Mặc định là 0

-%: tính % so với trang web

Ví dụ 7 Định vị trí dòng như hình và viết code cho ví dụ này

MARGIN

10cm 300px

Các trường hợp khai báo:

 style = “margin: 10px” 4 bên đều cùng kích

Định vị trí

MARGIN

Padding

Trước tiên, chúng ta hãy xem hình mô tả vị trí các

thành phần Margin, Border, Padding Như vậy, Margin

là khoảng cách so với đường biên ngoài Padding là

khoảng cách so với border

Đường ranh giới ngoài Margin Border

Padding

Phần nội dung

Ví dụ 1 Định khoảng cách padding so với phía trên (padding-top) 40px cho ô (cell) của table như hình.

40px

PADDING

Định khoảng cách padding

PADDING

Ví dụ 2 Viết code định khoảng cách padding so với phía dưới (padding-bottom) 3cm cho ô (cell) của

table như hình

3cm

PADDING

Ví dụ 3 Định khoảng cách padding bên trái

(padding-left) 2,5cm cho ô (cell) của table như hình

2,5cm

PADDING

Định khoảng cách padding

PADDING

Ví dụ 4 Định khoảng cách padding bên phải

(padding-right) 3inch cho ô (cell) của table như hình

3inch (1inch ~ 2,54cm)

PADDING

style = “ padding: [top] [right] [bottom] [left]”

Trong đó: [top] [right] [bottom] [left] là: length/% -Mỗi giá trị cách nhau 1 khoảng trống

-length là giá trị khoảng cách bằng fixel, cm, in (inch)

-%: tính % so với chiều cao (top, bottom) và chiều rộng (left, right)

Các trường hợp khai báo:

 style = “padding: 10px” 4 bên đều cùng kích

Ví dụ 5 Định khoảng cách padding top: 2,5cm; left

và right: 50px; bottom: 2inch cho ô (cell) của table như hình

2inch

PADDING

50px 50px

2,5cm

Định khoảng cách padding

PADDING