CSS Text trong CSS3

“Hãy hòa nhã với những kẻ dở hơi. Ai biết được ngày sau bạn có thể phải làm việc cho một kẻ như vậy.”

Bill Gates

Microsoft

Trong bài hướng dẫn tự học CSS3 này, bạn sẽ học cách tạo kiểu văn bản trên các trang web của mình bằng CSS / CSS3, cách CSS Text thông qua các thuộc tính được cung cấp.

Hướng dẫn CSS Text trong CSS
Hướng dẫn CSS Text trong CSS

Định dạng text với CSS

CSS cung cấp một số thuộc tính cho phép bạn định dạng các kiểu văn bản khác nhau như màu sắc, căn chỉnh, khoảng cách, gạch chân, chuyển đổi, v.v … rất dễ dàng và hiệu quả.

Các thuộc tính định dạng văn bản thường được sử dụng là:

  • text-align
  • text-decoration
  • text-transform
  • text-indent
  • line-height
  • letter-spacing
  • word-spacing
  • … Và còn nhiều nữa

Các thuộc tính này cung cấp cho bạn quyền kiểm soát chính xác về hiển thị trực quan trực quan của các ký tự, từ, khoảng trắng, v.v. Giúp cho quá trình lập trình web / lập trình front end được thân thiên hơn, tăng khả năng đọc và tính độc đáo.

>> Tham khảo: Khóa học Lập trình Web Full Stack

Hãy xem cách thiết lập các thuộc tính văn bản này cho một phần tử chi tiết hơn ở phần tiếp theo nhé.

#1. Định dạng màu sắc chữ trong CSS

Màu của văn bản được xác định bởi thuộc tính color trong CSS.

Cú pháp ở trong ví dụ sau sẽ định dạng màu văn bản cho toàn bộ phần body (Phần hiển thị trang web)

body {
    color: #333;
}

Mặc dù, thuộc tính color có vẻ như là một phần của văn bản CSS, nhưng thực ra nó là một thuộc tính độc lập trong CSS.

#2. Căn chỉnh văn bản trong CSS

Thuộc tính text-aglin được sử dụng để đặt căn chỉnh chiều ngang của văn bản.

Văn bản có thể được căn chỉnh theo bốn cách: left, right, center hoặc justify (Căn đều lề trái và phải).

Chúng ta hãy xem một ví dụ để hiểu cơ bản hoạt động của thuộc tính text-align này.

HTML:

<h1>Đây là một tiêu đề được căn trái</h1>
<p>Đây là một đoạn văn bản được căn đều hai bên bằng cách thiết lập giá trị justify cho thuộc tính text-align. Bạn sẽ thấy nó được căn đều hai bên như ở trong Word vậy.</p>

CSS:

h1 {
    text-align: center;
}
p {
    text-align: justify;
}

Lưu ý: Khi căn chỉnh văn bản được đặt jusfity, mỗi dòng được kéo dài sao cho mỗi dòng có chiều rộng bằng nhau (ngoại trừ dòng cuối cùng). Sự liên kết này thường được sử dụng trong các ấn phẩm như các tạp chí và báo chí.

#3. Gạch chân văn bản trong CSS

Thuộc tính text-decoration trong CSS được sử dụng để làm điều này.

Thuộc tính này thường chấp nhận một trong các giá trị sau:

  • underline
  • overline
  • line-through
  • none

Nhưng lưu ý, bạn nên tránh gạch chân văn bản nếu nó không phải là một đường link, vì nó có thể gây nhầm lẫn cho khách truy cập.

HTML:

<h1>Đây là một tiêu đề có gạch trên đầu</h1>
<h2>Đây là một tiêu đề bị gạch ở giữa</h2>
<h3>Đây là một tiêu đề có gạch chân</h3>

CSS:

h1 {
    text-decoration: overline;
}
h2 {
    text-decoration: line-through;
}
h3 {
    text-decoration: underline;
}

Xóa phần gạch chân mặc định khỏi các đường link, thẻ Anchor

Theo mặc định, các đường link (thẻ <a>) trong HTML sẽ có gạch chân. Nhưng thông thường khi lập trình web thực tế, các đường link trong trang web hiện đại được thể hiện bằng màu sắc.

Do đó, người ta thường muốn bỏ gạch chân đi khi CSS cho các đường link.

Trong trường hợp này, cách phổ biến nhất là sử dụng thuộc tính text-decoration.

Chúng ta hãy xem ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào:

HTML:

<a href="#">Đây là một liên kết</a>

CSS:

a {
    text-decoration: none;
    border-bottom: 1px dotted;
}

Lưu ý: Khi bạn tạo một liên kết HTML, các trình duyệt được tạo trong biểu định kiểu sẽ tự động gạch chân nó và áp dụng màu xanh lam (khi di chuột / hover qua thì con trỏ sẽ thay đổi thành biểu tượng bàn tay) để người đọc có thể thấy rõ văn bản nào có thể click được.

#4. Thuộc tính text-transform trong CSS

Thuộc tính text-transform trong CSS được sử dụng để chuyển đổi một văn bản thành:

  • CHỮ IN HOA
  • Viết Hoa Đầu Mỗi Từ
  • chữ in thường

Thông thường, văn bản được tạo sẽ giữ nguyên như cách chúng ta nhập vào trang web. Nhưng nếu bạn cần chuyển đổi nó thì bạn có thể sử dụng như sau mà không cần thay đổi nội dung văn bản gốc:

HTML:

<h1>Đây là tiêu đề 1</h1>
<h2>Đây là tiêu đề 2</h2>
<h3>Đây là tiêu đề 3</h3>

CSS:

h1 {
    text-transform: uppercase;
}
h2 {
    text-transform: capitalize;
}
h3 {
    text-transform: lowercase;
}

#5. Cách thụt lề văn bản trong CSS

Thuộc tính text-indent trong CSS được sử dụng để đặt thụt lề của dòng văn bản đầu tiên trong một khối văn bản.

Nó thường được thực hiện bằng cách chèn khoảng trống trước dòng văn bản đầu tiên.

Kích thước thụt lề có thể được chỉ định bằng cách sử dụng tỷ lệ phần trăm (%), px, em, v.v.

>> Xem lại cách thiết lập các kích thước %, px, em, rem trong bài Thuộc tính font trong CSS

Đoạn css sau sẽ thụt dòng đầu tiên của đoạn văn bằng 100 px.

HTML:

<p>Đây là một đoạn văn bản sẽ bị thụt lề dòng đầu tiên. Bởi vì nó đã được áp dụng thuộc tính text-indent với giá trị là 100px. Hãy có kéo / thu nhỏ trình duyệt của bạn để thấy kết quả rõ hơn</p>

CSS:

p {
    text-indent: 100px;
}

Lưu ý: Việc văn bản được thụt lề từ bên trái hay bên phải tùy thuộc vào hướng văn bản bên trong phần tử. Trong đó, hướng của văn bản được xác định bởi thuộc tính direction trong CSS.

#6. Chỉ định khoảng cách giữa các ký tự trong CSS

Thuộc tính letter-spacing trong CSS được sử dụng để thiết lập khoảng cách ở giữa các ký tự của văn bản.

Thuộc tính này có thể lấy giá trị độ dài tính bằng px, em, rem, v.v. Nó cũng có thể chấp nhận giá trị âm.

Khi thiết lập khoảng cách ký tự, giá trị độ dài biểu thị khoảng cách giữa các từ sẽ bằng: Khoảng cách mặc định + Khoảng cách tăng thêm.

Hãy xem ví dụ sau để hiểu cách thức hoạt động của nó:

HTML:

<h1>Đây là một tiêu đề</h1>
<p>Đây là một đoạn văn bản</p>

CSS:

h1 {
    letter-spacing: -3px;
}
p {
    letter-spacing: 10px;
}

#7. Chỉ định khoảng cách giữa các từ trong CSS

Thuộc tính word-spacing trong CSS được sử dụng để chỉ định khoảng cách bổ sung giữa các từ.

Thuộc tính này có thể chấp nhận giá trị độ dài tính bằng px, em, v.v … Giá trị âm cũng được cho phép.

Hãy thử ví dụ sau để hiểu cách thức hoạt động của thuộc tính này:

HTML:

<p class="one">Đây là một đoạn văn bản bình thường.</p>
<hr />
<p class="two">Đây là một đoạn văn bản được căn đều hai bên bên trong một khối có chiều ngang là 150px. Khoảng cách giữa các từ bây giờ được thiết lập là 20px.</p>

CSS:

p.one {
    word-spacing: 20px;
}
p.two {
    width: 150px;
    word-spacing: 20px;
    text-align: justify;
}

Lưu ý: Khoảng cách từ có thể bị ảnh hưởng bởi text-align: justify;

#8. Chỉ định khoảng cách giữa các dòng văn bản trong CSS

Thuộc tính line-hight trong CSS được sử dụng để đặt chiều cao của dòng văn bản.

Nó cũng được gọi là thuộc tính để thiết lập khoảng cách giữa các dòng văn bản.

Giá trị của thuộc tính này có thể là một số, tỷ lệ phần trăm (%) hoặc độ dài tính bằng px, em, rem, v.v.

HTML:

<p>Đây là một đoạn văn bản</p>
<div>Đây là một đoạn văn bản được đặt trong khối div có chiều ngang là 200px. Các dòng văn bản cách nhau gấp 2 lần khoảng cách mặc định (200%)</div>

CSS:

p {
    line-height: 1.2;
    border: 1px solid #00ff00;
}
div {
    line-height: 200%;
    width: 200px;
    border: 1px solid #ff0000;
}

Lưu ý: Không được phép sử dụng các giá trị âm cho thuộc tính chiều cao dòng.

Nếu giá trị của thuộc tính line-height lớn hơn giá trị của cỡ chữ cho một phần tử, thì sự khác biệt này (được gọi là ‘leading’) bị cắt làm đôi (được gọi là ‘half-leading’) và được phân bổ đều trên top và bottom của in-line box. Hãy xem một ví dụ:

HTML:

<h1>Thay đổi giá trị để thấy sự thay đổi</h1>
<p>Thuộc tính <code>line-height</code> thiết lập khoảng cách giữa các dòng văn bản.<br> Chiều cao dòng của đoạn văn bản này sử dụng giá trị px.</p>

CSS:

p {
    font-size: 14px;
    line-height: 20px;
    background-color: #f0e68c;
}

Ngoài ra, trong quá trình CSS cho văn bản thường hay gặp lỗi tràn văn bản (text overflow). Bạn tham khảo cách xử lý trên W3School nhé.

Chúc mừng bạn đã biết khá rõ về cách CSS Text

Ở trên đây hầu như các thuộc tính CSS Text hay gặp nhất, những tình huống cụ thể thì bạn có thể Google thêm nhé.

Chúc bạn học CSS tốt.

Đọc thêm: Thuộc tính background trong CSS

Có thể bạn muốn xem

Leave a reply

Please enter your comment!
Please enter your name here