Chào các bạn, hôm nay chúng ta sẽ đến với phần 5 : Thuộc tính của text (văn bản) .
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
- 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. Bao gồm các thuộc tính:
- số :
khoảng cách thụt vào của hàng đầu tiên là 50px
6.Letter Spacing:
Khoảng cách giữa mỗi ký tự. Bao gồm các thuộc tính:
- số :
Khoảng cách giữa mỗi ký tự là 3px
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. Bao gồm các thuộc tính:
- số :
Khoảng cách giữa mỗi hàng là 1.8
Khoảng cách giữa mỗi hàng là 1.8
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.
