CSS（Cascading Style Sheets）是一種語言，可以用于描述網頁上的樣式和布局。它的作用之一是可以改變 HTML 元素的樣式，包括字體、顏色、尺寸等。
而 DOM（Document Object Model）是瀏覽器將 HTML 文檔解析成樹形結構后，表示 HTML 元素和元素之間關系的方式。
// 以下是一個簡單的 HTML 頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS-DOM 頁面</title>
<style>
p {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<h1>這是標題</h1>
<p>這是一段文字。</p>
<div>
<p>這是另一個段落。</p>
</div>
</body>
</html>
// 然后我們可以通過 JavaScript 獲取 DOM 對象來操作 HTML 元素
const allPs = document.getElementsByTagName('p');
for (let i = 0; i< allPs.length; i++) {
allPs[i].style.backgroundColor = 'red';
allPs[i].style.border = 'solid 1px black';
}
// 通過 CSS 選擇器也可以選中 HTML 元素并修改樣式
p {
color: red;
}在上面的代碼中，CSS 選擇器 `p` 可以選中所有的 `p` 元素，并將它們的顏色改為紅色。
同時，我們也可以通過 JavaScript 操作 DOM 對象來更改元素樣式。比如上面的代碼中，我們選中了頁面上的所有 `p` 元素，并將它們的背景色改為紅色，外邊框改為黑色實線。
總的來說，CSS-DOM 是網頁開發中非常重要的兩個概念，它們有著不可分割的關系，并且可以讓我們更好地控制網頁的外觀和交互效果。
上一篇css-4 mod2
下一篇mysql標識列從1開始