Web開發中,CSS是一種非常重要的技術,用于定義網頁的樣式和布局。CSS樣式可以分為以下幾類:
/* 1.選擇器樣式 */ /* 標簽選擇器樣式 */ p { font-size: 14px; color: #333; } /* 類選擇器樣式 */ .text { font-weight: bold; text-align: center; } /* ID選擇器樣式 */ #header { background-color: #fff; width: 100%; } /* 2.盒子模型樣式 */ /* 內邊距樣式 */ p { padding: 10px; } /* 邊框樣式 */ div { border: 1px solid #ccc; } /* 外邊距樣式 */ img { margin: 10px; } /* 3.文本樣式 */ /* 字體樣式 */ h1 { font-family: Arial, Helvetica, sans-serif; font-size: 28px; font-weight: bold; } /* 顏色樣式 */ span { color: red; } /* 4.背景樣式 */ /* 背景顏色 */ body { background-color: #f4f4f4; } /* 背景圖片 */ div { background-image: url("bg.jpg"); } /* 5.定位樣式 */ /* 相對定位 */ div { position: relative; left: 50px; top: 50px; } /* 絕對定位 */ img { position: absolute; right: 0; bottom: 0; } /* 6.響應式布局樣式 */ /* 媒體查詢 */ @media screen and (max-width: 768px) { body { font-size: 14px; } }
以上就是CSS樣式分類的介紹,掌握這些基本的樣式分類是學好CSS的前提。需要注意的是,在實際應用中,樣式分類的應用往往是混合使用的,才能實現更完美的效果。希望本文能對大家學習CSS有所幫助。