States 狀態

改變元素在不同狀態下的外觀和行為,為其增加互動性。

您會於本文章學習到:

  1. 在不同的狀態下為元素設計樣式

  2. 為鏈接元素的當前狀態設計樣式

  3. 理解樣式從哪裡繼承

為不同狀態下的元素設置樣式

當您從選擇器的狀態下拉菜單中選擇一個狀態時,綠色的狀態類會出現在選擇器字段的末尾。這表示您正在為元素設計該狀態的樣式。

無論處於什麽狀態,所做的改變將在畫布上可見,直到取消選擇或以其他方式離開該狀態。

狀態菜單

從下拉菜單中選擇您要設計的狀態。 在樣式面板上所做的任何改變都會為所選的狀態保存。

None 無狀態 無狀態是元素的默認狀態。

若您選擇了另一個狀態並對其進行了樣式設計,您可以透過從狀態下拉菜單中選擇 "None"來返回到默認狀態的樣式。

Hover 懸停狀態 鼠標指針懸停在元素上時的狀態。 在大多數觸摸設備上是不可能懸停的,所以在為較小的斷點設計時要注意這點。

Pressed 被按下的狀態 點擊元素時顯示的狀態。 這個狀態繼承了懸停狀態的樣式,因為按壓狀態實際上是懸停狀態的一個狀態。

Focused 焦點狀態 您可以關注某些交互式元素,比如按鈕和鏈接,而不透過使用鍵盤來激活它們。用鼠標或指針設備點擊交互式元素,既能聚焦又能激活它們。這種狀態模擬了用鍵盤或鼠標或手指點擊互動元素時的聚焦。

Focused (keyboard) 焦點(鍵盤)狀態 和聚焦狀態樣,這個狀態模擬的是當壹個交互式元素被聚焦但不壹定被激活的時候(例如,通過用妳的鍵盤對該元素做標簽)。請註意,當聚焦時,它總是適用於文本輸入字段,不管它們是以何種方式聚焦的(例如,用鼠標、鍵盤等)。

為了使網站對那些依靠鍵盤導航的訪問者更方便,重要的是要對這種狀態進行風格化處理,使互動元素的位置在頁面上很明顯。我們建議在互動元素上設置一個輪廓,因為它不會影響元素的布局。

Visited 被訪問的狀態 被訪問的鏈接的狀態。這個狀態繼承了無狀態的樣式。

對於被訪問的狀態,您只能對文本顏色、背景顏色和邊框顏色進行設計。背景顏色只有在它已經被設置在不同的狀態下才會出現。

占位符 這個狀態將在表單字段的狀態下拉菜單中可用。它允許妳將占位符文本的樣式與輸入的文本分開,後者繼承了默認狀態的排版樣式。

對於占位符文本,您可以設計排版、背景和陰影。

勾選的狀態 對於在元素設置中啟用了自定義樣式的表單復選框和單選按鈕,這個狀態將在狀態下拉菜單中可用。它允許您對復選框或單選按鈕的檢查狀態進行樣式設計。

鏈接元素和標簽的當前狀態的樣式

鏈接元素也有一個當前狀態。在當前狀態上添加自定義樣式時,它將反映妳的鏈接元素在用戶處於該狀態時的樣子。

當前狀態(選擇器中的綠色標簽) 當鏈接元素被鏈接到當前頁面、章節或標簽時,當前狀態會自動添加到所有鏈接標簽或所選鏈接元素的類中。

選擇一個鏈接的當前狀態 要訪問任何鏈接塊、文本鏈接、按鈕、導航鏈接的當前狀態。

  1. 選擇鏈接元素,按D鍵打開鏈接設置

  2. 選擇頁面選項,從下拉菜單中選擇當前頁面(如果鏈接在主頁上,就選擇主頁)。

  3. 按S鍵,進入樣式面板。如果已經給鏈接應用了一個類別,那麽在選擇器領域,綠色的當前狀態已經激活。如果沒有,點擊選擇器,從打開的下拉菜單中選擇"所有鏈接"標簽。當前的狀態也將被應用到該標簽。

您也可以在鏈接設置中選擇頁面部分的選項。當妳滾動到頁面的那個部分時,當前狀態將出現在該元素的選擇器區域。這對於在妳滾動時固定的按鈕或鏈接的樣式設計很有用。

對當前狀態進行造型後,可以更新鏈接設置,將妳的按鈕和鏈接元素鏈接到任何其他頁面或頁面部分。

選擇一個標簽的當前狀態 您可以選擇對當前標簽的樣式與普通標簽不同,以區分活動和非活動標簽。例如可以編輯字體顏色和背景顏色,使其與正常標簽不同。

  1. 選擇活動的標簽鏈接

  2. 給它分配一個類別。當前狀態會自動出現。

  3. 樣式離開

當前狀態指標顯示在選擇器中時,為鏈接的默認狀態設計樣式 想對默認狀態進行造型時,有幾種方法可以移除當前狀態。最快的方法是在繼承菜單中選擇默認的基類。

另外,您可以在元素設置面板中暫時刪除鏈接設置,對鏈接的類進行樣式化,然後重新配置鏈接設置。如果不想刪除鏈接設置,可以複製鏈接元素,在複製的元素上刪除鏈接設置,編輯類,完成後再刪除複製的元素。

了解樣式是從哪裡繼承的

所有的狀態都從"None 無"狀態繼承樣式。您可以通過點擊選擇器字段上方的繼承指示器來了解樣式是從哪裏繼承的。

在為一個狀態添加樣式後,狀態菜單的下拉圖標會變成藍色。當打開狀態下拉菜單時,您會看到藍色的圓圈,表示該狀態下有本地樣式。

Last updated