Hướng dẫn text-transform css

Posted on by mtoplistChuyên mục:Top List

  • Trang chủ
  • Tham khảo
  • CSS
  • Thuộc tính text-transform

Nội dung chính

Show

  • Định nghĩa và sử dụng
  • Cấu
    trúc
  • Trình duyệt hỗ trợ
  • Định nghĩa và sử dụng
  • Cấu trúc
  • Trình duyệt hỗ trợ
  • 1) Thuộc tính text-transform trong CSS
  • 2) Cách sử dụng thuộc tính text-transform trong CSS

Định nghĩa và sử dụng

Thuộc tính text-transform thiết lập các ký tự viết hoa cho văn bản.

Cấu
trúc

tag {
    text-transform: giá trị;
}

Với giá trị như sau:

Thuộc tínhgiá trịVí dụMô tảtext-transform
none
text-transform: none;
Trả văn bản về dạng mặc định ban đầu.
capitalize
text-transform: capitalize;
Chữ đầu tiên của mỗi thành phần là chữ hoa.
uppercase
text-transform: uppercase;
Tất cả chữ trong văn bản thành chữ hoa.
lowercase
text-transform: lowercase;
Tất cả chữ trong văn bản thành chữ thường.
inherit
text-transform: inherit;
Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Ví dụ

HTML viết:

<html>
<head></head>
<body>
<p class="capitalizeText">học web chuẩn</p>
<p class="uppercaseText">học web chuẩn</p>
<p class="lowercaseText">học web chuẩn</p>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS:

học web chuẩn

học web chuẩn

học web chuẩn

CSS viết:

p.capitalizeText {
    text-transform: capitalize;
}

p.uppercaseText {
    text-transform: uppercase;
}

p.lowercaseText {
    text-transform: lowercase;
}

Hiển thị trình duyệt khi có CSS:

học web chuẩn

học web chuẩn

học web chuẩn

Trình duyệt hỗ trợ

Thuộc tính text-transform được hỗ trợ trong đa số các trình duyệt.

Giá trị “inherit” không hỗ trợ trình
duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype

  • Trang chủ
  • Tham khảo
  • CSS
  • Thuộc tính text-transform

Nội dung chính

  • Định nghĩa và sử dụng
  • Cấu
    trúc
  • Trình duyệt hỗ trợ
  • 1) Thuộc tính text-transform trong CSS
  • 2) Cách sử dụng thuộc tính text-transform trong CSS

Định nghĩa và sử dụng

Thuộc tính text-transform thiết lập những ký tự
viết hoa cho văn bản .

Cấu trúc

tag {
    text-transform: giá trị;
}

Với giá trị như sau :

Thuộc tínhgiá trịVí dụMô tảtext-transform
none
text-transform: none;
Trả văn bản về dạng mặc định ban đầu.
capitalize
text-transform: capitalize;
Chữ đầu tiên của mỗi thành phần là chữ hoa.
uppercase
text-transform: uppercase;
Tất cả chữ trong văn bản thành chữ hoa.
lowercase
text-transform: lowercase;
Tất cả chữ trong văn bản thành chữ thường.
inherit
text-transform: inherit;
Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Ví dụ

HTML viết:

học web chuẩn
học web chuẩn
học web chuẩn

Hiển thị trình duyệt khi chưa có CSS:

học web chuẩnhọc web chuẩnhọc web chuẩn

CSS viết:

p.capitalizeText {
    text-transform: capitalize;
}

p.uppercaseText {
    text-transform: uppercase;
}

p.lowercaseText {
    text-transform: lowercase;
}

Hiển thị trình duyệt khi có CSS:

học web chuẩnhọc web chuẩnhọc web chuẩn

Trình duyệt hỗ trợ

Thuộc tính text-transform được tương hỗ trong đa phần những trình duyệt .Giá trị ” inherit ” không tương hỗ trình duyệt IE7 trở xuống, IE8 yên cầu phải có ! Doctype

1) Thuộc tính text-transform trong CSS

– Thuộc tính text-transform dùng để điều chỉnh văn bản sang dạng chữ in hoa hoặc chữ thường.

– Tôi có phần tử chứa một đoạn văn bản như sau:

Tài liệu hướng dẫn học LẬP TRÌNH WEB từ cơ bản đến nâng cao

– Với việc sử dụng thuộc tính text-transform, ta có thể chuyển toàn bộ các ký tự trong phần tử sang dạng chữ in hoa.

Tài liệu hướng dẫn học LẬP TRÌNH WEB từ cơ bản đến nâng cao

– Chuyển hàng loạt những ký tự trong thành phần sang dạng chữ thường .

Tài liệu hướng dẫn học LẬP TRÌNH WEB từ cơ bản đến nâng cao

–
Hoặc chuyển ký tự tiên phong của mỗi từ trong thành phần sang dạng chữ in hoa .

Tài liệu hướng dẫn học LẬP TRÌNH WEB từ cơ bản đến nâng cao

2) Cách sử dụng thuộc tính text-transform trong CSS

– Để sử dụng thuộc tính text-transform, ta dùng cú pháp như sau:

text-transform: none|capitalize|uppercase|lowercase|initial|inherit;

– Trong đó, ta thấy giá trị của thuộc tính text-transform có thể được xác định bởi một trong sáu loại:

none
– Không kiểm soát và điều chỉnh .
Xem ví dụ
capitalize
– Ký tự tiên phong của mỗi từ trong thành phần được chuyển sang chữ in hoa .
Xem ví dụ
uppercase
– Tất cả những ký tự trong thành phần được chuyển sang chữ in hoa .
Xem ví dụ
lowercase
– Tất cả những ký tự trong thành phần được chuyển sang chữ thường .
Xem ví dụ
initial
– Sử dụng giá trị mặc định của nó .( mặc định thì thuộc tính text-transform có giá trị là none )
Xem ví dụ
inherit
– Kế thừa giá trị thuộc tính text-transform từ thành phần cha của nó .
Xem ví dụ

Text-Transform là một thuộc tính cũng thường được sử dụng với chữ. Nó dùng để hiển thị chữ thường thành chữ hoa trên trình duyệt. Mời bạn cùng quachquynh.com tìm hiểu về thuộc tính text-transform trong CSS qua bài này.

Cú pháp viết:

text-transform : none | capitalize | uppercase | lowercase ;

Giải thích:

  • none: Giá trị mặc
    định, nó sẽ không viết hoa
  • capitalize: Viết hoa mình chữ
    cái đầu tiên
  • uppercase: Viết hoa toàn bộ chữ cái
  • lowercase: Chuyển tất cả chữ hoa thành in thường

Để hiểu hơn bạn chạy ví dụ sau:

Ví dụ viết chữ




This is a paragraph - giá trị none
This is a paragraph - giá trị capitalize
This is a paragraph - giá trị uppercase
THIS IS A PARAGRAPH - GIÁ TRỊ LOWERCASE

Kết quả :

Trên đây là những giá trị và ví dụ về thuộc tính text transform sử dụng trong viết chữ. Qua đây bạn đã hiểu cách sử dụng chưa nhỉ ? Hãy liên tục theo dõi những bài viết khác tại phân mục
học CSS trực tuyến không tính tiền nhé !

mtoplist