CSS3(Cascading Style Sheets 3)是層疊樣式表的第三個版本,是為了增強CSS的功能而在2001年提出的。CSS3相對于CSS2.1來說,增加了更多的樣式屬性和選擇器,讓網頁設計更加豐富多彩。
下面將詳解CSS3的基礎知識:
1. 選擇器
/* 標簽選擇器 */ p { color: blue; } /* ID選擇器 */ #id { font-size: 16px; } /* 類選擇器 */ .class { background-color: red; } /* 屬性選擇器 */ input[type="text"] { border: 1px solid black; }
CSS3新增了更多的選擇器,如nth-child、:not、:target等。
2. 盒模型
/* 標準盒模型 */ div { width: 100px; height: 100px; padding: 10px; border: 1px solid black; margin: 20px; } /* border-box盒模型 */ div { width: 100px; height: 100px; padding: 10px; border: 1px solid black; margin: 20px; box-sizing: border-box; }
CSS3新增了box-sizing屬性,可以控制盒模型的計算方式。
3. 文字樣式
/* 字體樣式 */ p { font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; } /* 文字效果 */ p { text-shadow: 2px 2px 2px black; text-decoration: underline; } /* 文字排版 */ p { line-height: 1.5em; text-align: center; }
CSS3新增了更多的文字效果和排版屬性,如text-overflow、word-wrap、letter-spacing等。
4. 背景樣式
/* 背景顏色 */ div { background-color: lightblue; } /* 背景圖片 */ div { background-image: url("image.jpg"); background-repeat: no-repeat; background-size: cover; } /* 漸變背景 */ div { background: linear-gradient(to right, red, yellow); }
CSS3新增了漸變背景和多背景屬性等。
5. 動畫樣式
/* 旋轉動畫 */ div { animation: spin 2s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* 過渡效果 */ div { transition: all 1s ease; } div:hover { transform: scale(1.2); }
CSS3可以創建出更加豐富多彩的動畫效果。
以上就是CSS3的基礎知識,當然CSS3還有很多其他的屬性和特性,需要我們進一步去學習和掌握。
上一篇css latout
下一篇css larger