CSS（層疊樣式表）是一種用于網頁設計的語言，它可以控制頁面中的各種視覺效果和布局。在 CSS 中，有許多重要的類別和屬性，下面我們來了解一下：

CSS 的選擇器

選擇器是用于識別 DOM 元素并將樣式應用到這些元素的一組規則。以下是一些常見的選擇器：

/* 選擇所有元素 */
* {
margin: 0;
padding: 0;
}
/* 根據元素類型選擇元素 */
h1 {
font-size: 2em;
}
/* 根據類名選擇元素 */
.primary {
background-color: blue;
}
/* 根據 ID 選擇元素 */
#main {
width: 960px;
}
/* 根據屬性選擇元素 */
a[] {
color: red;
}

CSS 的布局

CSS 可以通過控制元素的位置和大小來實現網頁布局。以下是一些關于布局的重要屬性：

/* display 屬性控制元素如何顯示 */
div {
display: block; /* 元素表現為塊級元素 */
}
span {
display: inline; /* 元素表現為行內元素 */
}
/* position 屬性控制元素的定位方式 */
#nav {
position: fixed; /* 元素在屏幕上固定 */
top: 0;
left: 0;
}
/* float 屬性用于讓元素浮動 */
img {
float: left; /* 元素靠左浮動 */
}
/* clear 屬性用于清除浮動 */
.clearfix:after {
content: "";
display: block;
clear: both;
}

CSS 的動畫效果

借助 CSS，可以實現許多吸引人的動畫效果。以下是一些處理動畫的屬性和實現方式：

/* transition 屬性使元素的過渡更加平滑 */
button {
background-color: blue;
transition: background-color 0.5s ease;
}
button:hover {
background-color: red;
}
/* animation 屬性實現基礎的動畫效果 */
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
animation: rotate 2s linear infinite;
}
/* transform 屬性實現進階的變形效果 */
.transform-me {
transform: scale(1.5);
}
/* @media 規則根據設備屏幕尺寸應用不同的樣式 */
@media screen and (max-width: 750px) {
body {
font-size: 20px;
}
}

CSS 是一個非常重要的網頁設計語言，學好它不僅可以讓你的網頁更美觀和精巧，還可以讓你實現更多復雜的任務和交互效果。