[CSS] Bài 7. Định Dạng Text

Trong thiết kế web, việc trình bày và định dạng nội dung rất quan trọng, Bên cạnh nội dung tốt thì nội dung còn phải được được trình bày rõ ràng, mạch lạc. Bài viết này chúng ta sẽ cùng tìm hiểu một số thuộc tính định dạng văn bản trong CSS.

1. Tổng Quát:

7 Thuộc tính chúng ta sẽ tìm hiểu:

- Text color: định dạng màu cho đoạn văn.

- Text-align: Canh chỉnh đoạn văn.

- Text -decoration: thêm hiệu ứng vào text

- Text-Transform: chế độ in hoa in thường

- Text-indent: thục đầu dòng văn bản.

- Letter-spacing: khoãng cách giữa các kí tự trong đoạn văn

- Word-spacing: khoãng cách giữa các từ trong đoạn văn.

2. Định Dạng Màu Chữ (Color)

Để  định  màu  chữ  cho  một  thành  phần nào đó trên trang web chúng ta sử dụng thuộc tính color. Giá trị của thuộc tính này là các giá trị màu CSS hỗ trợ.
Mặc định, khi không được khai báo thì CSS trình duyệt sẽ quy định màu chữ của toàn bộ trang là màu đen.

Cách Dùng:

1	color: #006600;

2	color: green;

3	color: rgb(0, 102, 0);

4	color:  transparent;

Các giá trị của background-color có thể là:

• Tên màu (tiếng anh), ví dụ: black, green…
• Hệ màu RGB, ví dụ: rgb(255,0,0)
• Hệ hex, ví dụ: #000000

Giả sử bây giờ chúng ta muốn màu chữ toàn bộ trang là màu đen, các liên kết có màu vàng cam, các thành phần h1 có màu xanh, thì ta sẽ viết CSS như sau:

body{ color: #000}
a{ color: #f98000 }
h1{ color: blue }

3.Thuộc tính Text-Align:

Thuộc tính text-align giúp bạn thêm các canh chỉnh văn bản cho các thành phần trong trang web.
Cũng tương tự như các lựa chọn canh chỉnh văn bản trong các trình soạn thảo văn bản thông dụng như MS Word, thuộc tính này có tất cả 4 giá trị :

• left (canh trái – mặc định) 
• right (canh phải) 
• center (canh giữa) 
• justify (canh đều). 

Trong ví dụ sau chúng ta sẽ thực hiện canh phải các thành phần h1, h2 và canh đều đối với thành phần <p>

h1, h2 { text-align:right }
p { text-align:justify }

4. Thuộc tính Text-decoration:

Thuộc tính text-decoration được sử dụng để thêm vào các hiệu ứng:

• gạch chân (underline) 
• gạch xiên (line-through) 
• gạch đầu (overline) 
• hiệu ứng nhấp nháy (blink). 
• không có hiệu ứng (none) 

Ví Dụ:

<p class='und'>gạch chân (underline)</p>
<p class='line'>gạch xiên (line-through)</p>
<p class='over'>gạch đầu (overline)</p> 
  <p class='blin'>hiệu ứng nhấp nháy (blink)</p>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

5.Thuộc tính text-transform

Text-transform là thuộc tính qui định chế độ in hoa hay in thường của văn bản mà không phụ thuộc vào văn bản gốc trên HTML.
Thuộc tính này có tất cả 4 giá trị: 

• uppercase (in hoa)
• lowercase (in thường)
• capitalize (in hoa ở ký tự đầu tiên trong mỗi từ)
• none (không áp dụng hiệu ứng – mặc định).

6. Thuộc Tính Text-indent:

Thuộc tính text-indent cung cấp khả năng tạo ra khoảng thụt đầu dòng cho dòng đầu tiên trong đoạn văn bản. Giá trị thuộc tính này là các đơn vị đo cơ bản dùng trong CSS.

Đoạn mã sau sẽ quy định dòng đầu tiên của tất cả các thành phần p sẽ được thụt đầu dòng một khoảng 30px

1	p{ text-indent: 30px }

* Khi gán cho thuộc tính text-indent một giá trị âm thật lớn cho một thành phần nào đó, thì văn bản của thành phần đó sẽ không được hiện thị. Trường hợp này thường được áp dụng để quy định thuộc tính hiển thị của đoạn văn bản so với ảnh nền (chỉ có nền được hiển thị).
Ví dụ:

p.logo{ text-indent: -999999px } 

Text được hiển thị so với ảnh nền


Không hiển thị khi text-indent:-999999px

7. Thuộc Tính letter-spacing

Thuộc tính letter-spacing được dùng để định khoảng cách giữa các ký tự trong một đoạn văn bản.
Muốn định khoảng cách giữa các ký tự trong thành phần h1, h2 là 7px và thành phần <p> là 5px chúng ta sẽ viết CSS sau:

h1, h2 {  letter-spacing:7px
}
p { letter-spacing:5px }

8. Thuộc Tính Word-Spacing:

Thuộc tính word-spacing được dùng để định khoảng cách giữa các tự trong một đoạn văn bản.
Muốn định khoảng cách giữa các từ trong thành phần h1, h2 là 7px và thành phần <p> là 5px chúng ta sẽ viết CSS sau:

h1, h2 {
word-spacing:7px
}
p { word-spacing:5px }

9. Bài Tập:

Thiết kết một trang HTML như hình dưới:
Yếu Cầu:
- Sử dụng CSS để định dạng tất cả các thành phần của website.
- Đối với text toàn bộ phải viết bằng chữ thường và định dạng với text.

để định dạng.