zunia.vn

Tuyển sinh 2024 dành cho Gen-Z

zunia.vn

» Công Nghệ Thông Tin

» Quản trị Web

Bài giảng Lập trình web và ứng dụng: CSS - Cascading Style Sheet - Phan Thị Kim Loan

Chia sẻ: Lê Song Nhật Quyền | Ngày: | Loại File: PDF | Số trang:22

Báo xấu

19
lượt xem 4
download

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

Bài giảng Lập trình web 1: CSS - Cascading Style Sheet cung cấp cho người đọc những kiến thức như: Giới thiệu CSS; Định nghĩa Style và các đơ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. Mời các bạn cùng tham khảo!

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

CÓ THỂ BẠN MUỐN DOWNLOAD

THÔNG TIN

TRỢ GIÚP

HỖ TRỢ KHÁCH HÀNG

Theo dõi chúng tôi

Chịu trách nhiệm nội dung:

Nguyễn Công Hà - Giám đốc Công ty TNHH TÀI LIỆU TRỰC TUYẾN VI NA

LIÊN HỆ

Địa chỉ: P402, 54A Nơ Trang Long, Phường 14, Q.Bình Thạnh, TP.HCM

Hotline: 093 303 0098

Email: support@tailieu.vn

Giấy phép Mạng Xã Hội số: 670/GP-BTTTT cấp ngày 30/11/2015 Copyright © 2022-2032 TaiLieu.VN. All rights reserved.