CĂN BẢN
CSS3
CSS RESPONSIVE
CSS PARALLAX
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Các thuộc tính CSS đị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.

test php

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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

Còn khá nhiều nhưng mình không trình bày ở đây.

1. Chon màu cho chữ với color

Ta sử dụng thuộc tính color để gán màu sắc cho chữ.

Bài viết này được đăng tại [free tuts .net]

Trong CSS thì ta sử dụng 3 cách biểu diễn color như sau:

  • HEX: có định dạng #ma_mau
  • RGB: có định dạng rgb(xxx,yyy,zzz)
  • Tên màu: ví dụ red, blue
Ví dụ: Thiết lập màu cho hai class color-redcolor-bluecolor-pink

XEM DEMO

.color-red{
    color: red;
}

.color-blue{
    color: blue;
}
.color-pink{
    color:#d624d0
}

2. 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ụ: Dùng CSS chuyển in hoa và in thường

XEM DEMO

.upper{
    text-transform: uppercase;
}

.lower{
    text-transform: lowercase;
}

Có thể bạn quan tâm:

3. Thiết lập vị trí của text (giữa, trái, phải)

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ụ: Sử dụng text-align để xác định vị trí hiển thị của chữ

XEM DEMO

.show-center{
    text-align: center;
}
.show-left{
    text-align: left;
}
.show-right{
    text-align: right;
}
.show-justify{
    text-align: justify;
}

4. Thiết lập gạch  chân cho chữ

Để gạch chân cho chữ thì bạn sử dụng thuộc tính text-decoration với giá trị:

  • underline: gạch chân
  • none: bỏ gạch chân
Ví dụ: Cho gạch chân chữ  trong thẻ div có class="gach-chan"

XEM DEMO

.gach-chan{
    text-decoration: underline;
    text-decoration-color: #28a4c9;
}

5. Xác định vị trí hiển thị chữ với text-indent

Nếu bạn muốn chữ hiển thị ở một vị trí nào đó tính từ góc trái trên cùng (tính theo pixels) thì bạn dùng thuộc tính text-indent. Thuộc tính này thường dùng để gắn trong nội dung thẻ a của logo và sau đó dùng nó để ẩn text đi.

Ví dụ: Cho nội dung bên trong thẻ div biến khỏi màn hình

Ta sử dụng text-indent và giá trị của nó là số pixel lớn hơn kích thước màn hình (tính theo số âm).

XEM DEMO

.hide-text{
    text-indent: -9999px
}

6. Lời kết

Bài này ta tìm hiểu được 6 thuộc tính định dạng cho text, những thuộc tính này khá căn bản nhưng hay dùng. Tuy nhiên vẫn còn nhiều thuộc tính nhưng ta ít khi dùng tới và mình cũng không thể nào biết và liệt kê hết ra được. 

Cùng chuyên mục:

Tạo Trang web E-commerce  từ HTML & CSS

Tạo Trang web E-commerce từ HTML & CSS

Validate form bằng HTML5

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ script html ...

Top