CSS Text(文本)

Posted A_山水子农

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS Text(文本)相关的知识,希望对你有一定的参考价值。

一、CSS文本格式

1、Text Color

    颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定:十六进制值 - 如"#FF0000";一个RGB值 - "RGB(255,0,0)";颜色的名称 - 如"红"。一个网页的背景颜色是指在主体内的选择:

   body {color:blue;}
   h1 {color:#00ff00;}
   h2 {color:rgb(255,0,0);}

2、文本的对齐方式

   文本排列属性是用来设置文本的水平对齐方式。文本可居中或对齐到左或右,两端对齐。当text-align设置为"justify",每一行被展开为宽度相等,左,右外边距是对齐(如杂志和报纸)。

<!DOCTYPE html>
<html>

<head>
  <style>
    h1 {
      text-align: center;
    }

    p.date {
      text-align: right;
    }

    p.main {
      text-align: justify;
    }
  </style>
</head>

<body>
  <h1>CSS text-align 实例</h1>
  <p class="date">2015 年 3 月 14 号</p>
  <p class="main">“当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。”</p>
  <p>
    <b>注意:</b> 重置浏览器窗口大小查看 "justify" 是如何工作的。</p>
</body>

</html>



 

3、文本修饰

  text-decoration 属性用来设置或删除文本的装饰。从设计的角度看 text-decoration属性主要是用来删除链接的下划线:

a {text-decoration:none;}

 也可以这样装饰文字:

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

 我们不建议强调指出不是链接的文本,因为这常常混淆用户。

4、文本转换

  文本转换属性是用来指定在一个文本中的大写和小写字母。可用于所有字句变成大写或小写字母,或每个单词的首字母大写。

<!DOCTYPE html>
<html>

<head>
  <style>
    p.uppercase {
      text-transform: uppercase;
    }

    p.lowercase {
      text-transform: lowercase;
    }

    p.capitalize {
      text-transform: capitalize;
    }
  </style>
</head>

<body>
  <p class="uppercase">This is some text.</p>
  <p class="lowercase">This is some text.</p>
  <p class="capitalize">This is some text.</p>
</body>

</html>

5、文本缩进

  文本缩进属性是用来指定文本的第一行的缩进。

p {text-indent:50px;}

6、文本方向/书写方向

  direction属性指定文本方向/书写方向。ltr:默认,文本方向从左到右。rtl:文本方向从右到左。inherit:规定应该从父元素继承 direction 属性的值。

<!DOCTYPE html>
<html>

<head>
  <style>
    div.ex1 {
      direction: rtl;
    }
  </style>
</head>

<body>
  <div>Some text. Default writing direction.</div>
  <div class="ex1">Some text. Right-to-left direction.</div>
</body>

</html>

7、字符间距

  letter-spacing 属性增加或减少字符间的空白(字符间距)。

<!DOCTYPE html>
<html>

<head>
  <style>
    h1 {
      letter-spacing: 2px;
    }

    h2 {
      letter-spacing: -3px;
    }
  </style>
</head>

<body>
  <h1>This is heading 1</h1>
  <h2>This is heading 2</h2>
</body>

</html>

8、行高

   line-height设置以百分比计的行高。normal:默认。设置合理的行间距。number:设置数字,此数字会与当前的字体尺寸相乘来设置行间距。length:设置固定的行间距。%:基于当前字体尺寸的百分比行间距。inherit:规定应该从父元素继承 line-height 属性的值。

<!DOCTYPE html>
<html>

<head>
  <style>
    p.small {
      line-height: 70%;
    }

    p.big {
      line-height: 200%;
    }
  </style>
</head>

<body>
  <p> This is a paragraph with a standard line-height.
    <br> This is a paragraph with a standard line-height.
    <br> The default line height in most browsers is about 110% to 120%.
    <br> 
  </p>
  <p class="small"> This is a paragraph with a smaller line-height.
    <br> This is a paragraph with a smaller line-height.
    <br> This is a paragraph with a smaller line-height.
    <br> This is a paragraph with a smaller line-height.
    <br> 
  </p>
  <p class="big"> This is a paragraph with a bigger line-height.
    <br> This is a paragraph with a bigger line-height.
    <br> This is a paragraph with a bigger line-height.
    <br> This is a paragraph with a bigger line-height.
    <br> 
  </p>
</body>

</html>


9、垂直对齐

vertical-align属性设置一个元素的垂直对齐。

   baseline :默认。元素放置在父元素的基线上。

   sub :垂直对齐文本的下标。

   super:垂直对齐文本的上标

   top:把元素的顶端与行中最高元素的顶端对齐

   text-top :把元素的顶端与父元素字体的顶端对齐

   middle:把此元素放置在父元素的中部。

   bottom:把元素的顶端与行中最低的元素的顶端对齐。

   text-bottom:把元素的底端与父元素字体的底端对齐。  

   %:使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。

   inherit:规定应该从父元素继承 vertical-align 属性的值。

10、空白的处理方式

white-space属性指定元素内的空白怎样处理。

   normal:默认。空白会被浏览器忽略。

   pre:空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

   nowrap:文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

   pre-wrap:保留空白符序列,但是正常地进行换行。

   pre-line:合并空白符序列,但是保留换行符。

   inherit:规定应该从父元素继承 white-space 属性的值。

11、字间距

   word-spacing属性增加或减少字与字之间的空白。

<!DOCTYPE html>
<html>

<head>
  <style>
    p {
      word-spacing: 30px;
    }
  </style>
</head>

<body>
  <p> This is some text. This is some text. </p>
</body>

</html>

二、CSS3文本效果

1、阴影文本

text-shadow 属性应用于阴影文本。语法text-shadow: h-shadow v-shadow blur color;注意: text-shadow属性连接一个或更多的阴影文本。属性是阴影,指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0。

   h-shadow:必需。水平阴影的位置。允许负值。

   v-shadow:必需。垂直阴影的位置。允许负值。

   blur :可选。模糊的距离。

   color:可选。阴影的颜色。

<!DOCTYPE html>
<html>

<head>
  <style>
    h1 {
      text-shadow: 2px 2px #FF0000;
    }
  </style>
</head>

<body>
  <h1>Text-shadow effect</h1>
  <p>
    <b>Note:</b> Internet Explorer 9 and earlier do not support the text-shadow property.
  </p>
</body>

</html>
 

2、自动换行

  word-wrap属性允许长的内容可以自动换行。word-wrap: normal|break-word;

    normal:只在允许的断字点换行(浏览器保持默认处理)。

    break-word:在长单词或 URL 地址内部进行换行。

<!DOCTYPE html>
<html>

<head>
  <style>
    p.test {
      width: 11em;
      border: 1px solid #000000;
      word-wrap: break-word;
    }
  </style>
</head>

<body>
  <p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to
    the next line.</p>
</body>

</html>

如果没有word-wrap:break-word;

3、对齐方法

text-justify属性指定文本对齐设置为"justify"的理据。此属性指定应怎样对齐文本以及对齐间距。语法text-justify: auto|inter-word|inter-ideograph|inter-cluster|distribute|kashida|trim;

   auto :浏览器决定齐行算法。

   none:禁用齐行。

   inter-word:增加/减少单词间的间隔。

   inter-ideograph:用表意文本来排齐内容。

   inter-cluster:只对不包含内部单词间隔的内容(比如亚洲语系)进行排齐。

   distribute:类似报纸版面,除了在东亚语系中最后一行是不齐行的。

   kashida:通过拉伸字符来排齐内容。

4、文本溢出

  text-overflow属性指定当文本溢出包含它的元素,应该发生什么。语法text-overflow: clip|ellipsis|string;

    clip :修剪文本。

    ellipsis:显示省略符号来代表被修剪的文本。

    string:使用给定的字符串来代表被修剪的文本。

<!DOCTYPE html>
<html>

<head>
  <style>
    div.test {
      white-space: nowrap;
      width: 12em;
      overflow: hidden;
      border: 1px solid #000000;
    }
  </style>
</head>

<body>
  <p>The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.</p>
  <p>This div uses "text-overflow:ellipsis":</p>
  <div class="test"
       style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
  <p>This div uses "text-overflow:clip":</p>
  <div class="test"
       style="text-overflow:clip;">This is some long text that will not fit in the box</div>
</body>

</html>

 

 

以上是关于CSS Text(文本)的主要内容,如果未能解决你的问题,请参考以下文章

雷林鹏分享:CSS 文本格式

CSS 关于文本 背景 边框整理

如何利用CSS控制文本只在一行显示?

CSS Text(文本)

CSS3 文本效果

css3 文本效果