回所有课程
课程库

文本样式继承概述

查看示例的元素可以通过文本样式信息到他们的孩子。

这个视频老UI特性。更新版本即将到来!
克隆这个项目

元素可以通过文本样式信息到他们的孩子。你可以设置文本样式在父元素,将瀑布下来,您可以重写这些样式对孩子元素。

通常使用这种方法来设置全球Body标签字体样式,对齐文本和其他元素的部分,和覆盖默认的连接块风格。这里有更深入的展示这三个示例文本样式级联是如何工作的:

示例1 -从身体继承样式

在这个例子中,我们有一个简单的布局:


这些元素有类名或风格。

默认情况下,这些元素继承其文本样式的身体。你可以看到这个点击旁边的橙色指标文本样式。改变字体类型对身体会因此改变它的字体类型的子元素。

你可以覆盖这个继承了文本样式通过选择一个文本元素和改变字体类型。你将会看到一个蓝色的指示器显示样式变化已经在这个元素。

您可以删除这种风格通过单击蓝色的指标和选择“删除此风格”(或按住ALT键并单击)。删除样式将设置字体类型继承从身体。

记住身体是顶级元素时,更改,它只会影响到特定的页面。将样式应用到所有页面的身体,首先选择body元素和删除类名。然后你可以选择它的标签,使文本样式的变化。

从一段示例2 -继承样式

尽管部分不是一个文本元素,您可以应用字体样式。默认情况下,部分将从body元素继承它的文本样式。你可以覆盖这部分通过选择和文本样式的变化。

使这些变化之前,标题和段落元素研究一直到层次结构的顶部文本风格从身体。注意,更改后,标题和部分的Paragraph-children元素现在继承这些样式。这是因为改变部分元素的文本风格打破了从身体的继承链。

通常更改文本对齐的中心部分。这将使所有文本和inline-block元素,如图像和按钮,在一段集中。

例3 -连接块

在这个例子中,有一些文本块嵌套在一个链接。您可以直接风格这个文本,或者你可以选择这里的连接块和更改。这些风格的变化,和之前一样,打破的继承和导致文本继承链连接块。为了验证这一点,您可以选择文本元素并单击橙色指标看到连接块上的文本样式的变化也改变了。

你也可以覆盖连接块的默认蓝色文本风格通过选择文本元素和做出改变。同样的逻辑也适用here-styling文本元素直接将覆盖任何继承了文本样式。

尝试Webflow——它是免费的
Baidu
map