笔记21~

最新推荐文章于 2026-02-07 15:33:59 发布

原创最新推荐文章于 2026-02-07 15:33:59 发布 · 578 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

笔记

本文介绍了CSS中用于设置文本样式的属性，包括color、font-size、font-weight、font-family、text-align、line-height、text-indent、letter-spacing、word-spacing、text-decoration、text-transform和writing-mode等。详细阐述了各个属性的作用、可选值及其效果，帮助读者掌握CSS文本样式的使用。

C1任务-21：CSS文本属性

任务背景

通过CSS文本属性可以给文本设置颜色、字号、行间距、对齐、段落缩进等样式，将页面的正文与标题区分开，同时能够丰富整个页面布局

任务目标

掌握CSS文本属性的使用

任务训练
1.
color属性用于设置文本的颜色，可设置的值有：
颜色名，如【red】
十六进制值，如【#FFFFFF】
RGB值，如【rgb(255,0,0)】
2.
font-size属性用于设置文本字体大小，可以设置为绝对大小，单位为px，也可设置为相对大小，单位为rem、em等
字体大小未设置时默认字体大小为16px

4.font-weight用于设置文本的粗细，可设置的值有：
属性值说明
ormal 标准字符（默认）
bold 粗体字符
bolder 更粗的字符
lighter 更细的字符

100、200、300、400、500、600、700、800、900400
相当于normal
700相当于bold
数值越大字体越粗

5.font-family用于规定文本使用的字体名或字体族名列表，字体名在列表越往前优先级越高。
如果浏览器不支持第一个字体，则会尝试下一个，以此类推
例font-family：“TimesNewRoman”,Georgia,Serif;

6.text-align用于设置文本的水平对齐方式，可设置的值有：center（居中对齐）、left（左对齐）、right（右对齐）
文本方向是从左到右则默认左对齐，文本方向是从右至左则默认右对齐

7.line-height用于设置行间距，可设置的值如下
数字：行间距为当前字体大小乘此数字
固定值：设置固定的行间距，如20px
百分比：行间距为当前字体大小乘百分比

8.text-indent用于指定首行缩进值，可设置的值如下
固定值：设置固定首行缩进，如20px
百分比：首行缩进值为父元素宽度乘此百分比

9.letter-spacing用于设置字间距，设置固定值为字间距，如10px

10.word-spacing用于指定文本中单词之间的间距，设置固定值为单词间距，如10px

11.text-decoration用于设置文本的装饰线，是下表属性的简写
属性属性值描述
text-decoration-linenone
underline 下划线
overline 上划线
line-through 删除线
无线条设置要使用哪种文本装饰的类型（下划线、上划线、穿线）。

text-decoration-color
颜色名、十六进制颜色、rgb等
设置装饰线颜色

text-decoration-style
solid 实线double双实线dotted点划线dashed虚线wavy波浪线
设置装饰线的样式

例：text-decoration:underlinewavyred;表示为红色波浪形下划线

12.text-transform用于设置文本大小写字母，常用属性如下uppercase：全部文本均为大写字母
lowercase：全部文本均为小写字母
capitalize：文本的每个单词首字母为大写字母

13.writing-mode 设置文本在水平或垂直方向的排布方式

horizontal-tb：文本流在水平方向从上到下排列，文字方向为水平方向

sideways-lr：文本流在垂直方向，从下至上、从左至右排列

sideways-rl：文本流在垂直方向，从上至下、从右至左排列

vertical-lr：文本流在垂直方向，从上至下、从左至右排列，文字方向为水平方向

vertical-rl：文本流在垂直方向，从上至下、从右至左排列，文字方向为水平方向，跟古诗阅读顺序一致

14.white-space用于设置文本的空白符处理方式，属性值如下
属性值描述
normal 合并空格，换行符转化为一个空格，允许自动换行nowrap 合并空格，换行符转化为一个空格，不允许自动换行
pre 保留空格，保留换行符，不允许自动换行
pre-line 合并空格，保留换行符，允许自动换行
pre-wrap 保留空格，保留换行符，允许自动换行
break-spaces 保留空格，保留换行符，允许自动换行，行尾空格保留，空白符占用空间

练习：
1.现需要实现英文小写转大写，请补全代码片段

<pstyle="________:uppercase">helloworld</p>

答：text-transform

2.现需要实现古代书写从上到下，从右至左的效果（如图所示），请补全代码片段
<pstyle="________:vertical-rl;height:100px;">两个黄鹂鸣翠柳，一行白鹭上青天

答：writing-mod

3.现需要使文本不换行,请补全代码片段

<style>
          p{
          width:50px;
          white-space:________;
          }
  </style>
   <body>
          <p>CSDN能力认证</p>
   </body>

答;nowrap

标签

#css #html