Thuộc Tính Text-transform | CSS | Học Web Chuẩn

Trang chủ » Trong Css để Chuyển đổi Ký Tự Thành Chữ Thường Ta Dùng Thuộc Tính » Thuộc Tính Text-transform | CSS | Học Web Chuẩn

Có thể bạn quan tâm

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

Đị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ính giá 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ợ

  • Internet Explorer
  • Firefox
  • Opera
  • Google Chrome
  • Safari

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

Link liên quan

  • HTML/XHTML
  • CSS
  • class
  • <html></html>
  • <head></head>
  • <body></body>
  • <p></p>

text-indent

top

CSS

HƯỚNG DẪN HỌC

  • Hướng dẫn học
  • Hướng dẫn học XHTML & HTML5
  • Hướng dẫn học CSS
  • Hướng dẫn học CSS3
  • Hướng dẫn học Responsive
  • Hướng dẫn học ES6
  • Hướng dẫn học React.js
  • Hướng dẫn học jQuery
  • Hướng dẫn học PHP
  • Hướng dẫn học Laravel
  • Hướng dẫn học Wordpress
  • Hướng dẫn học Webpack
  • Hướng dẫn học SCSS

THAM KHẢO

Thuộc tính CSS

  • background
  • border
  • border-collapse
  • border-spacing
  • bottom
  • caption-side
  • clear
  • clip
  • color
  • content
  • counter-increment
  • counter-reset
  • cursor
  • direction
  • display
  • empty-cells
  • float
  • font
  • height
  • left
  • letter-spacing
  • line-height
  • list-style
  • margin
  • max-height
  • max-width
  • min-height
  • min-width
  • outline
  • overflow
  • padding
  • page-break-after
  • page-break-before
  • page-break-inside
  • position
  • quotes
  • right
  • table-layout
  • text-align
  • text-decoration
  • text-indent
  • text-transform
  • top
  • vertical-align
  • visibility
  • white-space
  • width
  • word-spacing
  • z-index

Tham khảo CSS

  • CSS - Tham khảo
  • CSS - Bộ chọn (selectors)
  • CSS - Thuộc tính
  • CSS3 - Tham khảo
  • CSS3 - Bộ chọn (selectors)
  • CSS3 - Thuộc tính
  • Xem thêm ví dụ về CSS

Tham khảo HTML/XHTML

  • Tham khảo HTML/XHTML
  • Tag theo function
  • Tag theo giá trị DTD
  • Tham khảo HTML4/XHTML
  • Tham khảo HTML5
  • Xem thêm ví dụ về HTML

Tham khảo JQUERY

  • jQuery - Tham khảo
  • jQuery - Cài đặt và sử dụng
  • jQuery - Bộ chọn (selectors)
  • jQuery - Hàm (function)
  • jQuery - Ajax

Tham khảo Thêm

  • Lang codes
  • Font chữ
  • Mã ký tự
  • MIME
  • Đơn vị trong HTML & CSS
  • Giá trị màu trong HTML & CSS
  • Thuộc tính tổng quát

CHUYÊN ĐỀ

  • Chuyên đề
  • Chuyên đề HTML/CSS
  • Chuyên đề HTML5/CSS3
  • Chuyên đề jQuery/JS
  • jQuery/JS plugin

Góp ý - Liên hệ

  • CÔNG CỤ TẠO CSS3CSS3 GENERATOR
  • BỘ CÔNG CỤGENERATOR TOOLS
  • CÔNG CỤ HỖ TRỢWEB TOOLS
  • CÔNG CỤ TẠO RANDOMRANDOM GENERATOR
  • CÔNG CỤ KIỂM TRA RESPONSIVE TEST
  • CHIA SẺ HAYWEB & TOOLS
  • Follow us on hocwebchuan.com
  • Short URL
  • Rabbie theme

Từ khóa » Trong Css để Chuyển đổi Ký Tự Thành Chữ Thường Ta Dùng Thuộc Tính