Thuộc tính CSS font-style được dùng để tạo kiểu chữ nghiêng hoặc bình thường. Nó giúp gán tầm quan trọng và trang trí văn bản cụ thể. Điều này giúp nâng cao trải nghiệm người dùng tổng thể. Thuộc tính font-style là một công cụ thiết yếu trong CSS để thiết kế văn bản hiệu quả.
Syntax:
font-style: normal|italic|oblique|initial|inherit;
Property values:
- normal: Đây là giá trị mặc định của thuộc tính font-style, hiển thị văn bản phông chữ bình thường.
- italic: Hiển thị văn bản ở dạng nghiêng.
- oblique: Chỉ định một góc nghiêng cho văn bản, hiển thị dưới dạng oblique trong trình duyệt.
- initial: Đặt phông chữ về giá trị mặc định ban đầu.
- inherit: Kế thừa giá trị thuộc tính hiện tại từ phần tử cha của nó.
Chúng ta sẽ thảo luận về tất cả các thuộc tính font-style thông qua các ví dụ. Hãy bắt đầu với thuộc tính normal.
. font-style: normal:
Trình duyệt sẽ hiển thị văn bản phông chữ bình thường, đây là giá trị mặc định.
Syntax:
font-style: normal;
Example: Ví dụ này minh họa font-style có giá trị được đặt thành normal.
HTML<!DOCTYPE html>
<html>
<head>
<title> CSS | font-style Property </title>
<style>
p.a {
font-style: normal;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Normal font-style Property</h3>
<p class="a">GeeksforGeeks</p>
</body>
</html>
Output:
. font-style: italic:
Thuộc tính này được sử dụng để làm cho phông chữ ở dạng italic.
Syntax:
font-style: italic;
Example: Ví dụ này minh họa font-style có giá trị được đặt thành italic.
HTML<!DOCTYPE html>
<html>
<head>
<title> CSS | font-style Property </title>
<style>
p.a {
font-style: italic;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Italic font-style Property</h3>
<p class="a">GeeksforGeeks</p>
</body>
</html>
Output:
. font-style:oblique:
Trình duyệt hiển thị kiểu phông chữ oblique.
Syntax:
font-style: oblique;
Example: Ví dụ này minh họa font-style có giá trị được đặt thành oblique.
HTML<!DOCTYPE html>
<html>
<head>
<title> CSS | font-style Property </title>
<style>
p.a {
font-style: oblique;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Oblique font-style Property</h3>
<p class="a">GeeksforGeeks</p>
</body>
</html>
Output:
. font-style:initial:
Trình duyệt hiển thị kiểu phông chữ ban đầu, đây là mặc định.
Syntax:
font-style: initial;
Example: Ví dụ này minh họa font-style có giá trị được đặt thành initial.
HTML<!DOCTYPE html>
<html>
<head>
<title> CSS | font-style Property </title>
<style>
p.a {
font-style: initial;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Initial font-style Property</h3>
<p class="a">GeeksforGeeks</p>
</body>
</html>
Output:
. font-style:Inherit:
Thuộc tính này kế thừa từ phần tử cha của nó.
Example: Trong ví dụ này, chúng ta đặt giá trị của color là inherit. Nó sẽ kế thừa thuộc tính color từ phần tử cha.
HTML<!DOCTYPE html>
<html>
<head>
<title> CSS | font-style Property </title>
<style>
span {
color: blue;
font-size: 70px;
}
.extra span {
color: inherit;
}
</style>
</head>
<body>
<div>
<span>GeeksforGeeks</span>
</div>
<div class="extra"
style="color:green">
<span>GeeksforGeeks</span>
</div>
<div style="color:red">
<span>GeeksforGeeks</span>
</div>
</body>
</html>
Output:
Conclusion
Thuộc tính CSS font-style là yếu tố cơ bản của thiết kế web. Nó cho phép nhà phát triển kiểm soát giao diện văn bản. Việc hiểu và sử dụng thuộc tính font-style rất quan trọng. Bạn có thể nhấn mạnh văn bản hoặc duy trì phông chữ bình thường. Bằng cách làm chủ thuộc tính này, bạn có thể nâng cao tính hấp dẫn và khả năng đọc. Tham khảo hướng dẫn CSS để biết thêm thông tin và ví dụ chi tiết. Hãy khám phá thêm các thuộc tính CSS để nâng cao kỹ năng thiết kế web.
Supported Browsers: Các trình duyệt được hỗ trợ bởi thuộc tính font-style được liệt kê dưới đây:
- Google Chrome 1.0
- Microsoft Edge 12.0
- Firefox 1.0
- Opera 7.0
- Safari 1.0