CSS 美化页面（二）
一、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>效果：
