Bài 2 – Thuộc tính CSS Text

Bài học này mình sẽ hướng dẫn các bạn thuộc tính CSS Text, giúp bạn trình bày văn bản đẹp và chuyên nghiệp theo đúng chuẩn định dạng dành cho một tài liệu.

Bạn thường hay vào các website tuy nhiên rất nhiều trang có nội dung bài viết thường rất sơ sài về trình bày bố cục không hợp lý. Trường hợp này có 2 nguyên nhân:

• Thứ nhất: Là do người lập trình không tạo ra một định dạng  chuẩn
• Thứ hai: Do người viết bài không làm đúng như thiết kế của người lập trình hoặc không được hướng dẫn.

Vậy bạn là một người học css hãy hiểu rõ thuộc tính CSS Text để thực hiện làm tốt việc định dạng chuẩn để website được thiết kế sẽ có nội dung bố cục đẹp hơn

1. Text Color

   Thuộc tính Color sử dụng để đặt màu sắc cho văn bản
   Với CSS, màu sắc thường được xác định giá trị có các dạng như sau:

   • Giá trị Hex có 2 dạng
     +Ví dụ: 6 ký tự “#ffffff”
     + Ví dụ: 3 ký tự “#fff”, “#000”, “#111″…. (Đây là trường hợp đặc biệt nếu như 6 ký tự giống nhau có thể rút ngắn xuống 3 ký tự)
   • Giá trị RGB ví dụ “rgb (255,0,0)”
   • Giá trị Name ví dụ: Red, Green, Blue, White, Dark, Gray…
     
     body { color: blue; } h1 { color: #fff; } h2 { color: rgb(255,0,0); }

     1 2 3 4 5 6 7 8 9 10 11

     body {     color: blue; }   h1 {     color: #fff; }   h2 {     color: rgb(255,0,0); }

      Thực hành ngay với trình soạn thảo css online

2. Text Alignment

   Thuộc tính text-align trong CSS Text để xác định vị trí căn lề của một văn bản
   Các giá trị của thuộc tính là: left, right, center, justify.
   Khi text-align được thiết lập để “justify”, mỗi một dòng được kéo dài và có độ rộng bằng nhau tương ứng với độ rộng của vùng  đó. Các lề trái và bên phải là thẳng (như trên các trang báo). Ví dụ:

   h1 { text-align: center; } p.date { text-align: right; } p.main { text-align: justify; }

   1 2 3 4 5 6 7 8 9 10 11

   h1 {     text-align: center; }   p.date {     text-align: right; }   p.main {     text-align: justify; }

     Thực hành ngay với trình soạn thảo css online

3. Text Decoration

   Thuộc tính text-decoration được sử dụng để thiết lập hoặc xóa bỏ các định dạng của văn bản
   Ngoài ra text-decoration đươc sử dụng để xó bỏ gạch chân văn bản hoặc liên kết cho các mục đích trên một văn bản.
   Ví dụ 1: Bỏ gạch chân cho liên kết

   a { text-decoration: none; }

   1 2 3

   a {     text-decoration: none; }

    Thực hành ngay với trình soạn thảo css online

4. Text Transformation
5. Text Indentation

———————————————————————————————————–

Tác giả: Hoàng Luyến
https://hoangluyen.com/