Bài giảng CSS - Trần Khải Hoàng

 background-color : màu nền
 – background-image : hình nền
 – background-repeat : cách lặp lại hình nền
 – background-position : vị trí của hình nền
Background color
 • Thuộc tính background-color giúp ta đặt màu nền cho 
 thành phần HTML
 • Cú pháp : background-color=#;
 • Ví dụ : 
Ví dụ
Background image
 • Thuộc tính background-image dùng để đặt hình nền 
 cho thành phần HTML
 • Mặc định hình nền sẽ tô đầy kích thước của thành 
 phần HTML
 • Cú pháp : 
 background-image : url();
Ví dụ
Background repeat
 • Mặc định background-image sẽ lặp lại hình nền cho cả 2 chiều dọc và 
 ngang
 • Một số hình chỉ cần repeat ngang hoặc dọc nếu không sẽ rất xấu.
 • Thuộc tính background-repeat qui định việc lặp lại này
 • Cú pháp
 background-repeat : ;
 Giá trị repeat gồm :
 • repeat-x
 • repeat-y
 • repeat
 • no-repeat
Ví dụ
Ví dụ
Background position
 • Thuộc tính background-postion chỉ hiện hình nền tại 1 
 vị trí nhất định (đi kèm với background-repeat: no-
 repeat;)
 • Cú pháp : background-position : ;
 center top
left top right top
 center center
left center right center
 center botttom
left bottom right bottom
Ví dụ
Ví dụ
Background short hand
 • Để làm ngắn code CSS, ta có thể gom tất cả các thuộc 
 tính (background-color, background-image, 
 background-repeat,background-position) vào thuộc 
 tính background : 
 background:#ffffff url('img_tree.png') 
 no-repeat right top;
Fixed background
 • Thuộc tính background-attachment : fixed dùng để cố 
 định vị trí của hình nền.
 • Ví dụ ta muốn có 1 hình nền ở góc trên bên trái trang 
 web. Hình nền sẽ luôn luôn ở vị trí góc trên bên trái dù 
 người dùng có cuộn trang web.
Ví dụ
Propert y Description Values CSS
 background-color , background-image , 
background Đặt màu nền hình nền background-repeat , background- 1
 attachment , background-position, inherit
background-attachmentĐặt vị trí cố định cho hình nền scroll , fixed ,inherit 1
 color-rgb , color-hex , color-name
background-color Đặt màu nền 1
 transparent , inherit
 url(URL)
background-image Đặt hình nền none 1
 inherit
 left top , left center , left bottom , right 
 top , right center , right bottom , center 
background-position Đặt vị trí cho hình nền 1
 top ,center center , center bottom , x% y% 
 , xpos ypos , inherit
 repeat , repeat-x , repeat-y , no-repeat , 
background-repeat Qui định cách lặp lại hình 1
 inherit
Nội dung
  Giới thiệu CSS
  CSS Background
  CSS Text
  CSS Font
  CSS Link
  CSS List
  CSS Table
  CSS Box Model
 36
Text color
 • Thuộc tính color dùng để đặt màu chữ cho văn bản
 • Cú pháp : 
 color : ; // Ví dụ red
 hoặc 
 color : ; // Ví dụ #FFEECC
 hoặc 
 color : ; // Ví dụ RGB(255,0,0)
Ví dụ
Text alignment
 • Thuộc tính text-align qui định cách canh lề cho văn bản 
 • Cú pháp : 
 text-align : 
 • Cách canh lề : 
 – left : canh lề trái
 – right : canh lề phải
 – justify : canh giữa
Ví dụ
Text decoration
 • Thuộc tính text-decoration dùng để đặt hoặc xóa các 
 trang trí cho văn bản 
 • Cú pháp 
 text-decoration : ;
 • Cách trang trí :
 – overline : đường gạch ngang phía trên văn bản
 – underline : đường gạch dưới
 – line-through : đường gạch giữa văn bản
 – blink : nhấp nháy
 – none : không trang trí
Ví dụ
Text Transformation
 • Thuộc tính text-transformation dùng để chuyển chữ 
 hoa ,thường cho văn bản
 • Cú pháp 
 text-transformation : 
 • Kiểu chữ :
 – lowercase : Chuyển tất cả kí tự sang chữ thường
 – uppercase : Chuyển tất cả kí tự sang chữ hoa
 – capitalize : Ghi hoa các kí tự đầu của chữ
Ví dụ
Các thuộc tính khác
• text-indent: qui định cách lề cho dòng đầu tiên (bằng pixel).
• letter-spacing : khoảng cách giữa các kí tự
• word-spacing : khoảng cách giữa các từ
• line-height: chiều cao của 1 dòng (pixel hoặc %)
• direction : hướng viết văn bản (rtl : phải qua trái)
• white-space : nowrap ; // Không wrap văn bản
• vertical-align: đặt canh lề dọc (baseline, sub, super, 
 top, text-top, middle, bottom, text-bottom).
Ví dụ
Ví dụ
Ví dụ
Ví dụ
Ví dụ
Nội dung
  Giới thiệu CSS
  CSS Background
  CSS Text
  CSS Font
  CSS Link
  CSS List
  CSS Table
  CSS Box Model
 51
CSS Font
 • Các thuộc tính CSS font cho phép thay đổi font, kích 
 thước font, kiểu font, độ đậm của font.
 • Trong CSS có 2 loại loại font : 
 – Loại tổng quát : serif , sans-serif, monospace
 – Loại cụ thể : 1 font cụ thể 
 Loại tổng quát Font cụ thể
 Times New Roman
 Serif
 Georgia
 Arial
 Sans-serif
 Verdana
 Courier New
 Monospace
 Lucida Console
Font Family
 • Thuộc tính font-family qui định loại font cho văn bản
 • Nên sử dụng nhiều font, để nếu không có font này, 
 trình duyệt sẽ dùng font khác
 • Cú pháp : 
Font style & font weight
• Thuộc tính font-style dùng để in nghiêng văn bản 
• Giá trị : 
 – normal : bình thường
 – italic : in nghiêng
• Thuộc tính font-weight dùng để in đậm văn bản 
• Giá trị 
 – normal
 – bold
 – bolder
 – lighter
 – 100, 200, 300, ... 900
Font size
 • Thuộc tính font-size qui định kích thước văn bản
 • Có 2 loại kích thước :
 – Tuyệt đối : là giá trị tính bằng pixel
 – Tương đối là giá trị tính bằng em ( 1 em = kích thước font 
 mặc định của trình duyệt. Mặc định = 16px)
Nội dung
  Giới thiệu CSS
  CSS Background
  CSS Text
  CSS Font
  CSS Link
  CSS List
  CSS Table
  CSS Box Model
 56
Link
 • Liên kết có thể được trang trí bởi các thuộc tính : 
 color, background-color, background-image,font ...
 • Một liên kết có 4 trạng thái sau : 
 a:link – 1 liên kết bình thường , chưa được truy cập
 a:visited – 1liên kết đã được người dùng truy cập
 a:hover – 1 liên kết khi chuột đang ở trên nó
 a:active – 1 liên kết đang được nhấn
Ví dụ 1
Nội dung
  Giới thiệu CSS
  CSS Background
  CSS Text
  CSS Font
  CSS Link
  CSS List
  CSS Table
  CSS Box Model
 59
List
 • Với danh sách, ta có thể dùng CSS để thay đổi : 
 – Bullet trong danh sách không thứ tự hoặc cách đánh số trong 
 danh sách có thứ tự (list-style-type)
 – Thay thế bullet bằng hình ảnh (list-style-image)
 • Giá trị thuộc tính : 
 – list-style-type : 
 • none, disc, circle, square
 • decimal, lower-roman, upper-alpha, upper-roman
 – list-style-image : url (image_path)
Ví dụ 1
Ví dụ 2
Problem ?
Ví dụ 3
Nội dung
  Giới thiệu CSS
  CSS Background
  CSS Text
  CSS Font
  CSS Link
  CSS List
  CSS Table
  CSS Box Model
 65
CSS Table
 • Sử dụng CSS ta có thể trang trí bảng rất đẹp. 
 • Ví dụ như : 
CSS Table
 • border-collapse : collapse, separate (Thuộc tính 
 border-collapse khiến border của bảng biến thành 1- 
 collapse, hay 2 – separate)
 • border : thuộc tính border qui định kiểu, độ dày và màu 
 sắc đường viền
 • width, height: qui định chiều dài, chiều cao của bảng, ô 
 hoặc dòng
 • text-align (left, right, justify) : canh lề văn bản
 • vertical-align(bottom, middle, top) : canh lề dọc
 • padding : kích thước đệm mỗi ô
Ví dụ
Table
 • Demo dùng CSS để tạo bảng giống hình bên dưới
Nội dung
  Giới thiệu CSS
  CSS Background
  CSS Text
  CSS Font
  CSS Link
  CSS List
  CSS Table
  CSS Box Model
 70
Box model
 • Mỗi HTML element khi hiển thị trên trình duyệt sẽ là 1 
 cái hộp như sau : 
CSS Box model part 
 • margin: là khoảng trắng nằm phía ngoài border, margin 
 sẽ không có màu nền. Luôn luôn vô hình
 • border : là đường biên bao quanh padding và content. 
 Một border bao gồm kiểu, độ dày, và màu 
 • padding : là khoảng đệm giữa border và content
 • content : là nơi mà văn bản, hình ảnh nội dung của 
 HTML element xuất hiện
Width, height of an element
 • Khi chúng ta đặt thuộc tính width, height cho 1 HTML 
 element trong CSS, thực chất ta chỉ đặt width và height 
 cho content của nó mà thôi
 • Muốn có width , height thật của box, ta phải cộng thêm 
 margin, border, padding
 • Total element width = width + left padding + right 
 padding + left border + right border + left margin + right 
 margin
 • Total element height = height + top padding + bottom 
 padding + top border + bottom border + top margin + 
 bottom margin
Ví dụ
CSS border (1)
 • border-style : qui định kiểu border : 
CSS border (2)
 • border-width : qui định chiều dày của border
CSS border(3)
 • border-color : qui định màu cho border
CSS border (4)
 • Tiếp đầu ngữ : border-left , border-top, border-right, 
 border-bottom dùng kèm với width, color, style để qui 
 định độ dày, màu sẵc, kiểu của border trái, trên, phải, 
 dưới.
CSS border (5)
 • Ghi tắt : 
 • border : solid 1px red;
 • border : dotted 5px #FFEE00;
CSS margin
 • margin-left , margin-top,margin-right, margin-bottom : 
 dùng để qui định margin của bên trái, trên, phải và 
 dưới
 • Giá trị của margin : 
 – auto : trình duyệt tự động quyết định
 – px, em : độ dài bằng pixel hay em
 – % độ dài bằng phần trăm
CSS margin(2)
CSS margin(3)
• Short hand : 
• margin:25px 50px 75px 100px; 
 –margin:25px 50px;
 – top margin is 25px
 – right margin is 50px –top and bottom margins are 25px
 – bottom margin is 75px –right and left margins are 50px
 – left margin is 100px
 –margin:25px;
• margin:25px 50px 75px;
 –
 – top margin is 25px all four margins are 25px
 – right and left margins are 50px
 – bottom margin is 75px
CSS padding
 • padding-left , padding-top, padding-right, padding-
 bottom : dùng để qui định padding của bên trái, trên, 
 phải và dưới
 • Giá trị của padding: 
 – px, em : độ dài bằng pixel hay em
 – % độ dài bằng phần trăm
CSS padding (2)
 CSS padding (3)
• padding:25px 50px 75px 100px; • padding:25px 50px;
 – top padding is 25px – top and bottom paddings are 25px
 – right padding is 50px – right and left paddings are 50px
 – bottom padding is 75px • padding:25px;
 – left padding is 100px – all four paddings are 25px
• padding:25px 50px 75px;
 – top padding is 25px
 – right and left paddings are 50px
 – bottom padding is 75px