Bài giảng Phát triển ứng dụng web 1: CSS - ĐH Sài Gòn

Bài giảng "Phát triển ứng dụng web 1: CSS" cung cấp cho người học các kiến thức: Khái niệm và mục đích Form, các đối tượng Form Fields, phương thức GET/POST, Tag Marquee. Mời các bạn cùng tham khảo nội dung chi tiết.
Nội dung trích xuất từ tài liệu:
Bài giảng Phát triển ứng dụng web 1: CSS - ĐH Sài Gòn 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 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 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 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 Định nghĩa Style Kiểu 1 Kiểu 2 … propertyN:valueN; } ……… 6 – CSS 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 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 Measurement Units  Relative length: em, ex, ... • em and ex ­ relative to the parent element  • Ex: em  • Ex: ex • CSS:  6 – CSS 8 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 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 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 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 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 Phân loại CSS – External Style Sheet File HTML File .CSS Browser 6 – CSS 14 CSS – so sánh và đánh giá 6 – CSS 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 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 Phạm vi áp dụng CSS (selector)  Ví dụ:   Browse   6 – CSS 18 Các loại selector 6 – CSS 19 Ví dụ phạm vi sử dụng các Selector ­ Elements 6 – CSS 20 ...