HỌC HTML & CSS|Định dạng văn bản trong css

5.1. Màu chữ (thuộc tính 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ợ.
Ví dụ sau chúng ta sẽ viết CSS để định màu chữ chung cho một trang web là đen, cho tiêu đề h1 màu xanh da trời, cho tiêu đề h2 màu xanh lá chúng ta sẽ làm như

 

1	body {
2	color:#000
3	}
4	h1 {
5	color:#0000FF
6	}
7	h2 {
8	color:#00FF00
9	}

5.2. 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. Trong ví dụ sau chúng ta sẽ định dạng thụt đầu dòng một khoảng 30px cho dòng văn bản đầu tiên trong mỗi đoạn văn bản đối với các thành phần <p>

 

1	p {
2	text-indent:30px
3	}

5.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) và 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>

 

1	h1, h2 {
2	text-align:right
3	}
4	p {
5	text-align:justify
6	}

5.4. 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:

 

1	h1, h2 {
2	letter-spacing:7px
3	}
4	p { letter-spacing:5px }

5.5. Thuộc tính text-decoration:

Thuộc tính text-decoration giúp bạn thêm các hiệu ứng gạch chân (underline), gạch xiên (line-through), gạch đầu (overline), và một hiệu ứng đặc biệt là văn bản nhấp nháy (blink).
Ví dụ sau chúng ta sẽ định dạng gạch chân cho thành phần h1, gạch đầu thành phần h2

 

1	h1 {
2	text-decoration:underline
3	}
4	h2 {
5	text-decoration:overline
6	}

5.6. 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ừ) và none (không áp dụng hiệu ứng – mặc định).
Trong ví dụ dưới đây chúng ta sẽ định dạng cho thành phần h1 là in hoa, h2 là in hoa đầu mỗi ký tự.

 

1	h1 {
2	text-transform:uppercase
3	}
4	h2 {
5	text-transform:capitalize
6	}

Xem thêm tài liệu html css tại mục chia sẻ

Đào tạo lập trình chúc các bạn thành công

Tin tức khác:

 + Khóa học lập trình web php

 + Khóa học thiết kế web

 + Khóa đào tạo quản trị web