Ở bài này, tôi sẽ viết về các thuộc tính được dùng để thay đổi cách hiển thị của văn bản (text) như
| Thuộc tính | Mô tả |
| color | Chọn màu cho văn bản |
| text-align | Căn lề văn bản |
| text-decoration | Gạch ngang văn bản, gạch trên, gạch dưới |
| text-transform | Tùy chỉnh việc hiển thị chữ in hoa hoặc chữ thường |
| text-indent | Thêm khoảng trống trước văn bản theo chiều ngang từ trái sang phải |
| letter-spacing | Thiết lập khoảng cách giữa các ký tự của văn bản |
| line-height | Thiết lập chiều cao mỗi hàng của văn bản |
| word-spacing | Thiết lập khoảng cách giữa các từ của văn bản |
| text-shadow | Thêm bóng cho văn bản |
1. Thuộc tính color
Thuộc tính color dùng để chọn màu cho văn bản
color: màu sắc;
Trong đó, “màu sắc” có thể xác định theo: tên màu, giá trị RGB hoặc giá trị HEX
2. Thuộc tính text-align
Thuộc tính text-align dùng để căn lề cho văn bản
text-align: giá trị;
Trong đó “giá trị” có thể là:
+ left: căn cho văn bản nằm bên trái (mặc định)
+ center: căn cho văn bản nằm ở giữa
+ right: căn cho văn bản nằm bên phải
+ justify: căn đều hai mép trái phải
Ví dụ 1:
Ví dụ 2:
3. Thuộc tính text-decoration
Thuộc tính text-decoration dùng để tạo một đường gạch ngang cho văn bản
text-decoration: giá trị;
Trong đó, “giá trị” có thể là:
+ overline: tạo đường gạch ngang ở trên đầu văn bản
+ line-through: tạo đường gạch ngang ở giữa văn bản
+ underline: tạo đường gạch ngang ở dưới văn bản
+ none: loại bỏ đường gạch ngang (thường dùng để loại bỏ đường gạch ngang ở dưới của liên kết)
Lưu ý: Không nên gạch dưới văn bản (hoặc bỏ gạch của một liên kết) vì đều này dễ gây nhầm lẫn cho người đọc.
4. Thuộc tính text-transform
Thuộc tính text-transform tùy chỉnh việc hiển thị chữ in hoa hoặc chữ thường
text-transform: giá trị;
Trong đó, “giá trị” có thể là:
+ uppercase: chuyển toàn bộ văn bản sang kiểu chữ hoa
+ lowercase: chuyển toàn bộ văn bản sang kiểu chữ thường
+ capitalize: chuyển ký tự đầu tiên của mỗi từ sang kiểu chữ hoa (các ký tự còn lại được giữ nguyên định dạng ban đầu)
+ none: giữ nguyên định dạng (không có gì cả)
5. Thuộc tính text-indent
Thuộc tính text-indent dùng để thêm khoảng trống trước văn bản theo chiều ngang từ trái sang phải
6. Thuộc tính letter-spacing
Thuộc tính letter-spacing dùng để thiết lập khoảng cách giữa các ký tự của văn bản
7. Thuộc tính line-height
Thuộc tính line-height dùng để thiết lập chiều cao mỗi hàng của văn bản.
8. Thuộc tính word-spacing
Thuộc tính word-spacing dùng để thiết lập khoảng cách giữa các từ của văn bản
9. Thuộc tính text-shadow
Thuộc tính text-shadow để thêm bóng đổ cho văn bản
text-shadow: x-bóng đổ y-bóng đổ bán kính mờ màu sắc;
Trong đó, giá trị x-bóng đổ và y-bóng đổ là hai giá trị bắt buộc. Còn giá trị bán kính mờ và màu sắc không bắt buộc. Mặc định của giá trị bán kính mờ là 0, mặc định của giá trị màu sắc là none.
Ví dụ 1:
Ví dụ 2:
Ví dụ 3:
Ngoài ra, bạn cũng có thể tạo ra nhiều bóng đổ cho một văn bản bằng cách viết nhiều đoạn cú pháp và mỗi đoạn sẽ được cách nhau bằng dấu phẩy, ví dụ:
10. Các bài tập
10.1 Bài tập 1
Đặt màu chữ văn bản của trang thành “màu đỏ” và màu chữ cho <h1> thành “xanh” (blue)
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>Tiêu đề</h1> <p>Đoạn văn</p> <p>Đoạn văn khác</p> </body> </html>
Câu trả lời của bài tập 1
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: red;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>Tiêu đề</h1>
<p>Đoạn văn</p>
<p>Đoạn văn khác</p>
</body>
</html>
10.2 Bài tập 2
Căn giữa cho phần tử <h1>
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>Tiêu đề</h1> <p>Đoạn văn</p> <p>Đoạn văn khác</p> </body> </html>
Câu trả lời của bài tập 2
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1>Tiêu đề</h1>
<p>Đoạn văn</p>
<p>Đoạn văn khác</p>
</body>
</html>
10.3 Bài tập 3
Loại trừ gạch dưới từ liên kết
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>Tiêu đề</h1> <p>Đoạn văn</p> <p><a href="http://binhnet.com">Trang chủ</a></p> </body> </html>
Câu trả lời của bài tập 3
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
}
</style>
</head>
<body>
<h1>Tiêu đề</h1>
<p>Đoạn văn</p>
<p><a href="http://binhnet.com">Trang chủ</a></p>
</body>
</html>
10.4 Bài tập 4
Thay đổi kiểu văn bản trong <h1> sang chữ hoa và văn bản trong thẻ <p> có các chữ đầu viết hoa.
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>Tiêu đề</h1> <p>Đoạn văn</p> <p>Đoạn văn khác</p> </body> </html>
Câu trả lời của bài tập 4
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-transform: uppercase;
}
p {
text-transform: capitalize;
}
</style>
</head>
<body>
<h1>Tiêu đề</h1>
<p>Đoạn văn</p>
<p>Đoạn văn khác</p>
</body>
</html>
10. 5 Bài tập 5
Thêm khoảng trống cho dòng đầu tiên của văn bản từ trái sang phải là 20px.
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>Tiêu đề</h1> <p>Đây là đoạn văn bản. Đây là đoạn văn bản. Đây là đoạn văn bản. Đây là đoạn văn bản.</p> </body> </html>
Câu trả lời của bài tập 5
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-indent: 20px;
}
</style>
</head>
<body>
<h1>Tiêu đề</h1>
<p>Đây là đoạn văn bản. Đây là đoạn văn bản. Đây là đoạn văn bản. Đây là đoạn văn bản.</p>
</body>
</html>
11. Lời cuối bài
Đến đây là kết thúc bài viết về các thuộc tính trong văn bản (text). Ở bài sau tôi sẽ viết về các thuộc tính font trong CSS
The post [CSS bài 14] Các thuộc tính trong văn bản (text) appeared first on Học online.
from WordPress http://ift.tt/2euly5E
via IFTTT
Không có nhận xét nào:
Đăng nhận xét