CSS3学习教程，从入门到精通，CSS3 文字样式语法知识点及案例代码（7）

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>