簡單易懂的CSS教程，教你打造獨特的網頁框架
CSS（層疊樣式表）是一種用于定義網頁樣式和布局的標記語言。通過 CSS，我們可以改變網頁的字體、顏色、大小、間距等外觀，并且可以控制網頁元素的位置和排列方式。本篇教程將為您介紹基本的CSS語法和常用的樣式屬性，并提供具體的代碼示例，以幫助您快速掌握如何使用CSS打造獨特的網頁框架。
- CSS基本語法
CSS使用選擇器和聲明來定義樣式。選擇器用于選擇要應用樣式的HTML元素，而聲明則由一個或多個屬性及其對應的值組成。下面是一個簡單的CSS規則示例：
h1 {
color: red;
font-size: 24px;
font-weight: bold;
}
登錄后復制
上述代碼中的選擇器是 “h1″，表示應用樣式的元素為 <h1> 標簽。花括號中的聲明部分包含三個屬性及其對應的值，分別為 “color”，”font-size”和 “font-weight”。這些屬性用于定義元素的字體顏色、大小和粗細。
- CSS樣式屬性
下面介紹一些常用的CSS樣式屬性，以及它們的作用和用法。
2.1 字體屬性
font-family：用于設置字體系列（如 “Arial”，”宋體” 等）。font-size：用于設置字體大?。▎挝豢梢允?px，em，rem 等）。font-weight：用于設置字體粗細（可以取值為 “normal”（常規）、 “bold”（粗體）等）。
2.2 顏色屬性
color：用于設置文字顏色（可以使用顏色名稱、HEX碼、RGB或RGBA值等）。background-color：用于設置元素的背景顏色。
2.3 盒模型屬性
width：用于設置元素的寬度。height：用于設置元素的高度。padding：用于設置元素內部填充的大小。margin：用于設置元素四個方向的外邊距大小。border：用于設置元素邊框的樣式、寬度和顏色。
2.4 定位屬性
position：用于設置元素的定位方式，常見取值有 “relative”（相對定位）、 “absolute”（絕對定位）和 “fixed”（固定定位）。top、bottom、left、right：用于設置元素與其定位父元素的上、下、左、右邊距離。
- 示例：創建網頁框架
下面給出一個示例，展示如何使用CSS創建一個簡單的網頁框架。
HTML代碼：
<!DOCTYPE html>
<html>
<head>
<title>CSS Tutorial</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>Welcome to CSS Tutorial</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<section>
<h2>About Us</h2>
<p>This is a CSS tutorial to help you learn CSS and create unique web page layouts.</p>
</section>
<footer>
<p>? 2021 CSS Tutorial. All rights reserved.</p>
</footer>
</body>
</html>
登錄后復制
CSS代碼（style.css）：
/* 全局樣式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 頭部樣式 */
header {
background-color: #333;
padding: 20px;
color: #fff;
}
header h1 {
font-size: 30px;
}
/* 導航欄樣式 */
nav {
background-color: #f2f2f2;
padding: 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
font-size: 18px;
}
/* 主內容樣式 */
section {
padding: 20px;
background-color: #fff;
}
section h2 {
color: #333;
}
section p {
color: #666;
}
/* 頁腳樣式 */
footer {
background-color: #333;
padding: 10px;
color: #fff;
font-size: 14px;
text-align: center;
}
登錄后復制
在上述示例中，我們通過給不同的HTML元素添加不同的CSS樣式，來實現不同的外觀效果。通過設置全局樣式、頭部樣式、導航欄樣式、主內容樣式和頁腳樣式，我們創建了一個簡單的網頁框架。
在實際使用過程中，您可以根據自己的需求修改CSS樣式屬性，調整網頁布局和外觀效果。
通過本篇教程，您已經了解了CSS的基本語法和常用的樣式屬性，并且學會了如何使用CSS創建一個簡單的網頁框架。希望本教程對您有所幫助，可以讓您用CSS打造出獨特的網頁。祝您在使用CSS時取得更多的成果！
