Bài 3 Tạo style cho font và văn bản - Giáo trình FPT

Bài 3Tạ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 webCấu trúc & Quy tắc khai báo CSSPseudo-Class (lớp giả)Tính kế thừa trong CSSKhai báo giá trị màu sắc và số trong CSS

Cách áp dụng CSS cho trang webCấu trúc & Quy tắc khai báo CSSPseudo-Class (lớp giả)Tính kế thừa trong CSSKhai 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ề fontMột số thuộc tính quan trọng của FontMột số thuộc tính quan trọng của TextKích thước của font, text trong HTMLCách viết CSS rút gọn (shorthand)

Giới thiệu về fontMột số thuộc tính quan trọng của FontMột số thuộc tính quan trọng của TextKích thước của font, text trong HTMLCách viết CSS rút gọn (shorthand)


GIỚI THIỆU VỀ FONT


Font là những kiểu chữ khác nhauThường dùng font serif và fon sans-serif:

Serif: font có chânSans-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ểutượ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ìnhthức chung của chúng

Font là những kiểu chữ khác nhauThường dùng font serif và fon sans-serif:

Serif: font có chânSans-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ểutượ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ìnhthứ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:

Serif: font có chânSans-serif: font không chân, chuyên nghiệpMonospace: cách khoảng đều cho mọi ký tựFantasy: cách để chỉ định font, nên tránh sử dụngCursive: 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ìnhduyệ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òngfont 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ânSans-serif: font không chân, chuyên nghiệpMonospace: cách khoảng đều cho mọi ký tựFantasy: cách để chỉ định font, nên tránh sử dụngCursive: 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ìnhduyệ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òngfont 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áchcá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 trongdanh 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áchcá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 trongdanh sách này thì dùng font mặc định của trình duyệt


THUỘC TÍNH CỦA FONT

THUỘC TÍNH CỦA FONT

font

Font-style


fontFont-

weightFont-

variant

12

FONT-STYLE

font-style

Inherit: font chữmang tính kế

thừa

Italic: chữ innghiêng


font-style

Normal: chữ bìnhthường

Oblique: chữ innghiêng

13

FONT-STYLE

CSSp {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

inherit100-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 đổidạng kế thừa

Normal: chuyểnđổi dạng bình

thườngfont-variant

Normal: chuyểnđổi dạng bình

thường

small-caps: chuyểnđổi in thườngthà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

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ơn0) 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ơnkhi ta bắt đầusử 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ữacác chữ cái.Giá trị dương tăng khoảng cách ký tự, còn giá trị âmgiảm đi.Khuyến nghị sử dụng các giá trị tương đối như emhoặ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ùngthay đổ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ữacác chữ cái.Giá trị dương tăng khoảng cách ký tự, còn giá trị âmgiảm đi.Khuyến nghị sử dụng các giá trị tương đối như emhoặ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ùngthay đổ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áctừCSS coi bất cứ ký tự hoặc nhóm ký tự được phâncá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ộpvă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ứaCSS coi văn bản đó là một dòng văn bản dài trongmột hộp, ngay cả khi văn bản được chia thànhnhiề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ộpvă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ứaCSS coi văn bản đó là một dòng văn bản dài trongmột hộp, ngay cả khi văn bản được chia thànhnhiề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ướcfont*/; 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: 1pxsolid #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 đổimà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ướcfont*/; 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: 1pxsolid #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 đổimà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)

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

Á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 CSSGiả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 CSSGiảm thiểu đáng kể thời gian viết mã CSS


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

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ượngfont. 


TỔNG KẾT

Thường sử dụng họ font font serif và sans-serif trêntrang webKhi dùng font, trình duyệt sẽ ưu tiên dùng font khai báotừ trái sang phải trong thuộc tính font-familyTrường hợp không có font yêu cầu, trình duyệt sẽ dùngfont mặc địnhThuộc tính hay sử dụng của font: font-weight, font-styleThuộc tính hay sử dụng của text: text-decoration,vertical-align, text-alignVớ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êntrang webKhi dùng font, trình duyệt sẽ ưu tiên dùng font khai báotừ trái sang phải trong thuộc tính font-familyTrường hợp không có font yêu cầu, trình duyệt sẽ dùngfont mặc địnhThuộc tính hay sử dụng của font: font-weight, font-styleThuộc tính hay sử dụng của text: text-decoration,vertical-align, text-alignVớ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)

Documents

Bài 3 Tạo style cho font và văn bản - Giáo trình FPT