層疊樣式表(Cascading Style Sheets, CSS)是網頁設計中最重要的一種技術，它可以使網頁變得更加美觀，更易于閱讀。CSS的基本功能就是控制網頁元素的樣式，從而使網頁達到更好的布局效果。本文將會介紹CSS層疊樣式的基礎知識、優先級、繼承和框模型。

// CSS樣式基礎
body {
font-family: 'Arial',sans-serif;
font-size: 16px;
color: #333;
}
h1 {
font-size: 28px;
text-align: center;
font-weight: bold;
}
p {
font-size: 18px;
line-height: 1.6;
margin-bottom: 20px;
}
// 優先級
div div div p{
color: #f00;
}
p {
color: #00f !important;
}
// 繼承
body {
font-size: 16px;
line-height: 1.5;
font-family: 'Arial', sans-serif;
}
article {
font-size: 1.1em;
line-height: 1.2;
font-family: inherit;
}
// 框模型
div.content {
width: 300px;
height: 200px;
padding: 20px;
border: 2px solid #f00;
margin: 20px;
box-sizing: border-box;
}

首先，CSS樣式基礎指的是基本的CSS樣式屬性，比如字體、顏色、背景、字號等等。基礎屬性可以應用于各種不同的網頁元素中；其次，CSS層疊樣式的優先級，是指當一個元素同時存在多個CSS樣式的情況下，如何決定應該應用哪個樣式，其優先級的計算方式為：!important >行內樣式 >id選擇器 >類選擇器/屬性選擇器/偽類選擇器 >標簽選擇器/偽元素選擇器。通過適當規劃選擇器和使用權重，可以確保CSS樣式的正確應用；然后是CSS樣式的繼承，其指的是子元素可以繼承父元素的某些CSS屬性，比如字號、字體等。這樣可以減少CSS的重復編寫，提高CSS代碼的可讀性和可維護性；最后是CSS框模型，即CSS樣式如何應用于HTML元素盒子模型。框模型由內到外分別包括內容(content)、內邊距(padding)、邊框(border)和外邊距(margin)，通過正確設置這些屬性可以實現對HTML元素的精確控制和布局。