Allen 2021-11-09 22:50:13 6480 0 0 0 0
CSS,笔记,CSS Text 文本格式

通过 CSS 的 Text 属性,你可以改变页面中文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进等等

Text Color

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定:

  • 十六进制值 - 如"#FF0000"

  • 一个RGB值 - "RGB(255,0,0)"

  • 颜色的名称 - 如"红"

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

文本的对齐方式

文本可居中或对齐到左或右,两端对齐.

当 text-align 设置为justify,每一行被展开为宽度相等,左,右外边距是对齐(如杂志和报纸)。

h1 {text-align:center;} 
p.date {text-align:right;} 
p.main {text-align:justify;}

提示:如果想把一个行内元素的第一行“缩进”,可以用左内边距或外边距创造这种效果。 

文本修饰

text-decoration属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration 属性主要是用来删除链接的下划线:

a {text-decoration:none;}  /*不要划线*/
h1 {text-decoration:overline;}  /*顶部划线*/
h2 {text-decoration:line-through;}  /*删除线*/
h3 {text-decoration:underline;} /*下划线*/

文本缩进

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

CSS 提供了 text-indent 属性,该属性可以方便地实现文本缩进。

通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度。

p {text-indent:50px;}

文本间隔

word-spacing 属性可以改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。

p { word-spacing:30px;  }

注意:是单词之间的水平间隔。

文本间隔
指定字符之间的空间 
这个例子演示了如何增加或减少字符之间的空间。
h1 {letter-spacing:5px;}
h2 {letter-spacing:-3px;}
...
指定行与行之间的空间 
这个例子演示了如何指定在一个段落中行之间的空间
    p.small {line-height:70%;}
    p.big {line-height:200%;}
...
设置元素的文本方向 
这个例子演示了如何改变元素的文本方向。
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style type="text/css">
    div.ex1 {direction:rtl;}
</style>
</head>
<body>
    
    <div>一些文本。 默认书写方向</div>
    <div class="ex1">一些文本。从右到左的书写方向。</div>

</body>
</html>
...
增加单词之间的空白空间 
这个例子演示了如何增加一个段落中的单词之间的空白空间。
p{word-spacing:30px; }
h4{word-spacing: -0.5em;}
...
在元素内禁用文字环绕 
这个例子演示了如何禁用一个元素内的文字环绕。
p{white-space:nowrap;}
效果:一段文字时表现为不折行
...
垂直对齐图像 
这个例子演示了如何设置文本的垂直对齐图像。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style>
    img.top {vertical-align:text-top;}
    img.bottom {vertical-align:text-bottom;}
</style>
</head>

<body>
    <p>一个 <img src="/statics/images/w3c/intro.png" alt="w3cschool" width="121" height="74" /> 具有默认对齐方式的图像.</p> 
    <p>一个 <img class="top" src="/statics/images/w3c/intro.png" alt="w3cschool" width="121" height="75" /> 文本顶部对齐的图像.</p> 
    <p>一个 <img class="bottom" src="/statics/images/w3c/intro.png" alt="w3cschool" width="121" height="75" /> 图像与文本底部对齐.</p>
</body>
</html>
...
添加文本阴影 
这个例子演示了如何设置文本阴影。
h1 {text-shadow:2px 2px #FF0000;}

所有CSS文本属性。

属性 | 描述

color | 设置文本颜色

direction | 设置文本方向。

letter-spacing | 设置字符间距

line-height | 设置行高

text-align | 对齐元素中的文本

text-decoration | 向文本添加修饰

text-indent | 缩进元素中文本的首行

text-shadow | 设置文本阴影

text-transform | 控制元素中的字母

unicode-bidi | 设置或返回文本是否被重写 

vertical-align | 设置元素的垂直对齐

white-space | 设置元素中空白的处理方式

word-spacing | 设置字间距


【版權聲明】
本文爲原創,遵循CC 4.0 BY-SA版權協議!轉載時請附上原文鏈接及本聲明。
原文鏈接:https://tdlib.com/am.php?t=qY0ZMoIqUMSy
Tag: CSS 笔记
我也要發一個   ·   返回首頁   ·   返回[Html]   ·   前一個   ·   下一個
歡迎評論
未登錄,
請先 [ 註冊 ] or [ 登錄 ]
(一分鍾即可完成註冊!)
返回首頁     ·   返回[Html]   ·   返回頂部