HTML và CSS

PowerPoint Präsentation MỤC 2 1 Giới thiệu 2 Định nghĩa CSS 3 Phương pháp sử dụng CSS 4 Phân loại các CSS Selector 5 Minh hoạ CSS NỘI DUNG HTML a HTML và CSS?  CSS (Cascading Style Sheets) là một phư[.]

Trang 1

MỤC 2:

Trang 3

a HTML và CSS?

 CSS (Cascading Style Sheets): là một phương pháp dùng để

mô tả lại cách thức hiển thị của các thành phần trên trang WEB nhằm:

 Xây dựng một dạng TEMPLATE trong quá trình thiết kế

 Tái sử dụng cho các trang web khác

 Thay đổi thuộc tính từng trang hoặc cả site nhanh chóng

(“cascading”)

CSS?

1 Giới thiệu

Trang 4

b Ví dụ HTML và CSS:

 Thiết kế một trang hiển thị Thời khóa biểu các môn học như hình sau:

Trang 5

 Thiết kế một trang hiển thị các layout như hình sau:

Trang 6

 Thiết kế một trang hiển thị các layout như hình sau:

Trang 7

c HTML (table) và CSS (div):

HTML

CSS

Trang 8

Trang 9

Trang 10

Trang 11

SelectorName: là tên các tag đã được định nghƿa

trước trong HTML (tag <p>, tag <table>, ) hoặc tên do người dùng định nghƿa mới.

Property: tên các thuộc tính do CSS hỗ trợ

Value: giá trị ứng với các thuộc tính

Lưu ý: ghi chú trong CSS dùng /* … */

2 Định nghĩa CSS

Trang 12

1994, and three major versions of the technology have been developed since then Table 5-1 summarizes the version

history of CSS </p>

</body>

…

2 Định nghĩa CSS

Trang 13

<h1 style="font-size: 48px; font-family:Arial,

Helvetica, sans-serif;color: green;">

Trang 14

b Embedded Styles

 Các thuộc tính style cho các thẻ (tag) được khai báo trước trong phần tag <Head> của trang trước khi sử dụng.

 Ví dụ:

…

<style type="text/css">

<! p {font-size: 1.5em; font-family: Tahoma;

color: blue; background-color: yellow;} em

{font-size: 2em; color: green;}

Trang 15

c Inported Styles

 Các thuộc tính style cho các thẻ (tag) được nhúng

từ một tập tin *.css bên ngoài vào trang.

Trang 16

d Linked Styles

 Các thuộc tính style cho các thẻ (tag) được nhúng

từ một tập tin *.css bên ngoài vào trang (tương tự như phương pháp Imported Styles)

Trang 17

 Độ ưu tiên của các phương pháp

Trang 18

 Ưu điểm và khuyết điểm của các phương pháp

</style>

<p>ĚHCNTT</p>

<p>ĚHCNTT</p>

nhanh-Dễ quản lý cho từng tag trong một trang

-Ěịnh nghƿanhanh

-Dễ quản lý cho từng trang

-Có thể áp dụng style đồng bộ cho một site

-Thông tin Style được trình duyệt cache → cải thiện tốc độ duyệt web ở những lần sau

Khuyết điểm - Khó áp dụng

đồng bộ cho từng tag trong cùng một trang

- Khó áp dụng đồng bộ cho các trang

- Tối ưu tập tin *.css để cải thiện tốc độ duyệt cho lần đầu tiên truy cập site

3 Phương pháp sử dụng CSS

Trang 19

a Giới thiệu

 CSS Selector là các phương pháp dùng để

định dạng các thuộc tính cho một hay nhiều thẻ (tag) HTML đã có hoặc xây dựng các lớp (class) định dạng dùng áp dụng chung cho các thẻ (tag)

 Tùy theo phiên bản, CSS hỗ trợ tập các CSS

trong tài liệu HTML and CSS - The

Complete Reference 5th ed - T Powell (McGraw-Hill, 2010) BBS)

4 Phân loại các CSS Selector

Trang 20

b Bảng phân loại các CSS Selector thông dụng

các tag element trong tài liệu Web h1{color:red}/*Tất cả các tag <h1> sẽ bị định

dạng màu chữ là red*/

#ID Ěịnh dạng được áp dụng cho tất cả

các tag có thuộc tính ID trong tài liệu Web

#test {color: green;}

/* Tất cả các tag có thuộc tính id=“test” đều bị định dạng màu chữ là green */

các tag element có thuộc tính ID trong tài liệu Web

h3#contact {color: red;}

/* Tất cả các tag <h3> có thuộc tính id=“contact” đều bị định dạng màu chữ là red*/

Trang 21

b Bảng phân loại các CSS Selector thông dụng

các tag có thuộc tính class trong tài liệu Web

.note {color: red;}

/* Tất cả các tag có thuộc tính class=“note” đều bị định dạng màu chữ là red*/

element.class Ěịnh dạng được áp dụng cho tất cả

các tag Element có thuộc tính class tương ứng

a:visited {text-decoration:

linethrough;}

Trang 24

26

Trang 25

Selector class

2 CSS có tính chất kế thừa hay không? Nếu có cho ví dụ minh họa và giải thích.

3 Minh

bảng được

họa một ví dụ tạo

mà thẻ <table> làm nhưng thẻ <div> không làm được và ngược

Trang 26

28

Trang 28

Câu 1: CSS là viết tắt của cụm từ nào?

•Computer Style Sheets

•Creative Style Sheets

•Cascading Style Sheets

A.Colorful Style Sheets

Trang 29

Câu 2: Chọn câu lệnh đúng để tham chiếu

đến tập tin CSS có tên là mystyle.css?

Trang 30

Câu 3: Câu lệnh sau được khai báo trong

phần nào của một trang HTML?

href="mystyle.css">

•Phần <body>

•Dòng đầu tiên trong trang HTML

•Dòng cuối cùng trong trang HTML

•Phần <head>

Trang 31

Câu 4: Thẻ (tag) HTML nào dùng để khai báo

Trang 32

Câu 5: Thuộc tính HTML nào dùng để khai

báo một Inline Styles?

•<style>

•style

•class

•styles

Trang 33

Câu 6: Câu lệnh nào sau đây là đúng cú pháp

Trang 34

Câu 7: Câu lệnh ghi chú của CSS?

A./* ghi chú */

B.' ghi chú

C.// ghi chú //

D.// ghi chú

Trang 35

Câu 8: Thuộc tính dùng để thay đổi màu nền

Trang 36

Câu 9: Câu lệnh nào sau đây dùng để

Trang 37

Câu 10: Câu lệnh nào sau đây dùng thay đổi

Trang 38

Câu 11: Câu lệnh nào sau đây dùng thay đổi

Trang 39

Câu 12: Câu lệnh nào sau đây dùng để định

dạng chữ đậm cho tất cả các thẻ <p> có trong trang HTML?

•p {text-size:bold}

•<p style=“font-weight:bold">

•p {font-weight:bold}

•<p style="font-size:bold">

Trang 40

dạng liên kết không có underline trong CSS?

•a {text-decoration:none}

•a {underline:none}

•a {decoration:no underline}

•<a {text-decoration:no underline}

Trang 41

Câu 14: Thuộc tính và giá trị nào trong

CSS dùng để định dạng in hoa ký tự đầu của mỗi từ trong câu (Ví dụ: “Xin Chào Bạn")?

•text-transform:uppercase

•text-transform:capital

•text-transform:capitalize

•Không tồn tại

Trang 42

Câu 15: Thuộc tính nào trong CSS dùng

Trang 43

dạng chữ đậm cho một thẻ <h1> có trong trang HTML?

•h1 {font-weight:bold}

•<h1 style="font-weight:bold“>

•Cả A và B đều đúng}

•Tất cả đều sai

Trang 44

Câu 17 Trong CSS, chọn câu đúng để

định dạng độ rộng đường viền (border) của một bảng theo yêu cầu sau:

− Ěường viền trên (top): 10px

− Ěường viền dưới (bottom): 5px

− Ěường viền trái (left): 20px

− Ěường viền phải (right): 1px

•border-width:5px 20px 10px 1px

Trang 45

Câu 18 Trong CSS, chọn phát biểu đúng cho

định dạng sau padding: 10px 5px;

phần top và bottom = 10px và phần left

và right = 5px

phần top và bottom = 5px và phần left và right = 10px

•Câu lệnh sai cú pháp

•Tất cả đều sai

Trang 46

Câu 19 Các phương pháp sử dụng CSS

A.Inline, Embedded, Linked

B.Inline, External, Imported, Linked

C.Inline, Embedded, Internal, Linked

D.Inline, Embedded, Imported, Linked

Trang 47

Câu 20 Trong CSS, chọn câu lệnh đúng

A.<font style="font-size:-50px">Hello</font> B.<font style="font-size:50px">Hello</font> C.Cả A và B đều đúng

D.Cả A và B đều sai

Định dạng
Số trang	47
Dung lượng	4,13 MB