Định dạng văn bản trong CSS (Phần 1)

Thiết kế Blog giá rẻ  
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. Định dạng màu chữ (Text color)

Thuộc tính color sẽ định dạng màu chữ cho một thành phần nào đó trên trang web. Giá trị của thuộc tính color là các giá trị màu mà CSS hỗ trợ (tên màu trong tiếng Anh, hệ RGB và hệ Hex).

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.

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 }

2. Thuộc tính text-align

Thuộc tính text-align giúp chúng ta canh chỉnh văn bản cho các thành phần trong trang web. Thuộc tính này có 4 giá trị:

• left: canh trái
• right: canh phải
• center: canh giữa
• justify: canh đều

3. 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), và hiệu ứng nhấp nháy (blink).

• Đoạn văn bản hiển thị với thuộc tính text-decoration:none
• Đoạn văn bản hiển thị với giá trị underline
• Đoạn văn bản hiển thị với giá trị blink
• Đoạn văn bản hiển thị với giá trị overline
• Đoạn văn bản hiển thị với giá trị line-through

Thuộc tính text-decoration được sử dụng nhiều nhất để loại bỏ hiệu ứng gạch chân trong các liên kết. Đoạn mã sau sẽ loại bỏ hiệu ứng gạch chân của tất cả các liên kết:

a{ text-decoration: none }

4.Thuộc tính text-transform

Thuộc tính text-transform quy định chế độ in hoa hoặc in thường của đoạn văn bản mà không phụ thuộc vào đoạn văn bản gốc trong HTML.

Các giá trị của thuộc tính text-transform bao gồm:

• uppercase: hiển thị với kiểu chữ in Hoa
• lowercase: hiển thị với kiểu chữ in thường
• capitalize: In hoa các ký tự đầu tiên trong mỗi từ
• none: không áp dụng (Giá trị mặc định)

Ví dụ sau quy định tất cả các thành phần h1 được hiển thị với kiểu chữ in Hoa.

h2{ text-transform: uppercase }

5. Thuộc tính text-indent

Khi thuộc tính text-indent được khai báo, dòng đầu tiên của một đoạn văn bản sẽ được thụt đầu dòng một khoảng. Giá trị của thuộc tính text-indent là các đơn vị đo cơ bản (cm, px, em...).

Đ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

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 }

6. Thuộc tính letter-spacing

Thuộc tính letter-spacing sẽ quy định khoảng cách giữa các từ trong một đoạn văn bản

Đoạn mã sau quy định các từ trong thành phần h2 có khoảng cách là 7px

h2{ letter-spacing: 7px }
Ở bài sau, chúng ta sẽ tìm hiểu các thuộc tính định dạng văn bản với nhóm thuộc tính font.

Nguồn bài viết: Ewebvn

 

Nguồn : chúng tôi sưu tầm từ nhiều nguồn

SHARE

Thiết kế web chuyên nghiệp giá rẻ

Chúng tôi tuyên thiết kế web chuyên nghiệp đẳng cấp giá rẻ với 5 năm kinh nghiệm trong lĩnh vực thiết kế website nếu các bạn có nhu cầu có thể liên hệ Hotline: 0962 66 57 57 || Email: cmay.tt@gmail.com || website: cmay.vn

• 
• 
• 
• 
•