Lập trình Web - 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 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: Trỡnh duyệt hỗ trợ 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. 16/08/2014 Lập trỡnh Web 11 Để đặt ưu tiờn trong CSS, ta dựng từ khúa !important 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 ...) 16/08/2014 Lập trỡnh Web 14 Tập tin mystyle.css Mó nhỳng mystyle.css vào HTML 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 16 Lập trỡnh Web 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 17 Lập trỡnh Web Sử dụng lớp Vớ dụ: Cú thể sử dụng nhiều lần tờn lớp trong tập tin HTML. 16/08/2014 18 Lập trỡnh Web Tập tin CSS Tập tin HTML Đị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 19 Lập trỡnh Web Sử dụng định danh Vớ dụ: 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 Tập tin CSS Tập tin HTML 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 Background Border Basic box Flexible box Text Text decoration Font Table Lists Animation Transform Transition Basic user interface Multi-column Generated content Pseudo-classes Pseudo-elements 16/08/2014 Lập trỡnh Web 28 Nhúm thuộc tớnh màu sắc (Color) 16/08/2014 Lập trỡnh Web 29 (Hỗ trợ hầu hết cỏc trỡnh duyệt, khụng sử dụng tiếp đầu ngữ) 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] 16/08/2014 Lập trỡnh Web 31 (Hỗ trợ hầu hết cỏc trỡnh duyệt, khụng sử dụng tiếp đầu ngữ) 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 (text-decoration-color, text-decoration-line, text-decoration-style chỉ ỏp dụng cho Firefox, sử dụng tiếp đầu ngữ -moz-) Nhúm thuộc tớnh trang trớ văn bản (Text decoration) 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