›
›

Bài giảng Lập trình web - Cơ bản về CSS - Nguyễn Hoàng Tùng

pdf 59 trang hapham 2460
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Lập trình web - Cơ bản về CSS - Nguyễn Hoàng Tùng", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfbai_giang_lap_trinh_web_co_ban_ve_css_nguyen_hoang_tung.pdf

Nội dung text: Bài giảng Lập trình web - Cơ bản về CSS - Nguyễn Hoàng Tùng

  1. CƠ BẢN VỀ CSS Nguyễn Hoàng Tựng  Bộ mụn Kỹ thuật phần mềm nhoangtung@agu.edu.vn  www.nhtung.com
  2. Nội dung chớnh của slide này Mở đầu: Font chữ Mở đầu: Màu sắc Mở đầu: Đơn vị đo lường CSS là gỡ? Trỡnh duyệt hỗ trợ Cỏc loại CSS Khai bỏo và sử dụng CSS Cỏc mối quan hệ trong CSS Áp dụng CSS dựng thuộc tớnh của thẻ HTML Phõn loại cỏc thuộc tớnh CSS theo chức năng. 16/08/2014 Lập trỡnh Web 2
  3. Font chữ trong lập trỡnh web Sử dụng bộ mó font chuẩn (Web safe font) cho phộp trang web tương thớch và hiển thị tốt ở tất cả cỏc trỡnh duyệt cho dự nú cài đặt ở hệ điều hành nào. Cú 03 bộ mó font chuẩn thường dựng: Bộ font chữ cú chõn (serif), với cỏc font chuẩn: • Georgia, Palatino Linotype, Book Antiqua, Palatino, Times New Roman. Bộ font chữ khụng chõn (sans-serif), với cỏc font chuẩn: • Arial, Helvetica, Lucida Sans Unicode, Tahoma, Trebuchet MS, Verdana. Bộ font chữ monospace, với cỏc font chuẩn: • Courier New, Courier, Lucida Console. Chỉ nờn sử dụng 1 bộ font trong 1 trang web. 16/08/2014 Lập trỡnh Web 3
  4. Màu sắc trong lập trỡnh web Trong trang web, màu sắc tạo nờn sức hỳt, tõm lý và phong cỏch. Người ta cú thể dựng nghệ thuật phối màu để núi lờn ý tưởng của mỡnh mà khụng cần đến lời núi hay cõu văn. Trong trang web, màu sắc nờn nằm trong giới hạn từ 2 đến 6 màu. Ngoài ra cần chỳ ý đến màu sắc thương hiệu khi thiết kế website cho khỏch hàng. Cú 140 màu thường dựng trong lập trỡnh web (gồm 17 màu chuẩn và 123 màu khỏc), cỏc màu này hiển thị tốt trờn tất cả cỏc trỡnh duyệt. 16/08/2014 Lập trỡnh Web 4
  5. Màu sắc trong lập trỡnh web Màu trong CSS thường được dựng thụng qua cỏc dạng: Sử dụng trực tiếp tờn màu • black, seagreen, aquamarine, , white Sử dụng mó màu (HEX) theo cỳ phỏp #RRGGBB • #000000, #2E8B57, #7FFFD4, , #FFFFFF Sử dụng hệ màu RGB theo cỳ phỏp rgb(red, green, blue) • rgb(0, 0, 0); rgb(46,139,87); rgb(127,255,212); ; rgb(255,255,255) Để lấy tờn màu, mó màu ta thường dựng một phần mềm xử lý ảnh hoặc tra danh sỏch màu trờn w3schools, 16/08/2014 Lập trỡnh Web 5
  6. Đơn vị đo lường trong lập trỡnh web Danh sỏch cỏc đơn vị đo hỗ trợ: 16/08/2014 Lập trỡnh Web 6
  7. CSS là gỡ? CSS: Cascading Style Sheet – Được phỏt triển bởi Bert Bos và Hồkon Lie (thuộc nhúm nghiờn cứu W3C). Mục đớch của dự ỏn là tạo ra một "ngụn ngữ phong cỏch" được tớch hợp vào HTML, XHTML để giải quyết một số vấn đề về cỏch thức hiển thị và định dạng dữ liệu. CSS chỉ được xem như là một chuẩn cho tới khi màn hỡnh mỏy tớnh cho phộp hiển thị đầy đủ cỏc chức năng đa phương tiện. CSS chớnh thức được đưa vào HTML 4.0, kể từ ngày phỏt hành phiờn bản đầu tiờn vào 17/12/1996. Cú thể định nghĩa nhiều CSS vào một thẻ HTML (Cascading). 16/08/2014 Lập trỡnh Web 7
  8. Cỏc phiờn bản CSS 12/1996: CSS1 ra đời. Hầu hết cỏc trỡnh duyệt hiện tại hỗ trợ đầy đủ CSS1. W3C khụng cũn duy trỡ khuyến nghị CSS1. Chỉ bao gồm trỡnh bày văn bản, màu sắc, định dạng nền. 05/1998: CSS2 ra đời, bổ sung thờm cỏc tớnh năng nõng cao cho CSS1. Hầu hết cỏc trỡnh duyệt hiện tại hỗ trợ đầy đủ CSS2. W3C cũng khụng cũn duy trỡ khuyến nghị CSS2. Cho phộp định vị cỏc yếu tố trờn trang, hỗ trợ in ấn, 02/2004: CSS2.1 ra đời, sửa chữa sai sút trong CSS2, loại bỏ cỏc tớnh năng tương thớch kộm. Được W3C khuyến nghị nờn dựng. 16/08/2014 Lập trỡnh Web 8
  9. Cỏc phiờn bản CSS 06/1999: Dự thảo CSS3 đầu tiờn được cụng bố, CSS3 được chia thành một số tài liệu riờng biệt được gọi là "mụ-đun". Mỗi mụ-đun bổ sung thờm khả năng mới hoặc mở rộng cỏc tớnh năng được trỡnh bày trong CSS2. CSS3 đang trong quỏ trỡnh phỏt triển, hiện tại chưa cú trỡnh duyệt nào hỗ trợ đầy đủ CSS3. 16/08/2014 Lập trỡnh Web 9
  10. Trỡnh duyệt hỗ trợ Một số thuộc tớnh CSS3 cần phải thờm tiếp đầu ngữ tương ứng với mỗi trỡnh duyệt. Vớ dụ: “Xem thờm: 16/08/2014 Lập trỡnh Web 10
  11. Phõn loại Cú 3 loại CSS (gọi tắt là style): Inline style (được quy định trong 1 thẻ HTML cụ thể), Internal style (được quy định trong thẻ của trang HTML), External style (được quy định trong file .CSS ngoài). Thứ tự ưu tiờn: Inline > Internal > External. Trong 1 file CSS, mức ưu tiờn tăng dần từ trờn xuống. Để đặt ưu tiờn trong CSS, ta dựng từ khúa !important 16/08/2014 Lập trỡnh Web 11
  12. Phõn loại Inline style: Chỉ cú hiệu lực đối với thẻ chứa style, Dựng thuộc tớnh style để thể hiện style trong thẻ liờn quan. 16/08/2014 Lập trỡnh Web 12
  13. Phõn loại Internal style: Đặt trong phần , Dựng thẻ để thể hiện. 16/08/2014 Lập trỡnh Web 13
  14. Phõn loại External style: Định nghĩa style trong file riờng (thường cú đuụi .CSS). Nhỳng file CSS đó định nghĩa vào trang web: (Thẻ này phải nằm trong phần ) Tập tin mystyle.css Mó nhỳng mystyle.css vào HTML 16/08/2014 Lập trỡnh Web 14
  15. Khai bỏo và sử dụng style Style phõn biệt chữ hoa và chữ thường. Cỳ phỏp chung: Cỏc Declaration ngăn cỏch nhau bởi dấu chấm phẩy (;). Trong mỗi Declaration cú 2 phần Property và Value, ngăn nhau bởi dấu hai chấm (:). Chỳ thớch trong style: /* Dũng chỳ thớch */ 16/08/2014 Lập trỡnh Web 15
  16. Áp dụng cho thẻ cụ thể Áp dụng cho 1 thẻ: Đặt selector là tờn_thẻ. p { color: red; } Khai bỏo đồng thời nhiều thẻ: Viết danh sỏch tờn thẻ phõn cỏch bởi dấu phẩy. h1, h2, h3, h4, h5, h6 { font-family: Arial; } 16/08/2014 Lập trỡnh Web 16
  17. Lớp Gắn với thẻ cụ thể: Đặt selector là tờn_thẻ.tờn_lớp p.loai1 { color: red; } p.loai2 { color: blue; } Khụng gắn với thẻ cụ thể: Bỏ tờn_thẻ đi, giữ lại dấu chấm .loai3 { color: green; } Sử dụng lớp với cỳ phỏp: Tờn lớp phải đảm bảo quy tắc giống như tờn biến của ngụn ngữ lập trỡnh. 16/08/2014 Lập trỡnh Web 17
  18. Sử dụng lớp Vớ dụ: Tập tin CSS Tập tin HTML Cú thể sử dụng nhiều lần tờn lớp trong tập tin HTML. 16/08/2014 Lập trỡnh Web 18
  19. Định danh Tương tự như lớp. Thay dấu chấm (.) bằng dấu thăng (#). Cho thẻ cụ thể: tờn_thẻ#định_danh Trường hợp tổng quỏt: #định_danh Vớ dụ: p#loai1 { color: red; } #loai2 { color: blue; } Sử dụng định danh với cỳ phỏp: 16/08/2014 Lập trỡnh Web 19
  20. Sử dụng định danh Vớ dụ: Tập tin CSS Tập tin HTML Mỗi định danh là duy nhất trờn trang (chỉ sử dụng 1 lần). Tờn định danh đặt giống như cỏch đặt tờn lớp. 16/08/2014 Lập trỡnh Web 20
  21. Cỏc mối quan hệ trong CSS Áp dụng cho hậu duệ (con, chỏu, chắt, ) [descendant]. Áp dụng cho con [child]. Áp dụng cho 1 anh chị em liền kề [adjacent sibling]. Áp dụng cho tất cả cỏc anh chị em [general sibling]. 16/08/2014 Lập trỡnh Web 21
  22. Cỏc mối quan hệ trong CSS Áp dụng cho hậu duệ (con, chỏu, chắt, ) [descendant]. 16/08/2014 Lập trỡnh Web 22
  23. Cỏc mối quan hệ trong CSS Áp dụng cho con [child]. 16/08/2014 Lập trỡnh Web 23
  24. Cỏc mối quan hệ trong CSS Áp dụng cho 1 anh chị em liền kề [adjacent sibling]. 16/08/2014 Lập trỡnh Web 24
  25. Cỏc mối quan hệ trong CSS Áp dụng cho tất cả cỏc anh chị em [general sibling]. 16/08/2014 Lập trỡnh Web 25
  26. Áp dụng CSS dựng thuộc tớnh của thẻ HTML 16/08/2014 Lập trỡnh Web 26
  27. Áp dụng CSS dựng thuộc tớnh của thẻ HTML 16/08/2014 Lập trỡnh Web 27
  28. Phõn loại cỏc thuộc tớnh CSS theo chức năng Color Lists Background Animation Border Transform Basic box Transition Flexible box Basic user interface Text Multi-column Text decoration Generated content Font Pseudo-classes Table Pseudo-elements 16/08/2014 Lập trỡnh Web 28
  29. Nhúm thuộc tớnh màu sắc (Color) (Hỗ trợ hầu hết cỏc trỡnh duyệt, khụng sử dụng tiếp đầu ngữ) 16/08/2014 Lập trỡnh Web 29
  30. Nhúm thuộc tớnh nền (Background) [1/2] (Sử dụng tiếp đầu ngữ đối với background-size) 16/08/2014 Lập trỡnh Web 30
  31. Nhúm thuộc tớnh nền (Background) [2/2] (Hỗ trợ hầu hết cỏc trỡnh duyệt, khụng sử dụng tiếp đầu ngữ) 16/08/2014 Lập trỡnh Web 31
  32. Nhúm thuộc tớnh đường viền (Border) [1/5] (Hỗ trợ hầu hết cỏc trỡnh duyệt, khụng sử dụng tiếp đầu ngữ) 16/08/2014 Lập trỡnh Web 32
  33. Nhúm thuộc tớnh đường viền (Border) [2/5] (Hỗ trợ hầu hết cỏc trỡnh duyệt, khụng sử dụng tiếp đầu ngữ) 16/08/2014 Lập trỡnh Web 33
  34. Nhúm thuộc tớnh đường viền (Border) [3/5] (Hỗ trợ hầu hết cỏc trỡnh duyệt, khụng sử dụng tiếp đầu ngữ) 16/08/2014 Lập trỡnh Web 34
  35. Nhúm thuộc tớnh đường viền (Border) [4/5] (Sử dụng tiếp đầu ngữ đối với tất cả cỏc thuộc tớnh trờn) 16/08/2014 Lập trỡnh Web 35
  36. Nhúm thuộc tớnh đường viền (Border) [5/5] (Sử dụng tiếp đầu ngữ đối với tất cả cỏc thuộc tớnh trờn) 16/08/2014 Lập trỡnh Web 36
  37. Nhúm thuộc tớnh khung cơ bản (Basic box) [1/4] (Hỗ trợ hầu hết cỏc trỡnh duyệt, khụng sử dụng tiếp đầu ngữ) 16/08/2014 Lập trỡnh Web 37
  38. Nhúm thuộc tớnh khung cơ bản (Basic box) [2/4] (Hỗ trợ hầu hết cỏc trỡnh duyệt, khụng sử dụng tiếp đầu ngữ) 16/08/2014 Lập trỡnh Web 38
  39. Nhúm thuộc tớnh khung cơ bản (Basic box) [3/4] (Hỗ trợ hầu hết cỏc trỡnh duyệt, khụng sử dụng tiếp đầu ngữ) 16/08/2014 Lập trỡnh Web 39
  40. Nhúm thuộc tớnh khung cơ bản (Basic box) [4/4] (Hỗ trợ hầu hết cỏc trỡnh duyệt, khụng sử dụng tiếp đầu ngữ) 16/08/2014 Lập trỡnh Web 40
  41. Nhúm thuộc tớnh khung nõng cao (Flexible box) [1/2] (Hỗ trợ hầu hết cỏc trỡnh duyệt, khụng sử dụng tiếp đầu ngữ) 16/08/2014 Lập trỡnh Web 41
  42. Nhúm thuộc tớnh khung nõng cao (Flexible box) [2/2] (Hỗ trợ hầu hết cỏc trỡnh duyệt, khụng sử dụng tiếp đầu ngữ) 16/08/2014 Lập trỡnh Web 42
  43. Nhúm thuộc tớnh văn bản (Text) [1/2] (Sử dụng tiếp đầu ngữ đối với tab-size) 16/08/2014 Lập trỡnh Web 43
  44. Nhúm thuộc tớnh văn bản (Text) [1/2] (Hỗ trợ hầu hết cỏc trỡnh duyệt, khụng sử dụng tiếp đầu ngữ) 16/08/2014 Lập trỡnh Web 44
  45. Nhúm thuộc tớnh trang trớ văn bản (Text decoration) (text-decoration-color, text-decoration-line, text-decoration-style chỉ ỏp dụng cho Firefox, sử dụng tiếp đầu ngữ -moz-) 16/08/2014 Lập trỡnh Web 45
  46. Nhúm thuộc tớnh font chữ (Font) (Hỗ trợ hầu hết cỏc trỡnh duyệt, khụng sử dụng tiếp đầu ngữ, @font-face chỉ hỗ trợ định dạng TTF/OTF và WOFF) 16/08/2014 Lập trỡnh Web 46
  47. Nhúm thuộc tớnh bảng biểu (Table) (Hỗ trợ hầu hết cỏc trỡnh duyệt, khụng sử dụng tiếp đầu ngữ) 16/08/2014 Lập trỡnh Web 47
  48. Nhúm thuộc tớnh danh sỏch (Lists) (Hỗ trợ hầu hết cỏc trỡnh duyệt, khụng sử dụng tiếp đầu ngữ) 16/08/2014 Lập trỡnh Web 48
  49. Nhúm thuộc tớnh chuyển động (Animation) [1/2] (Sử dụng tiếp đầu ngữ đối với tất cả cỏc thuộc tớnh trờn) 16/08/2014 Lập trỡnh Web 49
  50. Nhúm thuộc tớnh chuyển động (Animation) [2/2] (Sử dụng tiếp đầu ngữ đối với tất cả cỏc thuộc tớnh trờn) 16/08/2014 Lập trỡnh Web 50
  51. Nhúm thuộc tớnh chuyển đổi (Transform) [1/2] (Sử dụng tiếp đầu ngữ đối với tất cả cỏc thuộc tớnh trờn) 16/08/2014 Lập trỡnh Web 51
  52. Nhúm thuộc tớnh chuyển đổi (Transform) [1/2] Danh sỏch miền giỏ trị đầy đủ của tranform: none; matrix(n,n,n,n,n,n); matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n); translate(x,y); translateX(x); translateY(y); translate3d(x,y,z); translateZ(z); scale(x,y); scaleX(x); scaleY(y); scale3d(x,y,z); scaleZ(z); rotate(angle); rotateX(angle); rotateY(angle); rotate3d(x,y,z,angle); rotateZ(angle); skew(x-angle,y-angle); skewX(angle); skewY(angle); perspective(n). 16/08/2014 Lập trỡnh Web 52
  53. Nhúm thuộc tớnh quỏ trỡnh chuyển đổi (Transition) (Sử dụng tiếp đầu ngữ đối với tất cả cỏc thuộc tớnh trờn) 16/08/2014 Lập trỡnh Web 53
  54. Nhúm thuộc tớnh giao diện cơ bản (Basic UI) [1/2] (resize khụng ỏp dụng cho IE và phải sử dụng tiếp đầu ngữ đối với cỏc trỡnh duyệt cũn lại) 16/08/2014 Lập trỡnh Web 54
  55. Nhúm thuộc tớnh giao diện cơ bản (Basic UI) [1/2] (outline-offset khụng ỏp dụng cho IE, hỗ trợ hầu hết cỏc trỡnh duyệt, khụng sử dụng tiếp đầu ngữ) 16/08/2014 Lập trỡnh Web 55
  56. Nhúm thuộc tớnh chia cột văn bản (Multi-column) (Sử dụng tiếp đầu ngữ đối với tất cả cỏc thuộc tớnh trờn) 16/08/2014 Lập trỡnh Web 56
  57. Nhúm thuộc tớnh tạo nội dung (Generated content) (Hỗ trợ hầu hết cỏc trỡnh duyệt, khụng sử dụng tiếp đầu ngữ) 16/08/2014 Lập trỡnh Web 57
  58. Nhúm thuộc tớnh giả (Pseudo-classes / Pseudo-elements) (Hỗ trợ hầu hết cỏc trỡnh duyệt, khụng sử dụng tiếp đầu ngữ) 16/08/2014 Lập trỡnh Web 58
  59. Giải đỏp thắc mắc 16/08/2014 Lập trỡnh Web 59