CSS(層疊樣式表)是網頁設計中非常重要的語言,可以控制網頁的樣式和版面。其中,樣式是CSS最基本的元素,可以為HTML元素添加各種不同的樣式。 CSS樣式主要有以下幾種: 一、內嵌樣式 內聯樣式是直接在HTML標籤中加入樣式的一種方式,適用於一些比較簡單的網頁,如文字顏色、字體、字號等基本樣式。 範例程式碼: 这是一个段落 二、內部樣式表 內部樣式表是在HTML文檔的head中新增標籤,用於定義整個HTML頁面的樣式。適用於網站整體風格的定義。 </p> <p>範例程式碼:</p> <pre><head> <style type="text/css"> p {color:red;font-size:16px;} 这是一个段落 三、外部樣式表 外部樣式表是在HTML文件中連結外部的CSS文件,這樣多個HTML頁面可以共用同一個CSS樣式表。適用於整個網站風格的定義,並且方便修改。 範例程式碼: 在HTML檔案中新增以下程式碼: 这是一个段落 在style.css檔案中加入以下程式碼: p { color:red; font-size:16px; } 四、高級樣式(CSS3) CSS3是CSS的升級版本,增加了許多進階樣式,如圓角、陰影、動畫效果、漸層等。這些樣式可以讓網頁設計更加豐富多彩。 範例程式碼: /* 圆角 */ div { border-radius:10px; } /* 阴影 */ div { box-shadow: 5px 5px 5px #ccc; } /* 动画效果 */ div:hover { animation: example 1s ease-in-out forwards; } @keyframes example { 0% {transform: scale(1);} 100% {transform: scale(1.2);} } /* 渐变 */ div { background: linear-gradient(red, yellow); } 以上是CSS中常見的樣式種類,了解不同的樣式類型以及其使用場景對於前端開發人員來說非常重要。在實際專案中,正確選擇合適的樣式類型可以使我們的程式碼更簡潔、易於維護,同時也可以讓網頁設計更加美觀、簡潔。