CSS3和JavaScript都是前端開發中比較重要的技術，而純CSS也是前端開發中不可或缺的一部分。

CSS3是Cascading Style Sheets的升級版，它新增了很多強大的特性，如過渡、動畫、陰影和角度等。這些特性可以使網頁更加生動有趣，提高用戶體驗。

/* 過渡效果 */
.box {
transition: all 1s;
}
.box:hover {
transform: rotate(90deg);
}
/* 動畫效果 */
@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(-10px); }
50% { transform: translateX(10px); }
75% { transform: translateX(-10px); }
100% { transform: translateX(0); }
}
.box {
animation: shake 1s infinite;
}
/* 陰影效果 */
.box {
box-shadow: 5px 5px 10px #888888;
}
/* 角度效果 */
.box {
transform: rotate(30deg);
}

JavaScript可以為網頁添加交互性和動態性，如表單驗證、動態效果和響應事件等。它可以操作HTML文檔的內容和結構，使網頁的內容更加豐富多彩。

/* 表單驗證 */
function validateForm() {
var name = document.forms["myForm"]["fname"].value;
if (name == "") {
alert("姓名不能為空");
return false;
}
}
/* 動態效果 */
document.getElementById("myBtn").addEventListener("click", function(){
document.getElementById("myDiv").classList.toggle("mystyle");
});
/* 響應事件 */
document.getElementById("myBtn").addEventListener("click", function(){
alert("按鈕已被點擊");
});

純CSS可以用于網頁的排版和布局，如設置頁面的字體、顏色、大小、背景等。通過使用CSS，可以使網頁更加美觀和易于閱讀。

/* 設置字體 */
body {
font-family: Arial, Helvetica, sans-serif;
}
/* 設置顏色 */
h1 {
color: #FF0000;
}
/* 設置大小 */
p {
font-size: 20px;
}
/* 設置背景 */
body {
background-color: #F0F0F0;
}