Hướng dẫn đó cao chữ css

Ở bài hướng dẫn này, bạn sẽ được tìm hiểu một số thuộc tính định dạng chữ như sau:

• font-size - thiết lập kích cỡ chữ
• font-weight - thiết lập sự tô đậm của chữ
• font-style - thiết lập sự in nghiêng của chữ
• font-family - thiết lập kiểu chữ

Thiết lập KÍCH CỠ CHỮ

Thuộc tính font-size dùng để thiết lập kích cỡ chữ của văn bản

Giá trị của thuộc tính font-size có thể xác định theo đơn vị:

• px [Xem ví dụ]
• em (tỷ lệ 1em = 16px) [Xem ví dụ]
• % (tỷ lệ phần trăm so với kích cỡ chữ của phần tử chứa nó) [Xem ví dụ]

Lưu ý: Nếu không thiết lập kích cỡ chữ cho văn bản thì mặc định văn bản có kích cỡ chữ là 16px

Thiết lập CHỮ TÔ ĐẬM

Thuộc tính font-weight dùng để thiết lập sự tô đậm của chữ.

Thuộc tính font-weight có hai giá trị cơ bản:

• normal: không tô đậm
• bold: tô đậm

Thiết lập CHỮ IN NGHIÊNG

Thuộc tính font-style dùng để thiết lập sự in nghiêng của chữ.

Thuộc tính font-style có ba giá trị cơ bản:

• normal: không in nghiêng
• italic: in nghiêng
• oblique: in nghiêng (giống italic, nhưng độ in nghiêng ít hơn)

Thiết lập KIỂU CHỮ

Khái niệm font chữ & nhóm font chữ

Font chữ chính là kiểu chữ, mẫu mã của chữ. Ví dụ, một số font chữ quen thuộc như: Times New Roman, Arial, Lucida Console,....

Các font chữ có cùng một vài nét tương đồng nào đó về hình dáng sẽ được xếp chung một nhóm.

Có ba nhóm font chữ cơ bản là:

• Serif
• Sans-Serif
• Monospace

Bảng dưới đây là tất cả các font chữ thuộc nhóm Serif:

Bảng dưới đây là tất cả các font chữ thuộc nhóm Sans-Serif:

Bảng dưới đây là tất cả các font chữ thuộc nhóm Monospace:

Cách thiết lập kiểu chữ cho văn bản

Để thiết lập kiểu chữ cho văn bản, ta sử dụng thuộc tính font-family với giá trị là tên font chữ.

Không phải mọi trình duyệt đều hỗ trợ hết tất cả các font chữ phía trên.

Để phòng trường hợp khi ta thiết lập font chữ mà trình duyệt không hỗ trợ dẫn đến việc hiển thị không như ý, ta sẽ thiết lập thêm vài font chữ khác để se cua (nếu font một không được hỗ trợ thì sẽ đến font hai, nếu font hai không được hỗ trợ thì đến font ba,....)

p {
    font-family: "Comic Sans MS", cursive, sans-serif;
}

Xem ví dụ

Lưu ý:

• Các font chữ phải được ngăn cách nhau bởi dấu phẩy.
• Các font chữ có nhiều hơn một từ phải được đặt bên trong cặp dấu ngoặc kép " " hoặc ngoặc đơn ' '
• Font chữ cuối cùng nên là tên nhóm font chữ, vì chắc chắn tên nhóm font chữ sẽ được mọi trình duyệt hỗ trợ

- Chức năng của nhóm thuộc tính text-decoration là dùng để thiết lập một cái đường kẻ lên văn bản.

- Nhóm thuộc tính text-decoration được chia ra làm ba thuộc tính chính:

• text-decoration-line
• text-decoration-style
• text-decoration-color

1) Thuộc tính text-decoration-line

- Thuộc tính text-decoration-line dùng để chỉ định vị trí của cái đường kẻ.

- Cú pháp:

text-decoration-line: value;

- Trong đó, value có thể được xác định dựa theo một trong các giá trị sau đây:

2) Thuộc tính text-decoration-style

- Thuộc tính text-decoration-style dùng để xác định kiểu của cái đường kẻ.

- Cú pháp:

text-decoration-style: value;

- Trong đó, value có thể được xác định dựa theo một trong các giá trị sau đây:

3) Thuộc tính text-decoration-color

- Thuộc tính text-decoration-color dùng để xác định màu sắc của cái đường kẻ.

    
    


   
1 2 3 4 5
   
1 2 3 4 5
   
1 2 3 4 5

Xem ví dụ

4) Thuộc tính text-decoration

- Thuộc tính text-decoration là cú pháp tổng quát dùng để thiết lập một cái đường kẻ lên văn bản (thay vì phải sử dụng kết hợp ba thuộc tính text-decoration-line, text-decoration-style, text-decoration-color được nêu ở trên thì bây giờ chúng ta chỉ cần sử dụng mỗi thuộc tính này là đủ)

- Cú pháp:

text-decoration: line color style;

- Trong đó, line color style lần lượt là giá trị của ba thuộc tính text-decoration-line text-decoration-color text-decoration-style

- Tuy nhiên, thuộc tính text-decoration không bắt buộc chúng ta phải gán cho nó đủ ba tham số, những tham số của thuộc tính nào còn thiếu thì trình duyệt sẽ tự động sử dụng giá trị mặc định của thuộc tính tương ứng.

    
    


   
1 2 3 4 5 6 7 8 9
   
1 2 3 4 5 6 7 8 9
   
1 2 3 4 5 6 7 8 9

Xem ví dụ