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

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

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 }

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

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

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

Tagged as: cac thuoc tinh dinh dang van ban, css text, dinh dang van ban trong css, Thuoc tinh CSS

Peter Tran là một Coder, công việc hiện tại của anh ấy là phát triển ứng dụng web với PHP, thời gian rảnh anh ấy thường viết Blog chia sẻ những kiến thức về lập trình và phát triển website. Hãy xem trang cá nhân của anh ấy trên Facebook và Twitter

Bài liên quan

• Định dạng văn bản trong CSS (Phần 2)
• 5 cách viết tắt thường dùng trong CSS
• Tổng hợp các bài học CSS
• CSS Image Sprites là gì?
• CSS absolute position