VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • C#
  • Python
  • PHP
  • Excel
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • HTML5
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Eclipse
    • Phần mềm tiện ích
    • Cấu trúc DL&GT
    • Selenium Test

CSS Tuts

CSS là gì? Cú pháp CSS Bộ chọn CSS Liên kết css với html Đơn vị đo trong CSS Mã màu trong CSS Comment trong CSS

CSS Các thuộc tính

CSS Background CSS Border Font trong CSS Định dạng văn bản (Text) trong CSS Image trong CSS Link trong CSS Bảng trong CSS Căn lề trong CSS List trong CSS Thuộc tính padding trong CSS Con trỏ trong CSS Thuộc tính outline trong CSS Kích cỡ trong CSS Scrollbar trong CSS Thuộc tính visibility trong CSS Căn chỉnh vị trí trong CSS Thuộc tính z-index trong CSS Pseudo Class trong CSS Pseudo Element trong CSS Các quy tắc trong CSS Kiểu Media trong CSS Layout trong CSS Validation trong CSS

CSS nâng cao

Giới thiệu CSS3 Bo tròn góc trong CSS Border Image trong CSS
1 / 3
❮ ❯

Định dạng văn bản (Text) trong CSS


Font trong CSS
Image trong CSS

Bài này chúng ta sẽ tìm hiểu về các cách để định dạng dạng văn bản (Text) trong CSS bởi sử dụng các thuộc tính CSS đị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.


Nội dung chính

  • Thiết lập màu văn bản trong CSS
  • Thiết lập hướng văn bản với thuộc tính direction trong CSS
  • 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
  • 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 độ thụt văn bản với thuộc tính text-indent trong CSS
  • Căn chỉnh văn bản với thuộc tính text-align trong CSS
  • Trang trí văn bản với thuộc tính text-decoration trong CSS
  • Thiết lập chữ hoa, chữ thường trong CSS
  • Thiết lập khoảng cách của khoảng trắng trong CSS
  • Tạo shadow trong CSS

Thiết lập màu văn bản 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 bài Mã màu trong CSS ). Ví dụ:


<html>
<head>
<meta charset="UTF-8">
   </head>
   <body>
      <p style="color:red;">
      Đoạn văn bản này có màu đỏ.
      </p>
   </body>
</html>

Kết quả:


Thiết lập hướng văn bản với thuộc tính direction trong CSS

Để Thiết lập 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>
<meta charset="UTF-8">
   </head>
   <body>
      <p style="direction:rtl;">
      Đoạn văn bản sẽ được hiển thị theo hướng từ trái qua phải.
      </p>
   </body>
</html>

Kết quả:


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>
<meta charset="UTF-8">
   </head>
   <body>
      <p style="letter-spacing:6px;">
	  Các chữ cái trong một từ sẽ có khoảng cách là 6 pixel.
      </p>
   </body>
</html>

Kết quả:


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>
<meta charset="UTF-8">
   </head>
   <body>
      <p style="word-spacing:6px;">
	  Khoảng cách giữa hai từ liền kề nhau là 6 pixel.
      </p>
   </body>
</html>

Kết quả:


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>
<meta charset="UTF-8">
   </head>
   <body>
      <p style="text-indent:1.5cm;">
         Dòng này bị thụt lề 1.5 cm, áp dụng cho dòng đâu tiên của đoạn văn.<br>
		 Thiết lập độ thụt văn bản với thuộc tính text-indent trong CSS
      </p>
   </body>
</html>

Kết quả:


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>
<meta charset="UTF-8">
   </head>
   <body>
      <p style="text-align:right;">
      Căn chỉnh bên phải (right).
      </p>
      
      <p style="text-align:center;">
      Căn chỉnh giữa (center).
      </p>
      
      <p style="text-align:left;">
      Căn chỉnh bên trái (left).
      </p>
      
   </body>
</html>

Kết quả:


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>
<meta charset="UTF-8">
   </head>
   <body>
      <p style="text-decoration:underline;">
      Đoạn văn bản này có đường gạch ngang dưới chân.
      </p>
      
      <p style="text-decoration:line-through;">
      Đoạn văn bản này sẽ bị gạch chân.
      </p>
      
      <p style="text-decoration:overline;">
      Đoạn văn bản này có đường gạch gang trên đầu.
      </p>
      
      <p style="text-decoration:blink;">
	  Đoạn văn bản này nhấp nháy (blink).
	  Tuy nhiên, một số trình duyệt không hỗ trợ hiệu ứng blink.
      </p>
   </body>
</html>

Kết quả: &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>
<meta charset="UTF-8">
   </head>
   <body>
      <p style="text-transform:capitalize;">
      Viết hoa chữ cái đầu tiên.
      </p>
      
      <p style="text-transform:uppercase;">
      Viết hoa toàn bộ chữ cái.
      </p>
      
      <p style="text-transform:lowercase;">
      viết thường toàn bộ chữ cái.
      </p>
    </body>
</html>

Kết quả:


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>
<meta charset="UTF-8">
   </head>
   <body>
      <p style="white-space:pre;">
      Đoạn văn bản này có một đoạn xuống dòng (line break) 
	  và được thiết lập với giá trị pre của thược tính white-space
	  để nói cho trình duyệt xử lý nó giống như PRE trong HTML.
	  </p> 
   </body>
</html> 

Kết quả:


Tạo shadow trong CSS

Để tạo hiệu ứng đổ bóng (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>
<meta charset="UTF-8">
   </head>
   <body>
      <p style="text-shadow:4px 4px 8px blue;">
      Đoạn văn bản có hiệu ứng đổ bóng Violet Shadow.
      </p>
   </body>
</html> 

Kết quả:


Font trong CSS
Image trong CSS

Recent Updates

Border Image trong CSSBo tròn góc trong CSSGiới thiệu CSS3Layout trong CSSCác quy tắc trong CSSPseudo Element trong CSSPseudo Class trong CSSThuộc tính z-index trong CSSCăn chỉnh vị trí trong CSSThuộc tính visibility trong CSSScrollbar trong CSSKích cỡ trong CSSSắp Tết 2026 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2026?

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring
Học Excel | Excel VBA
Học Servlet | JSP | Struts2
Học C | C++ | C#
Học Python
Học SQL

Bài Tập Có Lời Giải

Bài tập Java
Bài tập C
Bài tập C++
Bài tập C#
Bài tập Python
Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml