Các thuộc tính xử lí văn bản trong CSS - CSS Text

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    4 thg 11, 2022

  • Số lượt xem

    238 lượt xem


CSS Text bao gồm các thuộc tính để định dạng văn bản như kích thước, màu sắc, căn lề,...

Text Color

Thuộc tính color được sử dụng để đặt màu của văn bản. Màu sắc được chỉ định bởi:

  • Tên màu - ví dụ như "red"
  • Giá trị HEX - ví dụ như "# ff0000"
  • Giá trị RGB - ví dụ như "rgb (255,0,0)"
body {    color: blue;  }    h1 {    color: green;  }

 

Text Color và Background Color

Trong ví dụ này, chúng tôi xác định cả thuộc tính background-color và thuộc tính color:

body {    background-color: lightgrey;    color: blue;  }    h1 {    background-color: black;    color: white;  }    div {    background-color: blue;    color: white;  }

Quan trọng: Độ tương phản cao rất quan trọng đối với những người có vấn đề về thị lực. Vì vậy, hãy luôn đảm bảo rằng độ tương phản giữa màu văn bản và màu nền (hoặc hình nền) là tốt!

Text Alignment

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

Văn bản có thể được căn trái hoặc phải, căn giữa hoặc căn đều.

Ví dụ sau hiển thị căn giữa và văn bản căn trái và phải (căn trái là mặc định nếu hướng văn bản từ trái sang phải và căn phải là mặc định nếu hướng văn bản từ phải sang trái):

h1 {    text-align: center;  }    h2 {    text-align: left;  }    h3 {    text-align: right;

Khi thuộc tính text-align được đặt thành "justify", mỗi dòng sẽ được kéo dài để mọi dòng có chiều rộng bằng nhau và các lề trái và phải đều thẳng (giống như trong tạp chí và báo):

div {    text-align: justify;  }

 

Text Align Last

Thuộc tính text-align-last chỉ định cách căn chỉnh dòng cuối cùng của văn bản.

p.a {    text-align-last: right;  }    p.b {    text-align-last: center;  }    p.c {    text-align-last: justify;  }

 

Text Direction

Các thuộc tính directionunicode-bidi có thể được sử dụng để thay đổi hướng văn bản của một element:

p {    direction: rtl;    unicode-bidi: bidi-override;  }

 

Vertical Alignment

Thuộc tính vertical-align thiết lập căn chỉnh theo chiều dọc của một element.

img.a {    vertical-align: baseline;  }    img.b {    vertical-align: text-top;  }    img.c {    vertical-align: text-bottom;  }    img.d {    vertical-align: sub;  }    img.e {    vertical-align: super;  }

 

Text Decoration

Text Decoration bao gồm các thuộc tính:

  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-decoration-thickness
  • text-decoration

Thêm Decoration Line vào văn bản

Thuộc tính text-decoration-line được sử dụng để thêm dòng trang trí vào văn bản.

Mẹo: Bạn có thể kết hợp nhiều giá trị, như gạch ngang và gạch dưới để hiển thị cả dòng trên và dưới văn bản.

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

Lưu ý: Không nên gạch dưới văn bản không phải là liên kết, vì điều này thường gây nhầm lẫn cho người đọc.

Màu sắc cho Decoration Line

Thuộc tính text-decoration-color được sử dụng để đặt màu của đường trang trí.

h1 {    text-decoration-line: overline;    text-decoration-color: red;  }    h2 {    text-decoration-line: line-through;    text-decoration-color: blue;  }    h3 {    text-decoration-line: underline;    text-decoration-color: green;  }    p {    text-decoration-line: overline underline;    text-decoration-color: purple;  }

 

Độ dày cho Decoration Line

Thuộc tính text-decoration-thickness được sử dụng để thiết lập độ dày của đường trang trí.

h1 {    text-decoration-line: underline;    text-decoration-thickness: auto;  }    h2 {    text-decoration-line: underline;    text-decoration-thickness: 5px;  }    h3 {    text-decoration-line: underline;    text-decoration-thickness: 25%;  }    p {    text-decoration-line: underline;    text-decoration-color: red;    text-decoration-style: double;    text-decoration-thickness: 5px;  }

 

Shorthand Property

Thuộc tính text-decoration là một thuộc tính viết tắt cho:

  • text-decoration-line (bắt buộc)
  • text-decoration-color
  • text-decoration-style
  • text-decoration-thickness
h1 {    text-decoration: underline;  }    h2 {    text-decoration: underline red;  }    h3 {    text-decoration: underline red double;  }    p {    text-decoration: underline red double 5px;  }

 

Text Transformation

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

Nó có thể được sử dụng để biến mọi thứ thành chữ hoa hoặc chữ thường hoặc viết hoa chữ cái đầu tiên của mỗi từ:

p.uppercase {    text-transform: uppercase;  }    p.lowercase {    text-transform: lowercase;  }    p.capitalize {    text-transform: capitalize;  }

 

Text Spacing

Text Spacing bao gồm các thuộc tính:

  • text-indent
  • letter-spacing
  • line-height
  • word-spacing
  • white-space

Text Indentation

Thuộc tính text-indent được sử dụng để chỉ định thụt lề của dòng đầu tiên của văn bản:

p {    text-indent: 50px;  }

 

Letter Spacing

Thuộc tính letter-spacing được sử dụng để chỉ định khoảng cách giữa các ký tự trong văn bản.

Ví dụ sau minh họa cách tăng hoặc giảm khoảng cách giữa các ký tự:

h1 {    letter-spacing: 5px;  }    h2 {    letter-spacing: -2px;  }

 

Line Height

Thuộc tính line-height được sử dụng để chỉ định khoảng cách giữa các dòng:

p.small {    line-height: 0.8;  }    p.big {    line-height: 1.8;  }

 

Word Spacing

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

Ví dụ sau minh họa cách tăng hoặc giảm khoảng cách giữa các từ:

p.one {    word-spacing: 10px;  }    p.two {    word-spacing: -2px;  }

 

White Space

Thuộc tính white-space chỉ định cách xử lý khoảng trắng bên trong một element.

p {    white-space: nowrap;  }

 

Text Shadow

Thuộc tính text-shadow thêm bóng vào văn bản.

Trong cách sử dụng đơn giản nhất, bạn chỉ xác định bóng ngang (2px) và bóng dọc (2px):

Text shadow effect!

h1 {    text-shadow: 2px 2px;  }

Tiếp theo, thêm màu (đỏ) vào bóng:

Text shadow effect!

h1 {    text-shadow: 2px 2px red;  }

Sau đó, thêm hiệu ứng mờ (5px) vào bóng:

Text shadow effect!

h1 {    text-shadow: 2px 2px 5px red;  }

 

Một số ví dụ về Text Shadow

Bóng văn bản trên văn bản trắng:

h1 {    color: white;    text-shadow: 2px 2px 4px #000000;  }

Bóng chữ với ánh sáng neon đỏ:

h1 {    text-shadow: 0 0 3px #ff0000;  }

Bóng chữ với ánh sáng neon màu đỏ và xanh lam:

h1 {    text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;  }

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.