前端CSS：CSS3文本的常用文本样式属性

最新推荐文章于 2024-10-31 06:29:51 发布
最新推荐文章于 2024-10-31 06:29:51 发布
阅读量565 收藏 20
点赞数 31
分类专栏： HTML网站开发 # 前端基础入门三大核心之CSS 文章标签： HTML CSS web css3 网页开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/black_cat7/article/details/141477900
版权

前端CSS：CSS3文本的常用文本样式属性

引言

CSS3为Web开发带来了许多新的特性和改进，其中之一便是对文本样式的增强。本文将详细介绍CSS3中常用的文本样式属性，包括它们的基本概念、作用说明以及如何在实际项目中应用这些属性。我们将通过丰富的示例和详细的代码片段来帮助读者理解并掌握这些文本样式属性的使用。

文本样式属性概述

CSS3提供了多种文本样式属性，这些属性可以帮助开发者控制文本的外观，包括字体大小、颜色、对齐方式等。以下是本文将要讨论的一些常见文本样式属性：

  1. font-family — 设置字体家族
  2. font-size — 设置字体大小
  3. font-weight — 设置字体粗细
  4. font-style — 设置字体样式（如斜体）
  5. text-align — 设置文本对齐方式
  6. line-height — 设置行间距
  7. letter-spacing — 设置字符间距
  8. word-spacing — 设置单词间距
  9. text-decoration — 设置文本装饰
  10. text-transform — 设置文本转换（如大写、小写等）
  11. text-shadow — 设置文本阴影
  12. text-indent — 设置首行缩进
  13. white-space — 设置空白符处理方式
  14. text-overflow — 设置溢出文本的显示方式
  15. overflow-wrap — 设置长单词的换行方式

接下来，我们将逐一介绍这些属性，并通过示例来展示它们的实际应用。

示例与详细说明

1. font-family

font-family属性用于设置元素的字体家族。

示例一：font-family示例
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 设置字体家族 */
    body {
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <p>这是一个使用Arial字体的段落。</p>
</body>
</html>

2. font-size

font-size属性用于设置字体大小。

示例二：font-size示例
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 设置字体大小 */
    p {
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>这是一个设置了18像素字体大小的段落。</p>
</body>
</html>

3. font-weight

font-weight属性用于设置字体粗细。

示例三：font-weight示例
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 设置字体粗细 */
    p.bold {
      font-weight: bold;
    }

    p.normal {
      font-weight: normal;
    }
  </style>
</head>
<body>
  <p class="bold">这是一个粗体字的段落。</p>
  <p class="normal">这是一个正常字体的段落。</p>
</body>
</html>

4. font-style

font-style属性用于设置字体样式，如斜体。

示例四：font-style示例
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 设置字体样式 */
    p.italic {
      font-style: italic;
    }
  </style>
</head>
<body>
  <p class="italic">这是一个斜体字的段落。</p>
</body>
</html>

5. text-align

text-align属性用于设置文本的水平对齐方式。

示例五：text-align示例
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 设置文本对齐方式 */
    p.center {
      text-align: center;
    }

    p.right {
      text-align: right;
    }
  </style>
</head>
<body>
  <p class="center">这是一个居中文本的段落。</p>
  <p class="right">这是一个右对齐文本的段落。</p>
</body>
</html>

6. line-height

line-height属性用于设置行间距。

示例六：line-height示例
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 设置行间距 */
    p {
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <p>这是一个设置了1.5倍行间距的段落。</p>
</body>
</html>

7. letter-spacing

letter-spacing属性用于设置字符间距。

示例七：letter-spacing示例
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 设置字符间距 */
    p {
      letter-spacing: 2px;
    }
  </style>
</head>
<body>
  <p>这是一个设置了2像素字符间距的段落。</p>
</body>
</html>

8. word-spacing

word-spacing属性用于设置单词间距。

示例八：word-spacing示例
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 设置单词间距 */
    p {
      word-spacing: 4px;
    }
  </style>
</head>
<body>
  <p>这是一个设置了4像素单词间距的段落。</p>
</body>
</html>

9. text-decoration

text-decoration属性用于设置文本装饰，如下划线。

示例九：text-decoration示例
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 设置文本装饰 */
    p.underline {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <p class="underline">这是一个带有下划线的段落。</p>
</body>
</html>

10. text-transform

text-transform属性用于设置文本转换，如全部大写或小写。

示例十：text-transform示例
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 设置文本转换 */
    p.uppercase {
      text-transform: uppercase;
    }

    p.lowercase {
      text-transform: lowercase;
    }
  </style>
</head>
<body>
  <p class="uppercase">这是一个全部大写的段落。</p>
  <p class="lowercase">这是一个全部小写的段落。</p>
</body>
</html>

11. text-shadow

text-shadow属性用于设置文本阴影。

示例十一：text-shadow示例
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 设置文本阴影 */
    p {
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }
  </style>
</head>
<body>
  <p>这是一个带有阴影效果的段落。</p>
</body>
</html>

12. text-indent

text-indent属性用于设置首行缩进。

示例十二：text-indent示例
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 设置首行缩进 */
    p {
      text-indent: 50px;
    }
  </style>
</head>
<body>
  <p>这是一个设置了首行缩进的段落。</p>
</body>
</html>

13. white-space

white-space属性用于设置空白符处理方式。

示例十三：white-space示例
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 设置空白符处理方式 */
    p.pre {
      white-space: pre;
    }
  </style>
</head>
<body>
  <p>This is a <br> sample text with <br> line breaks and <br> spaces.</p>
  <p class="pre">This is a <br> sample text with <br> line breaks and <br> spaces.</p>
</body>
</html>

14. text-overflow

text-overflow属性用于设置溢出文本的显示方式。

示例十四：text-overflow示例
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 设置溢出文本的显示方式 */
    p {
      width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  </style>
</head>
<body>
  <p>这是一个设置了溢出文本省略号显示的段落，如果文本太长将会被截断并以省略号表示。</p>
</body>
</html>

15. overflow-wrap

overflow-wrap属性用于设置长单词的换行方式。

示例十五：overflow-wrap示例
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 设置长单词的换行方式 */
    p {
      width: 200px;
      overflow-wrap: break-word;
    }
  </style>
</head>
<body>
  <p>This is a sample text with a verylongwordthatneedstobebrokenintotwolines.</p>
</body>
</html>

不同角度的功能使用思路

结合使用多种文本样式属性

结合使用多种文本样式属性可以创建更复杂的文本样式效果。

示例十六：结合使用多种文本样式属性示例
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 结合使用多种文本样式属性 */
    p {
      font-family: Arial, sans-serif;
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      color: #333;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }
  </style>
</head>
<body>
  <p>这是一个结合使用了多种文本样式属性的段落。</p>
</body>
</html>

利用文本样式属性增强可读性

通过合理设置文本样式属性，可以显著提高文本的可读性。

示例十七：利用文本样式属性增强可读性示例
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 利用文本样式属性增强可读性 */
    p {
      font-size: 18px;
      line-height: 1.5;
      letter-spacing: 1px;
      text-align: justify;
      color: #333;
    }
  </style>
</head>
<body>
  <p>这是一个通过合理设置文本样式属性来增强可读性的段落。</p>
</body>
</html>

实际工作中的使用技巧

  1. 字体加载优化：合理规划字体加载策略，避免因为字体加载时间过长而导致页面渲染延迟。
  2. 响应式文本样式：使用媒体查询来根据不同设备调整文本样式，以适应各种屏幕尺寸。
  3. 提高可访问性：确保文本有足够的对比度，并考虑到色盲用户的阅读需求。
  4. 文本装饰的恰当使用：避免过度使用文本装饰，如过多的下划线可能会干扰阅读体验。
  5. 避免使用过大的字体大小：过大的字体可能会导致页面布局问题，尤其是在较小的屏幕上。

自行拓展内容

利用CSS3的@font-face规则自定义字体

CSS3的@font-face规则允许开发者在网页中使用自定义字体，这对于创建独特且一致的品牌形象非常有用。

示例十八：利用CSS3的@font-face规则自定义字体示例
<!DOCTYPE html>
<html>
<head>
  <style>
    @font-face {
      font-family: 'MyCustomFont';
      src: url('fonts/mycustomfont.woff2') format('woff2'),
           url('fonts/mycustomfont.woff') format('woff');
      font-weight: normal;
      font-style: normal;
    }

    /* 使用自定义字体 */
    body {
      font-family: 'MyCustomFont', sans-serif;
    }
  </style>
</head>
<body>
  <p>这是一个使用自定义字体的段落。</p>
</body>
</html>

利用CSS3的text-emphasis属性增强文本样式

text-emphasis属性可以用来在文本中添加强调标记，这是一种替代传统下划线和斜体文本的方法。

示例十九：利用CSS3的text-emphasis属性增强文本样式示例
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 使用text-emphasis属性 */
    p.emphasized {
      text-emphasis: fill dot;
      text-emphasis-color: blue;
    }
  </style>
</head>
<body>
  <p class="emphasized">这是一个使用text-emphasis属性的段落。</p>
</body>
</html>

利用CSS3的writing-mode属性改变文本方向

writing-mode属性可以用来改变文本的书写方向，这对于制作多语言或特殊布局的设计非常有用。

示例二十：利用CSS3的writing-mode属性改变文本方向示例
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 使用writing-mode属性 */
    p.vertical {
      writing-mode: vertical-rl;
      text-orientation: upright;
    }
  </style>
</head>
<body>
  <p class="vertical">这是一个垂直书写的段落。</p>
</body>
</html>

结束语

通过本文的学习，你已经掌握了CSS3中常用文本样式属性的基础知识，以及它们在实际开发中的应用方法。这些文本样式属性为开发者提供了强大的工具，帮助他们创建美观、易读且富有表现力的网页。希望这些内容能帮助你更好地理解和应用CSS3中的文本样式属性，提高你的前端开发技能。

以上就是关于前端CSS：CSS3文本的常用文本样式属性的详细介绍及其示例。希望这些内容能帮助你更好地理解和掌握CSS3文本样式属性的应用。

欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

推荐：DTcode7的博客首页。
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

专栏系列（点击解锁）学习路线(点击解锁）知识定位
《微信小程序相关博客》持续更新中~结合微信官方原生框架、uniapp等小程序框架，记录请求、封装、tabbar、UI组件的学习记录和使用技巧等
《AIGC相关博客》持续更新中~AIGC、AI生产力工具的介绍，例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结
《HTML网站开发相关》《前端基础入门三大核心之html相关博客》前端基础入门三大核心之html板块的内容，入坑前端或者辅助学习的必看知识
《前端基础入门三大核心之JS相关博客》前端JS是JavaScript语言在网页开发中的应用，负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客，共同构建用户界面。
通过操作DOM元素、响应事件、发起网络请求等，JS使页面能够响应用户行为，实现数据动态展示和页面流畅跳转，是现代Web开发的核心
《前端基础入门三大核心之CSS相关博客》介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法，同时收集精美的CSS效果代码，用来丰富你的web网页
《canvas绘图相关博客》Canvas是HTML5中用于绘制图形的元素，通过JavaScript及其提供的绘图API，开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力，使得前端绘图技术更加丰富和多样化
《Vue实战相关博客》持续更新中~详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅
《python相关博客》持续更新中~Python，简洁易学的编程语言，强大到足以应对各种应用场景，是编程新手的理想选择，也是专业人士的得力工具
《sql数据库相关博客》持续更新中~SQL数据库：高效管理数据的利器，学会SQL，轻松驾驭结构化数据，解锁数据分析与挖掘的无限可能
《算法系列相关博客》持续更新中~算法与数据结构学习总结，通过JS来编写处理复杂有趣的算法问题，提升你的技术思维
《IT信息技术相关博客》持续更新中~作为信息化人员所需要掌握的底层技术，涉及软件开发、网络建设、系统维护等领域的知识
《信息化人员基础技能知识相关博客》无论你是开发、产品、实施、经理，只要是从事信息化相关行业的人员，都应该掌握这些信息化的基础知识，可以不精通但是一定要了解，避免日常工作中贻笑大方
《信息化技能面试宝典相关博客》涉及信息化相关工作基础知识和面试技巧，提升自我能力与面试通过率，扩展知识面
《前端开发习惯与小技巧相关博客》持续更新中~罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等
《photoshop相关博客》持续更新中~基础的PS学习记录，含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结
日常开发&办公&生产【实用工具】分享相关博客》持续更新中~分享介绍各种开发中、工作中、个人生产以及学习上的工具，丰富阅历，给大家提供处理事情的更多角度，学习了解更多的便利工具，如Fiddler抓包、办公快捷键、虚拟机VMware等工具

吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤
非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！
DTcode7
关注
专栏目录
css:有关字体和文本的属性以及属性的继承
YangLu888
10-04 1052
html字体和文本属性以及属性的继承
使用CSS3的::selection改变选中文本颜色的方法
09-24
在应用CSS3::selection伪元素时，开发者还需要考虑到未来浏览器更新可能带来的兼容性问题。随着浏览器不断进化，新的版本可能会引入新的特性或者对现有特性的支持进行调整。因此，建议在使用::selection伪元素的同时...
前端CSS：CSS单行、多行文本溢出省略号方法
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-26 803
自定义省略号：使用伪元素或者背景图像来创建自定义的省略号样式。示例代码。
前端CSS：CSS文本相关的属性大全
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-27 1005
CSS文本相关的属性是前端开发中不可或缺的一部分，它们负责控制网页上文字的外观和布局。本文将全面介绍CSS中与文本相关的属性，并通过丰富的代码示例来展示它们的用法和最佳实践，旨在帮助开发者更好地理解和掌握这些属性。通过本文的介绍，我们不仅了解了CSS中与文本相关的各种属性及其用途，还学习了一些实际工作中的使用技巧。掌握了这些知识后，你可以开始尝试将它们应用于自己的项目中，进一步提升你的前端开发技能。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。
CSS常用属性（文本属性）
lvshihao_的博客
07-28 1405
CSS的文本属性
前端CSS基础：CSS文本属性这一篇足够
我就知道你会来，我们一起进步吧！
01-30 604
text-decoration属性规定添加到文本的修饰，可以给文本添加下划线、删除线，上划线等。line-height属性用于设置行间的距离（行高），可以控制文字与行之间的距离。text-align属性用于设置元素文本内容的水平对齐方式。，如果当前元素没有设置大小，则会按照父元素的1个文字的大小。上面的意思是div中的文本首行缩进10个像素（px）为了更方便，这里要用到一个新的单位-----em。上面的意思就是div中的文字水平居中对齐。上面的意思是div中的文本加下划线。的缩进，通常将段落的首行缩进。
〖大前端 - 基础入门三大核心之CSS篇⑦〗- CSS3文本的常用文本样式属性
热门推荐
易编橙 · 终身成长社群，相遇已是上上签！
03-13 2万+
在前面的内容中，我们已经接触过一些文本的样式属性了，例如color，font-size等，下面我们就来集中详细学习一下这些文本的属性的使用。
CSS：字体和文本样式
盒马的博客
12-20 2209
讲解CSS中，文本与字体相关的属性
〖大前端 - 基础入门三大核心之CSS篇⑧〗- CSS3文本的常用文本样式属性之字体属性详解
易编橙 · 终身成长社群，相遇已是上上签！
03-14 2万+
font-family属性指定的字体必须是用户计算机中已经安装好的字体，如果你设置的字体是个不常用的字体，用户电脑中很可能没有安装，那么用户在浏览网页中字体会显示异常。所以一般设置为微软雅黑和宋体较多。如果想用自己的字体，需要自己定义一个字体。增加字体文件（当用户加载网页的时候，会同时自动下载字体文件）；用@font-face定义字体1.字体文件字体文件根据操作系统和浏览器的不同，有eot、woff2、woff、ttf、svg五种文件格式，定义一个字体需要同时有这五种文件。
前端必知：6.css文本操作 （100个文本操作）
qq_52799985的博客
07-09 1084
CSS文本操作是前端开发中的一个关键领域。通过运用各种文本样式和排版技巧，我们可以为网页中的文本内容增添视觉效果和良好的用户体验。掌握CSS文本操作的知识，将为我们打开一扇全新的创作大门，使我们能够轻松地调整字体样式、颜色、对齐方式、装饰效果等，以及处理文字溢出和换行等问题。在本篇文章中，我们将深入了解六种重要的CSS文本操作技术，帮助您提升前端开发技能，并创建出令人印象深刻的网页文本效果。让我们一起来探索这些必知的CSS文本操作技巧，为您的前端项目注入新的创意和魅力。
CSS常用文本属性
weixin_46098179的博客
03-20 289
css中常用的一些文本属性
头歌教学实践平台 Web前端开发基础 CSS-文本与字体样式
01-20
在Web前端开发中，CSS...通过学习和实践这些CSS文本与字体样式，你可以创建更加精致且适应性强的网页。头歌教学实践平台提供的源码txt格式资料，将帮助你更好地理解和应用这些知识点，进一步提升你的Web前端开发技能。
CSS3样式表-字体、文本、背景属性.pptx
05-06
【CSS3样式表】是前端开发中不可或缺的一部分，它提供了丰富的功能来控制网页的呈现效果。在本单元中，我们将重点讨论三个主要属性：字体、文本和背景。 **字体属性**是CSS3用来定义文本外观的关键部分。首先，`...
GUI-CSS:前端 CSS
08-05
文本样式是CSS中的一大重点。我们可以控制文本的字体、大小、颜色、行高、对齐方式等。例如，设置字体、字号和颜色： ```css .text-style { font-family: Arial, sans-serif; /* 设置字体 */ font-size: 16px; /*...
css边框修饰
weixin_74261199的博客
10-30 598
② 分别设置边框四个方向的宽度。② 分别设置四个方向的边框颜色。② 分别设置四个方向的圆角边框。属性设置四个方向的边框颜色。属性整体设置四个圆角。整体设置上下左右边框。
【CSS3】css开篇基础（5）
Easonmax的博客
10-26 1386
我们不只是能做出如上最简单的三角形，还能根据不同边框长度做出更多不同的三角形，在这三角形的做法我就只说一种，另外的你们自己去探索。轻量级：一个图标字体比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少了服务器的请求。因为这里块很多，用浮动就有点麻烦，不如直接用行内块，行内块本身之间就有点距离，浮动还需要设置。展示的是图标，本质属于字体。如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。灵活性：本质其实是文字，可以很随意的改变颜色，产生阴影，透明效果，旋转等。
炫酷的登录框!(附源码)
m0_50864141的博客
10-29 2076
【代码】炫酷的登录框!(附源码)
巨好看的登录注册界面源码
最新发布
bjzhang75的博客
10-31 2722
巨好看的登录注册界面源码
CSS属性深度解析：背景与文本样式
包括background-color、background-image、background-position、background-attachment、background-repeat等背景属性，以及color、direction、line-height等文本属性，是学习CSS的基础知识。” 在CSS中，背景属性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DTcode7

客官，赏个铜板吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值