返回首页
当前位置: 主页 > 编程语言 > CSS教程 >

CSS-文字

时间:2020-04-25 14:37来源:电脑教程学习网 www.etwiki.cn 编辑:小山哥

本章教您如何使用CSS属性操作文本。您可以设置元素的以下文本属性-

  • 颜色属性用于设置文本的颜色。

  • 方向属性是用来设置文本方向。

  • 字母间距属性用于增加或减少,使一个单词的字母之间的空间。

  • 字间距属性用于添加或句子的单词之间减去空间。

  • 文本缩进属性来缩进段落的文字。

  • 文本对齐属性被用于对准文档的文本。

  • 文本修饰属性用来下划线,上划线和删除线的文本。

  • 文本转换属性被用来利用文本或文本转换为大写或小写字母。

  • 白色空间属性被用于控制流量和文本格式化。

  • 文字阴影属性用来围绕着一个文本的文本阴影。

设置文字颜色

下面的示例演示如何设置文本颜色。可能的值可以是任何有效格式的任何颜色名称。

现场演示
<html>
   <head>
   </head>

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

它将产生以下结果-

设定文字方向

下面的示例演示如何设置文本的方向。可能的值是ltr或rtl

现场演示
<html>
   <head>
   </head>

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

它将产生以下结果-

设置字符之间的间隔

下面的示例演示如何设置字符之间的间距。可能的值是normal或指定空格的数字。

现场演示
<html>
   <head>
   </head>

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

它将产生以下结果-

设置单词之间的间隔

下面的示例演示如何设置单词之间的间距。可能的值是normal或指定空格的数字

现场演示
<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,下划线,上划线,直通,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,大写,大写,小写

现场演示
<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> 

它将产生以下结果-

 上一页  打印页面
下一页  
 
------分隔线----------------------------
标签(Tag):
------分隔线----------------------------
推荐内容
  • CSS-使用图像

    图片在任何网页中都起着重要作用。 尽管不建议包含很多图像,但是在任何需要的地方使...

  • CSS-伪元素

    CSS伪元素用于向某些选择器添加特殊效果。 您无需使用JavaScript或任何其他脚本即可使...

  • CSS-字体

    本章教您如何设置HTML元素中可用的内容字体。 您可以设置元素的以下字体属性- 该 FONT...

  • CSS-背景

    本章教您如何设置各种HTML元素的背景。 您可以设置元素的以下背景属性- 的 背景颜色 ...

  • CSS-语法

    CSS由样式规则组成,这些样式规则由浏览器解释,然后应用于文档中的相应元素。 样式规...

  • 什么是CSS?

    ascading tyle 小号 heets,被亲切地称为CSS,是一个简单的设计语言旨在简化制作网页...

猜你感兴趣