Bài giảng Phát triển ứng dụng Web bằng PHP: Phần 2(2) - Dương Khai Phong

Chia sẻ: Năm Tháng Tĩnh Lặng | Ngày: | Loại File: PDF | Số trang:49

Thêm vào BST

Báo xấu

146
lượt xem 14
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Bài giảng Phát triển ứng dụng Web bằng PHP - Phần 2(2) giới thiệu về HTML và CSS. Phần này trình bày các nội dung chính sau: Giới thiệu chung về HTML và CSS, định nghĩa CSS, phương pháp sử dụng CSS, phân loại các CSS Selector, minh hoạ CSS. Mời các bạn cùng tham khảo để nắm bắt các nội dung chi tiết.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Bài giảng Phát triển ứng dụng Web bằng PHP: Phần 2(2) - Dương Khai Phong

• GVHD: Dương Khai Phong • Email: khaiphong@gmail.com • Website: http://khaiphong.tk • http://course.uit.edu.vn
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 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ụ: … 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ụ: … 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 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;} 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 Đ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