CSS(Cascading Style Sheets)是一種用于描述網(wǎng)頁樣式的標記語言。它可以控制網(wǎng)頁的各種表現(xiàn)風格,包括顏色、字體、布局等等。CSS 將網(wǎng)頁內(nèi)容(HTML)和表現(xiàn)(CSS)分離,使得網(wǎng)頁更容易維護、修改和體現(xiàn)。
/* 以下是樣式表示例 */ /* 設(shè)定全局默認字體 */ body { font-family: Microsoft YaHei, Arial, sans-serif; } /* 設(shè)定網(wǎng)頁標題字體樣式 */ h1, h2, h3, h4, h5, h6 { font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; font-weight: bold; } /* 設(shè)定導(dǎo)航欄樣式 */ nav { background-color: #333; color: #fff; height: 50px; text-align: center; } nav ul { list-style-type: none; margin: 0; padding: 0; } nav li { display: inline-block; margin: 0 10px; line-height: 50px; } nav a { color: #fff; text-decoration: none; padding: 0 10px; } nav a:hover { background-color: #fff; color: #333; } /* 設(shè)定網(wǎng)頁內(nèi)容樣式 */ .article { width: 800px; margin: 0 auto; padding: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } .article h2 { font-size: 30px; margin-bottom: 10px; } .article p { font-size: 16px; line-height: 1.5; margin-bottom: 20px; } .article img { max-width: 100%; height: auto; }
除了常規(guī)的樣式屬性,CSS 還支持一些非常炫酷的效果,例如動畫、漸變、陰影等等。這些效果可以讓網(wǎng)頁看起來更加生動、有趣。
/* 以下是效果示例 */ /* 按鈕懸停效果 */ .btn { display: inline-block; padding: 10px 20px; font-size: 16px; color: #fff; background-color: #333; border-radius: 5px; border: none; transition: background-color 0.3s ease; } .btn:hover { background-color: #aaa; } /* 文字漸變效果 */ .gradient-text { background: linear-gradient(to right, #f00, #ffa500, #ff0, #0f0, #00f, #800080); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* 陰影邊框效果 */ .shadow-box { border: none; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
總之,CSS 是網(wǎng)頁制作中必不可少的一部分。它可以提高網(wǎng)頁的著眼度和用戶體驗,同時也可以讓網(wǎng)頁的代碼更加優(yōu)雅簡潔。想要打造一個漂亮、獨特的網(wǎng)站,好的 CSS 就非常重要了。