Khóa học CSS - Bài 10 - Xử lý chữ

Quay về mục lục học CSS

1. Màu chữ

Trong CSS thuộc tính color dùng để định màu chữ.

Thuộc tính này có thể nhận các loại giá trị sau:

· Tên – ví dụ: “đỏ”

· Mã hex – ví dụ: #ff0000

· Mã rgb – ví dụ: rgb(255,0,0)

Ví dụ:

body {
    color: blue;
}

h1 {
    color: green;
}

2. Canh lề nội dung

Thuộc tính text-align dùng canh lề chữ theo chiều ngang.

Các giá trị thuộc tính này có thể nhận:

• Left – lệch về bên trái
• Right – lệch về bên phải
• Center – canh giữa
• Justify – canh đều hai bên

Ví dụ:

h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}

và các thẻ HTML trong phần body

<h1>Giữa</h1>

<h2>Trái</h2>

<h3>Phải</h3>

3. Text Decoration

Thuộc tính text-decoration dùng để thiết lập hay loại bỏ phần trang trí khỏi phần chữ.

Thuộc tính này có thể nhận các giá trị sau:

· none : bỏ gạch dưới trong liên kết.

· underline : gạch dưới.

· overline : gạch trên.

· line-through : gạch giữa chữ.

Ví dụ:

a {
    text-decoration: none;
}

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

Thêm thẻ HTML sau trong phần body:

<a href="#">Loại bỏ gạch dưới trong siêu liên kết</a>

<h1>overline</h1>

<h2>line-through</h2>

<h3>underline</h3>

4. Text Transformation

Thuộc tính text-transformation dùng chuyển đổi chữ Hoa – thường.

Các giá trị có thể nhận:

• uppercase : CHỮ HOA
• lowercase : chữ thường
• capitalize : Chữ Hoa Đầu

Ví dụ:

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

Và các thẻ HTML trong phần body

<p class="uppercase">lớp học vi tính</p>

<p class="lowercase">lớp học vi tính</p>

<p class="capitalize">lớp học vi tính</p>

5. Thụt đầu dòng – Text identation

Dùng để định dạng thụt đầu dòng trong đoạn văn.

Ví dụ:

p {
    text-indent: 50px;
}

<p> Một con dê con được người chăn dê để lại trên mái chuồng dê để tránh cho nó khỏi bị thú dữ ăn thịt.Dê con đang nhảy ra gần cạnh mái chuồng, bỗng nó nhìn thấy một con cáo và dê bắt đầu chế giễu cáo, nheo mũi và thỏa sức lăng mạ cáo.Cáo nói,:“Ờ tao nghe mày chửi đây, điều mày nói chẳng hề hấn gì với tao đâu, nhưng coi chừng  mái chuồng  sắp xụp kia.”</p>

6. Khoảng cách chữ - Letter spacing

Thuộc tính letter-spacing dùng để tăng hoặc giảm khoảng cách của mỗi chữ trong 01 từ.

Ví dụ:

h1 {
    letter-spacing: 3px;
}

h2 {
    letter-spacing: -3px;
}

và các thẻ HTML trong phần body

<h1>Lớp học vi tính .COM</h1>

<h2>Lớp học vi tính .COM</h2>

7. Chiều cao dòng – Line Height

Thuộc tính line-height dùng để định khoảng cách giữa các dòng.

Mặc định trình duyệt thiết lập khoảng cách giữa các dòng từ 110% đến 120%.

Ví dụ:

p{
    line-height: 0.8;
}

và thẻ html sau trong phần body:

<p>

<br>Hôm nay trời đẹp nắng hồng,</br>

<br>Tôi buồn không hiểu vì sao tôi buồn.</br>

</p>

Các bạn sửa lại giá trị 0.8 => 1.8 rồi xem sự khác biệt.

8. Hướng của chữ - Text Direction

Thuộc tính text-direction xác định hướng của chữ.

Thuộc tính này có các giá trị sau:

• ltr : left to right – chữ từ trái sang phải (mặc định)
• rtl : right to left  - chữ từ phải sang trái.

Ví dụ:

p {
    direction: rtl;
}

9. Khoảng cách giữa các chữ - Word Spacing

Thuộc tính word-spacing là khoảng cách giữa các từ trong 01 đoạn văn.

Ví dụ:

h1 {
    word-spacing: 10px;
}

và thẻ HTML trong phần body:

<h1>Lớp học vi tính .COM</h1>

Sau đó các bạn thử sửa lại giá trị 10px => -5px

10. Bóng đổ của chữ - Text Shadow

Thuộc tính shadow định bóng đổ cho chữ.

Thuộc tính này có các giá trị: ngang dọc màu.

Ngang và dọc là tọa độ của bóng.

Ví dụ:

h1 {
    text-shadow: 3px 2px red;
}

Nếu có gì thắc mắc, các bạn xem thêm video clip sau:

Quay về mục lục học CSS

Tác giả: #drM

Nguồn: Sưu Tầm