今天我們來學習一下含有CSS樣式的簡單代碼,代碼如下:
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
color: #333;
}
h1 {
font-size: 36px;
font-weight: bold;
text-align: center;
margin-top: 50px;
}
p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 0 10px;
}
.btn {
display: inline-block;
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
transition: background-color 0.2s ease;
}
.btn:hover {
background-color: #0062cc;
}
這段代碼包含了一些基本的CSS樣式,比如修改全局的背景顏色、字體、字體顏色,還有針對特定標簽的樣式,比如修改標題的字體大小、粗細和居中對齊,修改段落的字體大小、行高和下邊距等等。
此外,這段代碼還包含了一個類和一個類的偽類的樣式,用于制作一個簡單的按鈕,當鼠標懸浮在按鈕上時,按鈕的背景顏色會發生變化。這里用到了CSS3的transition屬性,使顏色變化更加自然。
當然,這只是一個簡單的例子,實際運用中會更加復雜,但掌握基本的CSS樣式是建立起后續更高級的樣式的基礎。
下一篇含css3的網頁