Спасылкі вельмі распаўсюджаныя на вэб - старонках, але многія вэб - дызайнеры не разумеюць уладу , якую яны маюць з дапамогай CSS , каб кіраваць і эфектыўна кіраваць сваімі спасылкамі. Вы можаце вызначыць сувязі з наведвальнымі, лунанні і актыўнымі станамі. Вы можаце таксама працаваць з межамі і фонам, каб даць вашым спасылках візуальнага стыль або зрабіць іх падобнымі на кнопкі або нават малюнка.
Большасць вэб-дызайнеры пачынаюць з вызначэння стылю на «» пазнакі:
а {колер: чырвоны; }Гэта стыль ўсе аспекты спасылкі (лунання, наведаныя і актыўныя). Для таго, каб стылізаваць кожную частку асобна, вы павінны выкарыстоўваць спасылку псеўда-класы.
спасылка псевдокласса
Ёсць чатыры асноўных тыпу спасылак псеўда-класаў вы можаце вызначыць:
- : Ссылка - гэта стыль па змаўчанні для спасылкі
- : Наведаў - пасля таго, як спасылка была націснутая
- : Парыць - як мыш гатовая па лініі (да пстрычкі)
- : Актыўны - прама як націск на спасылку
Для таго, каб вызначыць спасылку псеўда-клас, выкарыстоўваць яго з тэгам ў вашым селектары CSS . Такім чынам, каб змяніць наведвальны колер ўсіх спасылак на шэры, напісаць:
а: наведаў {колер: шэры; }Калі стыль адзін спасылка псеўда-клас, гэта добрая ідэя, каб стыль іх усіх. Такім чынам, вы не будзеце здзіўлены староннімі вынікамі. Так што, калі вы проста хочаце змяніць наведвальны колер на шэры, у той час як усе астатнія псеўда-ўласцівасці вашай спасылкі застаюцца чорнымі, вы б напісаць:
а: спасылка, а: завісаць, а: актыўны {колер: чорны; } А: наведаў {колер: шэры; }Змяненне колеру спасылак
Самы папулярны спосаб спасылкі стыль, каб змяніць колер пры навядзенні паказальніка мышы над ім:
а {колер: # 00f; } А: завісаць {колер: # 0f0; }Але не забывайце, што вы можаце паўплываць, як спасылка выглядае так, як яны пстрыкаюць па ім: актыўнай уласнасці:
а {колер: # 00f; } А: актыўны {колеры: # F00; }Ці як спасылка выглядае пасля таго, як вы наведалі яго з: наведвальнай уласнасці:
а {колер: # 00f; } А: наведаў {колер: # F0F; }Для таго, каб паставіць усё гэта разам:
а {колер: # 00f; } А: наведаў {колер: # F0F; } А: завісаць {колер: # 0f0; } А: актыўны {колеры: # F00; }Паставіць шпалеры на спасылкі дадаць абразкі або Кулі
Вы можаце паставіць фон на спасылку, як у Stylish Backgrounds артыкула, але, гуляючы з фонам трохі, вы можаце стварыць спасылку, якая мае адпаведны значок. Выберыце значок, які малы, каля 15px на 15px, калі ваш тэкст не болей. Змесціце фон у адзін бок спасылцы і ўсталюйце параметр паўтору для не паўтараць. Затым Padd спасылкі так, каб тэкст у спасылцы перамяшчаецца над досыць далёка налева або направа, каб убачыць значок.
а {абіўка: 0 2px 1px 15px; фон: #fff URL (ball.gif) левы цэнтр не паўтараць; колер: # c00; }Пасля таго, як вы атрымалі свой значок, вы можаце ўсталяваць іншае малюнак у якасці завісання актыўных і наведаных абразкоў, каб зрабіць змены спасылкі:
а {абіўка: 0 2px 1px 15px; фон: #fff URL (ball.gif) левы цэнтр не паўтараць; колер: # c00; } А: завісаць {фон: #fff URL (ball2.gif) левы цэнтр не паўтараць; } А: актыўны {фон: #fff URL (ball3.gif) левы цэнтр не паўтараць; }Зрабіце Вашы спасылкі Падобнай Гузікі
Кнопкі вельмі папулярныя, але пакуль CSS не прыйшоў, трэба было ствараць кнопкі з дапамогай малюнкаў , што робіць вашыя старонкі займае больш часу , каб загрузіць. На шчасце, ёсць стыль мяжы, якія могуць дапамагчы вам стварыць кнопку-эфект лёгка з дапамогай CSS.
а {мяжа: 4px боковик; абіўка: 2px; тэкст-аздабленне: няма; } А: актыўны {мяжа: 4px устаўка; }Звярніце ўвагу, што калі вы паклалі кветкі на завязку і укладных стылі, браўзары не так, хутчэй за ўсё, каб зрабіць іх як можна было б чакаць. Такім чынам, вось аматар кнопка з каляровымі межамі:
а {мяжы стылю: цвёрды; мяжы шырыня: 1px 4px 4px 1px; тэкст-аздабленне: няма; абіўка: 4px; мяжы колеру: # 69f # 00f # 00f # 69f; }І вы можаце паўплываць на лунанне і актыўныя стылі спасылкі кнопкі, а проста выкарыстоўваць гэтыя псеўда-класы:
а: спасылка {мяжы стылю: цвёрды; мяжы шырыня: 1px 4px 4px 1px; тэкст-аздабленне: няма; абіўка: 4px; мяжы колеру: # 69f # 00f # 00f # 69f; } А: завісаць {мяжа колеры: #ccc; }