CSS文本样式（二）

最新推荐文章于 2024-09-19 09:19:06 发布

浅笑心柔142

最新推荐文章于 2024-09-19 09:19:06 发布

阅读量1.2k

点赞数 7

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_72013756/article/details/141392789

版权

一、水平对齐文本

1、text-align属性

text-align属性指定元素中文本的水平对齐方式。默认情况下，您网站上的文字左对齐。但是，有时您可能需要不同的对齐方式。

文本对齐属性值如下：left，right，center和justify。

　left：把文本排列到左边。默认值：由浏览器决定。　　
right：把文本排列到右边。　　
center：把文本排列到中间。　　
justify：实现两端对齐文本效果。　　
inherit：规定应该从父元素继承text-align属性的值。

HTML代码：

<p class="left"><strong>woaixuexi</strong></p>
<p class="right"><strong>woaixuexi</strong></p>
<p class="center"><strong>woaixuexi</strong></p>

CSS代码：

p.left {
   text-align: left;
}
p.right {
   text-align: right;
}
p.center {
   text-align: center;
}

执行结果：

当文本对齐设置为"justify"时，每行都被拉伸，使得每一行具有相同的宽度，并且左右边距是直的（如在杂志和报纸中）。
该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值justify；不同用户代理可能会得到不同的结果。　　
所有浏览器都支持text-align属性。任何的版本的InternetExplorer（包括IE8）都不支持属性值"inherit"。

二、垂直对齐文本

1、vertical-align属性

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

常用的值是top，middle和bottom。

top: 使元素及其后代元素的顶部与整行的顶部对齐。

middle: 使元素的中部与父元素的基线加上父元素x-height的一半对齐。

bottom: 使元素及其后代元素的底部与整行的底部对齐。

下面的示例显示了如何垂直对齐表格之间的文本。

HTML代码：

<table border="1" cellpadding="2" cellspacing="0" style="height: 150px;">
  <tr>
     <td class="top">Top</td>
     <td class="middle">Middle</td>
     <td class="bottom">Bottom</td>
  </tr>
</table>

CSS代码：

td.top {
   vertical-align: top;
}
td.middle {
   vertical-align: middle;
}
td.bottom {
   vertical-align: bottom;
}

执行结果：

vertical-align属性还包含以下值：baseline，sub，super，%和px(或pt，cm)。

baseline:使元素的基线与父元素的基线对齐。

sub:使元素的基线与父元素的下标基线对齐。

super: 使元素的基线与父元素的上标基线对齐。

px:使元素的基线对齐到父元素的基线之上的给定长度。可以是负数。

下面的例子显示了它们之间的区别。

HTML代码：

<p>This is a <span class="baseline">woaixuexi</span> example.</p>
<p>This is a <span class="sub">woaixuexi</span> example.</p>
<p>This is a <span class="super">woaixuexi</span> example.</p>
<p>This is a <span class="pixel">woaixuexi</span> example.</p>

CSS代码：

span.baseline {
    vertical-align: baseline;
}
span.sub {
    vertical-align: sub;
}
span.super {
    vertical-align: super;
}
span.pixel {
    vertical-align: -10px;
}

执行结果：

可以使用pt(点)，cm(厘米)和%(百分比)值来代替px值。

vertical-align属性对所有元素的行为都不一样。

例如，div元素需要一些额外的CSS样式。

HTML代码：

<div class="main">
   <div class="paragraph">
  woaixuexi
   </div>
</div>

CSS代码：

.main {
    height: 150px; width: 400px;
    background-color: LightSkyBlue;
    display: inline-table;
}
.paragraph {
    display: table-cell;
    vertical-align: middle;
}

执行结果：

display: inline-table; 和 display: table-cell;使用样式来使垂直对齐属性能在div中起效果。

三、text-decoration(线条装饰)

1、text-decoration属性

text-decoration属性用于指定文本将如何装饰。

text-decoration 属性是以下三种属性的简写：

text-decoration-line ：线条类型
text-decoration-color : 线条颜色
text-decoration-style ：线条样式

常用的值有：

none - 默认值，这定义了一个正常的文本
inherit - 从其父元素继承此属性
overline - 在文本上方绘制水平线
underline - 在文本下方绘制水平线
line-through - 在文本中绘制水平线（替换HTML <s>标记）

下面的例子演示了每个值之间的差异。

HTML代码：

<p class="none">woaixuexi</p>
<p class="inherit">woaixuexi</p>
<p class="overline">woaixuexi</p>
<p class="underline">woaixuexi</p>
<p class="line-through">woaixuexi</p>

CSS代码：

p.none {
   text-decoration: none;
}
p.inherit {
   text-decoration: inherit;
}
p.overline {
   text-decoration: overline;
}
p.underline {
   text-decoration: underline;
}
p.line-through {
   text-decoration: line-through;
}

执行结果：

您可以将underline，overline或line-through组合起来，以添加多条装饰线。

text-decoration: blink这个值是有效的,可以使文本闪烁，但是被弃用，大多数浏览器忽略它。

这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。

四、文本缩进

1、text-indent属性

text-indent 属性规定文本块中首行文本的缩进。指定在文本的第一行开始之前应该留下多少水平空间。属性值是长度(px，pt，cm，em等)，%和inherit。

内联对象要使用该属性必须先使该对象表现为块级或内联块级。

HTML代码：

<p>
使用 <strong>text-indent</strong> 让文本向右缩进了60px。
</p>

CSS代码：

p {
   text-indent: 60px;
}

执行结果：

注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。在CSS2.1之前，text-indent总是继承计算值，而不是声明值。　　
说明：text-indent属性用于定义块级元素中第一个内容行的缩进。这最常用于建立一个“标签页”效果。允许指定负值，这会产生一种“悬挂缩进”的效果。

五、text-shadow（阴影）

1、text-shadow属性

text-shadow为文本添加阴影。

text-shadow:  水平位置垂直位置模糊距离阴影颜色

它有四个值，各个属性值如下所示：

h-shadow:  必需。水平阴影的位置。允许负值。
v-shadow： 必需。垂直阴影的位置。允许负值。
blur：   可选。模糊的距离。
color：  可选。阴影的颜色。

HTML代码：

<h1>我爱学习</h1>

CSS代码：

h1 {
   color: blue;
   font-size: 30pt;
   text-shadow: 5px 2px 4px grey;
}

在上面的例子中，我们使用以下参数创建了一个阴影：

5px - X坐标
2px - Y坐标
4px - 模糊半径
灰色 - 阴影的颜色

执行结果：

要向文本添加多个阴影，请添加逗号分隔的阴影列表。

2、text-shadow与模糊效果

处理阴影时，可以使用任何CSS支持的颜色格式。

对于x和y偏移，可以使用各种类型的单位（如px，cm，mm，in，pc，pt等）。

负值也被支持。

下面的例子创建一个蓝色的阴影，比主文本向上高出2px，向左多1px，并且用0.5em模糊：

HTML代码：

<h1>我爱学习</h1>

CSS代码：

h1 {
   font-size: 20pt;   
   text-shadow: rgba(0,0,255,1) -1px -2px 0.5em; 
}

执行结果：

注：Internet Explorer 9和更早版本不支持text-shadow属性。

六、text-transform（文本大小写）

1、text-transform属性

text-transform ：控制文本的大小写。

text-transform: capitalize; 可以实现文本中的每个单词以大写字母开头。

HTML代码：

<p class="capitalize">
    The value capitalize transforms the first 
    character in each word to uppercase; 
    all other characters remain unaffected.
</p>

CSS代码：

.capitalize {
   text-transform: capitalize;
}

执行结果：

使用text-transform，您可以使文本显示为全部大写或全部小写。

text-transform: uppercase; 定义文本显示为全部大写。

text-transform: lowercase; 定义文本显示为全部小写。

HTML代码：

<p class="uppercase">This value transforms all characters to uppercase.</p>
<p class="lowercase">This value transforms all characters to lowercase.</p>

CSS代码：

p.uppercase {
   text-transform: uppercase;
}
p.lowercase {
   text-transform: lowercase;
}

执行结果：

none值不会产生任何效果。即默认，定义带有小写字母和大写字母的标准的文本。

七、letter-spacing（文本字符之间间距）

1、letter-spacing属性

letter-spacing属性用于设置文本中字符之间的间距。

该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal 就相当于值为 0。

值可以设置为：

normal ：定义了默认样式，字符之间没有额外的空间;
length ：长度计量单位，用px，pt，cm，mm等测量单位定义字符之间的额外空间;
inherit ：继承其父元素的属性;

HTML代码：

<p class="normal">woaixuexi</p>
<p class="positive ">woaixuexi</p>

CSS代码：

p.normal { 
   letter-spacing: normal; 
}
p.positive { 
   letter-spacing: 4px; 
}

执行结果：

2、letter-spacing使用负值

letter-spacing使用负值可以减少字符之间的间距。

HTML代码：

<p class="positive">woaixuexi</p>
<p class="negative">woaixuexi</p>

CSS代码：

p.positive { 
   letter-spacing: 4px; 
}
p.negative { 
   letter-spacing: -1.5px; 
}

执行结果：

八、word-spacing（文本单词之间空格）

1、word-spacing属性

word-spacing 属性指定文本中单词之间的空格（即字间隔）。就像letter-spacing属性一样，可以将word-spacing 的值设置为normal，length和inherit。

该属性定义元素中字之间插入多少空白符。针对这个属性，“字” 定义为由空白符包围的一个字符串。如果指定为长度值，会调整字之间的通常间隔；所以，normal 就等同于设置为 0。允许指定负长度值，这会让字之间挤得更紧。

normal: 默认。定义单词间的标准空间。

length: 定义单词间的固定空间。

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

HTML代码：

<p class="normal">This paragraph has no additional word-spacing applied.</p>
<p class="px">This paragraph is word-spaced at 30px.</p>

CSS代码：

p.normal { 
   word-spacing: normal;
}
p.px { 
   word-spacing: 30px;
}

执行结果：

当段落需要使用正常的单词间距展示时，通常会使用normal

2、word-spacing的测量单位

要使用word-spacing设置单词之间的间距，可以使用像px，pt，pc，cm，mm，inches，em和ex这样的测量值。如果指定为长度值，会调整字之间的通常间隔；也可以设置normal，normal 就等同于设置为 0。

负值也是允许的，这会让字之间挤得更紧。

HTML代码：

<p class="positive">This paragraph is word-spaced at 20px.</p>
<p class="negative">This paragraph is word-spaced at -5px.</p>

CSS代码：

p.positive { 
   word-spacing: 20px;
}
p.negative { 
   word-spacing: -5px;
}

执行结果：

九、white-space（换行符）

1、white-space属性

white-space可以设置元素内的换行符。

参数可以是normal，inherit，nowrap等。

normal: 默认。空白会被浏览器忽略。
inherit: 规定应该从父元素继承 white-space 属性的值。
nowrap: 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

nowrap会屏蔽该元素中的所有换行符。

HTML代码：

<p>
This paragraph has         multiple spaces      and
a line break, but it will be ignored, as we used the nowrap value. 
</p>

CSS代码：

p {
   white-space: nowrap;
}

执行结果：

上面结果中：文本将继续在同一行，直到遇到一个<br />标记。

white-space也支持其他值：pre 、pre-line 、pre-wrap

pre ：文本支持所有的换行和空格
pre-line ：文本支持换行，忽略额外的空格
pre-wrap ：文本将在必要的时候或者行的结尾进行换行

HTML代码：

<p class="pre"> 

In the markup we have multiple            spaces 

and a line break. 

</p>

<p class="preline"> 

In the markup we have multiple            spaces 

and a line break, but in the result multiple spaces are ignored. 

</p>

<p class="prewrap"> 

In the markup we have              multiple 

spaces and a line break.

</p>

CSS代码：

p.pre {
   white-space: pre;
}
p.preline {
   white-space: pre-line;
}
p.prewrap {
   white-space: pre-wrap;
}

执行结果：

Pre-wrap值的行为与Pre值相同，只是它增加了额外的换行符以防止文本突破元素的框。

浅笑心柔142

关注

7
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫