Bảng kiểu

Chia sẻ: Nguyễn Văn Nam | Ngày: | Loại File: PPT | Số trang:20

0
31
lượt xem
8
download

Bảng kiểu

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Tham khảo tài liệu 'bảng kiểu', công nghệ thông tin, quản trị web phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả

Chủ đề:
Lưu

Nội dung Text: Bảng kiểu

  1. ̉ ̉ Style Sheets (Bang kiêu) Session 5    
  2. ̣ ̀ ̣ Muc tiêu bai hoc  Mô ta Dynamic HTML ̉  Dung Bang kiêu (Style Sheet) ̀ ̉ ̉ Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 2 of 20
  3. DHTML là gi?(1) ̀  “HTML động” có thể được định nghĩa như là một phần  mềm  được  sử  dụng  cho  việc  mô  tả  sự  kết  hợp  giữa  HTML,  các  bảng  kiêu  (stylesheet)  và  ngôn  ngư  script  ̉ ̃ làm cho tài liệu trở nên sinh động.  Khả  năng  viết  được  kịch  bản  (script)  cho  phép  đưa  thêm các tính năng sinh động cho trang Web.  Microsoft  và  Netscape  có  những  cách  tiếp  cận  khác  nhau  để  thực  thi  DHTML.  Microsoft  tập  trung  vào  việc  sử  dụng  kiểu  mẫu  tầng  (Cascading  Style  Sheets  hay  CSS). Các đoạn code kịch bản được sử dụng để tương  tac các nguyên tố của CSS. Web Page Programming with ́ HTML,DHTML & JavaScript/Session 5/ 3 of 20
  4. DHTML là gi?(2) ̀  Netscape cũng sử dụng Bang kiểu. Nhưng chủ ̉ yếu DHTML được thực hiện thông qua các lớp (layer). Thẻ gán LAYER được sử dụng để cung câp phần lớn các tính năng của DHTML. ́ Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 4 of 20
  5. Những tinh năng cua HTML ́ ̉ ̣ Đông (DHTML)  Nhưng kiêu đông(Dynamic Styles) ̃ ̉ ̣  Nôi dung đông(Dynamic Content) ̣ ̣  Đinh vi đông(Positioning) ̣ ̣ ̣  Liên kêt dư liêu(Data binding ) ́ ̃ ̣  Font co thê tai đươc(Downloadable Fonts) ́ ̉ ̉ ̣  Thưc hiên Scripting ̣ ̣  Câu truc cua đôi tương(Object Structure) with ́ ́ ̉ ́ ̣ Web Page Programming HTML,DHTML & JavaScript/Session 5/ 5 of 20
  6. Giới thiêu về Bang kiêu (Style ̣ ̉ ̉ Sheets)  Bang kiêu la nơi ma chung ta co thê quan ly  ̉ ̉ ̀ ̀ ́ ́ ̉ ̉ ́ va điêu khiên cac kiêu “style”  ̀ ̀ ̉ ́ ̉  Style  sheet  mô  tả  sự  xuất  hiện  và  trinh  diễn  ̀ của  một  tài  liệu  HTML  như  khi  nó  được  biểu  diễn trên màn hình, thậm chí là khi in.  Bạn  cũng  có  thể  chỉ  chính  xác  vị  trí  và  sự  xuất  hiện  của  các  phần  tử  trên  trang  và    tạo  các hiệu ứng đặc biệt  Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 6 of 20
  7. Những cach thức thay đôi kiêu ́ ̉ ̉ ̉ cua trang web  Kiêu nôi tuyên(Inline style ) ̉ ̣ ́  Thông tin về kiểu được sử dụng nội tuyến(inline).   Bạn có thể nhúng vào trong thẻ của một phần tử HTML.  Thuộc tính STYLE áp dụng style sheet tới từng phần tử riêng lẻ.  Sử dụng thuộc tính Style, bạn có thể bỏ qua Style Element và đưa  phần khai báo vào các thẻ bắt đầu.  Viêt Script  ́  Dung kiêu đôi tương (Uses Style Object) ̀ ̉ ́ ̣  Kiêu đôi tương hô trơ cho moi đăt tinh cua CSS( pStyle Object  ̉ ́ ̣ ̃ ̣ ̣ ̣ ́ ̉ supports every property of CSS) Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 7 of 20
  8. Lợi ich cua bang kiêu “Style ́ ̉ ̉ ̉ sheet”  Nap chông trinh duyêt(Override the browser ) ̣ ̀ ̀ ̣  Bô tri trang(Page layout ) ́ ́  Bang kiêu co thê sư dung lai (Style sheets  ̉ ̉ ́ ̉ ̉ ̣ ̣ can be re­used )  Chi cân môt lân thât tôt(One time effort ) ̉ ̀ ̣ ̀ ̣ ́ Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 8 of 20
  9. Thuât ngữ bang kiêu ̣ ̉ ̉  Qui tăc Kiêu(Style Rule) ́ ̉  Bang kiêu(Style Sheet ) ̉ ̉  Tâp hơp cac qui tăc(Rules ) ̣ ̣ ́ ́ Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 9 of 20
  10. Cac bộ chon (Selectors) ́ ̣  Bô chon(selector) là một chuỗi ký tự để nhận ra phần  ̣ ̣ tử  mà  quy  tắc  áp  dụng  cho.  Có  hai  kiểu  selector  cơ  bản:  Bô chon đơn(Simple selectors) ̣ ̣  Bô  chon  phân  tư  HTML  (HTML  element  ̣ ̣ ̀ ̉ selectors)  Bô chon Class (Class selectors) ̣ ̣  Bô chonID (ID selectors) ̣ ̣  Bô chon ngư canh (Contextual selector) ̣ ̣ ̃ ̉ Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 10 of 20
  11. Bộ chon đơn ̣  Một selector đơn giản mô tả một phần tử bất  kể vị trí của nó trong cấu trúc tài liệu. Từ định  danh cho tựa đề H1 là một selector đơn giản               H1 { color: blue }   Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 11 of 20
  12. Bộ chon HTML ̣  Selector loại này sử dụng tên của các phần tử  HTML.  Sự  khác  biệt  duy  nhất  là  bạn  loại  bỏ  dấu  ngoặc  nhọn.  Vì  vậy  thẻ  HTML   trở thành  P. Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 12 of 20
  13. Bộ chon Class ̣  Những selector này sử dụng thuộc tính CLASS của các phần tử  HTML.  Chung  ta  có  thể  gán  bộ  nhận  dạng  lớp  cho  nhiều  phần  tử  ́ cua  môt  kiêu  đơn  khi  ta  muốn  hiển thị  các  trạng thái khác  ̉ ̣ ̉ nhau so với dạng chuẩn.      Bộ chọn CLASS có dấu chấm (.) đứng trước gọi là ký tự cờ,  theo sau là tên lớp do chúng ta chọn Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 13 of 20
  14. Bộ chon ID ̣  Bộ chọn ID sử dụng thuộc tính ID của phần tử  HTML.    Bộ  chọn  ID  được  dùng  để  áp  dụng  một  kiểu  vào riêng một phần tử nào đó trên trang Web    Bộ chọn ID được bắt đầu bằng dấu thăng (#).  Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 14 of 20
  15. Bộ chon ngữ canh ̣ ̉  Bộ chọn theo ngữ cảnh chỉ đến ngữ cảnh của  phần tử.    Điều này dựa trên khái niệm kế thừa, phần tử  con kế thừa kiểu được gán cho thẻ cha.  Một  ví  dụ  điển  hình  là  phần  tử  . Khi  thêm  một  phần  tử  vào  thẻ  ,  thì  mỗi  phần  tử  bên  trong  sẽ  kế  thừa  các  kiểu  của  . Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 15 of 20
  16. Cac cach kêt hợp bang kiêu vao ́ ́ ́ ̉ ̉ ̀ trong HTML  Phần tử STYLE (STYLE element )  Thuôc tinh Style(Style Attribute ) ̣ ́  Phân tư Link(Link element ) ̀ ̉ Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 16 of 20
  17. ́ ̀ Cac phân STYLE  Bạn có thể nhúng thông tin kiểu cần thiết bên  trong tài liệu HTML..   Sử dụng phần tử STYLE để nhúng thông tin.  Phần tử STYLE được chèn vào trong phần tử   của một tài liệu cùng với tất cả các  quy tắc, được đặt giữa thẻ mở và thẻ đóng. Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 17 of 20
  18. ̣ ́ Thuôc tinh Style  Thuôc  tinh  STYLE  đươc  dung  cho  nhưng  ̣ ́ ̣ ̀ ̃ bang kiêu riêng le cua nhưng phân tư.  ̉ ̉ ̃ ̉ ̃ ̀ ̉  Viêc dung thuôc tinh Style chung ta co thê bo  ̣ ̀ ̣ ́ ́ ́ ̉ ̉ qua kiêu phân tư va đăt khai bao trưc tiêp bên  ̉ ̀ ̉ ̀ ̣ ́ ̣ ́ trong ca nhân cua the đo   ́ ̉ ̉ ́ Web Page Programming with HTML,DHTML & JavaScript/Session 5/ 18 of 20
  19. ́ ́ ̉ ̉ Liên kêt cac bang kiêu  Bang  kiêu  “Style  sheet”  đươc  tao  ra  như  cac  tai  liêu  ̉ ̉ ̣ ̣ ́ ̀ ̣ va đươc liên kêt đên tai liêu đươc yêu câu. ̀ ̣ ́ ́ ̀ ̣ ̣ ̀  Phân  tư  liên  kêt  đươc  dung  đê  bao  gôm  môt  tham  ̀ ̉ ́ ̣ ̀ ̉ ̀ ̣ chiêu đên môt bang kiêu “style sheet” đươc yêu câu. ́ ́ ̣ ̉ ̉ ̣ ̀
  20. ́ ̣ ́ ̉ Cac thuôc tinh trong bang kiêu ̉ Attribute CSS name Font properties font font-size font-style Text properties text-align text-indent vertical-align Box properties border border-width border-bottom border-color Positioning properties clip height Web Page Programming with left HTML,DHTML & top z-index JavaScript/Session 5/ 20 of 20
Đồng bộ tài khoản