Bài giảng Phát triển ứng dụng web bằng PHP - Phần 3: HTML và CSS - Dương Khai Phong

• 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