CSS 05 – Các thành phần trong CSS (P.3)

0
86

4. Các thuộc tính về font chữ

Ở trong văn bản Word, khi bạn muốn thiết lập các thuộc tính về font chữ thì bạn sẽ sử dụng thanh công cụ. Trong văn bản HTML, để thao tác với các thuộc tính về font chữ thì bạn cần sử dụng các thuộc tính của nó.

a. Font-family

Thuộc tính này dùng để thiết lập font chữ cho phần tử. Giá trị của thuộc tính này chính là tên font chữ.
Cú pháp:

Ví du:

See the Pen vp_css_font_family_examp by Thien (@anhtomks) on CodePen.0

b. Font-style

Thuộc tính này sử dung để thiết lập kiểu chữ cho thành phần. Giá trị của thuộc tính này bao gồm :

  • italic – kiểu chữ in nghiêng
  • normal – kiểu chữ thường.

Cú pháp:

Ví du:

See the Pen vp_css_font-style_examp by Thien (@anhtomks) on CodePen.0

c. Font-variant

Thuộc tính này thiết lập kiểu chữ in hoa chữ nhỏ. Giá trị của nó là small-caps. Thuộc tính này ngày nay ít được sử dụng.

Cú pháp:

Ví dụ:

See the Pen vp_css_font-variant_examp by Thien (@anhtomks) on CodePen.0

d. Font-weight

Thuộc tính này thiết lập độ đậm cho ký tự. Giá trị của thuộc tính này gồm có:

  • Normal : Chữ thường
  • Blod : Chữ in đậm
  • 100-900 : Tăng dần độ đậm cho chữ

Cú pháp :

Ví dụ:

See the Pen vp_css_font_weight_examp by Thien (@anhtomks) on CodePen.0

e. Font-size

Thuộc tính này dùng để thiết lập kích cỡ cho chữ. Giá trị của nó là đơn vị độ dài tính bằng px.

Cú pháp:

Ví dụ :

See the Pen vp_css_font_size_examp by Thien (@anhtomks) on CodePen.0

f. Cú pháp rút gọn

Để sử dụng các thuộc tính trên chỉ với một dòng lệnh ta có cú pháp sau:

Ví dụ :

5. Các thuộc tính về text

a. Thuộc tính color

Thuộc tính color sử dụng để thiết lập màu cho đoạn text. Giá trị của thuộc tính này là tên màu trong tiếng anh hoặc là mã màu.

Cú pháp :

Ví dụ:

See the Pen vp_css_color_examp by Thien (@anhtomks) on CodePen.0

b. Thuộc tính text-indent

Thuộc tính này quy định khoảng thụt đầu dòng cho đoạn văn bản là bao nhiêu. Giá trị của thuộc tính này là đơn vị độ dài .

Cú pháp :

Ví dụ:

See the Pen RZQvMv by Thien (@anhtomks) on CodePen.0

c. Thuộc tính text-align

Thuộc tính này quy định vị trí của đoạn text so với thành phần bao ngoài của nó. Giá trị của thuộc tính này gồm có:

  • Left : nằm về phía bên trái
  • Right: nằm về bên phải
  • Center: nằm ở giữa
  • Justify: cách đều hai bên

Cú pháp:

Ví dụ:

See the Pen vp_css_text_align_examp by Thien (@anhtomks) on CodePen.0

d. Thuộc tính letter-spacing

Thuộc tính này dùng để thiết lập khoảng cách giữa các ký tự trong văn bản. Giá trị của nó là giá trị độ dài.

Cú pháp :

Ví dụ:

See the Pen vp_css_letter_spacing_examp by Thien (@anhtomks) on CodePen.0

e. Thuộc tính word-spacing

Thuộc tính này dùng để thiết lập khoảng cách giữa các từ trong văn bản với nhau. Giá trị của nó là giá trị độ dài.

Cú pháp :

Ví dụ:

See the Pen vp_css_word-spacing_examp by Thien (@anhtomks) on CodePen.0

f. Thuộc tính line-height

Thuộc tính này sử dụng để tạo khoảng cách giữa các dòng trong văn bản. Giá trị của thuộc tính này là giá trị độ dài.

Cú pháp :

Ví dụ:

See the Pen vp_css_line-height_examp by Thien (@anhtomks) on CodePen.0

g. Thuộc tính text-decoration

Thuộc tính này được sử dụng để định dạng kiểu chữ. Giá trị của thuộc tính này bao gồm:

  • Underline: Gạch chân
  • Line-throught: Gạch ngang
  • Overline: Gạch trên
  • None : Chữ bình thường

Cú pháp:

Ví dụ:

See the Pen vp_css_text-decoration_examp by Thien (@anhtomks) on CodePen.0

h. Thuộc tính text-transform

Thuộc tính này dùng để thiết lập kiểu chữ. Giá trị của thuộc tính này bao gồm :

  • Uppercase: viết hoa toàn bộ các chữ cái
  • Lowercase: viết thường toàn bộ các chữ cái
  • Capitalize: viết in hoa chữ cái đầu tiên của mỗi từ
  • None: không chịu ảnh hưởng hiệu ứng

Cú pháp:

Ví dụ:

See the Pen vp_css_text-transform_examp by Thien (@anhtomks) on CodePen.0

 

Tác giả: Thiện Nguyễn

[Total: 0    Average: 0/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here