Giáo trình Phát triển ứng dụng Web bằng PHP - Phần 2: HTML và CSS - Dương Khai Phong

Nội dung text: Giáo trình Phát triển ứng dụng Web bằng PHP - Phần 2: HTML và CSS - Dương Khai Phong

1. • GVHD: Dương Khai Phong • Email: khaiphong@gmail.com • Website: •
2. 1/ Giới thiệu tổng quan Web 2/ Ngôn ngữ HTML và JavaScript 3/ Ngôn ngữ PHP căn bản 4/ Các đối tượng trong PHP 5/ PHP và hướng đối tượng 6/ PHP và cơ sở dữ liệu MySQL 7/ PHP và AJAX 8/ PHP và các hệ thống mã nguồn mở 9/ Triển khai ứng dụng PHP
3. PHẦN 2:
4. 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
5. 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?
6. 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:
7. b. Ví dụ HTML và CSS: . Thiết kế một trang hiển thị các layout như hình sau:
8. b. Ví dụ HTML và CSS: . Thiết kế một trang hiển thị các layout như hình sau:
9. c. HTML (table) và CSS (div): HTML CSS
10. c. HTML (table) và CSS (div):
11. c. HTML (table) và CSS (div):  Dùng table HTML Cot 1 Cot 2 Cot 3
12. c. HTML (table) và CSS (div):  Dùng div HTML Cot 1 Cot 2 Cot 3 div { float:left} #divTable1{ width:300px;height:25px; border: 2px solid red;} #divTable2{ width:100px; border: 2px solid blue; }
13. a. Cú pháp định nghĩa CSS cho một Selector SelectorName { property 1: value1; property 2: value2; property N: valueN; } Trong đó: . SelectorName: là tên các tag đã được định nghĩa trước trong HTML (tag , tag , ) 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 /* */
14. b. Ví dụ p { background-color:#CF9; text-indent:20px; text-align:justify; } Cascading Style Sheets is a fairly old technology as far as the Web is concerned. The first ideas about CSS were presented as early as 1994, and three major versions of the technology have been developed since then. Table 5-1 summarizes the version history of CSS
15. a. Inline Styles . Các thuộc tính style được nhúng trực tiếp trong các thẻ (tag) khi sử dụng. . Ví dụ: CSS Test
16. 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 của trang trước khi sử dụng. . Ví dụ: CSS Test
17. 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. . Ví dụ: @charset "utf-8"; /* CSS Document @import url("css/cssTestCSS.css"); File: cssTestCSS.css */ p {font-size: 1.5em; font-family: Tahoma; color: blue; background-color: yellow;} CSS Test em {font-size: 2em; color: green;}
18. 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) . Ví dụ: @charset "utf-8"; /* CSS Document File: cssTestCSS.css p {font-size: 1.5em; font-family: Tahoma; color: blue; background-color: yellow;} em {font-size: 2em; color: green;} CSS Test
19.  Độ ưu tiên của các phương pháp /* File: CSSImported.css */ p {color: blue;} @import url("CSSImported.css"); /* File: CSSLinked.css */ p {color: red;} p {color:green;} CSS Test 1 CSS Test 2
20.  Ưu điểm và khuyết điểm của các phương pháp ĐÁNH GIÁ INLINE EMBEDDED IMPORTED LINKED STYLES STYLES STYLES STYLES type=“text/css”> type="text/css"> href=“my.css" @import rel="stylesheet" Cú pháp ĐHCNTT p {color=red;} url(“my.css"); type="text/css" /> ĐHCNTT ĐHCNTT ĐHCNTT - Định nghĩa - Định nghĩa - Có thể áp dụng style đồng bộ nhanh nhanh cho một site. Ưu điểm - Dễ quản lý cho - Dễ quản lý - Thông tin Style được trình từng tag trong cho từng trang duyệt cache cải thiện tốc độ một trang duyệt web ở những lần sau. - Khó áp dụng - Khó áp dụng - Tối ưu tập tin *.css để cải đồng bộ cho đồng bộ cho các thiện tốc độ duyệt cho lần đầu Khuyết điểm từng tag trong trang tiên truy cập site. cùng một trang
21. 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 Selector khá đa dạng (xem phần CSS Selector trong tài liệu HTML and CSS - The Complete Reference 5th ed - T. Powell (McGraw-Hill, 2010) BBS)
22. b. Bảng phân loại các CSS Selector thông dụng LOẠI MÔ TẢ VÍ DỤ Định dạng được áp dụng cho tất h1{color:red} element cả các tag element trong tài liệu /*Tất cả các tag sẽ bị Web. định dạng màu chữ là red*/ Định dạng được áp dụng cho tất #test {color: green;} cả các tag có thuộc tính ID trong /* Tất cả các tag có thuộc tính #ID tài liệu Web id=“test” đều bị định dạng màu chữ là green */ Định dạng được áp dụng cho tất h3#contact {color: red;} element#ID cả các tag element có thuộc tính /* Tất cả các tag có thuộc ID trong tài liệu Web tính id=“contact” đều bị định dạng màu chữ là red*/
23. b. Bảng phân loại các CSS Selector thông dụng LOẠI MÔ TẢ VÍ DỤ .note {color: red;} Định dạng được áp dụng cho tất .class cả các tag có thuộc tính class /* Tất cả các tag có thuộc tính trong tài liệu Web class=“note” đều bị định dạng màu chữ là red*/ Định dạng được áp dụng cho tất h1.note {text-decoration: element.class cả các tag Element có thuộc tính underline;} class tương ứng /* Tất cả các tag có thuộc tính class=note sẽ bị định dạng gạch chân */ a:link {font-weight: bold;} a:link Định dạng được áp dụng cho các a:active {color: red;} a:active liên kết trong tài liệu Web a:visited {text-decoration: a:visited linethrough;}
24. c. Ví dụ Faculty of UIT p#HTTT{color:#06C;} p#MMT{color:#C00;} HỆ THỐNG THÔNG TIN - TS Nguyễn Đình Thuân - ThS Nguyễn Thị Kim Phụng MẠNG MÁY TÍNH - TS Đàm Quang Hồng Hải - TS Nguyễn Anh Tuấn
25. c. Ví dụ Faculty of UIT .HTTT{color:#06C;} .MMT{color:#C00;} HỆ THỐNG THÔNG TIN - TS Nguyễn Đình Thuân - ThS Nguyễn Thị Kim Phụng MẠNG MÁY TÍNH - TS Đàm Quang Hồng Hải - TS Nguyễn Anh Tuấn
26. ĐH CÔNG NGHỆ THÔNG TIN 26
27. 1. Phân biệt điểm giống nhau và khác nhau giữa CSS Selector #ID và CSS 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 họa một ví dụ tạo bảng mà thẻ làm được nhưng thẻ không làm được và ngược lại (nếu có)
28. ĐH CÔNG NGHỆ THÔNG TIN 28
29. . Họ tên: . Mã SV: . Email: 01 02 19 20 A B C D
30. Câu 1: CSS là viết tắt của cụm từ nào? A. Computer Style Sheets B. Creative Style Sheets C. Cascading Style Sheets D. Colorful Style Sheets
31. Câu 2: Chọn câu lệnh đúng để tham chiếu đến tập tin CSS có tên là mystyle.css? A. B. C. mystyle.css D. Tất cả đều đúng
32. Câu 3: Câu lệnh sau được khai báo trong phần nào của một trang HTML? A. Phần B. Dòng đầu tiên trong trang HTML C. Dòng cuối cùng trong trang HTML D. Phần
33. Câu 4: Thẻ (tag) HTML nào dùng để khai báo một Embedded Styles ? A. B. C. D. Cả A và B đều đúng
34. Câu 5: Thuộc tính HTML nào dùng để khai báo một Inline Styles? A. B. style C. class D. styles
35. Câu 6: Câu lệnh nào sau đây là đúng cú pháp của CSS? A. body {color: black} B. {body:color=black(body} C. body:color=black D. {body;color:black}
36. Câu 7: Câu lệnh ghi chcủa CSS? A. /* ghi chú */ B. ' ghi chú C. // ghi chú // D. // ghi chú
37. Câu 8: Thuộc tính dùng để thay đổi màu nền trong CSS? A. color: B. bgcolor: C. background-color: D. color-background:
38. Câu 9: Câu lệnh nào sau đây dùng để định dạng màu nền cho tất cả các thẻ có trong trang HTML? A. h1 {background-color:red} B. h1 {background-color:#FFFFFF} C. h1.all {background-color:#FFFFFF} D. Cả A và B đều đúng
39. Câu 10: Câu lệnh nào sau đây dùng thay đổi màu chữ trong CSS? A. text-color: B. color: C. text-color: D. fgcolor:
40. Câu 11: Câu lệnh nào sau đây dùng thay đổi kích thước chữ trong CSS? A. text-size: B. font-style: C. text-style: D. font-size:
41. 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ẻ có trong trang HTML? A. p {text-size:bold} B. C. p {font-weight:bold} D.
42. Câu 13: Câu lệnh nào sau đây dùng để định dạng liên kết không có underline trong CSS? A. a {text-decoration:none} B. a {underline:none} C. a {decoration:no underline} D. <a {text-decoration:no underline}
43. 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")? A. text-transform:uppercase B. text-transform:capital C. text-transform:capitalize D. Không tồn tại
44. Câu 15: Thuộc tính nào trong CSS dùng để định dạng kiểu chữ? A. font= B. font-family: C. Cả A và B đều đúng D. Cả A và B đều sai
45. Câu 16: Câu lệnh nào sau đây dùng để định dạng chữ đậm cho một thẻ có trong trang HTML? A. h1 {font-weight:bold} B. C. Cả A và B đều đúng} D. Tất cả đều sai
46. 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 A. border-width:5px 20px 10px 1px B. border-width:10px 20px 5px 1px C. border-width:10px 5px 20px 1px D. border-width:10px 1px 5px 20px
47. Câu 18 Trong CSS, chọn phát biểu đúng cho định dạng sau padding: 10px 5px; A. Gán giá trị padding cho phần top và bottom = 10px và phần left và right = 5px B. Gán giá trị padding cho phần top và bottom = 5px và phần left và right = 10px C. Câu lệnh sai cú pháp D. Tất cả đều sai
48. 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
49. Câu 20 Trong CSS, chọn câu lệnh đúng A. Hello B. Hello C. Cả A và B đều đúng D. Cả A và B đều sai