Embedded Files
Ở bài hướng dẫn này, bạn sẽ được tìm hiểu một số thuộc tính định dạng văn bản như:
color (chọn màu cho văn bản)
text-decoration (gạch ngang văn bản, gạch đầu, gạch đít)
text-align (canh lề văn bản)
text-transform (chuyển đổi kiểu chữ cho văn bản. Ví dụ, chuyển sang kiểu chữ hoa hoặc chữ thường)
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)
letter-spacing (Thiết lập khoảng cách giữa các ký tự của văn bản)
text-indent (Thụt đầu dòng văn bản)
Chọn màu cho văn bản. Thuộc tính color dùng để chọn màu cho văn bản. Cú pháp:
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. Ví dụ:
body{
color: red;
}
h1{
color: rgb(179, 100, 21);
}
h2{
color: #ee77ff;
}
Gạch ngang văn bản. Thuộc tính text-decoration dùng để tạo một đường gạch ngang cho văn bản. Cú pháp:
text-decoration: overline|line-through|underline|none;
Trong đó:
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 đít 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 đít của liên kết)
Ví dụ:
h1{
text-decoration: overline;
}
h2{
text-decoration: line-through;
}
h3{
text-decoration: underline;
}
.lienket{
text-decoration: none;
}
Canh lề cho văn bản. Thuộc tính text-align dùng để canh lề cho văn bản. Cú pháp:
text-align: left|center|right|justify;
Trong đó:
left: canh cho văn bản nằm bên trái (mặc định)
center: canh cho văn bản nằm ở giữa
right: canh cho văn bản nằm bên phải
justify: canh đều hai mép trái phải
Ví dụ:
.div2{
text-align: center;
}
.div3{
text-align: right;
}
.div4{
text-align: justify;
}
Chuyển đổi kiểu chữ của văn bản. Thuộc tính text-transform dùng để chuyển đổi kiểu chữ của văn bản (Ví dụ: chuyển toàn bộ văn bản sang kiểu chữ hoa hoặc chữ thường). Cú pháp:
text-transform: uppercase|lowercase|capitalize;
Trong đó:
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)
Ví dụ:
.div1{
text-transform: uppercase;
}
.div2{
text-transform: lowercase;
}
.div3{
text-transform: capitalize;
}
Thiết lập chiều cao mỗi hàng của văn bản. 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. Ví dụ:
.div1{
line-height: 0.9;
}
.div2{
line-height: 2;
}
Thiết lập khoảng cách giữa các từ của văn bản. 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. Ví dụ:
.div1{
word-spacing: -2px;
}
.div2{
word-spacing: 20px;
}
Thiết lập khoảng cách giữa các ký tự của văn bản. 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. Ví dụ:
.div1{
letter-spacing: -2px;
}
.div2{
letter-spacing: 20px;
}
Thụt đầu dòng. Thuộc tính text-indent dùng để thụt đầu dòng cho văn bản. Ví dụ:
div{
text-indent: 100px;
}
Google Sites
Report abuse