+ Thuộc tính font-family:

- Font-family là thuộc tính quy định kiểu font dùng để hiển thị một thành phần hay một phần tử nào đó của html ( VD: quy định văn bản hiển thị bằng font "Georgia", các thẻ <h1> đến <h6> hiển thị bằng font "Arial" ...).

• Để xác định thuộc tính này cho các phần tử của html, ta có cách viết sau:

font-family:<Tên các font hoặc các họ font>;

- Các font cách nhau bằng dấu phẩy và nếu trong tên font chứa dấu cách, tên font phải được viết bên trong dấu nháy kép ( VD: "Times New Roman"...).

Tại sao ở đây lại nói là "các font" và "họ font" - thì mình xin giải thích qua như sau:

Giá trị mà thuộc tính font-family nhận có thể là nhiều font khác nhau và mức độ ưu tiên sử dụng cuar trình duyệt giảm dần.

Nghĩa là, font nào viết đầu tiên sẽ được trình duyệt sử dụng nếu trình duyệt không được hỗ trợ font đó thì trình duyệt sẽ sử dụng font tiếp theo để hiển thị.

- Họ font là tên font bao gốm nhiều loại font khác nhau (vd: VNI...), khi viết bạn chỉ cần viết tên họ font thì trình duyệt sẽ hiểu tên đó đại diện cho tất cả các loại font có họ đó.

- VD: body{font-family:Georgia, "Times New Roman", Arial, VNI;}

+ Thuộc tính font-size

- Là thuộc tính quy định cỡ chữ hiển thị một thành phần hay một phần tử nào đó trong một trang web.

- Cú pháp: font-size:<Kích cỡ chữ>;

- Kích cỡ chữ ở đây có thể là độ lớn của các đơn vị đo kích thước thông dụng, nhưng hầu hết người ta dùng đơn vị pixed.

- Kích cỡ chữ của các thành phần còn có thể xác định qua cỡ chữ được quy định trong thành phần body của trang, bằng cách sau:

body{font-size:15px;}
h1{font-size: 3em;}
h3{font-size:1,5em;}

- Ở đây ta đã quy định rằng: size chữ của phần tử h1 gấp 3 lần và của phần tử h3 gấp 1,5 lần size chữ dùng trong phần body của trang.

- Ngoài ra, ta còn một số size đặc biệt sau:

Size smaller
Size xx-small
Size x-small
Size small
Size medium
Size large
Size x-large
Size xx-large

+ Thuộc tính font-style:

- Thuộc tính quy định kiểu chữ hiển thị trong một thành phần của trang web là bình thường (Normal - Đây là giá trị mặc định) , in nghiêng ( Italic ) hay xiên ( Oblique ).

- Cú pháp: font-style:" Kiểu chữ ";

- VD: <p style="font-style:Italic"> Chữ in nghiêng </p>

- Kết quả: Chữ in nghiêng

+ Thuộc tính font-variant:

- Đây là thuộc tính biến chữ bình thường thành một dạng chữ in hoa, nhưng dạng chữ in hoa này bé hơn chữ in hoa chuẩn.

- Cú pháp: font-variant:small-caps;

- VD:

<ul>

<li>CHỮ IN HOA THƯỜNG</li>

<li style="font-variant:small-caps;">CHỮ IN HOA DÙNG FONT-VARIANT</li>

<li style="font-variant:small-caps;">Chữ thường dùng font-variant</li>

</ul>

- Kết quả:

CHỮ IN HOA THƯỜNG

CHỮ IN HOA DÙNG FONT-VARIANT

Chữ thường dùng font-variant

- Ta có thể thấy rõ, thuộc tính font-variant chỉ có tác dụng với chữ thường

+ Thuộc tính font-weight:

- Thuộc tính này quy định kiểu hiển thị in đậm ( bold )hay không ( normal- đây là giá trị mặc định ) của chữ trong một thành phần của trang web.

- Cú pháp: font-weight: bold;

- Ví dụ: <p style="font-weight:bold"> Chữ in đậm</p>

- Kết quả:

Chữ in đậm

2, Thuộc tính của font rút gọn

Khi bạn xác định các thuộc tính này cho các phần tử của html, nhiều khi các bạn sẽ thấy nhàm chán khi cứ phải lạch cạch viết lại các từ giống nhau. Để khắc phục điều này, CSS hỗ trợ cách viết rút gọn cho các thuộc tính thay vì phải viết một cách đầy đủ cú pháp các thuộc tính ra mà vẫn cho hiệu quả tương tự.

- Với các thuộc tính của font, các bạn có thể viết rút gọn các giá trị mỗi thuộc tính theo thứ tự sau:

font:<font-style> <font-variant> <font-weight> <font-size> <font-family>;

- Nếu bạn không muốn định dạng thuộc tính nào, bạn không viết thuộc tính ấy, và thuộc tính ấy sẽ nhận giá trị mặc định.

-VD: < font: Italic 15px Georgia;> ... </font>

Ở đây, ta đã bỏ trống thuộc tính font-variant và font-weight vì vậy chúng sẽ nhận giá trị mặc định là: font-variant:norma; font-weight:normal;

Đăng bởi Uyên Vũ Tags: lập trình web