標題：HTML中CSS所有樣式的介紹
在網頁設計中，HTML和CSS是最常用的兩種技術，用于構建各種不同類型的網站和頁面。CSS可以用于定義頁面的布局、樣式、顏色和字體等，而HTML則用于定義頁面的內容和結構。本文將介紹HTML中CSS所有樣式的含義和用法。
1. 基本樣式
例如，以下是一個簡單的HTML頁面，其中使用了一些基本樣式：
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
color: #333;
text-align: center;
}
p {
font-size: 16px;
margin: 0;
}
a {
color: #fff;
text-decoration: none;
}
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple page.</p>
</body>
</html>
2. 布局樣式
布局樣式用于定義頁面的布局和結構。這些樣式可以用于更改頁面的排版、位置、大小等。
例如，以下是一個簡單的HTML頁面，其中使用了一些布局樣式：
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
h1 {
margin: 20px 0;
padding: 20px;
font-size: 24px;
}
p {
margin: 0;
padding: 0;
font-size: 16px;
}
a {
color: #fff;
text-decoration: none;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple page.</p>
</body>
</html>
在這個例子中，布局樣式定義了頁面的排版、位置、大小等，并使用margin和padding屬性更改頁面的垂直和水平間距。
3. 響應式樣式
響應式樣式用于根據設備的屏幕尺寸和分辨率等特性，為不同的設備提供不同的樣式。
例如，以下是一個使用響應式樣式的HTML頁面，其中在不同的設備上有不同的樣式：
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style>
@media (max-width: 768px) {
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
color: #333;
text-align: center;
}
p {
font-size: 16px;
margin: 0;
}
a {
color: #fff;
text-decoration: none;
}
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple page.</p>
</body>
</html>
在這個例子中，媒體查詢定義了在大于768像素的屏幕上，使用不同的樣式。
4. 邊框樣式
邊框樣式用于定義頁面的邊框和背景顏色。
例如，以下是一個使用邊框樣式的HTML頁面：
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style>
body {
background-color: #fff;
border: 10px solid #ccc;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple page.</p>
</body>
</html>
在這個例子中，邊框樣式定義了頁面的邊框顏色和寬度。
5. 樣式表
在HTML中，可以使用<style>標簽來添加CSS樣式。在CSS中，可以使用@import語句來導入其他樣式表。
例如，以下是一個簡單的HTML頁面，其中使用了一些CSS樣式：
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
color: #333;
text-align: center;
}
p {
font-size: 16px;
margin: 0;
}
a {
color: #fff;
text-decoration: none;
}
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple page.</p>
</body>
</html>