CSS（層疊樣式表）是一種用于添加樣式和布局到 HTML 元素的語言。它可以通過不同的方式應用于 HTML 元素，如內聯樣式、內部樣式表和外部樣式表。

在 CSS 中，我們可以通過添加子元素的方式來改變 HTML 元素的樣式和布局。添加子元素的方法主要有兩種：

方法一：使用偽元素
父元素::before {
content: "";  //添加空內容
display: block; //轉換為塊級元素
height: 30px; //設置高度
width: 30px; //設置寬度
background-color: red; //設置背景顏色
}

上面的代碼中，我們通過添加 ::before 偽元素來給父元素添加一個紅色的方塊。

方法二：使用絕對定位
父元素 {
position: relative; //設置相對位置
}
子元素 {
position: absolute; //設置絕對位置
top: 50%; //設置上側距離為父元素一半高度
left: 50%; //設置左側距離為父元素一半寬度
transform: translate(-50%, -50%); //用于調整子元素位置
height: 30px; //設置高度
width: 30px; //設置寬度
background-color: red; //設置背景顏色
}

上面的代碼中，我們通過添加一個絕對定位的子元素來給父元素添加一個紅色的方塊。我們使用 transform 屬性來定位子元素的位置，使其水平和垂直居中。

通過上述兩種方法的其中一種或結合使用，我們可以很容易地給 HTML 元素添加一些有趣的效果。