Thiết kế web css – cascading style sheet

TH IẾ T K Ế V À L Ậ P T R ÌN H W E B 1 THIẾT KẾ WEB CSS – Cascading Style Sheet ĐẠI HỌC SÀI GÒN – KHOA CNTT GV: Trần Đình Nghĩa [email protected] TH IẾ T K Ế V À L Ậ P T R ÌN H W E B 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 TH IẾ T K Ế V À L Ậ P T R ÌN H W E B 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 TH IẾ T K Ế V À L Ậ P T R ÌN H W E B 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.  …… TH IẾ T K Ế V À L Ậ P T R ÌN H W E B 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;”>… SelectorName{ property1:value1; property2:value2; ……… propertyN:valueN; } <tag class = “SelectorName”> ……… TH IẾ T K Ế V À L Ậ P T R ÌN H W E B 6 Định nghĩa Style Vd kiểu 1 Vd kiểu 2 <h1 style=“ color : blue; font-family : Arial;”> SGU .TieuDe1 { color: red; font-family: Verdana, sans-serif; } SGU Ghi chú Ví dụ Giống ghi chú trongC++ Sử dung /* Ghi chú */ TH IẾ T K Ế V À L Ậ P T R ÌN H W E B 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ẻ 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 ) TH IẾ T K Ế V À L Ậ P T R ÌN H W E B 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 TH IẾ T K Ế V À L Ậ P T R ÌN H W E B 9 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 TH IẾ T K Ế V À L Ậ P T R ÌN H W E B 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 )  Đị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 TH IẾ T K Ế V À L Ậ P T R ÌN H W E B 11 Phân loại CSS – External Style Sheet Browser File .CSS File HTML TH IẾ T K Ế V À L Ậ P T R ÌN H W E B 12 CSS – so sánh và đánh giá TH IẾ T K Ế V À L Ậ P T R ÌN H W E B 13 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 TH IẾ T K Ế V À L Ậ P T R ÌN H W E B 14 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ụ: h1 { color:#006; font:28px "arial black"; margin-top:0px; padding-top:0px; } Properties & values Selector TH IẾ T K Ế V À L Ậ P T R ÌN H W E B 15 Phạm vi áp dụng CSS (selector) Browse  TH IẾ T K Ế V À L Ậ P T R ÌN H W E B 16 Các loại selector TH IẾ T K Ế V À L Ậ P T R ÌN H W E B 17 Ví dụ phạm vi sử dụng các Selector - Elements TH IẾ T K Ế V À L Ậ P T R ÌN H W E B 18 Ví dụ phạm vi sử dụng các Selector - #ID TH IẾ T K Ế V À L Ậ P T R ÌN H W E B 19 Ví dụ phạm vi sử dụng các Selector - .CLASS TH IẾ T K Ế V À L Ậ P T R ÌN H W E B 20 Ví dụ Các Selector - Element.CLASS TH IẾ T K Ế V À L Ậ P T R ÌN H W E B 21 Ví dụ Các Selector - Contextual TH IẾ T K Ế V À L Ậ P T R ÌN H W E B 22 Ví dụ Các Selector – Others TH IẾ T K Ế V À L Ậ P T R ÌN H W E B 23 Một số tag HTML dùng riêng CSS CSS Positioning and Multi-Column Layouts HTML Tag … … TH IẾ T K Ế V À L Ậ P T R ÌN H W E B 24 Một số tag HTML dùng riêng CSS Code View Design View Browser View TH IẾ T K Ế V À L Ậ P T R ÌN H W E B 25 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  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 TH IẾ T K Ế V À L Ậ P T R ÌN H W E B 26 Một số tag HTML dùng riêng CSS  Demonstration Basic Three-Column Layout • position:static, position: relative, position: absolute and position: float. TH IẾ T K Ế V À L Ậ P T R ÌN H W E B 27 Một số tag HTML dùng riêng CSS  Demonstration Basic Three-Column Layout TH IẾ T K Ế V À L Ậ P T R ÌN H W E B 28 Tham Khảo  Tìm hiểu thêm: Designing without table with CSS  Google TH IẾ T K Ế V À L Ậ P T R ÌN H W E B 29 THIẾT KẾ WEB THỰC HÀNH CSS – Cascading Style Sheet ĐẠI HỌC SÀI GÒN – KHOA CNTT TH IẾ T K Ế V À L Ậ P T R ÌN H W E B 30 Bài thực hành  Thực hành CSS  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ỳ.