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

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 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 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 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 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 Đơ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 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 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 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 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 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 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 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 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 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 Á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 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 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 Đị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 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 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 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 Các mối quan hệ trong CSS Áp dụng cho con [child]. 16/08/2014 Lập trình Web 23 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 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 Áp dụng CSS dùng thuộc tính của thẻ HTML 16/08/2014 Lập trình Web 26 Áp dụng CSS dùng thuộc tính của thẻ HTML 16/08/2014 Lập trình Web 27 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 Giải đáp thắc mắc 16/08/2014 Lập trình Web 59