Phát triển ứng dụng web với CSS

Giới thiệu• Bảng kiểu style sheet nhằm thoả mãn nhu cầu – Giữ tính thống nhất cho trang HTML.. – Định dạng một số tính chất thông thường cùng một lúc cho tất cả các đối tượng trên trang

Trang 1

Luong Tran Hy Hien, FIT of HCMUP, VietNam

Trang 3

1 Giới thiệu

• Bảng kiểu (style sheet) nhằm thoả mãn nhu cầu

– Giữ tính thống nhất cho trang HTML.

– Định dạng một số tính chất thông thường cùng một lúc cho tất cả các đối tượng trên trang.

• Lợi ích:

– Tiết kiệm thời gian

– Để thay đổi định dạng ==> cần thay đổi thuộc tính

Trang 5

2 Định nghĩa Style

Ví dụ

Trang 6

3 Phân loại và sử dụng

1 Inline Style Sheet

Style định nghĩa trong tag

2 Internal Style Sheet

Style định nghĩa trong tag <style>

3 External Style Sheet

Trang 7

3.1 Inline Style Sheet

• Sử dụng thuộc tính style bên trong tag muốn

Trang 8

3.1 Inline Style Sheet (tt) – Ví dụ

<BODY>

This paragraph has an inline style applied to it

This paragraph is displayed in the default style

Can you see the difference in this line

</BODY>

Trang 9

3.2 Internal Style Sheet

• Thích hợp cho trang riêng lẻ

• Cách tạo: Tạo bảng mẫu chung trên phần đầu

trang trong cặp tag <head>

• Sử dụng: Trong phần body, nội dung nào muốn sử dụng định dạng theo bảng mẫu trên thì đặt trong tag được định nghĩa trong phần head

9

Trang 10

3.2 Internal Style Sheet (tt) – Ví dụ

Trang 11

3.3 External Style Sheet

• Được lưu trữ thành một file (*.css) riêng bên ngoài

và được liên kết với trang HTML

• Bảng kiểu này sẽ được áp dụng và ảnh hưởng cho tất cả các trang của mộtwebsite (nếu có liên kết)

• Cách tạo:

– Tạo một tập tin văn bản mới

– Nhập tên các tag muốn định dạng thuộc tính theo mẫu:

– Lưu tập tin với định dạng Text Only và có phần mở

rộng css

Trang 12

3.3 External Style Sheet (tt) – Ví dụ

Trang 13

3.3 External Style Sheet (tt) – Cách dùng

13

Trang 14

3.3 External Style Sheet (tt)

Cách 1:

Cách 2:

Trang 15

3 Phân loại và cách sử dụng

Trang 16

3 Phân loại và cách sử dụng

1 Inline Style Sheet

2 Embedding Style Sheet

3 External Style Sheet

ĐộƯuTiênGiảmDần

Trang 17

4 Selector trong CSS

Các loại Selector

Trang 18

4 Selector trong CSS

Các loại Selector

Trang 20

● Predefined names:

white black red …

● 8-bit hexadecimal intensities for red, green, blue:

Trang 22

4.1 CSS - ELEMENT

Trang 23

4.2 CSS - ID

Trang 24

4.3 CSS - CLASS

Trang 25

4.3 CSS – ELEMENT_CLASS

Trang 26

4.4 CSS – CONTEXTUAL

Trang 27

4.5 CSS – Pseudo Class

Dùng phím tab để active link

Trang 28

4.5 CSS – Pseudo Element

Trang 29

4.5 CSS – Pseudo Element

Trang 30

Q & A

Trang 31

THE END

Định dạng
Số trang	31
Dung lượng	2,84 MB