Thuộc Tính Text Trong CSS

Trang chủ » Hiệu ứng Chữ Css » Thuộc Tính Text Trong CSS

Có thể bạn quan tâm

Học CSS cơ bản và nâng cao
  • CSS cơ bản
  • Giới thiệu CSS
  • CSS là gì ?
  • Cú pháp CSS
  • Include CSS vào HTML
  • Đơn vị
  • Màu (Color)
  • Background
  • Định dạng Font
  • Định dạng Text
  • Hình ảnh
  • Trang trí Link
  • Bảng
  • Đường viền (Border)
  • Căn lề (Margin)
  • List và Marker
  • Padding
  • Con trỏ (Cursor)
  • Outline
  • Kích thước
  • Scrollbar
  • CSS nâng cao
  • Visibility
  • Căn chỉnh vị trí
  • Layer (Thuộc tính z-index)
  • Giới thiệu Pseudo Class
  • Phần tử giả (Pseudo Element)
  • Qui tắc @
  • Media Type
  • Qui tắc @page
  • Định dạng trước khi in
  • Thiết lập Layout
  • Validation
  • Học CSS3 cơ bản
  • Giới thiệu CSS3
  • Rounded Corner
  • Thuộc tính Border Image
  • Multi Background
  • Màu trong CSS3
  • Gradient là gì ?
  • Tạo Shadow
  • Tạo hiệu ứng cho Text
  • Web Font
  • 2D Transform
  • 3D Transform
  • Hiệu ứng (Animation)
  • Chia cột (Multi Column)
  • User Interface
  • Thuộc tính box-sizing
  • Khái niệm CSS Responsive
  • CSS Responsive là gì ?
  • Tra cứu nhanh CSS
  • Tổng hợp tất cả Thuộc tính
  • Danh sách tên màu
  • Web Safe Font
  • Tổng hợp các Hiệu ứng
  • CSS Tool
  • Chuyển đổi PX sang EM
Text trong CSS Trang trước Trang sau

Trong chương này, mình sẽ trình bày cách để định dạng text bởi sử dụng các thuộc tính CSS đa dạng liên quan tới định dạng văn bản. Với một phần tử bất kỳ, bạn có thể thiết lập các thuộc tính text sau:

  • Thuộc tính color được sử dụng để thiết lập màu cho văn bản.

  • Thuộc tính direction được sử dụng để thiết lập hướng cho văn bản.

  • Thuộc tính letter-spacing được sử dụng để thêm hoặc bớt khoảng cách giữa các chữ cái trong một từ.

  • Thuộc tính word-spacing được sử dụng để tăng hoặc giảm khoảng cách giữa các từ trong một câu.

  • Thuộc tính text-indent được sử dụng để tạo độ thụt của văn bản trong một đoạn văn.

  • Thuộc tính text-align được sử dụng để căn chỉnh văn bản trong một tài liệu.

  • Thuộc tính text-decoration được sử dụng để tạo cách dấu gạch ở chân, ở trên, ở giữa văn bản.

  • Thuộc tính text-transform được sử dụng để chuyển văn bản thành chữ hoa hoặc chữ thường.

  • Thuộc tính white-space được sử dụng để định dạng và điều khiển phần khoảng trắng của văn bản.

  • Thuộc tính text-shadow được sử dụng để thiết lập hình bóng (shadow như trong word) xung quanh văn bản.

Thiết lập màu trong CSS

Để thiết lập màu cho văn bản trong CSS, bạn sử dụng thuộc tính color. Giá trị của thuộc tính này là bất kỳ tên màu hoặc định dạng màu hợp lệ nào (Tham khảo chương Color trong CSS). Ví dụ:

<html> <head> </head> <body> <p style="color:red;"> Phan van ban nay duoc viet bang mau do. </p> </body> </html>

Kết quả là:

Xác định hướng văn bản với thuộc tính direction trong CSS

Để xác định hướng cho văn bản trong CSS (từ trái sang phải hay từ phải sang trái), bạn sử dụng thuộc tính direction. Thuộc tính này nhận một trong hai giá trị: ltr (trái sang phải) hoặc rtl (phải sang trái). Ví dụ:

<html> <head> </head> <body> <p style="direction:rtl;"> Van ban se duoc hien thi theo huong tu phai qua trai. </p> </body> </html>

Kết quả là:

Quảng cáo

Thiết lập khoảng cách giữa các chữ cái với thuộc tính letter-spacing trong CSS

Giữa các chữ cái trong một từ nên có khoảng cách bằng bao nhiêu là hợp lý nhất. Để thiết lập khoảng cách này, bạn sử dụng thuộc tính letter-spacing trong CSS. Thuộc tính này có thể nhận giá trị: normal hoặc một số cụ thể. Ví dụ:

<html> <head> </head> <body> <p style="letter-spacing:5px;"> Cac chu cai trong mot tu se co khoang cach la 5 pixel. </p> </body> </html>

Kết quả là:

Thiết lập khoảng cách giữa các từ với thuộc tính word-spacing trong CSS

Thiết lập khoảng cách giữa các từ trong một tài liệu một cách hợp lý sẽ giúp cho Webpage của bạn dễ đọc hơn. Để thiết lập khoảng cách này, bạn sử dụng thuộc tính word-spacing trong CSS. Thuộc tính này có thể nhận giá trị: normal hoặc một số cụ thể. Ví dụ:

<html> <head> </head> <body> <p style="word-spacing:5px;"> Khoang cach giua hai tu lien ke nhau la 5 pixel. </p> </body> </html>

Kết quả là:

Thiết lập độ thụt văn bản với thuộc tính text-indent trong CSS

Trong một Website chất lượng, trong một đoạn văn hay một khối, từ đầu tiên của dòng đầu tiên nên được thiết lập độ thụt dòng hợp lý. Điều này sẽ khiến Website của bạn đẹp và chuyên nghiệp hơn. Để thiết lập độ thụt dòng này, bạn nên sử dụng thuộc tính text-indent trong CSS. Thuộc tính này có thể nhận các giá trị: % hoặc một số cụ thể. Ví dụ:

<html> <head> </head> <body> <p style="text-indent:1cm;"> Dong nay se bi thut le 1 cm. Viec thut dong nay se chi dien ra tren dong dau tien cua doan van. Do thut dong duoc xac dinh boi thuoc tinh text-indent trong CSS. </p> </body> </html>

Kết quả là:

Quảng cáo

Căn chỉnh văn bản với thuộc tính text-align trong CSS

Giống như trong Word, CSS có thuộc tính text-align để giúp bạn trong việc căn chỉnh văn bản. Thuộc tính này có thể nhận một trong các giá trị :left, right, center, justify.

<html> <head> </head> <body> <p style="text-align:right;"> Can chinh ben phai (gia tri right). </p> <p style="text-align:center;"> Can chinh o giua (gia tri center). </p> <p style="text-align:left;"> Can chinh ben trai (gia tri left). </p> </body> </html>

Kết quả là:

Trang trí văn bản với thuộc tính text-decoration trong CSS

Để tạo các dấu gạch ngang ở chân, ở trên hoặc ở giữa một đoạn văn bản, bạn sử dụng thuộc tính text-direction trong CSS. Thuộc tính này có thể nhận giá trị: none, overline (dấu gạch ở trên), underline (gạch chân), line-through (gạch ngang) hoặc blink. Ví dụ:

<html> <head> </head> <body> <p style="text-decoration:underline;"> Doan van nay se co duong gach ngang duoi chan. </p> <p style="text-decoration:line-through;"> Doan van nay se bi gach ngang. </p> <p style="text-decoration:overline;"> Doan van nay se co duong gach ngang tren dau. </p> <p style="text-decoration:blink;"> Doan van nay se co hieu ung blink. Tuy nhien, gia tri blink khong duoc ho tro boi nhieu trinh duyet. </p> </body> </html>

Kết quả là: &minnus;

Thiết lập chữ hoa, chữ thường trong CSS

Để thiết lập chữ hoa hoặc chữ thường cho một đoạn văn bản, bạn sử dụng thuộc tính text-transform trong CSS. Thuộc tính này có thể nhận giá trị: none, capitalize (viết hoa chữ cái đầu tiên của một từ), uppercase (chuyển toàn bộ văn bản thành chữ hoa), hoặc lowercase (chuyển toàn bộ văn bản thành chữ thường). Ví dụ:

<html> <head> </head> <body> <p style="text-transform:capitalize;"> Viet hoa chu cai dau tien. </p> <p style="text-transform:uppercase;"> Viet hoa toan bo chu cai. </p> <p style="text-transform:lowercase;"> Viet thuong toan bo chu cai. </p> </body> </html>

Kết quả là:

Thiết lập khoảng cách của khoảng trắng trong CSS

Giả sử bạn có một dòng văn bản mà truyền tải thông tin quan trọng, và bạn muốn tăng khoảng cách giữa các từ trong đoạn văn này, bạn có thể sử dụng thuộc tính white-space trong CSS. Thuộc tính này có thể nhận giá trị: normal, pre hoặc nowrap. Ví dụ:

<html> <head> </head> <body> <p style="white-space:pre;"> Phan van ban nay co mot doan xuong dong (line break) va duoc xac duoc voi gia tri pre cua thuoc tinh white-space de noi cho trinh duyet xu ly no giong nhu the PRE trong HTML.</p> </body> </html>

Kết quả là:

Tạo shadow trong CSS

Để tạo shadow cho văn bản, bạn sử dụng thuộc tính text-shadow trong CSS. Tuy nhiên thuộc tính này có thể không được hỗ trợ trong một số trình duyệt. Cú pháp:

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

Ví dụ

<html> <head> </head> <body> <p style="text-shadow:4px 4px 8px blue;"> Neu trinh duyet cua ban khong ho tro thuoc tinh text-shadow trong CSS, thi phan van ban se co Blue Shadow. </p> </body> </html>

Kết quả là:

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS. Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại vietjack.com:

  • Cú pháp CSS
  • CSS - Include CSS vào HTML
  • CSS - Màu (Color)
  • CSS - Background
  • CSS - Định dạng Font
  • CSS - Hình ảnh
  • CSS - Trang trí Link
  • CSS - Bảng
  • CSS - Đường viền (Border)
  • CSS - Căn lề (Margin)
  • CSS - Padding
Trang trước Trang sau Bài viết liên quan

  • 160 bài học ngữ pháp tiếng Anh hay nhất

  • 155 bài học Java tiếng Việt hay nhất

  • 100 bài học Android tiếng Việt hay nhất

  • 247 bài học CSS tiếng Việt hay nhất

  • 197 thẻ HTML cơ bản

  • 297 bài học PHP

  • 101 bài học C++ hay nhất

  • 97 bài tập C++ có giải hay nhất

  • 208 bài học Javascript có giải hay nhất

Học cùng VietJack
Tài liệu giáo viên

Trang web chia sẻ nội dung miễn phí dành cho người Việt.

Lớp 1-2-3 Lớp 4 Lớp 5 Lớp 6 Lớp 7 Lớp 8 Lớp 9 Lớp 10 Lớp 11 Lớp 12 Lập trình Tiếng Anh

Chính sách

Chính sách bảo mật

Hình thức thanh toán

Chính sách đổi trả khóa học

Chính sách hủy khóa học

Tuyển dụng

Liên hệ với chúng tôi

Tầng 2, số nhà 541 Vũ Tông Phan, Phường Khương Đình, Quận Thanh Xuân, Thành phố Hà Nội, Việt Nam

Phone: 084 283 45 85

Email: vietjackteam@gmail.com

Tải nội dung trên Google Play Tải nội dung trên IOS Store

CÔNG TY TNHH ĐẦU TƯ VÀ DỊCH VỤ GIÁO DỤC VIETJACK

Người đại diện: Nguyễn Thanh Tuyền

Số giấy chứng nhận đăng ký kinh doanh: 0108307822, ngày cấp: 04/06/2018, nơi cấp: Sở Kế hoạch và Đầu tư thành phố Hà Nội.

2015 © All Rights Reserved. DMCA.com Protection Status

Từ khóa » Hiệu ứng Chữ Css