1. Trang chủ
  2. » Công Nghệ Thông Tin

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

22 6 0

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề CSS - Cascading Style Sheet
Người hướng dẫn GV: Phan Thị Kim Loan
Trường học Đại Học Sài Gòn
Chuyên ngành Khoa CNTT
Thể loại bài giảng
Năm xuất bản 2023
Thành phố Sài Gòn
Định dạng
Số trang 22
Dung lượng 0,94 MB

Nội dung

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 10/11/23 CSS § 05.selectors 41 – CSS 41 CSS § 06.Units § 06-units.html + external.css – CSS 42 42 21 10/11/23 Thank you ! kimloanpt@gmail.com – CSS GV: Phan Thị Kim Loan 43 43 22

Ngày đăng: 23/12/2023, 10:36