ĐỊNH DẠNG VĂN BẢN
V ă n b ả
n n à y đ ư ợ c đ ị n h k i ể u v ớ i m ộ t t h u ộ c t í n h đ ị n h d ạ n g v
ă n b ả n . T i ê u đ ề s ử d ụ n g t h u ộ c t í n h t e x t - a l i g n , t e
x t - t r a n s f o r m v à c o l o r . Đ o ạ n v ă n b ả n đ ư ợ c t h ụ t đ ầ
u d ò n g , c ă n c h ỉ n h , v à k h o ả n g c á c h g i ữ a c á c k ý t ự đ ư
ợ c c h ỉ đ ị n h . D ấ u g ạ c h d ư ớ i b ị l o ạ i b ỏ t r o n g l i ê n k ế
t " T r y i t y o u r s e
l f "
.
Màu sắc văn bản
Thuộc tính color được sử dụng để thiết lập màu sắc cho văn bản.
Với CSS, màu sắc thường được
chỉ định bởi:
·
một giá trị HEX - ví dụ "#ff0000"
·
một giá trị RGB - ví dụ "rgb(255,0,0)"
·
một tên màu sắc (bằng tiếng Anh) - ví dụ "red"
Màu mặc định của văn bản trong một trang được xác định bởi bộ
chọn body như sau.
body {
color: blue;
}
h1 {
color: green;
}
Căn chỉnh văn bản
Thuộc tính text-align được sử dụng để căn chỉnh theo chiều ngang cho một văn bản.
Một văn bản có thể được canh
trái hoặc canh phải, canh giữa, hoặc dàn đều (justified).
Ví dụ sau cho thấy canh giữa,
canh trái và canh phải văn bản (canh trái là mặc định nếu hướng của văn bản là
trái sang phải, và canh phải là mặc định nếu hướng của văn bản là phải-sang-trái):
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
Khi thuộc tính text-align được thiết lập là "justify", mỗi dòng sẽ được kéo
dãn do đó chúng có chiều rộng bằng nhau, và các lề trái và phải thẳng hàng nhau
(như trong các tờ báo\tạp chí):
div {
text-align: justify;
}
Trang trí văn bản
Thuộc tínhtext-decoration được sử dụng để thiết lập hoặc loại bỏ trang trí khỏi văn bản.
Giá trị text-decoration: none; thường được sử dụng để loại bỏ các dấu gach chân khỏi các
liên kết:
a {
text-decoration: none;
}
Các giá trị khác của text-decoration được sử dụng để trang trí văn bản:
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
Chuyển đổi văn bản
Thuộc tính text-transform được sử dụng để chỉ định ký tự chữ hoa và chữ thường trong một
văn bản.
Nó có thể được sử dụng để
chuyển tất cả mọi thứ thành chữ hoa hoặc chữ thường, hoặc in hoa chữ cái đầu
tiên của mỗi từ:
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
Thụt lề văn bản
Thuộc tính text-ident được sử dụng để chỉ định thụt lề dòng đầu tiên của một đoạn
văn bản:
p {
text-indent: 50px;
}
Khoảng cách giữa các ký tự
Thuộc tính letter-spacing được sử dụng để xác định khoảng cách giữa các ký tự trong một
văn bản.
Ví dụ sau cho thấy cách để
tăng hoặc giảm khoảng cách giữa các ký tự:
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}
Chiều cao dòng
Thuộc tính line-height được sử dụng để xác định khoảng cách giữa các dòng:
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}
Hướng của văn bản
Thuộc tính direction được sử dụng để thay đổi hướng văn bản của một phần tử:
div {
direction: rtl;
}
Khoảng cách giữa các từ
Thuộc tính word-spacing được sử dụng để xác định khoảng
cách giữa các từ trong một văn bản.
Ví dụ sau cho thấy cách để
tăng hoặc giảm khoảng cách giữa các từ:
h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}
Ví dụ khác
Ví dụ này cho thấy cách để vô
hiệu hoá bẻ dòng văn bản bên trong một phần tử.
Ví dụ này cho thấy cách để
thiết lập căn chỉnh theo chiều thẳng đứng (chiều dọc) một hình ảnh trong văn bản.
Ví dụ này cho thấy cách để
thêm bóng cho văn bản.
Tự làm bài tập!
CodeLean.vn
Facebook: CodeLean Community
Đăng nhận xét