前端進階-樣式
阿新 • • 發佈:2018-12-12
建立聚焦樣式
:focus
偽類,表示獲得焦點的元素(如表單輸入)。當用戶點選或觸控元素或通過鍵盤的 “tab” 鍵選擇它時會被觸發。outline
CSS 屬性,設定一個或多個單獨的輪廓屬性
的簡寫屬性 , 例如outline-style
,outline-width
和outline-color
。 多數情況下,簡寫屬性更加可取和便捷。:hover
偽類,可以建立複雜的層疊機制。觸控式螢幕非常普遍,所以網頁開發人員不要讓任何內容只能通過懸停才能展示出來,不然這些內容對於觸控式螢幕使用者來說是很難或者說不可能看到。::before
偽元素,常通過 content 屬性來為一個元素新增修飾性的內容。
/* Selects any <input> when focused */
input:focus {
color: red;
}
/* 寬度 | 樣式 | 顏色 */
outline: 1px solid white;
/* two identical declarations */
:link:hover { outline: 1px solid #000; }
:link:hover { outline: solid black 1px; }
/* CSS3 語法 */
element::before { 樣式 }
/* (單冒號)CSS2 過時語法 (僅用來支援 IE8) */
element:before { 樣式 }
/* 在每一個p元素前插入內容 */
p::before { content: "Hello world!"; }
q::before {
content: "«";
color: blue;
}
q::after {
content: "»";
color: red;
}