CSS - 文字(Text)

CSS - 文字(Text) 首页 / CSS入门教程 / CSS - 文字(Text)

本章教您如何使用CSS属性操作文本。

  • color                     :  设置文本的颜色。

  • direction              :  设置文本方向。

  • letter-spacing     :   设置字符间距。

  • word-spacing      :   设置字间距。

  • text-indent           :   文本首行缩进。

  • text-align              :   文本对齐方式。

  • text-decoration    :  文本下划线(underline),上划线(overline)和删除线(strikethrough)。

  • text-transform     :  控制元素中的字母。

  • white-space          :  设置元素中空白的处理方式。

  • text-shadow          :   设置文本阴影。

字体颜色

设置文本颜色,下面的示例演示如何设置文本颜色。

<html>
   <head>
   </head>

   <body>
      <p style="color:red;">
         This text will be written in red.
      </p>
   </body>
</html>

它将产生以下输出-

文本方向

下面的示例演示如何设置文本的方向。可能的值为 ltrrtl

<html>
   <head>
   </head>

   <body>
      <p style="direction:rtl;">
         This text will be rendered from right to left
      </p>
   </body>
</html>

它将产生以下输出-

字符间距

下面的示例演示如何设置字符之间的间距。可能的值为正常值(normal)或数字(number)指定空格。

<html>
   <head>
   </head>

   <body>
      <p style="letter-spacing:5px;">
         This text is having space between letters.
      </p>
   </body>
</html>

它将产生以下输出-

字间距

下面的示例演示如何设置字间距。可能的值为正常值(normal)或数字(number)指定空格。

<html>
   <head>
   </head>

   <body>
      <p style="word-spacing:5px;">
         This text is having space between words.
      </p>
   </body>
</html> 

这将产生以下输出-

文字缩进

下面的示例演示如何首行缩进的段落。可能的值为%或指定缩进空间的数字。

<html>
   <head>
   </head>

   <body>
      <p style="text-indent:1cm;">
         This text will have first line indented by 1cm and this line will remain at 
         its actual position this is done by CSS text-indent property.
      </p>
   </body>
</html>

它将产生以下输出-

文本对齐

下面的示例演示如何对齐文本。可能的值为左(left),右(right),居中(center),对齐(justify)。

<html>
   <head>
   </head>

   <body>
      <p style="text-align:right;">
         This will be right aligned.
      </p>
      
      <p style="text-align:center;">
         This will be center aligned.
      </p>
      
      <p style="text-align:left;">
         This will be left aligned.
      </p>
   </body>
</html> 

这将产生以下输出-

文本装饰

下面的示例演示如何装饰文本。可能的值为none,underline,overline,line-through,blink。

<html>
   <head>
   </head>

   <body>
      <p style="text-decoration:underline;">
         This will be underlined
      </p>
      
      <p style="text-decoration:line-through;">
         This will be striked through.
      </p>
      
      <p style="text-decoration:overline;">
         This will have a over line.
      </p>
      
      <p style="text-decoration:blink;">
         This text will have blinking effect
      </p>
   </body>
</html> 

这将产生以下输出-

文本大小

下面的示例演示如何设置文本的大小写。可能的值是 none(无),capitalize(首字母大小),uppercase(大写),lowerase(小写)。

链接:https://www.learnfk.comhttps://www.learnfk.com/css/css-text.html

来源:LearnFk无涯教程网

<html>
   <head>
   </head>

   <body>
      <p style="text-transform:capitalize;">
         This will be capitalized
      </p>
      
      <p style="text-transform:uppercase;">
         This will be in uppercase
      </p>
      
      <p style="text-transform:lowercase;">
         This will be in lowercase
      </p>
   </body>
</html> 

这将产生以下输出-

文本字间空白

下面的示例演示如何处理元素内的空白。可能的值为 normal,pre,nowrap 。

<html>
   <head>
   </head>

   <body>
      <p style="white-space:pre;">
         This text has a line break and the white-space pre setting 
         tells the browser to honor it just like the HTML pre tag.
      </p>
   </body>
</html> 

这将产生以下输出-

文本阴影

下面的示例演示如何在文本周围设置阴影,并非所有浏览器都支持此函数。

<html>
   <head>
   </head>

   <body>
      <p style="text-shadow:4px 4px 8px blue;">
         If your browser supports the CSS text-shadow property, 
         this text will have a  blue shadow.
      </p>
   </body>
</html> 

它将产生以下输出-

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

零基础学Python -〔尹会生〕

Go语言从入门到实战 -〔蔡超〕

Java性能调优实战 -〔刘超〕

Kafka核心技术与实战 -〔胡夕〕

全栈工程师修炼指南 -〔熊燚(四火)〕

说透敏捷 -〔宋宁〕

Spark核心原理与实战 -〔王磊〕

如何讲好一堂课 -〔薛雨〕

深入C语言和程序运行原理 -〔于航〕

好记忆不如烂笔头。留下您的足迹吧 :)