Phát triển ứng dụng Web bằng PHP - Phần 2: HTML và CSS

table) và CSS (div): 
c. HTML (table) và CSS (div): 
  Dùng table HTML 
 <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 
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; } 
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ụ: 
 … @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;} 
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 
 <link href="css/cssTestCSS.css" */ 
 rel="stylesheet" type="text/css" /> p {font-size: 1.5em; font-family: Tahoma; 
 color: blue; background-color: yellow;} 
 em {font-size: 2em; color: green;} 
 CSS Test 
 Độ ư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;} 
 <link href="CSSLinked.css" rel="stylesheet" 
 type="text/css" /> 
 CSS Test 1 
 CSS Test 2 
 Ư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 
 <p <style <style <link 
 style=“color:red;”> 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 
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 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*/ 
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;} 
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 
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 
Đ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