Bài giảng lập trình web và ứng dụng css cascading style sheet phan thị kim loan

10/11/23 Phát triển ứng dụng web Đại Học Sài Gòn – Khoa CNTT CSS - Cascading Style Sheet GV: Phan Thị Kim Loan – CSS Nội dung buổi học trước Khái niệm mục đích Form Các đối tượng Form Fields Phương thức GET/POST Tag Marquee – CSS 2 10/11/23 Nội dung Giới thiệu CSS Định nghĩa Style đơn vị tính Phân loại CSS Phạm vi áp dụng CSS (selector) Một số tag HTML dùng riêng CSS Thực hành – CSS Giới thiệu CSS § CSS = Cascading Style Sheet § Dùng định dạng thành phần trang web § Sử dụng tương tự định dạng template § Thống cách thể tái sử dụng cho nhiều webpage website § Có thể thay đổi thuộc tính trang site nhanh chóng linh hoạt thay đổi cách thể – …… – CSS 4 10/11/23 Định nghĩa Style Kiểu Kiểu … propertyN:valueN; } ……… – CSS Định nghĩa Style Vd kiểu SGU font-family: Verdana, sans-serif; } SGU Ghi Ví dụ Giống ghi trongC++ Sử dung /* Ghi */ – CSS 6 10/11/23 Measurement units § Absolute length: inch, cm, point … § Relative length: pixel, em, ex, § pixel (px): relative to the screen resolution • Ex: LCD 14’’2 (1024x768) DPI = 96 • è có 96 pixel inch Đ Point: 1pt = 1/72 inch ã ố cú pixel = 0.75pt Font-size = 16pt – CSS Measurement Units § Relative length: em, ex, • em and ex - relative to the parent element • Ex: em • Ex: ex • CSS: – CSS 8 10/11/23 Phân loại CSS § Gồm lại CSS: Inline Style Sheet Embedding Style Sheet (Internal SS) External Style Sheet – CSS Phân loại CSS § Inline style sheet: dùng thuộc tính style cho thẻ HTML § Embedded style sheet: định nghĩa định dạng thẻ phần webpage § External style sheet: định nghĩa định dạng file css webpage link tới file css (trong phần ) – CSS 10 10 10/11/23 Phân loại CSS – Inline Style Sheet § Định nghĩa Style thuộc tính style tag HTML § Ví dụ: – CSS 11 11 Phân loại CSS – Embedding Style Sheet § Định nghĩa định dạng thẻ , đặt phần trang HTML § Ví dụ: – CSS 12 12 10/11/23 Phân loại CSS – External Style Sheet § Định nghĩa style lưu file CSS page liên kết tới file CSS (link đặt ) § Định nghĩa style theo cú pháp kiểu § Tạo liên kết đến file CSS Liên kết tag Link LK tag style với @import URL 13 – CSS 13 Phân loại CSS – External Style Sheet File HTML File CSS – CSS Browser 14 14 10/11/23 CSS – so sánh đánh giá 15 – CSS 15 CSS – độ ưu tiên Thứ tự ưu tiên áp dụng định dạng sử dụng loại CSS (độ ưu tiên giảm dần) Inline Style Sheet Embedding Style Sheet External Style Sheet Browser Default – CSS 16 16 10/11/23 Phạm vi áp dụng CSS (selector) § Selector : tên style tương ứng với thành phần áp dụng style § Ví dụ: Properties & values h1 { color:#006; Selector font:28px "arial black"; margin-top:0px; padding-top:0px; } 17 – CSS 17 Phạm vi áp dụng CSS (selector) § Ví dụ: § Browse – CSS 18 18 10/11/23 Các loại selector – CSS 19 19 Ví dụ phạm vi sử dụng Selector - Elements – CSS 20 20 10 10/11/23 Ví dụ phạm vi sử dụng Selector - #ID – CSS 21 21 Ví dụ phạm vi sử dụng Selector - CLASS – CSS 22 22 11 10/11/23 Ví dụ Các Selector - Element.CLASS 23 – CSS 23 Ví dụ Các Selector - Contextual – CSS 24 24 12 10/11/23 Ví dụ Các Selector – Others 25 – CSS 25 Một số tag HTML dùng riêng CSS CSS Positioning and Multi-Column Layouts HTML Tag §… §… – CSS 26 26 13 10/11/23 Một số tag HTML dùng riêng CSS Code View Browser View Design View 27 – CSS 27 Một số tag HTML dùng riêng CSS Demonstration Basic Three-Column Layout • position:static, position: relative, position: absolute and position: float – CSS 28 28 14 10/11/23 Một số tag HTML dùng riêng CSS Demonstration Basic Three-Column Layout 29 – CSS 29 Tham Khảo http://wufoo.com/gallery/ § Tìm hiểu thêm: Designing without table with CSS Google – CSS 30 30 15 10/11/23 Bài thực hành Đại Học Sài Gòn – Khoa CNTT CSS - Cascading Style Sheet GV: Phan Thị Kim Loan 31 – CSS 31 Bài thực hành § Hồn tất danh sách đăng ký đề tài § Thực hành CSS § Làm lại tập trước, sử dụng CSS – CSS 32 32 16 10/11/23 CSS § CSS Linking and Setup § 2.Understanding_levels_of_inheritance § 33 – CSS 33 CSS § CSS Linking and Setup: § 01-body-style.html + external.css – CSS 34 34 17 10/11/23 CSS § Understanding_levels_of_inheritance: § 02-inheritance.html + external.css § () 35 – CSS 35 CSS § 03-levels § 03-levels.html + external.css – CSS 36 36 18 10/11/23 CSS § 04.span and div § 04-span-div.html + external.css span div 37 – CSS 37 CSS § 05.selectors § 05-selectors.html + external.css – CSS 38 38 19 10/11/23 CSS § 05.selectors 39 – CSS 39 CSS § 05.selectors – CSS 40 40 20