CSS是網頁設計中非常重要的一部分，它能夠控制網頁的樣式和布局，讓網頁更加美觀和易于閱讀。CSS有很多特性和屬性，可以按照不同的方式來應用到網頁中。下面是最完整的CSS指南，包括基礎、布局、響應式、動畫等。

基礎

/* 設置顏色和字體 */
body {
color: #333;
font-family: Arial, sans-serif;
}
/* 添加背景色和圖片 */
body {
background-color: #f9f9f9;
background-image: url(bg.png);
}
/* 設置文本樣式 */
h1 {
font-size: 36px;
font-weight: bold;
}
p {
font-size: 18px;
line-height: 1.5;
}

布局

/* 設置容器樣式 */
.container {
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
}
/* 設置柵格布局 */
.row::after {
content: "";
display: table;
clear: both;
}
.col {
float: left;
width: 100%;
}
@media (min-width: 768px) {
.col {
float: left;
width: 50%;
}
}

響應式

/* 動態調整字體大小 */
body {
font-size: 16px;
}
@media (min-width: 768px) {
body {
font-size: 18px;
}
}
@media (min-width: 992px) {
body {
font-size: 20px;
}
}
@media (min-width: 1200px) {
body {
font-size: 22px;
}
}
/* 設置不同屏幕大小下不同的背景圖片 */
body {
background-image: url(bg-mobile.png);
}
@media (min-width: 768px) {
body {
background-image: url(bg-tablet.png);
}
}
@media (min-width: 992px) {
body {
background-image: url(bg-desktop.png);
}
}

動畫

/* 添加過渡效果 */
.box {
background-color: #f00;
transition: background-color 1s ease;
}
.box:hover {
background-color: #00f;
}
/* 設置動畫效果 */
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
.box {
animation: rotate 1s infinite;
}

以上是最完整的CSS指南，其中包括了基礎、布局、響應式、動畫等方面的內容。使用這些技巧和屬性可以讓網頁更加美觀和實用，提升用戶體驗。