內嵌CSS樣式通常是在HTML文件中使用樣式標簽進行定義的。
<style> /* 在這里定義內嵌樣式 */ </style>
樣式標簽可以放置在HTML文件的頭部或者任意位置,但通常都是放在頭部以便頁面加載時盡快加載樣式。
<head> <title>我的網站</title> <style> /* 在這里定義內嵌樣式 */ </style> </head>
內嵌樣式可以定義網頁元素(如
、
等等),也可以通過選擇器來選取需要設置樣式的元素。
<style> /* 定義p標簽的樣式 */ p { font-size: 14px; color: #333; } /* 定義id為logo的img標簽的樣式 */ #logo { width: 100px; height: 50px; } </style>
除了定義元素樣式,內嵌樣式還可以定義一些特殊樣式,如動畫、轉換(transforms)等。
<style> /* 定義div元素的鼠標懸停時的背景顏色和過渡動畫 */ div:hover { background-color: #f2f2f2; transition: background-color 0.5s ease; } /* 定義img元素的過渡效果 */ img { transition: transform 0.5s ease; } /* 鼠標懸停時把img放大1.2倍 */ img:hover { transform: scale(1.2); } </style>
總之,內嵌CSS樣式是網頁開發(fā)中非常常用的一種樣式定義方式,通過合理定義可以使得網頁更加美觀、直觀。