Bài 3
Tạo style cho font và văn bản
NHẮC LẠI BÀI TRƯỚC
Cách áp dụng CSS cho trang web
Cấu trúc & Quy tắc khai báo CSS
Pseudo-Class (lớp giả)
Tính kế thừa trong CSS
Khai báo giá trị màu sắc và số trong CSS
Cách áp dụng CSS cho trang web
Cấu trúc & Quy tắc khai báo CSS
Pseudo-Class (lớp giả)
Tính kế thừa trong CSS
Khai báo giá trị màu sắc và số trong CSS
Bài 3 - Tạo style cho font và văn bản 2
MỤC TIÊU BÀI HỌC
Giới thiệu về font
Một số thuộc tính quan trọng của Font
Một số thuộc tính quan trọng của Text
Kích thước của font, text trong HTML
Cách viết CSS rút gọn (shorthand)
Giới thiệu về font
Một số thuộc tính quan trọng của Font
Một số thuộc tính quan trọng của Text
Kích thước của font, text trong HTML
Cách viết CSS rút gọn (shorthand)
Bài 3 - Tạo style cho font và văn bản 3
GIỚI THIỆU VỀ FONT
GIỚI THIỆU VỀ FONT
Font là những kiểu chữ khác nhau
Thường dùng font serif và fon sans-serif:
Serif: font có chân

Cursive: giống như nét chữ viết thảo
Những tên chung này được thiết bị sử dụng (trình
duyệt, điện thoại thông minh…) hỗ trợ.
CSS đưa ra một số lựa chọn tốt hơn những dòng
font này.
Cách đơn giản nhất để chỉ định font trong CSS là
sử dụng tên của năm họ font phổ biến:
Serif: font có chân
Sans-serif: font không chân, chuyên nghiệp
Monospace: cách khoảng đều cho mọi ký tự
Fantasy: cách để chỉ định font, nên tránh sử dụng
Cursive: giống như nét chữ viết thảo
Những tên chung này được thiết bị sử dụng (trình
duyệt, điện thoại thông minh…) hỗ trợ.
CSS đưa ra một số lựa chọn tốt hơn những dòng
font này.
Bài 3 - Tạo style cho font và văn bản 7
GIỚI THIỆU VỀ FONT
Bài 3 - Tạo style cho font và văn bản 8
GIỚI THIỆU VỀ FONT
Serif
• georgia
• times new roman
Sans-serif
• arial
• tahoma
• vernada
Bài 3 - Tạo style cho font và văn bản 9
Monospace
• courier new

Bài 3 - Tạo style cho font và văn bản
font
Font-
weight
Font-
variant
12
FONT-STYLE
font-style
Inherit: font chữ
mang tính kế
thừa
Italic: chữ in
nghiêng
Bài 3 - Tạo style cho font và văn bản
font-style
Normal: chữ bình
thường
Oblique: chữ in
nghiêng
13
FONT-STYLE
CSS
p {font-style:italic;}
span {font-style:normal;}
XHTML:
<p>Đây là văn bản in nghiêng với <span>một đoạn không in nghiêng</span> ở
giữa.</p>
Bài 3 - Tạo style cho font và văn bản 14
FONT-WEIGHT

Normal: chuyển
đổi dạng bình
thường
small-caps: chuyển
đổi in thường
thành in hoa
Bài 3 - Tạo style cho font và văn bản 18
FONT-VARIANT
CSS:
h3 {font-variant:small-caps;}
XHTML:
<p>Đây là chữ hoa và chữ thường hiển thị trong Firefox</p>
<h3>Đây là chữ in hoa nhỏ hiển thị trong Firefox</h3>
Bài 3 - Tạo style cho font và văn bản 19
ĐẶT FONT CHO TOÀN BỘ WEBSITE
Áp dụng cách viết css dạng linked
CSS:
body {font-family: Tahoma, Geneva, sans-serif; font-size: 25px; color: #000;}
Bài 3 - Tạo style cho font và văn bản 20
THUỘC TÍNH CỦA TEXT
THUỘC TÍNH CỦA TEXT
text-indent: lùi đầu dòng
letter-spacing: khoảng cách giữa các ký tự
word-spacing: khoảng cách giữa các từ
text-decoration
Text
text-align: căn đoạn text
line-height: độ cao của dòng
text-transform: thay đổi thành in hoa trên một phần từ
vertical-align: di chuyển ký tự lên, xuống trên một dòng

LETTER-SPACING
CSS:
p {letter-spacing:.2em;}
Bài 3 - Tạo style cho font và văn bản 25