Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 30 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
30
Dung lượng
4,54 MB
Nội dung
THIẾT KẾ VÀ LẬP TRÌNH WEB 1 THIẾT KẾ WEB CSS – Cascading Style Sheet ĐẠI HỌC SÀI GÒN – KHOA CNTT GV: Trần Đình Nghĩa tdnghia1977@gmail.com THIẾT KẾ VÀ LẬP TRÌNH WEB 2 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 THIẾT KẾ VÀ LẬP TRÌNH WEB 3 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) 5. Một số tag HTML dùng riêng CSS 6. Thực hành THIẾT KẾ VÀ LẬP TRÌNH WEB 4 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. …… THIẾT KẾ VÀ LẬP TRÌNH WEB 5 Định nghĩa Style Phân biệt chữ hoa, chữ thường Kiểu 1 Kiểu 2 <tag style= “property1:value1; property2:value2; ……… propertyN:valueN;”>… </tag> SelectorName{ property1:value1; property2:value2; ……… propertyN:valueN; } <tag class = “SelectorName”> ……… </tag> THIẾT KẾ VÀ LẬP TRÌNH WEB 6 Định nghĩa Style Vd kiểu 1 Vd kiểu 2 <h1 style=“ color : blue; font-family : Arial;”> SGU </h1> .TieuDe1 { color: red; font-family: Verdana, sans-serif; } <h1 class=“TieuDe1”> SGU </h1> Ghi chú Ví dụ Giống ghi chú trongC++ Sử dung /* Ghi chú */ THIẾT KẾ VÀ LẬP TRÌNH WEB 7 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ẻ <style> trong phần <head> 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 <head>) THIẾT KẾ VÀ LẬP TRÌNH WEB 8 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 9 Phân loại CSS – Embedding Style Sheet Định nghĩa các định dạng trong thẻ <style>, đặt trong phần <head> của trang HTML THIẾT KẾ VÀ LẬP TRÌNH WEB 10 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 <head>) Đị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 [...]... loại CSS – External Style Sheet THIẾT KẾ VÀ LẬP TRÌNH WEB File HTML File CSS Browser 11 THIẾT KẾ VÀ LẬP TRÌNH WEB CSS – so sánh và đánh giá 12 THIẾT KẾ VÀ LẬP TRÌNH WEB 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 External Style Sheet Browser Default 13 THIẾT KẾ VÀ LẬP TRÌNH WEB Phạm vi áp dụng CSS. .. phạm vi sử dụng các Selector - #ID 18 THIẾT KẾ VÀ LẬP TRÌNH WEB Ví dụ phạm vi sử dụng các Selector - CLASS 19 THIẾT KẾ VÀ LẬP TRÌNH WEB Ví dụ Các Selector - Element.CLASS 20 THIẾT KẾ VÀ LẬP TRÌNH WEB Ví dụ Các Selector - Contextual 21 THIẾT KẾ VÀ LẬP TRÌNH WEB Ví dụ Các Selector – Others 22 Một số tag HTML dùng riêng CSS CSS Positioning and THIẾT KẾ VÀ LẬP TRÌNH WEB Multi-Column Layouts HTML Tag …... THIẾT KẾ VÀ LẬP TRÌNH WEB • position:static, position: relative, position: absolute and position: float 26 Một số tag HTML dùng riêng CSS Demonstration Basic Three-Column Layout THIẾT KẾ VÀ LẬP TRÌNH WEB 27 Tham Khảo THIẾT KẾ VÀ LẬP TRÌNH WEB Tìm hiểu thêm: Designing without table with CSS Google 28 ĐẠI HỌC SÀI GÒN – KHOA CNTT THIẾT KẾ VÀ LẬP TRÌNH WEB THIẾT KẾ WEB THỰC HÀNH CSS – Cascading Style. .. 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"; Selector margin-top:0px; padding-top:0px; } 14 THIẾT KẾ VÀ LẬP TRÌNH WEB Phạm vi áp dụng CSS (selector) Browse 15 THIẾT KẾ VÀ LẬP TRÌNH WEB Các loại selector 16 THIẾT KẾ VÀ LẬP TRÌNH WEB Ví dụ phạm vi sử dụng các Selector - Elements 17 THIẾT KẾ VÀ LẬP TRÌNH WEB Ví... riêng CSS Code View THIẾT KẾ VÀ LẬP TRÌNH WEB Browser View Design View 24 Khác biệt giữa và : thẻ trung hòa, bản thân thẻ không tạo bất kỳ thay đổi thấy được nào THIẾT KẾ VÀ LẬP TRÌNH WEB Dùng css kết hợp để định dạng phần tử theo ý muốn : dùng chia trang web thành những phân đoạn khác nhau 25 Một số tag HTML dùng riêng CSS Demonstration Basic Three-Column Layout THIẾT... thêm: Designing without table with CSS Google 28 ĐẠI HỌC SÀI GÒN – KHOA CNTT THIẾT KẾ VÀ LẬP TRÌNH WEB THIẾT KẾ WEB THỰC HÀNH CSS – Cascading Style Sheet 29 Bài thực hành Thực hành CSS THIẾT KẾ VÀ LẬP TRÌNH WEB Làm lại các bài tập trước, sử dụng CSS Hướng dẫn tìm kiếm và sử dụng Templates cho Đồ án cuối kỳ 30 . 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 THIẾT KẾ VÀ LẬP TRÌNH WEB 11 Phân loại CSS – External Style Sheet Browser File .CSS File HTML THIẾT KẾ VÀ LẬP. THIẾT KẾ VÀ LẬP TRÌNH WEB 1 THIẾT KẾ WEB CSS – Cascading Style Sheet ĐẠI HỌC SÀI GÒN – KHOA CNTT GV: Trần Đình Nghĩa tdnghia1977@gmail.com THIẾT KẾ VÀ LẬP TRÌNH WEB 2 Nội dung. 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 <head>) THIẾT KẾ VÀ LẬP TRÌNH WEB 8 Phân loại CSS – Inline Style