以下是一些CSS樣式屬性的實(shí)例代碼，用于演示如何在實(shí)際樣式表中應(yīng)用這些屬性：
字體樣式屬性
css
body {
color: #333; /* 設(shè)置字體顏色為深灰色 /
font-size: 16px; / 設(shè)置字號大小為16像素 /
font-family: ‘Arial’, sans-serif; / 設(shè)置字體為Arial，如果不可用則使用無襯線字體 /
font-weight: bold; / 設(shè)置字體加粗 /
font-style: italic; / 設(shè)置字體為斜體 /
}
背景屬性
css
div {
background-color: #f0f0f0; / 設(shè)置背景顏色為淺灰色 /
background-image: url(‘bg.jpg’); / 設(shè)置背景圖像 /
background-repeat: no-repeat; / 背景圖像不重復(fù) /
background-position: center center; / 背景圖像居中 /
background-attachment: fixed; / 背景圖像固定不動 /
}
文本屬性
css
p {
text-align: center; / 文本居中 /
text-decoration: underline; / 文本下劃線 /
text-indent: 2em; / 首行縮進(jìn)兩個字符寬度 /
text-transform: uppercase; / 文本轉(zhuǎn)換為大寫 /
letter-spacing: 0.1em; / 字符間距增加 /
line-height: 1.6; / 行高設(shè)置為1.6倍 */
}
盒子模型屬性
.box {
width: 300px; /* 盒子寬度為300像素 /
height: 200px; / 盒子高度為200像素 /
padding: 10px; / 內(nèi)邊距為10像素 /
border: 1px solid #000; / 邊框?yàn)?像素寬的實(shí)線黑色 /
margin: 20px auto; / 外邊距上下為20像素，左右自動 /
}
浮動與定位屬性
css
.float-box {
float: left; / 元素左浮動 */
width: 100px;
height: 100px;
background-color: lightblue;
}
.positioned-box {
position: absolute; /* 絕對定位 /
top: 50px; / 距離頂部50像素 /
right: 0; / 距離右側(cè)0像素 /
width: 200px;
height: 100px;
background-color: lightgreen;
}
顯示與可見性屬性
css
.hidden {
visibility: hidden; / 元素不可見，但仍占據(jù)空間 */
}
.invisible {
display: none; /* 元素完全不可見且不占據(jù)空間 */
}
.semi-transparent {
opacity: 0.5; /* 元素半透明，透明度為50% /
}
陰影與變換屬性
css
.shadow-box {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); / 盒子陰影 */
width: 200px;
height: 100px;
background-color: lightyellow;
}
.transformed-box {
transform: rotate(45deg); /* 元素旋轉(zhuǎn)45度 /
width: 100px;
height: 100px;
background-color: pink;
}
過渡與動畫屬性
css
.transition-box {
width: 100px;
height: 100px;
background-color: lightcoral;
transition: width 2s; / 寬度過渡效果持續(xù)2秒 */
}
.transition-box:hover {
width: 200px; /* 鼠標(biāo)懸停時寬度變?yōu)?00像素 */
}
@keyframes example {
0%
50%
100%
}
.animated-box {
width: 100px;
height: 100px;
animation-name: example; /* 應(yīng)用名為example的動畫 /
animation-duration: 2s; / 動畫持續(xù)時間為2秒 /
animation-iteration-count: infinite; / 動畫無限次循環(huán) /
background-color: red; / 初始背景顏色 */
}
彈性盒子布局（Flexbox）屬性
”`css
.flex-container {
display: flex; /* 使用彈性盒子布局 /
flex-direction: row; / 子項(xiàng)水平排列 /
justify-content: space-between; / 子項(xiàng)間等距分布 /
align-items: center; / 子項(xiàng)垂直居中 */
}
.flex-item {
flex: 1; /* 子項(xiàng)彈性因子為1，等比例占據(jù)可用空間 /
margin: 5px;
padding: 10px;
background-color: lightgray;
}
網(wǎng)格布局（Grid）屬性
css
.grid-container {
display: grid; / 使用網(wǎng)格布局 /
grid-template-columns: 1fr 1fr 1fr; / 定義三列，每列占據(jù)相同空間 /
grid-template-rows: auto; / 行高自動 /
grid-gap: 10px; / 網(wǎng)格項(xiàng)之間的間距 */
}
.grid-item {
background-color: lightpink;
pding: 20px;
text-align: center;
}
偽類和偽元素
css
a:hover {
color: blue; /* 鼠標(biāo)懸停在鏈接上時文字顏色變?yōu)樗{(lán)色 */
}
p::first-line {
color: purple; /* 段落首行文字顏色為紫色 /
text-transform: uppercase; / 段落首行文字轉(zhuǎn)換為大寫 */
}
媒體查詢（響應(yīng)式設(shè)計）
css
@media (max-width: 600px) {
body {
font-size: 18px; /* 當(dāng)屏幕寬度小于等于600px時，字體大小設(shè)為18像素 */
}
.flex-container {
flex-direction: column; /* 當(dāng)屏幕寬度小于等于600px時，彈性盒子子項(xiàng)垂直排列 */
}
}
這些示例代碼涵蓋了CSS中的許多常用屬性和技術(shù)，你可以根據(jù)自己的需求將它們應(yīng)用到實(shí)際的網(wǎng)頁開發(fā)中。當(dāng)然，隨著CSS的不斷發(fā)展，新的屬性和技術(shù)也在不斷涌現(xiàn)，因此建議查閱最新的CSS規(guī)范文檔以獲取更全面的信息。