Slide thiết kế lập trình chương 3 ngôn ngữ

ĐẠI HỌC QUỐC GIA TP.HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN KHAO CÔNG NGHỆ THÔNG TIN BỘ MƠN CƠNG NGHỆ PHẦN MỀM Bài  03: Ngơn Ngữ CSS CuuDuongThanCong.com https://fb.com/tailieudientucntt Nội  dung                   Giới                t    hiệu           CSS                 Định                n      ghĩa         Style                 Seletor                                             Sử      d      ụng                     phân  loại  CSS   tầm  tác  động     Ngôn  ngữ  CSS               CuuDuongThanCong.com https://fb.com/tailieudientucntt                                         Giới  thiệu   Ngôn  ngữ  CSS   Ngôn  ngữ  CSS               CuuDuongThanCong.com https://fb.com/tailieudientucntt CuuDuongThanCong.com https://fb.com/tailieudientucntt CuuDuongThanCong.com https://fb.com/tailieudientucntt ? CuuDuongThanCong.com https://fb.com/tailieudientucntt Giới thiệu CSS !  ! ! ! ! CSS  =  Casscading  Style  Sheets   Dùng   để   mô   tả   cách   hiển   thị     thành   phần    trang  WEB   Sử  dụng  tương  tự  như  dạng  TEMPLATE   Có  thể  sử  dụng  lại  cho  các  trang  web  khác   Có  thể  thay  đổi  thuộc  Unh  từng  trang  hoặc  cả   site  nhanh  chóng  (cascading)   3/9/13     CuuDuongThanCong.com https://fb.com/tailieudientucntt Không sử dụng CSS Giới  thiệu  về  CSS  –  Ví  dụ   Có sử dụng CSS CuuDuongThanCong.com https://fb.com/tailieudientucntt                                           Định  nghĩa   Style  –  Kiểu   Ngôn  ngữ  CSS               CuuDuongThanCong.com https://fb.com/tailieudientucntt Định nghĩa Style ! Kiểu  1   … ! Kiểu  2   SelectorName { property1:value1; property2:value2; ……… propertyN:valueN;} ……… Ví  dụ:   Ví  dụ:    DHKHTN     TieuDe1  {   color:  red;     font-­‐family:  Verdana,  sans-­‐serif;  }    DHKHTN     CuuDuongThanCong.com https://fb.com/tailieudientucntt 10   Sử dụng Phân loại CSS – Độ ưu tiên !  Thứ  tự  ưu  ’ên  áp  dụng  định  dạng  khi  sử  dụng    loại  CSS  (độ  ưu  ’ên  giảm  dần)  :   1.  2.  3.  4.  Inline  Style  Sheet   Embedding  Style  Sheet   External  Style  Sheet   Browser  Default   CuuDuongThanCong.com https://fb.com/tailieudientucntt CuuDuongThanCong.com https://fb.com/tailieudientucntt                                         Selector   Tầm  tác  động   Ngôn  ngữ  CSS               CuuDuongThanCong.com https://fb.com/tailieudientucntt Selector !  !  Là  tên  1  style  tương  ứng  với  một  thành  phần    áp  dụng  định  dạng     Các  dạng  selectors   §   HTML  element  selectors   §  Class  selectors   §  ID  selectors   §    CuuDuongThanCong.com Ví  dụ:   TieuDe1 { color: red; font-family: Verdana, sans-serif; } DHKHTN https://fb.com/tailieudientucntt Selector CSS Loại   Mơ  tả  phạm  vi  ảnh  hưởng   Ví  dụ   element Định dạng áp dụng cho ND tất tag Element tài liệu Web h1  {color:  red;}   #id   Định dạng áp dụng cho ND tất tab có thuộc tính id tà liệu Web #test  {color:  green;}     class   Định dạng áp dụng cho ND tất note  {color:  yellow;}   tab có thuộc tính class tà liệu Web /*  ND  của  bất  kỳ  tag  có  thuộc  Unh  class=note  đều  bị   /*  ND  của  thẻ    bị  định  dạng  màu  chữ=đỏ  */ /*  ND  của  bất  kỳ  tag  có  thuộc  Unh  id=test  đều  bị  định   dạng  màu  chữ=xanh  lá  */ định  dạng  màu  chữ=vàng*/ element    class   Định dạng áp dụng cho ND tag Element có thuộc tính class tương ứng h1.note  {text-­‐decora’on:  underline;}   Grouping   Định dạng áp dụng cho ND nhóm tag tài liệu h1,h2,h3  {background-­‐color:  orange;}   Contextual   Định dạng áp dụng cho ND thẻ p  strong  {color:  purple;}   /*  ND  của  các  thẻ    nằm  trong  thẻ  

 đều  bị   lồng thẻ cha /*  ND  của  các  thẻ    có  thuộc  Unh  class=note  đều  bị   định  dạng  gạch  chân  */ /*  ND  của  các  thẻ        đều  bị  định  dạng   màu  nền  =  màu  cam  */ định  dạng  màu  chữ=màu  Ua  */ Pseudo Class Pseudo element Định dạng áp dụng dựa vào trạng thái Element (Không xuất mã lệnh HTML) CuuDuongThanCong.com https://fb.com/tailieudientucntt Selector - Element !  !  Có  hiệu  ứng  trên  tất  cả  element  cùng  loại  tag   Ví  dụ  :   CuuDuongThanCong.com https://fb.com/tailieudientucntt Selector – ID rules !  !  Có  hiệu  ứng  duy  nhất  trên  một  element  có    id   Ví  dụ  :   CuuDuongThanCong.com https://fb.com/tailieudientucntt Selector – Class rules !  !  Có  hiệu  ứng  trên  tất  cả  các  loại  tag  có  cùng  giá   trị  thuộc  Unh  class   Ví  dụ  :   CuuDuongThanCong.com https://fb.com/tailieudientucntt Selector – Kết hợp Element Class !  Ví  dụ  :   CuuDuongThanCong.com https://fb.com/tailieudientucntt Selector - Contextual Selection !  !  Định  dạng  được  áp  dụng  cho  nội  dung  trong   chuổi  tag  theo  đúng  thứ  tự   Ví  dụ  :   CuuDuongThanCong.com https://fb.com/tailieudientucntt Selector – Pseudo Class !  !  Định  dạng  dựa  vào  trạng  thái  của  liên  kết,  sự   kiện  chuột   Có  thể  kết  hợp  với  Selector  khác   CuuDuongThanCong.com https://fb.com/tailieudientucntt Selector – Pseudo Element !  !  !  Định  dạng  dựa  vào  vị  trí  đầu  ’ên  của  ký   tự,  của  dịng  văn  bản   :first-­‐le£er,  :first-­‐line   Có  thể  kết  hợp  với  Selector  khác   3/9/13   CuuDuongThanCong.com https://fb.com/tailieudientucntt 32   Selector – Pseudo Element CuuDuongThanCong.com https://fb.com/tailieudientucntt   See Ngônyou Ngữ again CSS CuuDuongThanCong.com J https://fb.com/tailieudientucntt Câu  hỏi  ?   3/9/13   CuuDuongThanCong.com https://fb.com/tailieudientucntt ...  tác  động     Ngôn ? ?ngữ  CSS               CuuDuongThanCong.com https://fb.com/tailieudientucntt                                         Giới  thiệu   Ngôn ? ?ngữ  CSS   Ngôn ? ?ngữ  CSS        ...  kết  hợp  với  Selector  khác   3/ 9/ 13   CuuDuongThanCong.com https://fb.com/tailieudientucntt 32   Selector – Pseudo Element CuuDuongThanCong.com https://fb.com/tailieudientucntt   See Ngônyou...  các   trang  thơng  ’n  khác  cho  style   •   Có  thể ? ?thiết ? ?lập  Style  cho   nhiều  tài  liệu  web   •   Thơng  ’n  các  Style  được   trình  duyệt  cache  lại   Khuyết  điểm   •   Cần  phải