Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 38 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
38
Dung lượng
7,33 MB
Nội dung
Bài3Tạostylechofontvàvănbả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ài3 - Tạostylechofontvàvănbả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ài3 - Tạostylechofontvàvănbản3 GIỚI THIỆU VỀ FONT GIỚI THIỆU VỀ FONTFont 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: 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 Bài3 - Tạostylechofontvàvănbản 5 GIỚI THIỆU VỀ FONT Trang web sử dụng họ font serif sans-serif Bài3 - Tạostylechofontvàvănbảnfont monospace fantasy cursive 6 GIỚI THIỆU VỀ FONT 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. 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ài3 - Tạostylechofontvàvănbản 7 GIỚI THIỆU VỀ FONTBài3 - Tạostylechofontvàvănbản 8 GIỚI THIỆU VỀ FONT Serif • georgia • times new roman Sans-serif • arial • tahoma • vernada Bài3 - Tạostylechofontvàvănbản 9 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 Bài3 - Tạostylechofontvàvănbản 10 [...]...THUỘC TÍNH CỦA FONT THUỘC TÍNH CỦA FONT Fontstyle font Fontvariant Bài3 - Tạostylechofontvàvănbản Fontweight 12 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 Bài3 - Tạostylechofontvàvănbản 13 FONT -STYLE CSS p {font -style: italic;} span {font -style: normal;} XHTML: Đây là vănbản in nghiêng với một... Bài3 - Tạostylechofontvàvănbản 14 FONT- WEIGHT a {font- weight:bold;} lighter 100900 inherit Fontweight bolder normal bold Bài3 - Tạostylechofontvàvănbản 15 FONT- WEIGHT CSS: p {font -style: normal; font- weight:bolder} span {font -style: normal; font- weight:bold} XHTML: Đây là đoạn vănbản sử dụng thuộc tính bolder và thuộc tính bold của fontBài3 - Tạostylechofont và. .. đoạn vănbản dài… Bài3 - Tạostylechofontvàvănbản 31 SỬ DỤNG STYLEFONTVÀVĂNBẢNBài3 - Tạostylechofontvàvănbản 32 SỬ DỤNG STYLEFONTVÀVĂNBẢ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:... {text-decoration:line-through;} Bài3 - Tạostylechofontvàvănbản 27 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ừ Bài3 - Tạostylechofontvàvănbản 28 WORD-SPACING CSS: p {word-spacing: 2em;} Bài3 - Tạostylechofontvàvănbản 29 CON RẮN VĂNBẢN CSS đặt một hộp bao quanh vănbản trong một thẻ Các thuộc tính văn. .. 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ữ Bài3 - Tạostylechofontvàvănbản 24 LETTER-SPACING CSS: p {letter-spacing:.2em;} Bài3 - Tạostylechofontvàvănbản 25 TEXT-DECORATION underline none overline textdecoration linethrough inherit blink Bài3 - Tạostylechofont và vănbản 26 TEXT-DECORATION CSS:... Tạostylechofont và vănbản 16 FONT- WEIGHT Bài3 - Tạostylechofont và vănbản 17 FONT- VARIANT Inherit: chuyển đổi dạng kế thừa font- variant Normal: chuyển đổi dạng bình thường small-caps: chuyển đổi in thường thành in hoa Bài3 - Tạostylechofontvàvănbản 18 FONT- VARIANT CSS: h3 {font- variant:small-caps;} XHTML: Đây là chữ hoa và chữ thường hiển thị trong Firefox Đây là chữ in hoa... trên một dòng Bài3 - Tạostylechofont và vănbản 22 TEXT-INDENT CSS: p {text-indent:3em;} XHTML: Đoạn vănbả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ănbả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. Bài3 - Tạostylechofont và vănbản 23 LETTER-SPACING Thuộc tính này tạo ra thứ mà... solid #069;} Bài3 - Tạostylechofontvàvănbản 33 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% 9pt 12px 0.75em 75% 10pt 13px 0.8em 80% 11pt 15px 0.875em 87.5% 12pt 16px 1em 95% Bài3 - Tạostylechofontvàvănbản 34 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,... chữ thường hiển thị trong Firefox Đây là chữ in hoa nhỏ hiển thị trong Firefox Bài3 - Tạostylechofontvàvănbản 19 ĐẶT FONTCHO 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ài3 - Tạostylechofontvàvănbả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:... bao quanh vănbản trong một thẻ Các thuộc tính vănbản được áp dụng cho một hộp vănbả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ănbản đó là một dòng vănbản dài trong một hộp, ngay cả khi vănbản được chia thành nhiều dòng để vừa với thành phần chứa Bài3 - Tạostylechofontvàvănbản 30 CON RẮN VĂNBẢN CSS: p {border: 2px solid red;} span {border: . CỦA FONT font Font- style 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. chúng Bài 3 - Tạo style cho font và văn bản 5 GIỚI THIỆU VỀ FONT 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 GIỚI THIỆU VỀ FONT Cách. ở giữa.</p> Bài 3 - Tạo style cho font và văn bản 14 FONT- WEIGHT a {font- weight:bold;} lighter inherit 100- 900 Bài 3 - Tạo style cho font và văn bản Font- weight normal bold bolder 15 FONT- WEIGHT CSS: p