CSS cho phép chúng tôi định dạng văn bản để tạo nội dung hấp dẫn về mặt hình ảnh. Các thuộc tính sau được sử dụng để tạo kiểu cho văn bản bằng CSS.
màu sắc
Thuộc tính này giúp chúng tôi thay đổi màu văn bản.
khoảng cách giữa các chữ cái
Thuộc tính này được sử dụng để đặt khoảng cách giữa các ký tự.
chiều cao dòng
Chiều cao của một dòng được chỉ định bằng cách sử dụng thuộc tính này.
căn chỉnh văn bản
Căn chỉnh ngang của văn bản được kiểm soát bởi thuộc tính text-align.
trang trí văn bản
Để gạch dưới, gạch ngang hoặc gạch ngang và tạo kiểu, trang trí văn bản được sử dụng.
thụt lề văn bản
Thụt lề của dòng đầu tiên của một phần tử được đặt bởi thuộc tính text-Id.
text-shadow
Để hiển thị bóng xung quanh văn bản, thuộc tính text-shadow được sử dụng.
biến đổi văn bản
Trường hợp của văn bản có thể được đặt bằng thuộc tính text-biến đổi.
khoảng cách giữa các từ
Khoảng cách giữa các từ có thể được đặt bằng thuộc tính này.
Cú pháp
Cú pháp của thuộc tính font-variant như sau -
Selector {
font-variant: /*value*/
} Ví dụ
Các ví dụ sau minh họa định dạng văn bản trong CSS.
<!DOCTYPE html>
<html>
<head>
<style>
h2::before {
content: "DEMO ";
text-align: center;
text-decoration: line-through;
color: orange;
}
article {
width: 600px;
text-align: justify;
text-shadow: -10px -5px lightgreen;
}
</style>
</head>
<body>
<h2>Example Heading</h2>
<article>This is demo text. Here, we are displaying different ways to format text.</article>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 10px;
display: flex;
float: left;
word-spacing: 30px;
box-shadow: inset 0 0 6px violet;
}
div::after {
content: " ";
border: 8px solid green;
}
div + div{
background-color: indianred;
width: 200px;
color: white;
text-align: justify;
}
</style>
</head>
<body>
<div>SAS stands for Statistical Analysis Software. It was created in the year 1960 by the SAS Institute.</div>
<div>SAS is a leader in business analytics. Through innovative analytics it caters to business intelligence and data management software and services.</div>
</body>
</html> Đầu ra
Điều này cho kết quả sau−
