Сілтемелер веб-парақтарда өте кең таралған, бірақ көптеген веб-дизайнерлер олардың сілтемелерін тиімді басқаруға және басқаруға CSS- ке ие екенін білмейді. Сілтемелерді барған, қозғалысқа келтіретін және белсенді күйлермен анықтай аласыз. Сондай-ақ, сілтемелеріңізді қосымша pizzaz беру немесе оларды түймелер немесе тіпті кескіндер ретінде көрсету үшін шекаралармен және фондармен жұмыс істей аласыз.
Көптеген веб-дизайнерлер «a» тегіндегі стильді анықтау арқылы басталады:
a {түсі: қызыл; }Бұл байланыстың барлық аспектілерін (бағыттау, бару және белсенді) көрсетеді. Әрбір бөлікті жеке-жеке көрсету үшін сілтеменің жалған сыныптарын пайдалану керек.
Сілтеме жалған-сыныптары
Сіз анықтай алатын сілтеме псевдократтарының төрт негізгі түрі бар:
- : Сілтеме - сілтеме үшін әдепкі стиль
- : барған - сілтеме басылғаннан кейін
- : hover - тінтуір сілтеме бойынша дайындалады (алдын ала басу)
- : белсенді - сілтеме басылған кезде құқық
Сілтеме псевдоксинін анықтау үшін, оны CSS селекторында тегпен пайдаланыңыз. Сонымен, барлық сілтемелеріңіздің түсіне сұр түсті өзгерту үшін, жазыңыз:
a: барған {түсі: сұр; }Егер сіз бір жалған псевдокласты стильдесеңіз, бәрін стильдеу жақсы идея. Осылайша сіз сыртқы нәтижелерге таң қалмайсыз. Сондықтан егер сіз жай ғана түстің түсіне өзгерткіңіз келсе, сілтемелеріңіздің барлық басқа псевдо-қасиеттері қара болып тұрса, сіз мыналарды жазасыз:
a: link, a: hover, a: белсенді {color: black; } a: барған {түсі: сұр; }Сілтеме түстерін өзгертіңіз
Стиль байланыстарының ең танымал тәсілі - тінтуірдің үстіне меңзегенде түс өзгерту үшін:
a {color: # 00f; } a: hover {color: # 0f0; }Бірақ сілтеме қалай басылатындығына қарай әсер ететінін ұмытпаңыз: active property:
a {color: # 00f; } a: белсенді {color: # f00; }Немесе сілтеме келесіге кіргеннен кейін қалай көрінеді: visiting property:
a {color: # 00f; } a: барған {color: # f0f; }Барлығын біріктіру үшін:
a {color: # 00f; } a: барған {color: # f0f; } a: hover {color: # 0f0; } a: белсенді {color: # f00; }Белгішелерді немесе таңбалауыштарды қосу үшін сілтемелерге фондарды қойыңыз
Сілтемеде фондық суретті Stylish Backgrounds мақаласындағы сияқты қоюға болады, бірақ өңмен сәл ойнай отырып, байланыстырылған белгішесі бар сілтемені жасауға болады. Мәтін үлкен болмаса, 15 пикселге дейінгі 15 бит көлемінде белгішесін таңдаңыз. Фонды сілтеме бір жағына қойып, қайталау параметрін еш қайталанбайтын етіп орнатыңыз. Содан кейін, сілтемедегі мәтін мәтіннің белгішесін көру үшін солға немесе оңға қарай жылжытыңыз.
a {толтыру: 0 2px 1px 15px; background: #fff url (ball.gif) left-center no-repeat; Түсі: # c00; }Сіз өзіңіздің иконкаңызды алғаннан кейін сілтеме өзгерту үшін өзіңіздің апаратын, белсенді және келіп тұрған белгішелер ретінде басқа суретті орната аласыз:
a {толтыру: 0 2px 1px 15px; background: #fff url (ball.gif) left-center no-repeat; Түсі: # c00; } a: hover {background: #fff url (ball2.gif) left-center no-repeat; } a: active {background: #fff url (ball3.gif) left-center no-repeat; }Сілтемелерді түймелер сияқты көру
Түймелері өте танымал, бірақ CSS пайда болғанша, суреттерді пайдаланып түймелерді жасауға тура келді, бұл сіздің беттеріңіздің жүктелу уақытын ұзартады. Бақытымызға орай, CSS-мен оңай батырманың әсерін жасауға көмектесетін шекара стилі бар.
{border: 4px басталуы; толтыру: 2px; мәтінді безендіру: жоқ; } a: белсенді {border: 4px кірістіру; }Түстерді басында және кіріктірме мәнерлерде орналастырған кезде, браузерлер сіз күткендей оларды көрсете алмайды. Сонымен, түстердің шекаралары бар қызықтырушы түймесі бар:
{border-style: solid; шекара ені: 1px 4px 4px 1px; мәтінді безендіру: жоқ; толтыру: 4px; border-color: # 69f # 00f # 00f # 69f; }Сондай-ақ, түймешік сілтемесінің әуенді және белсенді стиліне әсер етуіңізге болады, сол жалған сыныптарды пайдаланыңыз:
a: link {border-style: solid; шекара ені: 1px 4px 4px 1px; мәтінді безендіру: жоқ; толтыру: 4px; border-color: # 69f # 00f # 00f # 69f; } a: hover {border-color: #ccc; }