Bài đăng nổi bật


ĐỊ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"
Hãy xem Các giá trị màu CSS bạn sẽ thấy một danh sách đầy đủ các giá trị có thể cho màu sắc.
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

Post a Comment

أحدث أقدم