Simple CSS Bài 5: Định dạng văn bản

Dựa trên bài viết của Pearl tại phpcodevn

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ư

view source

print?

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

view source

print?

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

view source

print?

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

là 5px chúng ta sẽ viết CSS sau:

view source

print?

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

view source

print?

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ự.

view source

print?

1

h1 {

2	text-transform:uppercase

3

}

4

h2 {

5	text-transform:capitalize

6

}

Bài viết của link2caro - Cộng Đồng WordPress Việt Nam
Hãy tôn trọng tác giả và ghi rõ nguồn khi sao chép, sử dụng nội dung bài viết này.