Giáo trình Thực hành CSS - Bài 2: Làm việc với các thuộc tính về font chữ và text

LAB 2: CSS (CB)
LÀM VIỆC VỚI CÁC THUỘC TÍNH VỀ FONT CHỮ VÀ TEXT
A – LÝ THUYẾT
I – CÁC THUỘC TÍNH VỀ FONT CHỮ
1 – Thuộc tính font-family
Khái niệm
Thuộc tính font-family có công dụng định nghĩa một danh sách ưu tiên các font sẽ được dùng để hiển thị một thành phần trang web. Theo đó, thì font đầu tiên được liệt kê trong danh sách sẽ được dùng để hiển thị trang web. Nếu như trên máy tính truy cập chưa cài đặt font này thì font thứ hai trong danh sách sẽ được ưu tiêncho đến khi có một font phù hợp
Cách sử dụng
font-fmily: value;
value là tên của font chữ như Arial, Tahoma, “Times New Roman”,
Chú ý: Giá trị của thuộc tính font-family có thể có nhiều loại Font, và mỗi loại Font đó cách nhau bởi “dấu phẩy”;
2 – Thuộc tính font-style
Khái niệm
Thuộc tính font-style định nghĩa việc áp dụng các kiểu in thường (normal), in nghiêng (italic) hay xiên (oblique) lên các thành phần trang web
Cách sử dụng
fon-style: value;
value là một trong các giá trị sau:
Normal: Kiểu in thường
Italic: Kiểu in nghiêng
Oblique: Kiểu hay xiên
3 – Thuộc tính font-variant
Khái niệm
Thuộc tính font-variant được dùng để chọn giữa chế độ bình thường và small-caps của một font chữ
Một font small-caps là một font sử dụng chữ in hoa có kích cỡ nhỏ hơn in hoa chuẩn để thay thế những chữ in thường. Nếu như font chữ dùng để hiển thị không có sẵn font small-caps thì trình duyệt sẽ hiện chữ in hoa để thay thế
Cách sử dụng
font-variant: small-caps
4 – Thuộc tính font-weight
Khái niệm
	Thuộc tính font-weight mô tả cách thức thể hiện của font chữ là ở dạng bình thường (normal) hay in đậm (bold). Ngoài ra, một số trình duyệt cũng hỗ trợ mô tả độ in đậm bằng các con số từ 100 – 900
Cách sử dụng
font-weight: value;
value là một trong các giá trị sau:
Normal: Chữ thường
Bold: Chữ in đậm
100 – 900: Độ đậm của chữ được tăng dần từ giá trị 100 đến giá trị 900
5 – Thuộc tính font-size
Khái niệm
Kích thước của một font được định bởi thuộc tính font-size
Thuộc tính này nhận các giá trị đơn vị đo hỗ trợ bởi CSS bên cạnh các giá trị xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger. Tùy theo mục đích sử dụng của website bạn có thể lựa chon những đơn vị phù hợp. Ví dụ trang web của bạn phục vụ chủ yếu là những người già, thị lực kém hay những người dùng sử dụng các màn hình máy tính kém chất lượng thì bạn có thể cân nhấc sử dụng các đơn vị qui đổi như em hay %. Như vậy sẽ đảm bảo font chữ trên trang web của bạn luôn ở kích thước phù hợp
Cách sử dụng
font-size: value;
value là giá trị được tính bằng đơn vị chiều dài
Chú ý: Thông thường chúng ta sử nên dụng đơn vị là Pixels 
II – CÁC THUỘC TÍNH VỀ TEXT
1 – Thuộc tính color (Mầu chữ)
Định nghĩa
Để định màu chữ cho một thành phần nào đó trên trang web chúng ta sử dụng thuộc tính color. Giá trị của thuộc tính này là các giá trị màu CSS hỗ trợ
Cách sử dụng
color: value;
value là tên mầu hoặc mã mầu
2 – Thuộc tính text-indent
Định nghĩa
Thuộc tính text-indent cung cấp khả năng tạo ra khoảng thụt đầu dòng cho dòng đầu tiên trong đoạn văn bản. Giá trị thuộc tính này là các đơn vị đo cơ bản dùng trong CSS
Cách sử dụng
text-indent: value;
	value là giá trị tính theo đơn vị độ dài để tạo ra khoảng thụt đầu dòng
3 – Thuộc tính text-align
Khái niệm
Thuộc tính text-align giúp bạn thêm các canh chỉnh văn bản cho các thành phần trong trang web
Cũng tương tự như các lựa chọn canh chỉnh văn bản trong các trình soạn thảo văn bản thông dụng như MS Word, thuộc tính này có tất cả 4 giá trị : left (canh trái – mặc định), right (canh phải), center (canh giữa) và justify (canh đều)
Cách sử dụng
text-align: value;
value là một trong 4 giá trị sau:
Left: Canh trái (Mặc định)
Right Canh phải
Center: Canh giữa
Justify: Canh đều
4 – Thuộc tính letter-spacing
Khái niệm
Thuộc tính letter-spacing được dùng để định khoảng cách giữa các ký tự trong một đoạn văn bản
Cách sử dụng
letter-spacing: value;
value là giá trị được tính theo đơn vị độ dài thể hiện khoảng cách giữa các ký tự trong văn bản
5 – Thuộc tính text-decoration
Khái niệm
Thuộc tính text-decoration giúp bạn thêm các hiệu ứng gạch chân (underline), gạch xiên (line-through), gạch đầu (overline), và một hiệu ứng đặc biệt là văn bản nhấp nháy (blink)
Cách sử dụng
text-decoration: value;
value là một trong 4 giá trị sau:
Underline: Gạch chân
Line-through: Gạch xiên
Overline: Gạch đầu
Blink: Nhấp nháy
6 – Thuộc tính text-transform
Khái niệm
Text-transform là thuộc tính qui định chế độ in hoa hay in thường của văn bản mà không phụ thuộc vào văn bản gốc trên HTML
Thuộc tính này có tất cả 4 giá trị: uppercase (in hoa), lowercase (in thường), capitalize (in hoa ở ký tự đầu tiên trong mỗi từ) và none (không áp dụng hiệu ứng – mặc định)
Cách sử dụng
text-transform: value;
value là một trong 4 giá trị sau:
Uppercase: In hoa
Lowercase: In thường
Capitalize: In hoa ở ký tự đầu tiên trong mỗi từ
None: Không áp dụng hiệu ứng (Mặc định)
B – THỰC HÀNH
I – BÀI TẬP THỰC HÀNH
1 – Bài tập
Bài 1:
	Sử dụng tối đa các thuộc tính đã học trong CSS để hoàn thành một mẫu Menu trái (Left Sidebar Menu) như hình 1 dưới đây, cho biết các thông số sau:
Bborder:0px, Cellpading:0px, Cellspacing:0px
Độ rộng của Menu là 220px
Độ cao của thẻ TR chứa Menu Tile là 26px, font: arial, size: 12px
Độ cao của các thẻ TR chứa các Menu Item là 30px, size:11px
II – BÀI TẬP VỀ NHÀ
1 – Bài tập
	Sử dụng tối đa các thuộc tính đã học trong CSS để hoàn thành một mẫu Menu ngang (Navbar Menu) như hình dưới đây. Cho biết các thông số thiết kế như sau:
Bborder:0px, Cellpading:0px, Cellspacing:0px
Độ rộng của Menu là 500px
Độ cao là 32px;
Font:arial, size:11px