css 不继承父元素_【前端】html+css零基础入门教程（十）

偏执的太偏执、 2023-01-10 10:15 157阅读 0赞

![2a7e06ac71bf301e271ccb0b4309924b.png][]

![743cfc7f0bd991647ba3fe14109157f4.png][]

CSS文本

CSS 文本属性可定义文本的外观。

通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

CSS文本 - text-indent 属性

text-indent 属性规定文本块中首行文本的缩进。  
通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

p{
         text-indent: 5em;}

注意：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素(比如段落)的首行中有一个图像，它会随该行的其余文本移动。 提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。

**使用负值**  
text-indent 还可以设置为负值。利用这种技术，可以实现很多有趣的效果，比如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边：

p{
         text-indent: -5em;}不过在为 text-indent 设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：

p{
         text-indent: -5em; padding-left: 5em;}

效果如下：F2E.TMING F2E.TMING F2E.TMING

**使用百分比值**  
text-indent 可以使用所有长度单位，包括百分比值。  
百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。  
在下例中，缩进值是父元素的 20%，即 100 个像素：

p{
         width: 250px;}
    div{
         text-indent: 20%;}

效果如下：F2E.TMING F2E.TMING F2E.TMING

**继承**  
text-indent 属性可以继承，请考虑如下标记：

div#outer {
         width: 250px;}
    div#inner {
         text-indent: 10%;}
    p {
         width: 200px;}

`some text. some text. some text.`

`this is a paragragh.`

``以上标记中的段落也会缩进 50 像素，这是因为这个段落继承了 id 为 inner 的 div 元素的缩进值。

效果如下：

some text. some text. some text.

this is a paragragh.

CSS文本 - color 属性

color 属性规定文本的颜色。  
color属性有4种值的方式：

1) **color\_name**  
规定颜色值为颜色名称的颜色(比如 red)。如`p{ color:red;}`

2) **hex\_number**  
规定颜色值为十六进制值的颜色(比如 \#ff0000)。如:`p{ color:#ff0000;}`

3) **rgb\_number**  
规定颜色值为 rgb 代码的颜色(比如 rgb(255,0,0))。如:`p{ color:rgb(255,0,0);}`

4) **inherit**  
规定应该从父元素继承颜色。

CSS文本 - text-overflow 属性

text-overflow 属性规定当文本溢出包含元素时发生的事情。  
text-overflow属性有3种值的方式：

1) **clip**  
修剪文本。如`p{ text-overflow:clip;}`  
页面上显示为 **F2E.TMING**

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

`p{ text-overflow:ellipsis;}`  
页面上显示为 **F2E.TMING**

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

`p{ text-overflow:string;}`  
页面上显示为 **F2E.TMING**

提示：一般与不换行`white-space:nowrap;`连用。

CSS文本 - vertical-align 属性

vertical-align 属性设置元素的垂直对齐方式。提示：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

vertical-align属性有11种值的方式：

1) **baseline**  
默认。元素放置在父元素的基线上。如

`p{  vertical-align:baseline;}`

2) **sub**  
垂直对齐文本的下标。如

`p{ vertical-align:sub;}`

3) **super**  
垂直对齐文本的上标。如`p{ vertical-align:super;}`

4) **top**  
把元素的顶端与行中最高元素的顶端对齐。如

`p{ vertical-align:top;}`

5) **text-top**  
把元素的顶端与父元素字体的顶端对齐。如

`p{ vertical-align:text-top;}`

6) **middle**  
把此元素放置在父元素的中部。如

`p{ vertical-align:middle;}`

7) **bottom**  
把元素的顶端与行中最低的元素的顶端对齐。如

`p{ vertical-align:bottom;}`

8) **text-bottom**  
把元素的底端与父元素字体的底端对齐。如

`p{ vertical-align:text-bottom;}`

9) **length**  
使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。如`p{ vertical-align:length;}`

10) **%**  
使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。如`p{ vertical-align:50%;}`

11) **inherit**  
规定应该从父元素继承 vertical-align 属性的值。如

`p{ vertical-align:inherit;}`

p{ font-family:"Times New Roman",
    Georgia,Serif; }

CSS文本 - text-align 属性

text-align 属性规定元素中的文本的水平对齐方式。提示：将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。

text-align属性有5种值的方式：(前三个比较常用的)

1) **left**  
把文本排列到左边。默认值：由浏览器决定。如

`p{ text-align:left;}`  
页面上显示为 **F2E.TMING**

2) **right**  
把文本排列到右边。如

`p{ text-align:right;}`  
页面上显示为 **F2E.TMING**

3) **center**  
把文本排列到中间。如

`p{ text-align:center;}`  
页面上显示为 **F2E.TMING**

4) **justify**  
实现两端对齐文本效果。如

`p{ text-align:justify;}`  
页面上显示为 **F2E.TMING**

5) **inherit**  
规定应该从父元素继承 text-align 属性的值。如

`p{ text-align:inherit;}`  
页面上显示为 **F2E.TMING**

CSS文本 - direction 属性

direction 属性规定文本的方向 / 书写方向。  
该属性指定了块的基本书写方向，以及针对 Unicode 双向算法的嵌入和覆盖方向。不支持双向文本的用户代理可以忽略这个属性。

direction属性有3种值:

1) **ltr**  
默认。文本方向从左到右。如:

`p{ direction:ltr;}`   
页面上显示为 **F2E.TMING**

2) **rtl**  
文本方向从右到左。如:

`p{ direction:rtl;}`  
页面上显示为 **F2E.TMING**

3) **inherit**  
规定应该从父元素继承 direction 属性的值。如:

`p{ direction:inherit}`  
页面上显示为 **F2E.TMING**

CSS文本 - word-break 属性

word-break 属性规定自动换行的处理方法。提示：通过使用 word-break 属性，可以让浏览器实现在任意位置的换行。

word-break属性有3种值:

1) **normal**  
默认。使用浏览器默认的换行规则。如:

`p{ word-break:normal;}`   
页面上显示为 **F2E.TMING F2E.TMING F2E.TMING**

2) **break-all**  
允许在单词内换行。如:

`p{ word-break:break-all;}`  
页面上显示为 **F2E.TMING F2E.TMING F2E.TMING**

3) **keep-all**  
只能在半角空格或连字符处换行。如:

`p{ word-break:keep-all;}`  
页面上显示为 **F2E.TMING F2E.TMING F2E.TMING**

CSS文本 - white-space 属性

white-space 属性设置如何处理元素内的空白。

white-space属性有6种值:

1) **normal**  
默认。空白会被浏览器忽略。如:

`p{ white-space:normal;}`   
页面上显示为 **F2E.TMING F2E.TMING F2E.TMING**

2) **pre**  
空白会被浏览器保留。其行为方式类似 HTML 中的

标签。如:

`p{ white-space:pre;} 页面上显示为 F2E.TMING F2E.TMING F2E.TMING`

`3) nowrap 文本不会换行，文本会在在同一行上继续，直到遇到  标签为止。如:p{ white-space:nowrap;} 页面上显示为 F2E.TMING F2E.TMING F2E.TMING`

`4) pre-wrap 保留空白符序列，但是正常地进行换行。如:`

`p{ white-space:pre-wrap;} 页面上显示为 F2E.TMING F2E.TMING F2E.TMING`

`5) pre-line 合并空白符序列，但是保留换行符。如:`

`p{ white-space:pre-line;} 页面上显示为 F2E.TMING F2E.TMING F2E.TMING`

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

`p{ white-space:inherit;} 页面上显示为 F2E.TMING F2E.TMING F2E.TMING`

``CSS文本 - word-wrap 属性

word-wrap 属性允许长单词或 URL 地址换行到下一行。该属性有2种值:

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

`p{ word-wrap:normal;}`   
页面上显示为 **TMINGTMING TMINGTMING**

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

`p{ tword-wrap:abreak-word;}`  
页面上显示为 **TMINGTMING TMINGTMING**

CSS文本 - text-justify 属性

text-justify 属性规定当 text-align 被设置为 text-align 时的齐行方法。  
该属性规定如何对齐行文本进行对齐和分隔。

text-justifye属性有7种值:

1) **auto**  
浏览器决定齐行算法。如:

`p{ text-justify: auto;}`   
页面上显示为 **F2E.TMING F2E.TMING F2E.TMING**

2) **none**  
禁用齐行。如:

`p{ text-justify: none;}`   
页面上显示为 **F2E.TMING F2E.TMING F2E.TMING**

3) **inter-word**  
增加/减少单词间的间隔。如:

`p{ text-justify:inter-word;}`   
页面上显示为 **F2E.TMING F2E.TMING F2E.TMING**

4) **inter-ideograph**  
用表意文本来排齐内容。如:

`p{ text-justify:inter-ideograph;}`   
页面上显示为 **F2E.TMING F2E.TMING F2E.TMING**

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

`p{ text-justify:inter-cluster;}`   
页面上显示为 **F2E.TMING F2E.TMING F2E.TMING**

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

`p{ text-justify:distribute;}`   
页面上显示为 **F2E.TMING F2E.TMING F2E.TMING**

7) **kashida**  
通过拉伸字符来排齐内容。如:

`p{ text-justify:kashida;}`   
页面上显示为 **F2E.TMING**

**练习题**

**1.以下哪个可以水平对齐文本？()**

A、text-align:center

B、text-align:justify

C、text-decoration:underline

D、text-indent:-999em

**2.以下哪个可以文字首行缩进？()**

A、text-indent: 5em

B、text-overflow:string

**3.以下哪个文字书写方向为从左到右？****()**

A、text-align:left;

B、direction:ltr

**4.以下哪个允许单词内换行？()**

A、word-break:normal

B、word-break:break-all

C、word-break:keep-all

**5.以下哪个代表被修剪的文本以省略号显示？()**

A、text-overflow:clip

B、text-overflow:ellipsis

C、text-overflow:string

**6.以下表示垂直对齐文本的上标？()**

A、vertical-align:super

B、vertical-align:baseline

C、vertical-align:sub

D、vertical-align:top

**7.以下哪个会防止段落换行？()**

A、white-space:pre

B、white-space:nowrap

—END—

![8ee681a9409d3bc16d62ce8f040877a8.png][]

[2a7e06ac71bf301e271ccb0b4309924b.png]: /images/20221119/0cc0c189734c4347938e5f6f8d7fc70e.png
[743cfc7f0bd991647ba3fe14109157f4.png]: /images/20221119/6519aae345f64db9baa173863158941a.png
[8ee681a9409d3bc16d62ce8f040877a8.png]: https://img-blog.csdnimg.cn/img_convert/8ee681a9409d3bc16d62ce8f040877a8.png