HTML和CSS是構(gòu)建網(wǎng)頁(yè)的兩個(gè)基本元素。HTML負(fù)責(zé)網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容，而CSS則負(fù)責(zé)網(wǎng)頁(yè)的樣式和布局。下面我們將提供一個(gè)純HTML和CSS的例子，以說(shuō)明它們?nèi)绾螀f(xié)同工作。
首先，我們創(chuàng)建一個(gè)HTML文件，并使用p標(biāo)簽創(chuàng)建三個(gè)段落。這些段落將用于演示CSS如何改變它們的樣式。代碼如下：
<!DOCTYPE html> <html> <head> <title>HTML和CSS例子</title> <style> /* CSS代碼將在這里插入 */ </style> </head> <body> <p id="p1">這是第一段落</p> <p id="p2">這是第二段落</p> <p id="p3">這是第三段落</p> </body> </html>接下來(lái)，我們將插入CSS代碼來(lái)改變這些段落的樣式。具體來(lái)說(shuō)，我們將改變它們的字體大小，顏色和行距。代碼如下：
<style>
#p1 {
font-size: 24px;
color: red;
line-height: 1.5;
}
#p2 {
font-size: 18px;
color: blue;
line-height: 1.2;
}
#p3 {
font-size: 14px;
color: green;
line-height: 1.0;
}
</style>在這個(gè)例子中，我們使用了id選擇器來(lái)為每個(gè)段落定義不同的樣式。我們改變了它們的字體大小，顏色和行距，以便更清晰地區(qū)分它們。例如，第一個(gè)段落將有一個(gè)較大的字體大小，紅色的文字，并且有更寬的行距。
最后，我們將把這個(gè)代碼上傳到網(wǎng)絡(luò)，以便我們可以查看它的效果。當(dāng)我們?yōu)g覽這個(gè)網(wǎng)頁(yè)時(shí)，我們可以看到這些不同的段落已經(jīng)被成功地應(yīng)用了CSS樣式。它們看起來(lái)更加吸引人，更易于閱讀和理解。
這就是HTML和CSS是如何協(xié)同工作的。HTML提供了網(wǎng)頁(yè)的內(nèi)容和結(jié)構(gòu)，而CSS則將內(nèi)容設(shè)計(jì)成有吸引力的樣式，使得網(wǎng)頁(yè)更加美觀和易于閱讀。