Bài giảng 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