THIẾT KẾ WEB là hoạt động trải rộng từ khâu thu thập ý tưởng, yêu cầu của khách hàng tới việc dựng đề án, bản thảo, tiến hành thiết kế giao diện đồ hoạ, tổ chức thực hiện thiết lập, xây dựng cơ sở dữ liệu
AMBIENT/
Chủ đề:
Nội dung Text: THIẾT KẾ WEB - CSS –Cascading Style Sheet
- ĐẠI HỌC SÀI GÒN – KHOA CNTT
THIẾT KẾ WEB
THIẾT KẾ VÀ LẬP TRÌNH WEB
CSS – Cascading Style Sheet
GV: Tr ần Đình Nghĩa
tdnghia1977@gmail.com
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
THIẾT KẾ VÀ LẬP TRÌNH WEB
4. Tag Marquee
2
- Nội dung
1. Giới thiệu CSS
2. Định nghĩa Style
3. Phân loại CSS
4. Phạm vi áp dụng CSS (selector)
THIẾT KẾ VÀ LẬP TRÌNH WEB
5. Một số tag HTML dùng riêng CSS
6. Thực hành
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.
THIẾT KẾ VÀ LẬP TRÌNH WEB
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.
……
4
- Định nghĩa Style
Phân biệt chữ hoa, chữ thường
Kiểu 1 Kiểu 2
… propertyN:valueN;
}
………
5
- Định nghĩa Style
Vd kiểu 1 Vd kiểu 2
SGU font-family: Verdana, sans-serif; }
SGU
THIẾT KẾ VÀ LẬP TRÌNH WEB
Ghi chú Ví dụ
Giống ghi chú
trongC++
Sử dung
/* Ghi chú */
6
- Phân loại CSS
Gồm 3 loại CSS:
Inline Style Sheet: dùng thuộc tính
style cho từng thẻ HTML
Embedding Style Sheet: định nghĩa
các định dạng trong thẻ
trong phần của webpage
THIẾT KẾ VÀ LẬP TRÌNH WEB
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
)
7
- Phân loại CSS – Inline Style Sheet
Định nghĩa Style trong thuộc tính style
của từng tag HTML
THIẾT KẾ VÀ LẬP TRÌNH WEB
8
- 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
THIẾT KẾ VÀ LẬP TRÌNH WEB
9
- 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
THIẾT KẾ VÀ LẬP TRÌNH WEB
Liên kết bằng tag Link
LK bằng tag style với @import URL
10
- Phân loại CSS – External Style Sheet
File HTML
THIẾT KẾ VÀ LẬP TRÌNH WEB
Browser
File .CSS 11
- CSS – so sánh và đánh giá
THIẾT KẾ VÀ LẬP TRÌNH WEB
12
- 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)
Inline Style Sheet
Embedding Style Sheet
THIẾT KẾ VÀ LẬP TRÌNH WEB
External Style Sheet
Browser Default
13
- 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;
font:28px "arial black";
THIẾT KẾ VÀ LẬP TRÌNH WEB
Selector
margin-top:0px;
padding-top:0px;
}
14
- Phạm vi áp dụng CSS (selector)
THIẾT KẾ VÀ LẬP TRÌNH WEB
Browse
15
- THIẾT KẾ VÀ LẬP TRÌNH WEB Các loại selector
16
- Ví dụ phạm vi sử dụng các Selector - Elements
THIẾT KẾ VÀ LẬP TRÌNH WEB
17
- Ví dụ phạm vi sử dụng các Selector - #ID
THIẾT KẾ VÀ LẬP TRÌNH WEB
18
- Ví dụ phạm vi sử dụng các Selector - .CLASS
THIẾT KẾ VÀ LẬP TRÌNH WEB
19
- Ví dụ Các Selector - Element.CLASS
THIẾT KẾ VÀ LẬP TRÌNH WEB
20
Thêm vào BST
Báo xấu
Download
Vui lòng tải xuống để xem tài liệu đầy đủ
