CSS3是指層疊樣式表(Cascading Style Sheets)第三個版本。與CSS2相比,它增加了更多的CSS屬性和模塊,以實現更靈活、更先進的網頁設計。
/* CSS3中的部分新增屬性 */ div { border-radius: 5px; /* 圓角邊框 */ box-shadow: 2px 2px 3px #888888; /* 盒子陰影 */ transition: background-color 0.5s ease; /* 過渡動畫 */ } @media screen and (max-width: 768px) { /* 移動端樣式 */ }
Sass(Syntactically Awesome Style Sheets)是一種CSS預處理器,它為CSS提供了一些高級功能和語法糖,以讓CSS更易于編寫和維護。Sass支持變量、函數、嵌套規則、繼承等概念。
/* Sass示例 */ $primary-color: #0275d8; .navbar { background-color: $primary-color; ul { margin: 0; padding: 0; list-style: none; li { display: inline-block; a { color: white; text-decoration: none; padding: 0.5rem 1rem; } } } } /* 輸出的CSS */ .navbar { background-color: #0275d8; } .navbar ul { margin: 0; padding: 0; list-style: none; } .navbar li { display: inline-block; } .navbar li a { color: white; text-decoration: none; padding: 0.5rem 1rem; }
上一篇css3 線性移動