Slide 3 - Thiết kế Web cơ bản

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)

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
Sans-serif: font không có chân
Mỗi font là một tập hợp các chữ cái, chữ số và biểu
tượng với một hình thức trực quan độc nhất vô nhị-
Tất cả font nằm trong một tập hợp lớn mô tả hình
thức chung của chúng
Font là những kiểu chữ khác nhau
Thường dùng font serif và fon sans-serif:
Sans-serif: font không có chân
Mỗi font là một tập hợp các chữ cái, chữ số và biểu
tượng với một hình thức trực quan độc nhất vô nhị-
Tất cả font nằm trong một tập hợp lớn mô tả hình
thức chung của chúng

Trang web sử dụng họ font
serif
sans-serif
Bài 3 - Tạo style cho font và văn bản
font monospace
fantasy
cursive
6

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:
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.
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:
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.

Serif
• georgia
• times new roman
Sans-serif
• arial
• tahoma
• vernada
Monospace
• courier new
• lucida console
Cursive
• comic sans ms

DÙNG FONT TRÊN TRANG WEB
Để định nghĩa font được dùng cho một selector nào
đó, CSS dùng thẻ font-family, ví dụ:
font-family: Georgia, "Times New Roman", serif;
Thuộc tính font-family thường gồm một danh sách
các font. Độ ưu tiên dùng từ trái qua phải
font-family: Georgia, "Times New Roman", serif; ->
nếu máy có font "Georgia" thì dùng, không có tìm xem có
font "Times New Roman" thì dùng, không có tìm xem có
font "serif" thì dùng, nếu không tìm thấy font nào trong
danh sách này thì dùng font mặc định của trình duyệt
Để định nghĩa font được dùng cho một selector nào
đó, CSS dùng thẻ font-family, ví dụ:
font-family: Georgia, "Times New Roman", serif;
Thuộc tính font-family thường gồm một danh sách
các font. Độ ưu tiên dùng từ trái qua phải
font-family: Georgia, "Times New Roman", serif; ->
nếu máy có font "Georgia" thì dùng, không có tìm xem có
font "Times New Roman" thì dùng, không có tìm xem có
font "serif" thì dùng, nếu không tìm thấy font nào trong
danh sách này thì dùng font mặc định của trình duyệt

THUỘC TÍNH CỦA FONT
font
Font-
style
font
Font-
weight
Font-
variant
12

FONT-STYLE
font-style
Inherit: font chữ
mang tính kế
thừa
Italic: chữ in
nghiêng
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:
Đây là văn bản in nghiêng với một đoạn không in nghiêng ở
giữa.

FONT-WEIGHT
a {font-weight:bold;}
lighter
inherit
100-
900
Font-
weight
normal
bold
bolder
15

FONT-WEIGHT
CSS:
p {font-style:normal; font-weight:bolder}
span {font-style:normal; font-weight:bold}
XHTML:
Đây là đoạn văn bản sử dụng thuộc tính bolder và thuộc tính bold
 của font

FONT-WEIGHT

FONT-VARIANT
font-variant
Inherit: chuyển đổi
dạng kế thừa
Normal: chuyển
đổi dạng bình
thường
font-variant
Normal: chuyển
đổi dạng bình
thường
small-caps: chuyển
đổi in thường
thành in hoa

FONT-VARIANT
CSS:
h3 {font-variant:small-caps;}
XHTML:
Đây là chữ hoa và chữ thường hiển thị trong Firefox
<h3>Đây là chữ in hoa nhỏ hiển thị trong Firefox</h3>

ĐẶ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;}

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

TEXT-INDENT
CSS:
p {text-indent:3em;}
XHTML:
Đoạn văn bản này được lùi đầu dòng 3 em. Bởi giá trị là dương (lớn hơn
0) nên tất cả văn bản đều nằm trong thẻ chứa. Mọi thứ trở nên phức tạp hơn
khi ta bắt đầu
sử dụng lề âm để dòng đầu tiên tiến lên phía trước.

LETTER-SPACING
Thuộc tính này tạo ra thứ mà những nhà thiết kế in
ấn gọi là tracking, một khoảng cách toàn cục giữa
các chữ cái.
Giá trị dương tăng khoảng cách ký tự, còn giá trị âm
giảm đi.
Khuyến nghị sử dụng các giá trị tương đối như em
hoặc % thay cho các giá trị tuyệt đối như pixel để
khoảng cách giữ được tỷ lệ ngay cả khi người dùng
thay đổi font chữ.
Thuộc tính này tạo ra thứ mà những nhà thiết kế in
ấn gọi là tracking, một khoảng cách toàn cục giữa
các chữ cái.
Giá trị dương tăng khoảng cách ký tự, còn giá trị âm
giảm đi.
Khuyến nghị sử dụng các giá trị tương đối như em
hoặc % thay cho các giá trị tuyệt đối như pixel để
khoảng cách giữ được tỷ lệ ngay cả khi người dùng
thay đổi font chữ.

LETTER-SPACING
CSS:
p {letter-spacing:.2em;}

TEXT-DECORATION
underline
overlinenone
text-
decoration
line-
through
blink
inherit
26

TEXT-DECORATION
CSS:
p {text-decoration:line-through;}

WORD-SPACING
Đặt khoảng cách từ: thay đổi khoảng cách giữa các
từ
CSS coi bất cứ ký tự hoặc nhóm ký tự được phân
cách bởi ký tự cách (space bar) là một từ

WORD-SPACING
CSS:
p {word-spacing: .2em;}

CON RẮN VĂN BẢN
CSS đặt một hộp bao quanh văn bản trong một thẻ
Các thuộc tính văn bản được áp dụng cho một hộp
văn bản bên trong dài trên nhiều dòng như con rắn,
không phải là hộp của thành phần chứa
CSS coi văn bản đó là một dòng văn bản dài trong
một hộp, ngay cả khi văn bản được chia thành
nhiều dòng để vừa với thành phần chứa
CSS đặt một hộp bao quanh văn bản trong một thẻ
Các thuộc tính văn bản được áp dụng cho một hộp
văn bản bên trong dài trên nhiều dòng như con rắn,
không phải là hộp của thành phần chứa
CSS coi văn bản đó là một dòng văn bản dài trong
một hộp, ngay cả khi văn bản được chia thành
nhiều dòng để vừa với thành phần chứa

CON RẮN VĂN BẢN
CSS:
p {border: 2px solid red;}
span {border: 2px solid green;}
XHTML:
Đây là một đoạn văn bản dài…

SỬ DỤNG STYLE FONT VÀ VĂN BẢN

SỬ DỤNG STYLE FONT VÀ VĂN BẢN
CSS:
*{margin:0; padding:0;} /* định nghĩa selector * áp dụng cho mọi thẻ */
body {font-family: verdana, arial, sans-serif; font-size: 100% /* đặt kích thước
font*/; margin: 1em; background-color: #DFE;}
img {border: 0;}
h1 {font-size: 1.1em; text-transform: upper-case; text- align: center; letter-spacing:
.2em; margin: .5em 0;}
h3 {font-size: .7em; word-spacing: 1em; letter-spacing:-.05em; border-bottom: 1px
solid #069; padding: 0 0.5em 1em;}
p {font-size: .75em; line-height: 1.4em; text-indent: -1.75em; margin: 0.5em 2em;}
ul, ol {font-size: .75em; margin-left: 6em; line-height: 1.25; color: #444;}
#contentarea a {margin-left: 6em;} /* định nghĩa vùng nội dung*/
a {color: #036; font-style: italic;}
a:hover {color: #069; text-decoration: none;}/* khi hover chuột qua text sẽ thay đổi
màu sắc*/
acronym {border-bottom: 1px dotted; cursor: default;}
#homepagefooter {border-top:1px solid #069;}
CSS:
*{margin:0; padding:0;} /* định nghĩa selector * áp dụng cho mọi thẻ */
body {font-family: verdana, arial, sans-serif; font-size: 100% /* đặt kích thước
font*/; margin: 1em; background-color: #DFE;}
img {border: 0;}
h1 {font-size: 1.1em; text-transform: upper-case; text- align: center; letter-spacing:
.2em; margin: .5em 0;}
h3 {font-size: .7em; word-spacing: 1em; letter-spacing:-.05em; border-bottom: 1px
solid #069; padding: 0 0.5em 1em;}
p {font-size: .75em; line-height: 1.4em; text-indent: -1.75em; margin: 0.5em 2em;}
ul, ol {font-size: .75em; margin-left: 6em; line-height: 1.25; color: #444;}
#contentarea a {margin-left: 6em;} /* định nghĩa vùng nội dung*/
a {color: #036; font-style: italic;}
a:hover {color: #069; text-decoration: none;}/* khi hover chuột qua text sẽ thay đổi
màu sắc*/
acronym {border-bottom: 1px dotted; cursor: default;}
#homepagefooter {border-top:1px solid #069;}

KÍCH THƯỚC FONT, TEXT
Points Pixels ems Percent (%)
6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
11pt 15px 0.875em 87.5%
12pt 16px 1em 95%

CÁCH VIẾT CSS RÚT GỌN
(SHORTHAND)

Áp dụng cho cùng một đối tượng (font, background,
margin, padding …)
Ưu điểm:
Giúp tối ưu hóa về mặt dung lượng cho file CSS
Giảm thiểu đáng kể thời gian viết mã CSS
Áp dụng cho cùng một đối tượng (font, background,
margin, padding …)
Ưu điểm:
Giúp tối ưu hóa về mặt dung lượng cho file CSS
Giảm thiểu đáng kể thời gian viết mã CSS

CSS:
p {font: bold italic small-caps .75em verdana, arial, sans-serif;}
XHTML:
Đây là đoạn văn bản được áp dụng tất cả các thuộc tính của đối tượng
font.

TỔNG KẾT
Thường sử dụng họ font font serif và sans-serif trên
trang web
Khi dùng font, trình duyệt sẽ ưu tiên dùng font khai báo
từ trái sang phải trong thuộc tính font-family
Trường hợp không có font yêu cầu, trình duyệt sẽ dùng
font mặc định
Thuộc tính hay sử dụng của font: font-weight, font-style
Thuộc tính hay sử dụng của text: text-decoration,
vertical-align, text-align
Với những thuộc tính về font, background, padding,
margin có thể áp dụng được cách viết rút gọn
(shorthand)
Thường sử dụng họ font font serif và sans-serif trên
trang web
Khi dùng font, trình duyệt sẽ ưu tiên dùng font khai báo
từ trái sang phải trong thuộc tính font-family
Trường hợp không có font yêu cầu, trình duyệt sẽ dùng
font mặc định
Thuộc tính hay sử dụng của font: font-weight, font-style
Thuộc tính hay sử dụng của text: text-decoration,
vertical-align, text-align
Với những thuộc tính về font, background, padding,
margin có thể áp dụng được cách viết rút gọn
(shorthand)

Slide 3 - Thiết kế Web cơ bản

More Related Content

What's hot

Similar to Slide 3 - Thiết kế Web cơ bản

Recently uploaded

Slide 3 - Thiết kế Web cơ bản