通过改变元素在不同状态下的外观和行为,为元素添加交互性。
州。它们不仅用于链接,而且通常用于链接。您可以通过在不同状态上添加样式来更改元素的外观和行为方式。这将交互性添加到几乎所有元素中。
当我们设置样式时,单击States下拉菜单可以让您在可以访问和设置样式的各种状态之间进行选择。
我们将涉及四种状态:无(或正常),悬停,按下和聚焦。
让我们从None开始:正常状态。这是所有其他状态的基础或起点。
如果我们选择这个按钮,它应用了Beautiful button类,我们所做的任何样式更改都会影响这个状态。
这是没有。徘徊呢?
如果我们在下拉菜单中选择States,然后按Hover?我们现在对悬停状态进行造型。用绿色表示。
我们将保持简单,但是您可以做出任意数量的样式选择。我们将选择将背景颜色改为绿色。
我们可以切换回None,当我们把指针悬停在上面时,背景颜色会变成绿色。另外,注意所选元素的当前状态是如何显示在Canvas上的。当我们为悬停状态设置样式时,我们可以看到悬停状态在画布上的样子。无论我们处于什么状态,我们所做的更改都将在Canvas上可见,直到我们取消选择或离开状态。
如果我们点击状态下拉菜单,我们现在会在Hover右边看到一个蓝色的指示器。这意味着有一个新值被设置在悬停状态:在这个例子中,我们将背景颜色改为绿色。
我们可以随时在悬停和无状态之间切换,对其中任何一种状态进行更改。
这是徘徊。让我们做。
在CSS中,这也被称为“活动”,但它表示当指针在元素边界内向下点击时,样式会是什么样子。
就像Hover从None状态继承值一样,按下也会这样做,但它也会继承你在Hover状态中输入的值那会覆盖None状态。这就是为什么Pressed的背景色是绿色的原因。
我们可以再次更改背景颜色,这次为本例选择深绿色。然后取消选择我们的元素。如果我们测试一下?我们可以看到所有三种状态:正常、悬停和按下。
这就是Pressed状态。
最后,我们来谈谈聚焦。
这种状态非常适合在接受输入的元素上设置样式——我们可以通过按键盘上的Tab键切换到元素,比如文本字段。
如果我们对影响Canvas上每个文本字段的类进行样式化,我们所做的任何更改都会在文本字段被聚焦时显示出来。
现在,像任何伟大的艺术家一样,当文本框被聚焦时,你可能想要一个非常非常粗体的红色发光。我们可以对Focused状态进行这种调整,当我们进入Preview时,当我们关注每个文本字段时,样式选择真的非常明显,几乎令人痛苦。
这些是我们可以在整个项目中设置元素样式的标准状态。
您可以通过更改元素在不同状态下的外观和行为方式来为元素添加交互性。
在这节课中:
要对一个处于不同状态的元素应用不同的样式,比如悬停状态,在样式面板的选择器中打开状态下拉菜单,选择你想要样式的状态。
当您从选择器中的状态下拉菜单中选择一个状态时,一个绿色的状态类,也称为伪类,将出现在选择器字段的末尾。这表明您现在对元素的状态进行了样式化。
您可以做出任意数量的样式选择。您在这里所做的样式更改是用户在与该元素交互时将看到的。
无论您处于何种状态,您所做的更改都将在画布上显示,直到取消选择或以其他方式离开该状态。
从下拉菜单中选择要样式的状态。现在,在Style面板中所做的任何更改都将保存为所选状态。
None状态是元素的默认状态。这是元素默认的外观。
一旦选择并设置了另一种状态的样式,就可以通过从States下拉菜单中选择“none”来恢复默认状态的样式。
当您将鼠标指针悬停在一个元素上时,悬停状态显示。在大多数触屏设备上不可能悬停,所以在设计小型设备时要意识到这一点断点.
按下或激活状态是单击或按下元素时显示的状态。这个状态继承了悬停状态的样式,因为按下按钮实际上是悬停状态的一种状态。
您可以专注于某些交互元素,如按钮和链接,而无需使用键盘tab进入它们。用鼠标或指针设备点击交互元素可以聚焦并激活它们。这个状态模拟了当一个交互元素通过键盘、鼠标或手指点击聚焦时的状态。
与聚焦状态一样,这种状态模拟的是当一个交互元素被聚焦但不一定被激活时(例如,用键盘切换到元素)。请注意,当聚焦时,它总是适用于文本输入字段,无论它们以何种方式聚焦(例如,用鼠标、键盘等)。
为了让那些依赖键盘进行导航的访问者更容易访问您的站点,对这种状态进行样式化,使交互元素的位置在页面上很明显是很重要的。我们建议设定互动元素的大纲因为它不会影响元素的布局。
访问状态是已访问的链接的状态。这个状态继承了none状态的样式。
对于访问的州,您只能设置文本颜色、背景颜色和边框颜色的样式。背景颜色只有在已经设置为不同状态时才会出现。
此状态将在States下拉菜单中提供表单字段.它允许您将占位符文本与继承默认状态的排版样式的类型化文本分开设置样式。
对于占位符文本,可以设置排版、背景和阴影的样式。
这种状态将在表单复选框和单选按钮的状态下拉菜单中可用,这些复选框和单选按钮在它们的元素设置中启用了自定义样式。它允许您对复选框或单选按钮的选中状态设置样式。
当你完成了状态的样式化后,你可以通过以下操作返回到默认的none状态:
从一个状态中删除自定义样式或所有样式:
链接元素也有一个当前状态。当您在Current状态上添加自定义样式时,它将反映用户处于该状态时link元素的外观。
“当前”状态自动添加到“所有链接”标记或类的选择link元素当此元素链接到当前页、节或选项卡时。
当前状态从默认的“None”状态继承所有样式。
您也可以在链接设置中选择页面部分选项。当您滚动到页面的该部分时,当前状态将出现在该元素的选择器字段中。这对于样式的按钮或者滚动时固定的链接。
设置当前状态样式后,可以更新链接设置,并将按钮和链接元素链接到任何其他页面或页面部分。
您可以选择使Current选项卡的样式与普通选项卡不同,以区分活动选项卡和非活动选项卡。例如,可以编辑字体颜色和背景颜色,使其与普通选项卡不同。
设置当前选项卡的样式:
当您想设置默认状态的样式时,有几种方法可以删除当前状态。最快的方法是在Inheritance菜单中选择默认的基类。
或者,您可以暂时删除元素设置面板中的链接设置,样式链接的类,然后重新配置链接设置。如果你不希望删除链接设置,复制link元素,删除重复元素上的链接设置,编辑类,然后在你完成后删除重复的元素。
所有状态都从“none”状态继承样式。“按下”也继承了“悬停”状态的样式。您可以通过单击选择器字段上方的继承指示符来查看样式是从哪里继承的。
在您为状态添加样式之后,状态菜单下拉图标将变成蓝色。当你打开States下拉菜单时,你会看到蓝色的圆圈,表示在那个州有本地样式。
提交表单时出错了。请联系support@www.raktarban.com