以下是一些CSS样式属性的实例代码，用于演示如何在实际样式表中应用这些属性：
字体样式属性
css
body {
color: #333; /* 设置字体颜色为深灰色 /
font-size: 16px; / 设置字号大小为16像素 /
font-family: ‘Arial’, sans-serif; / 设置字体为Arial，如果不可用则使用无衬线字体 /
font-weight: bold; / 设置字体加粗 /
font-style: italic; / 设置字体为斜体 /
}
背景属性
css
div {
background-color: #f0f0f0; / 设置背景颜色为浅灰色 /
background-image: url(‘bg.jpg’); / 设置背景图像 /
background-repeat: no-repeat; / 背景图像不重复 /
background-position: center center; / 背景图像居中 /
background-attachment: fixed; / 背景图像固定不动 /
}
文本属性
css
p {
text-align: center; / 文本居中 /
text-decoration: underline; / 文本下划线 /
text-indent: 2em; / 首行缩进两个字符宽度 /
text-transform: uppercase; / 文本转换为大写 /
letter-spacing: 0.1em; / 字符间距增加 /
line-height: 1.6; / 行高设置为1.6倍 */
}
盒子模型属性
.box {
width: 300px; /* 盒子宽度为300像素 /
height: 200px; / 盒子高度为200像素 /
padding: 10px; / 内边距为10像素 /
border: 1px solid #000; / 边框为1像素宽的实线黑色 /
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; / 距离右侧0像素 /
width: 200px;
height: 100px;
background-color: lightgreen;
}
显示与可见性属性
css
.hidden {
visibility: hidden; / 元素不可见，但仍占据空间 */
}
.invisible {
display: none; /* 元素完全不可见且不占据空间 */
}
.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); /* 元素旋转45度 /
width: 100px;
height: 100px;
background-color: pink;
}
过渡与动画属性
css
.transition-box {
width: 100px;
height: 100px;
background-color: lightcoral;
transition: width 2s; / 宽度过渡效果持续2秒 */
}
.transition-box:hover {
width: 200px; /* 鼠标悬停时宽度变为200像素 */
}
@keyframes example {
0%
50%
100%
}
.animated-box {
width: 100px;
height: 100px;
animation-name: example; /* 应用名为example的动画 /
animation-duration: 2s; / 动画持续时间为2秒 /
animation-iteration-count: infinite; / 动画无限次循环 /
background-color: red; / 初始背景颜色 */
}
弹性盒子布局（Flexbox）属性
”`css
.flex-container {
display: flex; /* 使用弹性盒子布局 /
flex-direction: row; / 子项水平排列 /
justify-content: space-between; / 子项间等距分布 /
align-items: center; / 子项垂直居中 */
}
.flex-item {
flex: 1; /* 子项弹性因子为1，等比例占据可用空间 /
margin: 5px;
padding: 10px;
background-color: lightgray;
}
网格布局（Grid）属性
css
.grid-container {
display: grid; / 使用网格布局 /
grid-template-columns: 1fr 1fr 1fr; / 定义三列，每列占据相同空间 /
grid-template-rows: auto; / 行高自动 /
grid-gap: 10px; / 网格项之间的间距 */
}
.grid-item {
background-color: lightpink;
pding: 20px;
text-align: center;
}
伪类和伪元素
css
a:hover {
color: blue; /* 鼠标悬停在链接上时文字颜色变为蓝色 */
}
p::first-line {
color: purple; /* 段落首行文字颜色为紫色 /
text-transform: uppercase; / 段落首行文字转换为大写 */
}
媒体查询（响应式设计）
css
@media (max-width: 600px) {
body {
font-size: 18px; /* 当屏幕宽度小于等于600px时，字体大小设为18像素 */
}
.flex-container {
flex-direction: column; /* 当屏幕宽度小于等于600px时，弹性盒子子项垂直排列 */
}
}
这些示例代码涵盖了CSS中的许多常用属性和技术，你可以根据自己的需求将它们应用到实际的网页开发中。当然，随着CSS的不断发展，新的属性和技术也在不断涌现，因此建议查阅最新的CSS规范文档以获取更全面的信息。