Văn bản và định dạng văn bản trong CSS

Ảnh minh họa về màu sắc, đơn vị tính trong css

☀ Font chữ css.

Tất cả các thuộc tính font chữ trong css sẽ được liệt kê và ví dụ bên dưới, các bạn chú ý nhé.

- Font-size: Thiết lập kích cỡ cho một font chữ.

- Font-style: Thiết lập kiểu style của font chữ, giá trị của font-style gồm italic (kiểu chữ in nghiêng) và normal (kiểu chữ bình thường)

- Font-family: Họ font áp dụng cho thành phần css đó, ví dụ họ font Arial, Tahoma,...

- Font-weight: Thiết lập độ đậm của chữ, giá trị gồm

+ 100, 200, 300, 400, 500, 600, 700, 800 và 900 (độ đậm từ thấp đến cao)

+ normal (giá trị mặc định, tương đương với font-weight: 400.), bold (giá trị tương đương với khi xác định là 700).

+ bolder (các chữ cái trong phần tử này sẽ đậm hơn các chữ cái trong phần tử cha).

+ lighter (các chữ cái trong phần tử cha sẽ đậm hơn các chữ cái trong phần tử con).

VD minh họa font chữ

font-size:24pt

Đoan văn bản font size:24pt

font-style:italic

Đoạn văn bản áp dụng css italic

font-weight:bold

Đoạn văn bản áp dụng font weight bold

☀ Định dạng văn bản trong css

Các thuộc tính định dạng văn bản trong css bao gồm :

- Color: Thiết lập màu sắc cho văn bản.

- Text-align : Căn chỉnh lề của văn bản, giá trị : left (căn trái), right (căn phải), center (căn giữa), justify (căn đều)

- Text-transform: Chuyển đổi kí tự trong một thành phần được gán css, giá trị: none (mặc định), capitalize (chữ cái đầu của mỗi từ viết hoa), uppercase (viết hoa toàn bộ), lowercase(viết thường toàn bộ)

- Text-decoration : Thêm trang trí cho văn bản, giá trị: none (mặc định), underline (gạch dưới văn bản), overline (gạch bên trên văn bản), line-through (gạch ngang văn bản).

- Text-indent: Khoảng thụt vào ở dòng đầu tiên của văn bản trong một thành phần, giá trị : px,pt, %

VD định dạng văn bản

color:red

Đoạn văn bản áp dụng color red

text-align:right

Đoạn văn bản áp dụng text align right

text-transform: uppercase

ĐOẠN VĂN BẢN ÁP DỤNG TEXT TRANSFORM UPPERCASE

text-decoration:underline

Đoạn văn bản áp dụng text-decoration underline

text-indent:20px

        Đoạn văn bản áp dụng text-indent 20px

Chúc các bạn thành công !