CSS（層疊樣式表）是一種用于描述HTML或XML（包括如SVG、MathML等衍生技術(shù)）文檔樣式的語言。CSS描述了如何在屏幕、紙質(zhì)、音頻等媒介中渲染元素。以下是一些常見的CSS樣式屬性及其描述：
color：用于設(shè)置字體顏色。font-size：用于設(shè)置字號大小。font-family：用于設(shè)置字體樣式。font-weight：用于設(shè)置字體粗細(xì)。font-style：用于設(shè)置字體風(fēng)格。font-variant：用于設(shè)置字體變形。@font-face：用于自定義字體。background-color：用于設(shè)置元素的背景顏色。background-image：用于設(shè)置元素的背景圖像。background-repeat：用于設(shè)置背景圖像是否以及如何重復(fù)。background-position：用于設(shè)置背景圖像的位置。background-attachment：用于設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動。text-align：用于設(shè)置文本的水平對齊方式。text-decoration：用于設(shè)置文本的裝飾效果，如下劃線、上劃線等。text-indent：用于設(shè)置首行文本的縮進(jìn)。text-transform：用于控制文本的大小寫。letter-spacing 和 word-spacing：用于設(shè)置字符和單詞之間的間距。line-height：用于設(shè)置行高。width 和 height：用于設(shè)置元素的寬度和高度。padding：用于設(shè)置元素的內(nèi)邊距。border：用于設(shè)置元素的邊框。margin：用于設(shè)置元素的外邊距。float：用于設(shè)置元素浮動。position：用于設(shè)置元素的定位類型（如靜態(tài)定位、相對定位、絕對定位等）。top、right、bottom、left：與position屬性一起使用，用于設(shè)置元素的位置。display：用于設(shè)置元素的顯示方式（如塊級元素、行內(nèi)元素等）。visibility：用于設(shè)置元素是否可見。opacity：用于設(shè)置元素的透明度。box-shadow：用于給元素添加盒子陰影。text-shadow：用于給文本添加陰影。transform：用于對元素進(jìn)行2D或3D轉(zhuǎn)換，如旋轉(zhuǎn)、縮放、傾斜等。transition：用于在元素狀態(tài)改變時(shí)添加平滑的過渡效果。@keyframes：用于創(chuàng)建動畫。animation：用于將動畫應(yīng)用于元素。以上只是CSS樣式屬性的一部分，實(shí)際上CSS提供了許多其他屬性和功能，用于更精細(xì)地控制網(wǎng)頁的布局和外觀。要獲取完整的CSS樣式屬性列表，建議查閱相關(guān)的CSS規(guī)范文檔或在線資源。
以下是一些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)兩個(gè)字符寬度 /
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)懸停時(shí)寬度變?yōu)?00像素 */
}
@keyframes example {
0%
50%
100%
}
.animated-box {
width: 100px;
height: 100px;
animation-name: example; /* 應(yīng)用名為example的動畫 /
animation-duration: 2s; / 動畫持續(xù)時(shí)間為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)懸停在鏈接上時(shí)文字顏色變?yōu)樗{(lán)色 */
}
p::first-line {
color: purple; /* 段落首行文字顏色為紫色 /
text-transform: uppercase; / 段落首行文字轉(zhuǎn)換為大寫 */
}
媒體查詢（響應(yīng)式設(shè)計(jì)）
css
@media (max-width: 600px) {
body {
font-size: 18px; /* 當(dāng)屏幕寬度小于等于600px時(shí)，字體大小設(shè)為18像素 */
}
.flex-container {
flex-direction: column; /* 當(dāng)屏幕寬度小于等于600px時(shí)，彈性盒子子項(xiàng)垂直排列 */
}
}
這些示例代碼涵蓋了CSS中的許多常用屬性和技術(shù)，你可以根據(jù)自己的需求將它們應(yīng)用到實(shí)際的網(wǎng)頁開發(fā)中。當(dāng)然，隨著CSS的不斷發(fā)展，新的屬性和技術(shù)也在不斷涌現(xiàn)，因此建議查閱最新的CSS規(guī)范文檔以獲取更全面的信息。