CÔNG TY TNHH Thiết bị HOÀNG THANH
Gallery
Liên Hệ Hoàng Thanh
gpextreme@yahoo.com 0903 398 881
Ngày đăng: 29/05/2013 . Số lần xem: 819

Bài 5: Text Định dạng và thêm vào các kiểu định dạng đặc biệt cho phần nội dung một trang web là một vấn đề quan trọng cho bất cứ nhà thiết kế web nào. Như đã nói, ở bài học này chúng ta sẽ được tìm hiểu về các thuộc tính CSS về định dạng văn bản.

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ư

 

body {

color:#000

}

h1 {

color:#0000FF

}

h2 {

color:#00FF00

}

 

 

 

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>

p{

text-indent:30px

}

 

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>

 

h1, h2 {

text-align:right

}

p{

text-align:justify

}

 

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:

 

h1, h2 {

letter-spacing:7px

}

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

 

h1 {

text-decoration:underline

}

h2 {

text-decoration:overline

}

 

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

 

h1 {

text-transform:uppercase

}

h2 {

text-transform:capitalize

}

Có thể bạn muốn xem

Bài 15: Layers (29/05/2013)
CHIẾC ÁO TẶNG CHA (29/05/2013)
Bài 14: Position (29/05/2013)
SỢ (29/05/2013)
HẠNH PHÚC VÔ HÌNH (29/05/2013)
Bài 13: Float & Clear (29/05/2013)
CƠ HỘI NHỎ NHẤT (29/05/2013)