網(wǎng)頁(yè)樣式在沒(méi)有CSS的情況下，將會(huì)是一個(gè)非常枯燥和無(wú)聊的頁(yè)面。這個(gè)頁(yè)面將沒(méi)有任何顏色，大小，邊距和其他通過(guò)CSS樣式表設(shè)計(jì)和改變的元素。如果您是一個(gè)經(jīng)驗(yàn)豐富的開(kāi)發(fā)人員，您可能會(huì)記得Web的早期版本-一個(gè)簡(jiǎn)單的HTML頁(yè)面，其中包含一些有限的標(biāo)記來(lái)定義文本的基本屬性。
<!DOCTYPE html> <html> <head> <title>沒(méi)有CSS的網(wǎng)頁(yè)樣式</title> </head> <body> <h1>這是一個(gè)標(biāo)題</h1> <p>這是一個(gè)段落</p> <p>這也是一個(gè)段落</p> </body> </html>
當(dāng)然，這個(gè)頁(yè)面不需要太多代碼-只需要一些標(biāo)記和文本。但是，這個(gè)頁(yè)面看起來(lái)非常基礎(chǔ)和不吸引人。如果您想讓您的頁(yè)面看起來(lái)更酷，您需要CSS樣式表。
<!DOCTYPE html>
<html>
<head>
<title>帶有CSS的網(wǎng)頁(yè)樣式</title>
<style>
body {
background-color: #233142;
font-family: Arial, Helvetica, sans-serif;
color: #ffffff;
}
h1 {
color: #FF9900;
font-size: 3em;
text-align: center;
padding-top: 50px;
}
p {
font-size: 18px;
line-height: 1.5;
text-align: justify;
padding: 0 50px;
margin-bottom: 30px;
}
</style>
</head>
<body>
<h1>這是一個(gè)標(biāo)題</h1>
<p>這是一個(gè)段落。這是一個(gè)段落。這是一個(gè)段落。這是一個(gè)段落。這是一個(gè)段落。這是一個(gè)段落。</p>
<p>這是另一個(gè)段落。這是另一個(gè)段落。這是另一個(gè)段落。這是另一個(gè)段落。這是另一個(gè)段落。</p>
</body>
</html>通過(guò)CSS樣式表，您可以為網(wǎng)頁(yè)添加顏色，大小，邊距，字體和其他一些元素。通過(guò)在HTML中定義樣式，您可以輕松地調(diào)整和修改頁(yè)面的外觀和感覺(jué)。
下一篇css元素的定位