資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 CSS 樣式化標題？
要使用 CSS 樣式化標題，我們可以使用各種CSS屬性使其看起來更具吸引力。在本文中，我們將學習和理解如何使用不同的 CSS 屬性來樣式化標題。
使用 CSS 樣式化標題
- 我們在div元素內使用了兩個h1標題，以向標題新增內邊距和背景顏色，div 的類名為 header 和 test。
- 在第一個標題（id 為 head1）中，我們使用了 "font-style: oblique;" 和 "text-align: center;" 屬性來新增樣式並將其居中對齊。
- 在第二個標題（類名為 head）中，我們使用了 "font-family" 和 "color: white;" 屬性來新增字體系列並將文字顏色更改為白色。
示例
以下是實現上述步驟的完整示例程式碼。
<!DOCTYPE html>
<html>
<head>
<title>
To style a header with CSS
</title>
<style>
body {
margin: 10px;
}
.header {
padding: 30px;
background-color: bisque;
}
.test {
padding: 30px;
background-color: #04af2f;
}
#head1 {
font-style: oblique;
text-align: center;
}
.head {
font-family: "Segoe UI", Tahoma,
Geneva, Verdana,
sans-serif;
text-align: center;
color: white;
}
</style>
</head>
<body>
<div class="header">
<h1 id="head1">
Styling header with CSS
</h1>
<p>
For this header, we have used
CSS font-style and text-align
property to style the header.
</p>
</div>
<div class="test">
<h1 class="head">
Welcome to Tutorials Point.
</h1>
<p>
For this header, we have used
CSS font-family and color
property to style the header.
</p>
</div>
</body>
</html>
結論
在本文中，我們瞭解瞭如何使用 CSS 樣式化標題。我們使用了 font-style、font-family、color、text-align 和 background-color 來樣式化標題。
更新於: 2024年7月23日
9K+ 次瀏覽
廣告