CSS是網頁設計中非常重要的一部分,它可以控制網頁的樣式和布局。今天我們來介紹100種CSS的做法,可以讓你更好地掌握CSS。以下是一些實用的CSS技巧:
/* 1. 設置背景圖片 */ body { background-image: url("background.jpg"); } /* 2. 文本顏色加粗 */ p { font-weight: bold; } /* 3. 文本不換行 */ p { white-space: nowrap; } /* 4. 邊框寬度和顏色設置 */ div { border: 1px solid black; } /* 5. 文字陰影 */ h1 { text-shadow: 2px 2px blue; } /* 6. 自定義鼠標樣式 */ button { cursor: pointer; } /* 7. 全局顏色設置 */ :root { --primary-color: #333; } /* 8. 盒子陰影 */ div { box-shadow: 5px 5px 5px grey; } /* 9. 線性漸變背景 */ div { background: linear-gradient(to bottom, red, green); } /* 10. 懸停顏色變化 */ a:hover { color: blue; } /* 11. CSS過渡效果 */ button { transition: background-color 0.5s ease; } /* 12. 文本溢出省略號 */ p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 13. 彈性盒子布局 */ .container { display: flex; justify-content: center; align-items: center; } /* 14. 旋轉效果 */ .logo { transform: rotate(45deg); } /* 15. 表格樣式 */ table { border-collapse: collapse; text-align: center; } /* 16. 媒體查詢 */ @media screen and (max-width: 600px) { body { font-size: 14px; } } /* 17. 列表樣式 */ ul { list-style: none; } /* 18. 透明度 */ div { opacity: 0.5; } /* 19. 背景平鋪 */ body { background-repeat: repeat-x; } /* 20. 常見字體 */ body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
以上只是CSS中的一部分實用技巧,當然還有很多其他方法可以使用。掌握這些方法可以讓你更好地使用CSS來設計你的網頁。希望這篇文章對你有所幫助!