CSS是Cascading Style Sheets的縮寫(xiě)，翻譯成中文就是層疊樣式表。層疊是CSS的基本特性，指多個(gè)樣式信息的疊加。在CSS中，層疊的優(yōu)先級(jí)由選擇器的特殊性、順序和!important聲明來(lái)決定。

例如，使用CSS實(shí)現(xiàn)小豬佩奇的樣式，可以先定義一個(gè)div，并設(shè)置它的背景顏色為粉色，同時(shí)設(shè)置它的寬度和高度為200px和150px。代碼如下：

div{
background-color: pink;
width: 200px;
height: 150px;
}

接下來(lái)，使用CSS實(shí)現(xiàn)小豬佩奇的耳朵、鼻子和眼睛：

div:before{
content: "";
position: absolute;
left: 10px;
top: 20px;
background-color: #FF9E9E;
width: 30px;
height: 60px;
border-radius: 50% 50% 0 0;
}
div:after{
content: "";
position: absolute;
left: 60px;
top: 20px;
background-color: #FF9E9E;
width: 30px;
height: 60px;
border-radius: 50% 50% 0 0;
}
div span{
display: inline-block;
width: 50px;
height: 50px;
background-color: white;
border:2px solid black;
border-radius: 50%;
position: absolute;
left: 45px;
top: 60px;
}
div span:before{
content: "";
display: inline-block;
width: 20px;
height: 20px;
background-color: black;
border-radius: 50%;
position: absolute;
left: 5px;
top: 10px;
}
div span:after{
content: "";
display: inline-block;
width: 10px;
height: 10px;
background-color: white;
border-radius: 50%;
position: absolute;
left: 10px;
top: 15px;
}

以上代碼實(shí)現(xiàn)了小豬佩奇的耳朵、鼻子和眼睛，其中使用了:before和:after偽類(lèi)元素，以及定位、邊框、圓角等多種CSS技巧。最終的效果如下圖所示：

CSS作為Web開(kāi)發(fā)的重要技術(shù)之一，可以實(shí)現(xiàn)各種精美的效果和布局，而且隨著CSS3的逐漸普及，越來(lái)越多的新特性被添加到CSS中，給開(kāi)發(fā)者帶來(lái)了更多的創(chuàng)意和靈活性。