[BÀI 6]Định dạng văn bản trong CSS
Bài hôm nay chúng ta tìm hiểu về các thuộc tính CSS định dạng văn bản thường dùng. Thuộc tính định dạng Font chữ – Font : Thuộc tính rút gọn dùng để thiết lập tất cả thuộc tính cho một font trong một khai báo duy nhất. Ví dụ : XHTML ...
Bài hôm nay chúng ta tìm hiểu về các thuộc tính CSS định dạng văn bản thường dùng.
-
Thuộc tính định dạng Font chữ
–Font : Thuộc tính rút gọn dùng để thiết lập tất cả thuộc tính cho một font trong một khai báo duy nhất.
Ví dụ :
|
1 2 3 4 5 6 7 8 |
<style> #font{ font : 30px arial; } </style> <body> <div id="font">Chào mừng bạn đến với laptrinhphp.com.vn</div> </body> |
Kết quả :
–Font-size : Thiết lập kích thước cho một font chữ.
Các giá trị : xx-small, x-small, xx-large, x-large, small, medium, large, smaller, larger, length, %.
Ví dụ :
|
1 2 3 4 5 6 7 8 |
<style> #font_size{ font-size: 25px; } </style> <body> <div id="font_size">Chào mừng bạn đến với laptrinhphp.com.vn</div> </body> |
Kết quả :
–Font-style : Thiết lập kiểu cách của font chữ.
Các giá trị : normal, italic, …..
Ví dụ :
|
1 2 3 4 5 6 7 8 |
<style> #font_style{ font-style: italic; } </style> <body> <div id="font_style">Chào mừng bạn đến với laptrinhphp.com.vn</div> </body> |
Kết quả :
–Font-family : Một danh sách thứ tự ưu tiên của các họ font cho một thành phần
Giá trị : arial, courier, …
Ví dụ :
|
1 2 3 4 5 6 7 8 |
<style> #font_family{ font-family: courier; } </style> <body> <div id="font_family">Chào mừng bạn đến với laptrinhphp.com.vn</div> </body> |
Kết quả :
2. Thuộc tính định dạng văn bản
Các thuộc tính cơ bản thường dùng :
Color, text-align, text-transform, text-decoration, text-indent.
+ Color : Thiết lập màu cho văn bản.
Các giá trị màu : mã màu hoặc tên màu tiếng anh.
Ví dụ :
|
1 2 3 4 5 6 7 8 |
<style> #color{ color: red; } </style> <body> <div id="color">Chào mừng bạn đến với laptrinhphp.com.vn</div> </body> |
Kết quả :
+ Text-align : Căn chỉnh lề của văn bản trong một thành phần
Các giá trị : left( căn trái ), right( căn phải ), center( căn giữa ).
Ví dụ :
|
1 2 3 4 5 6 7 8 |
<style> #text_align{ text-align: center; } </style> <body> <div id="text_align" style="awidth:500px; border:solid 1px red">chào mừng bạn đến với laptrinhphp.com.vn</div> </body> |
+Text-transform : Chuyển đổi kí tự trong một thành phần
Các giá trị : none ( không tác động ), capitalize( chữ cái đầu của mỗi từ viết hoa), uppercase( chuyển đổi chữ thường thành chữ hoa ), lowercase( chuyển đổi chữ hoa thành chữ thường )
Ví dụ :
|
1 2 3 4 5 6 7 8 |
<style> #text_transform{ text-transform: capitalize; } </style> <body> <div id="text_transform">chào mừng bạn đến với laptrinhphp.com.vn</div> </body> |
+Text-decoration : Thêm trang trí cho văn bản.
Các giá trị : none ( không tác động ), underline ( gạch chân cho phần văn bản ), overline ( xác định đường gạch bên trên cho văn bản ), line-through ( gạch ngang văn bản ).
Ví dụ :
|
1 2 3 4 5 6 |
<style> #text_decoration{ text-decoration: line-through; } </style> <body> <div id="text_decoration">chào mừng bạn đến với laptrinhphp.com.vn</div> </body> |
Kết quả :
+Text-indent : Khoảng thụt vào ở dòng đầu tiên của văn bản trong một thành phần.
Các giá trị : length, %
Ví dụ :
|
1 2 3 4 5 6 7 8 |
<style> #text_indent{ text-indent: 50px; } </style> <body> <div id="text_indent" style="awidth:500px; border:solid 1px red">chào mừng bạn đến với laptrinhphp.com.vn</div> </body> |
Kết quả :
Để tìm hiểu chi tiết hơn, các bạn có thể tham khảo các khóa học tại đây.!!!
