CUNGHOCWEB 830

Bài 7: Các thuộc tính định dạng text

CSS cung cấp cho chúng ta một số thuộc tính định dạng text như màu sắc, hiển thị chữ in hoa hoặc in thường, vị trí hiển thị, … Những thuộc tính này khá hay và rất quan trọng vì nó quyết định tính thẩm mỹ cho các dòng chữ trong website.

Trong bài chúng ta tìm hiểu một số thuộc tính định dạng cho text như sau:

  • color
  • text-decoration
  • text-transform
  • text-align
  • text-indent

1. Thiết lập chữ in hoa và in thường

Nếu bạn muốn một thẻ nào đó luôn luôn hiển thị in hoa hoặc luôn luôn hiển thị in thường mặc dù ta nhập vào là hoa hay thường thì sử dụng thuộc tính text-transform với các thuộc tính:

  • uppercase: chuyển đổi in hoa
  • lowercase: chuyển đổi in thường
  • none: không chuyển đổi gì cả (mặc định)

Ví dụ: Bạn muốn in hoa toàn bộ các thuộc tính nằm trong thẻ p bạn viết như sau

p{
    text-transform: uppercase;
}

2. Thiết lập vị trí của text

Nếu bạn muốn đoạn text hiển thị ở gữa màn hình hoặc bên trái, bên phải thì sử dụng thuộc tính text-align với các giá trị:

  • center: hiển thị ngay giữa
  • left: hiển thị bên trái
  • right: hiển thị bên phải
  • justify: hiển thị canh đều so với lề phải và lề trái

Ví dụ bạn muốn cho tất cả nội dung trong thẻ p nằm về bên phải, bạn có thể viết như sau:

p{
    text-align: right;
}

3. Thiết lập màu và gạch chân text

Thiết lập màu cho text thì bạn phải đọc kỹ “Bài 5: Tìm hiểu về color trong CSS” để biết màu dùng trong CSS.
Để thiết lập màu cho text bạn dùng thuộc tính color: mã màu;

p{
    color: black;
}

hoặc:

p{
    color: #000;
}

hoặc:

p{
    color: rgb(0,0,0);
}

Còn bạn muốn text có gạch chân, bạn chỉ cần dùng thuộc tính text-decoration: underline; hoặc text-decoration: none; để ẩn gạch chân text.

Chia sẻ bài viết
Nội dung

Bài 5: Cách tạo comment trong Python

Bài 4: Cách khai báo biến trong Python

Bài 3: Cài đặt Intellij IDEA và chạy Hello World trong Python

Bài 2: Hướng dẫn download và cài đặt python trên Windows

Bài 5: Tìm hiểu về Props trong ReactJS

Bài 4: Components trong ReactJS

Bài 3: Giới thiệu JSX trong ReactJS

Bài 2: Cài đặt môi trường chạy ReactJS

Bài 18: Thuộc tính icon trong CSS

Các biểu tượng có thể dễ dàng được thêm vào trang HTML của b...

Bài 17: Thuộc tính box model trong CSS

Bài 16: Thuộc tính outline trong CSS

Bài 15: Thuộc tính Height/Width trong CSS

Chat Icon Close Icon