Bài giảng lập trình PHP chương 3 dương khai phong

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (3.47 MB, 49 trang )

• GVHD: Dương Khai Phong
• Email:
• 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):
 Dùng table HTML
bordercolor="#FF0000" height="30px">
<tr>
<td width="300">

border="1" bordercolor="#0000FF">
<tr>
<td width="100">Cot 1</td>
<td width="100">Cot 2</td>
</tr>
</table>
</td>
<td width="300">Cot 3</td>
</tr>
</table>

c. HTML (table) và CSS (div):
 Dùng div HTML
<div id="divTable1">
<div id="divTable2">Cot 1</div>
<div id="divTable2">Cot 2</div>
</div>
<div id="divTable1">Cot 3</div>

, 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 /* … */

b. Ví dụ
…
<style type="text/css">
p{
background-color:#CF9;
text-indent:20px;
text-align:justify;
}
</style>
<body>

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

</body>
…

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ụ:
…
<body>

CSS Test

</body>
</html>

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">
color: blue; background-color: yellow;}
em {font-size: 2em; color: green;}
-->
</style>
</head>
<body>

CSS Test

</body>
</html>

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ụ:
…
<style type="text/css">
@import url("css/cssTestCSS.css");
</style>
</head>
<body>

CSS Test

</body>
</html>

@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)
@charset "utf-8";
 Ví dụ:
…
rel="stylesheet" type="text/css" />

</head>
<body>

CSS Test

</body>
</html>

/* 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
…
<style type="text/css">
@import url("CSSImported.css");
</style>
<style type="text/css">
p {color:green;}
</style>
type="text/css" />
</head>
<body>

CSS Test 1

CSS Test 2

</body>
</html>

/* 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Á

Cú pháp

INLINE
STYLES

EMBEDDED
STYLES

IMPORTED
STYLES

style=“color:red;”>
ĐHCNTT

type=“text/css”>
p {color=red;}
</style>

ĐHCNTT

type="text/css">
@import
url(“my.css");
</style>

ĐHCNTT

LINKED
STYLES
href=“my.css"
rel="stylesheet"
type="text/css" />

Đ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 độ
duyệt web ở những lần sau.

một trang
- 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
element

#ID

element#ID

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