网站导航
> 文档中心 > [C1进阶之路-Web基础] CSS文本属性

[C1进阶之路-Web基础] CSS文本属性

网友: 文档中心 2022-04-12 21:30:40

目录

往期回顾，专栏一览

1、color属性

2、font-size属性

3、font-weight属性

4、font-family属性

5、text-align属性

6 、line-height属性

7、text-indent属性

8、letter-spacing属性

9、word-spacing属性

10、text-decoration

11、text-transform

12、writing-mode

   

13、white-space

💬题目01

💬题目02

💬题目03

💬题目04

💬题目05

往期回顾，专栏一览

🍉 JavaSE 🍋 AWT 🍑 数据结构
🍅 C1进阶之路 🍒 每日一练 🌽 代码报错
🍈 活动

🍹欢迎各路大佬来到 Nick 主页指点

☀️本期文章将学习 [C1进阶之路-Web基础] CSS文本属性，我是博主Nick。✨

✨我的博客主页：Nick_Bears 🌹꧔ꦿ

🌹꧔ꦿ博文内容如对您有所帮助，还请给个点赞 + 关注 + 收藏✨

    

🍋 注：资料来源于C1进阶考试资料  

   

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

1、color属性

用于设置文本的颜色，可设置的值有：

  • 颜色名，如【red】

  • 十六进制值，如【#FFFFFF】

  • RGB值，如【rgb(255, 0, 0)】

  • rgba值，如【rgba(255, 0, 0, 0.9)】

  

2、font-size属性

用于设置文本字体大小，可以设置为绝对大小，单位为px，也可设置为相对大小，单位为rem、em等

字体大小未设置时默认字体大小为16px

   

3、font-weight属性

  • 用于设置文本的粗细，可设置的值有：

属性值 说明
normal 标准字符（默认）
bold 粗体字符
bolder 更粗的字符
lighter 更细的字符
100、200、300、400、500、
600、700、800、900		 400相当于normal
700相当于bold
数值越大字体越粗

  

4、font-family属性

用于规定文本使用的字体名或字体族名列表，字体名在列表越往前优先级越高。如果浏览器不支持第一个字体，则会尝试下一个，以此类推

font-family："Times New Roman", "Georgia", "Serif";

  

5、text-align属性

用于设置文本的水平对齐方式，可设置的值有：

  • center（居中对齐）

  • left（左对齐）

  • right（右对齐）

文本方向是从左到右则默认左对齐，文本方向是从右至左则默认右对齐

  

6 、line-height属性

用于设置行间距，可设置的值如下

  • 数字：行间距为当前字体大小乘此数字

  • 固定值：设置固定的行间距，如20px

  • 百分比：行间距为当前字体大小乘百分比

  

7、text-indent属性

用于指定首行缩进值，可设置的值如下

  • 固定值：设置固定首行缩进，如20px

  • 百分比：首行缩进值为父元素宽度乘此百分比

   

8、letter-spacing属性

用于设置字间距，设置固定值为字间距，如10px

  

9、word-spacing属性

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

  

10、text-decoration

用于设置文本的装饰线，是下表属性的简写

属性 属性值 描述
text-decoration-line none 无线条 设置要使用哪种文本装饰的类型
（下划线、上划线、删除线）。
underline 下划线
overline 上划线
line-through 删除线
text-decoration-color 颜色名、十六进制颜色、rgb等 设置装饰线颜色
text-decoration-style solid 实线 设置装饰线的样式
double 双实线
dotted 点划线
dashed 虚线
wavy 波浪线

  • 例：

text-decoration: underline wavy red;  /* 表示为红色波浪形下划线 */

   

11、text-transform

用于设置文本大小写字母，常用属性如下

  • uppercase：全部文本均为大写字母

  • lowercase：全部文本均为小写字母

  • capitalize：文本的每个单词首字母为大写字母

   

12、writing-mode

设置文本在水平或垂直方向的排布方式

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

 

  • sideways-lr：文本流在垂直方向，从下至上、从左至右排列（该属性值不兼容webkit内核浏览器）

  

  • sideways-rl：文本流在垂直方向，从上至下、从右至左排列（该属性值不兼容webkit内核浏览器）

 

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

 

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

   

13、white-space

用于设置文本的空白符处理方式，属性值如下

属性值 描述
normal 合并空格，换行符转化为一个空格，允许自动换行
nowrap 合并空格，换行符转化为一个空格，不允许自动换行
pre 保留空格，保留换行符，不允许自动换行
pre-line 合并空格，保留换行符，允许自动换行
pre-wrap 保留空格，保留换行符，允许自动换行
break-spaces 保留空格，保留换行符，允许自动换行，行尾空格保留，空白符占用空间

💬题目01

📝 现需要实现英文小写转大写，请补全代码片段

hello world

  

key：text-transform

    

属性值uppercase表示小写转大写，由对应的CSS文本属性即可得出答案

    

💬题目02

📝 现需要实现古代书写从上到下，从右至左的效果（如图所示），请补全代码片段
 

两个黄鹂鸣翠柳，一行白鹭上青天

    

key：writing-mode

    

属性值vertical-rl表示从上到下、从右至左的书写效果，由对应的CSS文本属性即可得出答案

    

💬题目03

📝 现需要使文本不换行，且保留文本当中的四个空格，请补全代码片段

    p { width: 50px; white-space: _________;    }        
CSDN能力认证    专业IT能力认证

  

 key：pre

  

white-space属性用于设置文本中空白符的处理方式，由其属性值的说明即可得出答案          

    

💬题目04

📝 现需要给文本内容「CSDN能力认证」增加下划线，请补全代码片段

    p { _________: 1px solid underline;    }
CSDN能力认证

key：text-decoration

  

由文档中文本属性相关属性解释即可得出答案

    

💬题目05

📝 现需要将p元素的行高设置为24px，请补全代码片段

    p { _________: 24px;    }
CSDN能力认证

  

key：line-height

  

由文档中文本属性相关属性解释即可得出答案

    

网络标签：

相关问题