CSS có thể giúp chúng ta định kiểu chữ cái đầu tiên của một phần tử bằng cách sử dụng phần tử giả ::chữ cái đầu tiên. Lưu ý rằng các dấu câu, dấu chấm và thuộc tính nội dung có thể thay đổi chữ cái đầu tiên.
Các ví dụ sau minh họa CSS ::phần tử giả chữ cái đầu tiên.
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
::first-letter {
font-size: 3em;
color: sienna;
box-shadow: -10px 0 10px green;
background-color: gainsboro;
}
</style>
</head>
<body>
<h2>Proin ut diam eros</h2>
<p>Donec rutrum a erat vitae interdum. </p>
<p>Integer eleifend lectus sit amet purus semper, ut pharetra metus gravida.</p>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
body > * {
background-color: slategrey;
}
::first-letter {
font-size: 1.6em;
color: darkviolet;
background-color: silver;
text-shadow: -15px 8px palevioletred;
}
</style>
</head>
<body>
<h2>Proin ut diam eros
<p>Donec rutrum a erat vitae interdum. </p>
<p>Integer eleifend lectus sit amet purus semper, ut pharetra metus gravida.</p>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
