在網頁開發過程中,CSS樣式的運用非常重要。下面我們來介紹一個CSS樣式的例子——chm樣式:
/* chm樣式 */ body { background-color: #f2f2f2; font-family: Arial, sans-serif; } h1, h2, h3 { color: #333; } p { font-size: 16px; line-height: 1.5; color: #666; margin: 0 0 20px; } a { color: #337ab7; text-decoration: none; } a:hover { text-decoration: underline; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .row::after { content: ""; clear: both; display: table; } .col { float: left; width: 100%; padding: 0 15px; } @media (min-width: 768px) { .col-sm-4 { float: left; width: 33.33333%; padding: 0 15px; } }
這個CSS樣式可以實現以下功能:
1. 設置頁面背景色為#f2f2f2;
2. 設置全局字體為Arial,sans-serif;
3. H1、H2、H3標題顏色均為#333;
4. 段落字體大小為16px,行間距為1.5,顏色為#666;
5. 鏈接字體顏色為#337ab7,無下劃線,當鼠標懸停時出現下劃線;
6. 設置頁面寬度不超過1200px,且水平居中;
7. 清除浮動;
8. 定義一個100%寬度的列(col);
9. 定義一個33.33333%寬度的col-sm-4,并在768px以上的屏幕上顯示。
使用CSS樣式可以讓我們更好地控制網頁的展示效果,增強網頁的美觀性和易用性。
上一篇css樣式內寫標簽樣式
下一篇dw 新建css格式化