CSS3 文字样式语法知识点及案例代码
- CSS3文字样式基础属性，如字体、字号、颜色、对齐方式等。
- CSS3文字样式高级属性，如阴影、装饰、间距、行高等。
一、文字颜色
语法
color: <颜色值>;
<颜色值>：可以是颜色名称（如red、blue）、十六进制颜色码（如#FF0000）、RGB颜色值（如rgb(255, 0, 0)）或 HSL 颜色值（如hsl(0, 100%, 50%)）。
案例
<!DOCTYPE html>
<html>
<head>
<style>
.text-color {
color: #FF5733; /* 使用十六进制颜色码设置文字颜色为橙色 */
}
</style>
</head>
<body>
<p class="text-color">这是一个设置了颜色的文字示例。</p>
</body>
</html>
二、字体系列
语法
font-family: <字体系列>;
<字体系列>：指定一种或多种字体名称，用逗号分隔，浏览器会按顺序尝试使用这些字体。
案例
<!DOCTYPE html>
<html>
<head>
<style>
.font-family {
font-family: "Arial", "Helvetica", sans-serif; /* 设置字体系列 */
}
</style>
</head>
<body>
<p class="font-family">这是一个设置了字体系列的文字示例。</p>
</body>
</html>
三、字体大小
语法
font-size: <尺寸>;
<尺寸>：可以是绝对值（如16px）、相对值（如1.2em）或百分比（如120%）。
案例
<!DOCTYPE html>
<html>
<head>
<style>
.font-size {
font-size: 24px; /* 设置字体大小为24像素 */
}
</style>
</head>
<body>
<p class="font-size">这是一个设置了字体大小的文字示例。</p>
</body>
</html>
四、字体粗细
语法
font-weight: <粗细值>;
<粗细值>：可以是normal（正常）、bold（加粗），或者数值100到900（细到特粗）。
案例
<!DOCTYPE html>
<html>
<head>
<style>
.font-weight {
font-weight: 700; /* 设置字体粗细为较粗 */
}
</style>
</head>
<body>
<p class="font-weight">这是一个设置了字体粗细的文字示例。</p>
</body>
</html>
五、字体样式
语法
font-style: <样式>;
<样式>：可以是normal（正常）、italic（斜体）或oblique（倾斜）。
案例
<!DOCTYPE html>
<html>
<head>
<style>
.font-style {
font-style: italic; /* 设置字体样式为斜体 */
}
</style>
</head>
<body>
<p class="font-style">这是一个设置了字体样式为斜体的文字示例。</p>
</body>
</html>
六、文字对齐
语法
text-align: <对齐方式>;
<对齐方式>：可以是left（左对齐）、right（右对齐）、center（居中对齐）或justify（两端对齐）。
案例
<!DOCTYPE html>
<html>
<head>
<style>
.text-align {
text-align: center; /* 设置文字居中对齐 */
width: 300px;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<div class="text-align">
<p>这是一个设置了文字对齐方式的文字示例。</p>
</div>
</body>
</html>
七、文字装饰
语法
text-decoration: <装饰类型>;
<装饰类型>：可以是none（无装饰）、underline（下划线）、overline（上划线）、line-through（删除线）。
案例
<!DOCTYPE html>
<html>
<head>
<style>
.text-decoration {
text-decoration: underline; /* 设置文字带有下划线 */
}
</style>
</head>
<body>
<p class="text-decoration">这是一个设置了文字装饰的文字示例。</p>
</body>
</html>
八、文字转换
语法
text-transform: <转换类型>;
<转换类型>：可以是none（无转换）、capitalize（首字母大写）、uppercase（全部大写）、lowercase（全部小写）。
案例
<!DOCTYPE html>
<html>
<head>
<style>
.text-transform {
text-transform: uppercase; /* 将文字转换为全部大写 */
}
</style>
</head>
<body>
<p class="text-transform">这是一个设置了文字转换的文字示例。</p>
</body>
</html>
九、文字阴影
语法
text-shadow: <水平阴影> <垂直阴影> <模糊半径> <颜色>;
<水平阴影>：阴影在水平方向的偏移量，正值向右，负值向左。<垂直阴影>：阴影在垂直方向的偏移量，正值向下，负值向上。<模糊半径>：阴影的模糊程度，值越大越模糊。<颜色>：阴影的颜色。
案例
<!DOCTYPE html>
<html>
<head>
<style>
.text-shadow {
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* 设置文字阴影 */
font-size: 24px;
}
</style>
</head>
<body>
<p class="text-shadow">这是一个设置了文字阴影的文字示例。</p>
</body>
</html>
十、字母间距
语法
letter-spacing: <间距>;
<间距>：字母之间的间距，可以是正常间距（normal）或指定的像素值。
案例
<!DOCTYPE html>
<html>
<head>
<style>
.letter-spacing {
letter-spacing: 2px; /* 设置字母间距为2像素 */
}
</style>
</head>
<body>
<p class="letter-spacing">这是一个设置了字母间距的文字示例。</p>
</body>
</html>
十一、单词间距
语法
word-spacing: <间距>;
<间距>：单词之间的间距，可以是正常间距（normal）或指定的像素值。
案例
<!DOCTYPE html>
<html>
<head>
<style>
.word-spacing {
word-spacing: 10px; /* 设置单词间距为10像素 */
}
</style>
</head>
<body>
<p class="word-spacing">这是一个设置了单词间距的文字示例。注意单词之间的间距变化。</p>
</body>
</html>
十二、行高
语法
line-height: <行高>;
<行高>：可以是正常行高（normal）、数值、长度值或百分比。
案例
<!DOCTYPE html>
<html>
<head>
<style>
.line-height {
line-height: 1.6; /* 设置行高为1.6倍字体大小 */
width: 300px;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<div class="line-height">
<p>这是一个设置了行高的文字示例。通过设置行高可以改善文字的可读性和排版效果。</p>
</div>
</body>
</html>
以上涵盖了 CSS3 中文字样式的主要语法知识点及案例代码，通过这些知识点可以对网页中的文字进行丰富的样式设置，提升页面的视觉效果和用户体验。
CSS3 文字样式实际开发案例
案例一：网站导航栏文字样式
<!DOCTYPE html>
<html>
<head>
<style>
/* 导航栏容器样式 */
.navbar {
background-color: #333;
padding: 10px 20px;
}
/* 导航链接文字样式 */
.navbar a {
color: white; /* 设置文字颜色为白色 */
text-decoration: none; /* 去掉下划线 */
margin-right: 20px; /* 设置文字右侧间距 */
font-family: Arial, sans-serif; /* 设置字体系列 */
font-size: 18px; /* 设置字体大小 */
transition: color 0.3s; /* 添加颜色过渡效果 */
}
/* 鼠标悬停时的文字效果 */
.navbar a:hover {
color: #4CAF50; /* 悬停时文字变为绿色 */
text-decoration: underline; /* 添加下划线 */
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">首页</a>
<a href="#about">关于我们</a>
<a href="#services">服务</a>
<a href="#contact">联系我们</a>
</div>
</body>
</html>
说明：此案例展示了如何在网站导航栏中设置文字样式，包括颜色、字体、大小等，并通过hover伪类实现鼠标悬停时的文字效果。
案例二：文章标题样式
<!DOCTYPE html>
<html>
<head>
<style>
/* 文章容器样式 */
.article {
max-width: 800px;
margin: 0 auto;
padding: 20px;
font-family: Georgia, serif; /* 设置整体字体 */
}
/* 标题样式 */
.article h2 {
color: #2c3e50; /* 设置标题颜色 */
text-align: center; /* 文字居中对齐 */
font-size: 32px; /* 设置字体大小 */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* 添加文字阴影 */
margin-bottom: 20px; /* 设置底部外边距 */
}
/* 副标题样式 */
.article h3 {
color: #3498db; /* 设置副标题颜色 */
font-size: 24px; /* 设置字体大小 */
border-left: 5px solid #3498db; /* 添加左侧边框 */
padding-left: 10px; /* 设置左侧内边距 */
margin: 25px 0; /* 设置上下外边距 */
}
</style>
</head>
<body>
<div class="article">
<h2>欢迎阅读我们的文章</h2>
<h3>如何使用CSS3美化文字</h3>
<p>在本文中，我们将介绍如何使用CSS3的各种属性来美化网页中的文字，提升用户的阅读体验。</p>
</div>
</body>
</html>
说明：此案例展示了如何为文章的标题和副标题设置样式，包括颜色、对齐方式、阴影效果等，以提升文章的视觉吸引力。
案例三：产品展示卡片文字
<!DOCTYPE html>
<html>
<head>
<style>
/* 产品卡片容器 */
.product-card {
width: 300px;
border: 1px solid #ddd;
border-radius: 5px;
padding: 20px;
margin: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* 产品名称样式 */
.product-card .name {
font-size: 20px; /* 设置字体大小 */
color: #2c3e50; /* 设置文字颜色 */
margin-bottom: 10px; /* 设置底部外边距 */
font-weight: bold; /* 设置字体加粗 */
}
/* 产品价格样式 */
.product-card .price {
font-size: 24px; /* 设置字体大小 */
color: #e74c3c; /* 设置文字颜色为红色 */
margin: 10px 0; /* 设置上下外边距 */
font-family: Arial, sans-serif; /* 设置字体系列 */
}
/* 产品描述样式 */
.product-card .description {
color: #7f8c8d; /* 设置文字颜色 */
line-height: 1.6; /* 设置行高 */
letter-spacing: 0.5px; /* 设置字母间距 */
}
</style>
</head>
<body>
<div class="product-card">
<div class="name">高端智能手机</div>
<div class="price">¥3999</div>
<div class="description">这款智能手机拥有最新的处理器、高清摄像头和超长续航电池，为您提供极致的使用体验。</div>
</div>
</body>
</html>
说明：此案例展示了如何为产品展示卡片中的文字设置样式，包括不同部分（名称、价格、描述）的字体大小、颜色、行高等，以突出重点信息。
案例四：按钮文字样式
<!DOCTYPE html>
<html>
<head>
<style>
/* 按钮基本样式 */
.btn {
display: inline-block;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none; /* 去掉下划线 */
font-family: Arial, sans-serif; /* 设置字体系列 */
font-weight: bold; /* 设置字体加粗 */
transition: all 0.3s ease; /* 添加过渡效果 */
}
/* 主要按钮样式 */
.btn-primary {
background-color: #4CAF50; /* 设置背景颜色 */
color: white; /* 设置文字颜色 */
}
/* 次要按钮样式 */
.btn-secondary {
background-color: #3498db; /* 设置背景颜色 */
color: white; /* 设置文字颜色 */
}
/* 鼠标悬停时的按钮效果 */
.btn:hover {
transform: translateY(-2px); /* 向上移动 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影 */
}
/* 按钮文字在不同状态下的样式 */
.btn:active {
transform: translateY(0); /* 恢复原位 */
}
</style>
</head>
<body>
<a href="#" class="btn btn-primary">立即购买</a>
<a href="#" class="btn btn-secondary">了解更多</a>
</body>
</html>
说明：此案例展示了如何为按钮中的文字设置样式，包括颜色、字体、加粗等，并通过hover和active伪类实现鼠标交互效果。
案例五：特殊效果文本
<!DOCTYPE html>
<html>
<head>
<style>
/* 特殊效果文本容器 */
.special-text {
font-size: 48px; /* 设置字体大小 */
font-family: 'Brush Script MT', cursive; /* 使用手写体字体 */
color: #e74c3c; /* 设置文字颜色 */
text-shadow:
2px 2px 0 #000, /* 第一层阴影 */
4px 4px 0 rgba(255, 255, 255, 0.1), /* 第二层阴影 */
6px 6px 0 rgba(255, 255, 255, 0.2); /* 第三层阴影 */
animation: float 3s ease-in-out infinite; /* 添加浮动动画 */
}
/* 浮动动画定义 */
@keyframes float {
0% { transform: translateY(0); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0); }
}
</style>
</head>
<body>
<div class="special-text">欢迎光临</div>
</body>
</html>
说明：此案例展示了如何为文字添加特殊效果，如多层次阴影和浮动动画，以吸引用户的注意力。
以上案例展示了 CSS3 文字样式在实际开发中的应用，通过合理运用各种属性可以创造出美观且具有交互性的文字效果。