一、CSS 属性详解
1、字体属性 (Font)
| 属性 | 描述 | 值示例 | 简写属性 |
|---|---|---|---|
font-family | 设置字体系列 | "Arial", sans-serif |
|
font-size | 设置字体大小 | 16px, 1.2em, 1rem | |
font-weight | 设置字体粗细 | normal, bold, 700 | |
font-style | 设置字体样式 | normal, italic, oblique | |
font-variant | 小型大写字母 | normal, small-caps | |
line-height | 设置行高 | 1.5, 24px |
2、背景属性 (Background )
| 属性 | 描述 | 值示例 | 简写属性 |
|---|---|---|---|
background-color | 背景颜色 | #fff, rgba(0,0,0,0.5) | background: #333 url("bg.jpg") no-repeat center/cover; |
background-image | 背景图像 | url("image.jpg"), linear-gradient(...) | |
background-repeat | 背景重复 | repeat, no-repeat, repeat-x | |
background-position | 背景位置 | center, left top, 50% 50% | |
background-attachment | 背景固定 | scroll, fixed | |
background-size | 背景尺寸 | cover, contain, 50% 100% |
3、文本属性 (Text)
| 属性 | 描述 | 值示例 |
|---|---|---|
color | 文本颜色 | #333, rgb(255,0,0) |
text-align | 文本对齐 | left, center, justify |
text-decoration | 文本装饰 | none, underline, overline |
text-transform | 文本转换 | uppercase, lowercase, capitalize |
text-indent | 首行缩进 | 2em, 20px |
text-shadow | 文本阴影 | 2px 2px 4px rgba(0,0,0,0.5) |
letter-spacing | 字符间距 | 1px, 0.1em |
word-spacing | 单词间距 | 0.5em, 10px |
white-space | 空白处理 | normal, nowrap, pre |
4、列表属性 (List)
| 属性 | 描述 | 值示例 | 简写属性 |
|---|---|---|---|
list-style-type | 列表标记类型 | disc, circle, decimal | list-style: square inside url("bullet.png"); |
list-style-image | 列表标记图像 | url("bullet.png") | |
list-style-position | 列表标记位置 | inside, outside |
5、其他常用属性
| 属性 | 描述 | 值示例 |
|---|---|---|
cursor | 鼠标指针样式 | pointer, help, crosshair |
opacity | 不透明度 | 0.5 (半透明), 1 (不透明) |
visibility | 元素可见性 | visible, hidden |
display | 显示类型 | block, inline, flex, grid |
box-shadow | 盒子阴影 | 0 4px 8px rgba(0,0,0,0.2) |
二、综合应用
<!DOCTYPE html>
<html>
<head>
<style>/* 表格样式 */table.css-properties {width: 100%;border-collapse: collapse;margin: 20px 0;font-family: 'Segoe UI', Tahoma, sans-serif;box-shadow: 0 2px 5px rgba(0,0,0,0.1);}/* 表头样式 */table.css-properties th {background: #3498db;color: white;text-align: left;padding: 12px 15px;font-weight: bold;text-transform: uppercase;letter-spacing: 1px;}/* 单元格样式 */table.css-properties td {padding: 10px 15px;border-bottom: 1px solid #e0e0e0;vertical-align: top;}/* 偶数行背景色 */table.css-properties tr:nth-child(even) {background: #f8f9fa;}/* 鼠标悬停时的样式*/table.css-properties tr:hover {background: #fae5ee;}/* 代码样式 */.code {font-family: 'Courier New', monospace;background: #f5f5f5;padding: 2px 4px;border-radius: 3px;color: #c7254e;}
</style>
</head>
<body><table class="css-properties"><thead><tr><th>属性类别</th><th>属性</th><th>描述</th><th>示例值</th></tr></thead><tbody><tr><td rowspan="6">字体属性</td><td><span class="code">font-family</span></td><td>设置字体系列</td><td><span class="code">"Arial", sans-serif</span></td></tr><tr><td><span class="code">font-size</span></td><td>设置字体大小</td><td><span class="code">16px</span>, <span class="code">1.2em</span></td></tr><tr><td><span class="code">font-weight</span></td><td>设置字体粗细</td><td><span class="code">bold</span>, <span class="code">700</span></td></tr><tr><td><span class="code">font-style</span></td><td>设置字体样式</td><td><span class="code">italic</span></td></tr><tr><td><span class="code">font-variant</span></td><td>小型大写字母</td><td><span class="code">small-caps</span></td></tr><tr><td><span class="code">line-height</span></td><td>设置行高</td><td><span class="code">1.5</span></td></tr></tbody></table>
</body>
</html> 效果：
2、案例中重点应用的背景与字体属性
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景与字体属性综合案例</title><style>/* 基础重置与全局字体设置 */body {margin: 0;padding: 0;font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;line-height: 1.6;color: #333;}/* 全屏英雄区域 - 背景图与字体组合 */.hero {height: 100vh;background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)),url('https://images.unsplash.com/photo-1518655048521-f130df041f66?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center;background-size: cover;display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;padding: 0 20px;color: white;}.hero h1 {font-size: 4rem;font-weight: 700;margin-bottom: 20px;text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);letter-spacing: 2px;font-family: 'Playfair Display', serif;}.hero p {font-size: 1.5rem;max-width: 800px;margin-bottom: 40px;font-weight: 300;text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);}/* 内容区块 - 渐变背景与字体对比 */.content-block {padding: 80px 20px;background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);}.content-block h2 {font-size: 2.5rem;color: #2c3e50;font-weight: 600;margin-bottom: 30px;text-align: center;font-family: 'Montserrat', sans-serif;}.content-block p {font-size: 1.1rem;max-width: 800px;margin: 0 auto 30px;color: #34495e;line-height: 1.8;}/* 特色卡片 - 背景图案与字体组合 */.features {display: flex;flex-wrap: wrap;justify-content: center;gap: 30px;padding: 50px 20px;background-color: #fff;background-image: radial-gradient(circle at 10% 20%, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.02) 90%),radial-gradient(circle at 90% 80%, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.02) 90%);}.feature-card {flex: 1 1 300px;max-width: 350px;padding: 40px 30px;border-radius: 10px;background: white;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);text-align: center;transition: transform 0.3s ease;}.feature-card:hover {transform: translateY(-10px);}.feature-icon {width: 80px;height: 80px;margin: 0 auto 25px;background: #3498db;border-radius: 50%;display: flex;align-items: center;justify-content: center;color: white;font-size: 2rem;font-weight: bold;}.feature-card h3 {font-size: 1.5rem;color: #2c3e50;margin-bottom: 15px;font-weight: 600;}.feature-card p {color: #7f8c8d;font-size: 1rem;line-height: 1.7;}/* 引用区块 - 背景纹理与特殊字体 */.quote-section {padding: 100px 20px;background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" opacity="0.05"><path d="M30,20 Q50,0 70,20 T90,50 Q70,80 50,100 T10,50 Q30,20 50,0 Z"/></svg>'),linear-gradient(to right, #ff758c, #ff7eb3);background-size: 150px, cover;color: white;text-align: center;}/* 引用样式 */.quote {max-width: 800px;margin: 0 auto;font-size: 1.8rem;font-weight: 300;font-style: italic;line-height: 1.6;font-family: 'Georgia', serif;text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);}/* */.quote-author {margin-top: 30px;font-size: 1.2rem;font-weight: 600;letter-spacing: 1px;}/* 响应式调整 */@media (max-width: 768px) {.hero h1 {font-size: 2.5rem;}.hero p {font-size: 1.2rem;}.content-block h2 {font-size: 2rem;}.quote {font-size: 1.4rem;}}</style>
</head>
<body><!-- 英雄区域 --><section class="hero"><h1>探索设计的无限可能</h1><p>通过精心设计的背景与字体组合，创造令人难忘的视觉体验</p></section><!-- 内容区块 --><section class="content-block"><h2>背景与字体的完美结合</h2><p>在网页设计中，背景属性与字体属性的巧妙搭配能够创造出独特的视觉效果。通过使用渐变、图片背景与精心选择的字体，我们可以引导用户的注意力，传达品牌个性，并提升整体的用户体验。</p><p>从全屏英雄区域的震撼效果，到微妙的内容区块渐变背景，再到精致的卡片设计，每一个元素都经过精心调校，确保视觉上的和谐与功能上的实用性。</p></section><!-- 特色卡片 --><section class="features"><div class="feature-card"><div class="feature-icon">1</div><h3>背景渐变</h3><p>使用CSS线性渐变和径向渐变创建平滑的色彩过渡，为设计增添深度和维度。</p></div><div class="feature-card"><div class="feature-icon">2</div><h3>字体层次</h3><p>通过字体大小、粗细和字体的组合，建立清晰的视觉层次结构，引导用户浏览内容。</p></div><div class="feature-card"><div class="feature-icon">3</div><h3>响应式设计</h3><p>确保在不同设备上都能保持背景与字体的完美比例和可读性。</p></div></section><!-- 引用区块 --><section class="quote-section"><blockquote class="quote">"好的设计是显而易见的，而伟大的设计是透明的。背景与字体的和谐搭配应该让内容自然呈现，而不是分散注意力。"</blockquote><div class="quote-author">— 用户体验设计师</div></section>
</body>
</html>效果：
