Bài giảng Lập trình PHP: Chương 3 - Dương Khai Phong

Bài giảng Lập trình PHP: Chương 3 HTML và CSS nhằm trình bày về các nội dung định nghĩa CSS, phương pháp sử dụng CSS, phân loại các CSS Selector và minh hoạ CSS, thay đổi thuộc tính từng trang hoặc cả site nhanh chóng...cùng tìm hiểu bài giảng để hiểu sâu hơn về ngôn ngữ HTML và CSS.
Nội dung trích xuất từ tài liệu:
Bài giảng Lập trình PHP: Chương 3 - Dương Khai Phong• GVHD: Dương Khai Phong• Email: khaiphong@gmail.com• Website: http://khaiphong.tk• http://course.uit.edu.vn1/ Giới thiệu tổng quan Web2/ Ngôn ngữ HTML và JavaScript3/ Ngôn ngữ PHP căn bản4/ Các đối tượng trong PHP5/ PHP và hướng đối tượng6/ PHP và cơ sở dữ liệu MySQL7/ PHP và AJAX8/ PHP và các hệ thống mã nguồn mở9/ Triển khai ứng dụng PHPPHẦN 2:1. Giới thiệu2. Định nghĩa CSS3. Phương pháp sử dụng CSS4. Phân loại các CSS Selector5. Minh hoạ CSSa. 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 CSSc. 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 oldtechnology as far as the Web is concerned. Thefirst ideas about CSS were presented as early as1994, and three major versions of thetechnology have been developed since then.Table 5-1 summarizes the version history ofCSS …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 Testb. 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 Testc. 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 ...