THUỘC TÍNH TEXT – SERIE CSS – 5

THUỘC TÍNH TEXT – SERIE CSS – 5

Thuộc tính của text.

Hello every one, I’m Truyền Mai. Im here to share you about tutorial CSS Basic.

Như các bạn đã thấy: Đoạn trên nhìn rất màu mè, thật ra đó là ví dụ cụ thể về thuộc tính Text Style trong css. Đoạn code trên được viết như sau :

<p style=”color:red; background:blue; text-transform:uppercase;text-align:right;”> Hello every one, I’m Truyền Mai. Im here to share you about tutorial CSS Basic.</p>

Text Styles trong CSS hiện tại có khoảng 13 thuộc tính được sử dụng bao gồm căn lề văn bản, trang trí văn bản, định hướng văn bản,….Cụ thể là có các thuộc tính thường dùng sau:

text-align: Căn lề văn bản.
text-decoration: Trang trí văn bản.
text-indent: Thêm khoảng trống trước văn bản theo chiều ngang từ trái sang phải.
text-shadow: Thêm bóng cho văn bản.
text-transform: Tùy chỉnh việc hiển thị chữ in hoa.

Cụ thể :

1.Text Color:

là thuộc tính dùng để chỉnh màu cho văn bản. Các giá trị của thuộc tính Color bao gồm :

  • Tên màu. Ví dụ: “red”
  • Mã màu HEX. Ví dụ: “#ff0000”
  • Mã màu RGB. ví dụ: “rgb(255,0,0)”

Màu cơ bản của text tùy thuộc vào tùy chỉnh ban đầu của thẻ body. Cái này bạn sẽ bắt gặp khi trực tiếp tham gia chỉnh sửa hoặc build mới 1 trang web.

2.Text Alignment:

Là tùy chỉnh căn lề của một đoạn văn bản. Bao gồm các thuộc tính : Left | Right | Center | justify.

  • Left :

    căn lề trái.

  • Right:

    căn lề phải.

  • Center:

    căn lề giữa.

Justify: Căn đều trái phải trên dưới theo khung đã cho. Để hiểu rõ hơn các bạn nên xem tại đây.

3.Text Decoration:

Đơn giản là trang trí văn bản. Thông thường sẽ gán giá trị none; Bao gồm các thuộc tính:

overline: Gạch trên văn bản

  • Overline:

    Gạch trên văn bản

  • Line-through:

    Gạch giữa văn bản

  • underline:

    Gạch dưới văn bản

4.Text Transformation:

Định dạng font chữ hoa hay thường. Thông thường sẽ gán giá trị normal; Bao gồm các thuộc tính:

uppercase: VIẾT HOA HẾT TOÀN BỘ VĂN BẢN
lowercase: viết thường hết toàn bộ văn bản
capitalize: Viết Hoa Từng Chữ Đầu Tiên Của Văn Bản

5.Text Indentation:

Xác định hàng đầu tiên và thụt vào với 1 giá trị cho trước:

        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

6.Letter Spacing:

Khoảng cách giữa mỗi ký tự:

<p style="letter-spacing: 2px">Spacing 2px per character</p>

7.Line Height:

Khoảng cách giữa mỗi hàng.Giá trị mặc định là 1. Và không có tham số đi theo, được tính theo %. Ví dụ: 1.2 là 120% so với fontsize của element. Có thể hiểu đơn giản là khi fontsize mặc định là 16px, và bạn gán thêm line-height là 2, thì line-height có giá trị số là 32px:

<p style="line-height: 18px">
   Khoảng cách giữa 
   2 dòng text là 18px
</p>

Như trên là những thuộc tính hay dùng trong thiết kế, và một số khác không thông dụng nhưng các bạn có thể tìm hiểu tại đây.