Phần 2: HTML và CSS

• GVHD: Dương Khai Phong • Email: khaiphong@gmail.com • Website: • 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 PHẦN 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 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? 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: b. Ví dụ HTML và CSS:  Thiết kế một trang hiển thị các layout như hình sau: b. Ví dụ HTML và CSS:  Thiết kế một trang hiển thị các layout như hình sau: c. HTML (table) và CSS (div): HTML CSS c. HTML (table) và CSS (div): c. HTML (table) và CSS (div): <table cellpadding="0" cellspacing="0" border="1" bordercolor="#FF0000" height="30px"> <table cellpadding="0" cellspacing="0" border="1" bordercolor="#0000FF"> Cot 1 Cot 2 Cot 3  Dùng table HTML c. HTML (table) và CSS (div): 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; }  Dùng div HTML 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 /* … */ 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 … 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ụ: … <h1 style="font-size: 48px; font-family:Arial, Helvetica, sans-serif;color: green;"> CSS Test 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ụ: … <!-- p {font-size: 1.5em; font-family: Tahoma; color: blue; background-color: yellow;} em {font-size: 2em; color: green;} --> CSS Test 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ụ: … @import url("css/cssTestCSS.css"); CSS Test @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;} 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ụ: … <link href="css/cssTestCSS.css" rel="stylesheet" type="text/css" /> CSS Test @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;}  Độ ưu tiên của các phương pháp … @import url("CSSImported.css"); p {color:green;} <link href="CSSLinked.css" rel="stylesheet" type="text/css" /> CSS Test 1 CSS Test 2 /* File: CSSImported.css */ p {color: blue;} /* File: CSSLinked.css */ p {color: red;}  Ưu điểm và khuyết điểm của các phương pháp ĐÁNH GIÁ INLINE STYLES EMBEDDED STYLES IMPORTED STYLES LINKED STYLES Cú pháp Ưu điểm Khuyết điểm <p style=“color:red;”> ĐHCNTT <style type=“text/css”> p {color=red;} ĐHCNTT <style type="text/css"> @import url(“my.css"); ĐHCNTT <link href=“my.css" rel="stylesheet" type="text/css" /> ĐHCNTT - Định nghĩa nhanh - Dễ quản lý cho từng tag trong một trang - Định nghĩa nhanh - 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. - 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. 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) 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 cả các tag element trong tài liệu Web. h1{color:red} /*Tất cả các tag sẽ bị định dạng màu chữ là red*/ Đị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 */ element #ID element#ID Định dạng được áp dụng cho tất cả 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 có thuộc tính id=“contact” đều bị định dạng màu chữ là red*/ 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 cả các tag Element có thuộc tính class tương ứng h1.note {text-decoration: underline;} /* Tất cả các tag có thuộc tính class=note sẽ bị định dạng gạch chân */ Định dạng được áp dụng cho các liên kết trong tài liệu Web a:link {font-weight: bold;} a:active {color: red;} a:visited {text-decoration: linethrough;} element.class a:link a:active a:visited .class Định dạng được áp dụng cho tất cả 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*/ … 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 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 c. Ví dụ ĐH CÔNG NGHỆ THÔNG TIN 26 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ó) ĐH CÔNG NGHỆ THÔNG TIN 28  Họ tên:  Mã SV:  Email: 01 02 … 19 20 A B C D 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 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. <link rel="stylesheet" type="text/css" href="mystyle.css"> C. mystyle.css D. Tất cả đều đúng Câu 3: Câu lệnh sau được khai báo trong phần nào của một trang HTML? <link rel="stylesheet" type="text/css" href="mystyle.css"> 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 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 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 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} Câu 7: Câu lệnh ghi chcủa CSS? A. /* ghi chú */ B. ' ghi chú C. // ghi chú // D. // ghi chú 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: 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 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: 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: 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. 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} 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 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 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 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 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 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 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