CSS Text文本

文本颜色

color属性用来设置文字的颜色。颜色值有三种表示方法：十六进制值，RGB值，名称。

 <style>.p1{color: #ff0000;}.p2{color: rgb(0,255,0);}.p3{color: blue;}</style>

文本方向

direction属性用来设置文本方向。可以为rtl(从右到左)，ltr(从左到右)以及inherit(继承父元素)。

.pl{direction: ltr;}
.pr{direction: rtl;}
div{direction: rtl;}
div p{direction: inherit;}
/以下为html部分///
<p class="pl">文本方向从左到右</p>
<p class="pr">文本方向从右到左</p>
<div><p>文本方向继承父元素</p>
</div>

文本字符间距

letter-spacing属性用来设置字符间距。可取normal(默认)字符间没有间隔，指定一个长度允许负值，inherit(继承父元素)。

 .nrm{letter-spacing: normal;}.len{letter-spacing: 10px;}.len2{letter-spacing: -10px;}div{letter-spacing: 20px;}div p{letter-spacing: inherit;}
//以下为HTML部分///<p class="nrm">默认没有间隔</p><p class="len">指定长度</p><p class="len2">负值</p><div><p>继承父元素</p></div>

文本行高

line-height属性用来设置行高。可取normal(默认)自动设置合理行距大多数浏览器为20px；数字值，会根据字体尺寸设置行间距且默认行间距为1;设置具体值为固定行间距；使用%根据字体设置；inherit(继承父元素)。

.nrm{line-height: normal;}
.num1{line-height: 2;}
.num2{line-height: 0.5;}
.num3{line-height: 2;font-size: 20px;}
.len{line-height: 25px;}
.pct1{font-size: 10px;line-height: 100%;}
.pct2{font-size: 15px;line-height: 100%;}div{line-height: 30px;}div .p{line-height: inherit;}
//以下为HTML部分/
<p class="nrm">默认行间距。<br>默认行间距。<br>默认行间距。
</p>
<p class="num1">数字设置更大间距。<br>数字设置更大间距。<br>数字设置更大间距。
</p>
<p class="num2">数字设置更小间距。<br>数字设置更小间距。<br>数字设置更小间距。
</p>
<p class="num3">数字在更大字体下。<br>数字在更大字体下。<br>数字在更大字体下。
</p>
<p class="len">数值固定行距。<br> 数值固定行距。<br> 数值固定行距。
</p>
<p class="pct1">百分比在小字体下。<br>百分比在小字体下。<br>百分比在小字体下。
</p>
<p class="pct2">百分比在大字体下。<br>百分比在大字体下。<br>百分比在大字体下。
</p>
<div><p>行距继承。<br>行距继承。<br>行距继承。</p>
</div>

文本对齐方式

text-align属性用来设置文本的对齐方式。可取center(居中)、left(左对齐)、right(右对齐)；justify(两端对齐)每一行宽度相等以及inherit(继承父元素)。

.lft{text-align: left;}
.rit{text-align: right;}
.cnt{text-align: center;}
.jst{text-align: justify;}
以下为HTML部分//
<p class="lft">左对齐。
</p>
<p class="rit">右对齐。
</p>
<p class="cnt">居中。
</p>
<p class="jst">两端对齐。两端对齐。两端对齐。两端对齐。两端对齐。两端对齐。两端对齐。两端对齐。两端对齐。两端对齐。两端对齐。两端对齐。两端对齐。两端对齐。
</p>

文本装饰

text-decoration属性用于文本的装饰。text-decoration属性是text-decoration-line、text-decoration-color、text-decoration-style三种属性的缩写，这三种属性大部分浏览器除Firefox外不再支持。使用语法：text-decoration：line(可以添加多个) style(可选) color(可选)。line可选none(默认文本)、underline(下划线)、overline(上划线)、line-through(删除线)。style可选solid(默认实线)、double(双线)、dotted(点线)、dashed(虚线)、wavy(波浪线)。

<p style="text-decoration: overline;">文本装饰</p>
<p style="text-decoration: overline wavy;">文本装饰</p>
<p style="text-decoration: overline wavy red;">文本装饰</p>
<p style="text-decoration: underline;">下划线</p>
<p style="text-decoration: line-through;">删除线</p>
<p style="text-decoration: underline solid;">实线</p>
<p style="text-decoration: underline double;">双实线</p>
<p style="text-decoration: underline dotted;">点线</p>
<p style="text-decoration: underline dashed;">虚线</p>
<p style="text-decoration: underline wavy;">波浪线</p>

文本缩进

text-indent属性用于文本首行的缩进。可取数值，%(依据父元素)，以及inherit(继承父元素)。

<p style="text-indent: 10px;">首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进</p>

文本阴影

text-shadow属性用于文本阴影。必需h-shadow(水平阴影距离，右正左负)，必需v-shadow(垂直阴影距离，下正上负)，可选blur(模糊的距离)，可选color(阴影的颜色)。

.shd1{text-shadow: 2px 2px;}
.shd2{text-shadow: 2px 2px 2px;}
.shd3{text-shadow: 2px 2px 2px red;}
///以下为HTML部分/
<p class="shd1">无模糊距离无颜色。
</p>
<p class="shd2">有模糊距离无颜色。
</p>
<p class="shd3">有模糊距离有颜色。
</p>

文本转换

text-transform属性用来控制文本的大小写。可取none(默认允许大小写)，capitalize(每个单词以大写字母开头)，uppercase(转为大写)，lowercase(专为小写)以及inherit(继承父元素)。

.non{text-transform: none;}
.cap{text-transform: capitalize;}
.upp{text-transform: uppercase;}
.low{text-transform: lowercase;}
//以下为HTML部分<p class="non">This is none.
</p>
<p class="cap">this is capitalize.
</p>
<p class="upp">this is uppercase.
</p>
<p class="low">THIS IS LOWERCASE.
</p>

文本重写

unicode-bidi属性与direction属性一起使用，来设置文本是否被重写，以便在同一文档中支持多种语言，因为有些语言如阿拉伯语是从右往左写的。可取normal(默认)、embed(创建一个附加的嵌入层面)、bidi-override(创建一个附加的嵌入层，方向取决于direction属性)。

<p style="direction: rtl;unicode-bidi: bidi-override;">bidi override</p>
<p style="direction: rtl;unicode-bidi: bidi-override;">this is
<span style="unicode-bidi: embed;"> embed</span>
</p>

元素垂直对齐

vertical-align属性用于设置元素的垂直对齐方式。可取baseline(默认)元素放在父元素的基线上；sub/super(垂直对齐文本的下标/上标)；top(把元素的顶端与行中最高元素的顶端对齐)；middle(把元素放在父元素的中部)；bottom(元素及其后代的底部与行底部对齐)；text-top/text-bottom(把元素的顶端/底端与父元素字体的顶端/底端对齐)；数值将元素升高或降低；%值根据行高设置。

<p>垂直对齐<span style="vertical-align: baseline;">默认</span>方式</p>
<p>垂直对齐<span style="vertical-align: sub;">下标</span>方式</p>
<p>垂直对齐<span style="vertical-align: super;">上标</span>方式</p>
<p style="font-size: 20px;">垂直对齐<span style="vertical-align: top;font-size: 10px;">top</span>方式</p>
<p style="font-size: 20px;">垂直对齐<span style="vertical-align: middle;font-size: 10px;">middle</span>方式</p>
<p style="font-size: 20px;">垂直对齐<span style="vertical-align: bottom;font-size: 10px;">bottom</span>方式</p>
<p>垂直对齐<span style="vertical-align: text-top;font-size: 20px;background-color: tomato;">text-top</span>方式</p>
<p>垂直对齐<span style="vertical-align: text-bottom;font-size: 20px;background-color: tomato;">tetx-bottom</span>方式</p>
<p>垂直对齐<span style="vertical-align:10px;">length</span>方式</p>
<p>垂直对齐<span style="vertical-align:50%;">%</span>方式</p>

元素中空白处理方式

white-spacing属性用于处理元素内的空格与换行。可取normal(默认)多个空格合并为一个，换行符被忽略；pre(空格不会被合并且换行保留)；nowrap(空格被合并，忽略换行)；pre-wrap(空格不会合并，保留换行)；pre-line(合并空格，保留换行)；以及inherit(继承父元素)。

normal与nowrap的区别：normal到达容器边界换行，nowrap将所有文本写在同一行。

pre与pre-wrap的区别：pre类似HTML中<pre>标签文字不受容器宽度影响，pre-wrap受到容器影响。

<p style="white-space: normal;">默认   空格合并一格，换行被忽略。
</p>
<p style="white-space: pre;">pre    空格不会合并，换行被保留。
</p>
<p style="white-space: nowrap;">noewrap     空格合并一格，换行被忽略。
</p>
<p style="white-space: pre-wrap;">pre-wrap    多个空格不会合并，换行被保留。
</p>
<p style="white-space: pre-line;">pre-line      多个空格被合并，换行保留
</p>

文本字间距

word-spacing属性用来设置单词之间的间距。可取normal(默认)，指定数值(可为负)，以及inherit(继承父元素)。

.nor{word-spacing: normal;}
.len{word-spacing: 20px;}
/以下为HTML部分///
<p class="nor">this is normal。
</p>
<p class="len">this is not normal。
</p>

CSS Text文本相关推荐

CSS Text(文本)
color 文本颜色:可以使用颜色名称,十六进制,RGB,RGBA(A:代表透明度) color: green; 正常文本文本方向 .p1{/* 设置文本方向 *//* 默认值 :从左到右与正常文本 ...
HTML/CSS中文本text属性详解
我们可以通过添加一些HTML标记和CSS属性来设置text文本的样式. HTML中的标记包括结构化标记和语义化标记两种,结构化标记简单来说是用来标记标题和段落的,而语义化标记则是不会影响到网页的结构. ...
css里td自带什么属性,关于css标签的属性（text文本属性，背景background，表格标签table，td标签属性）...
简介这篇文章主要介绍了关于css标签的属性(text文本属性,背景background,表格标签table,td标签属性)以及相关的经验技巧,文章约1129字,浏览量216,点赞数4,值得参考! te ...
css text top,text-align属性(css中文本对齐属性)
text-align属性设置h1.h2.h3元素的文本对齐方法: h1{text-align:center} h2{text-align:left} h3{text-align:right} 亲自试 ...
关于input type=“text”文本框的默认宽度
当文本框的td设置宽度设置为百分比时,出现了一些没有搞懂的地方. 类选择设置td的width 为百分比时,通常要定义父元素的宽度,在我的实战中父元素只能是table,给定table时. 而且这就是说 ...
CSS实现文本周围插入符号
CSS实现文本周围插入符号的方案本文要讨论的是如何在文本的周围插入图标,怎么样控制它们之间的位置关系,通过HTML结构合理性与CSS属性的使用来比较不同方案所实现效果的优缺点. 常见设计稿要求在文 ...
推荐20款基于 jQuery CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
HTML文本下划线效果,聊聊CSS中文本下划线_CSS, SVG, masking, clip-path, 会员专栏, text-decoration 教程_W3cplus...
在Web中给文本添加下划线常常出现在链接的文本上,早期一般使用text-decoration属性给文本添加下划线.删除线等.除了text-decoration之外,CSS还有很多技术方案可以给文本添加 ...
CSS 匿名文本和匿名框
一个元素可以按照HTML元素的嵌套方式包含其他元素,大多数情况下,框都是由显式定义的元素所生成的. 然而,当把文本直接添加到一个块容器元素中(不是包含在行内元素)时,即便没有为这些文本显式定义元素,它 ...

CSS Text文本

CSS Text文本相关推荐

最新文章

热门文章