Css-де мақсат дегеніміз не. :target жоқ таза CSS клик оқиғасы

Сіз :target псевдосыныбын пайдаланып көптеген оқулықтарды интернеттен оңай таба аласыз. Дегенмен, біреудің кодын ұстанбай, оны түсінуге және оның қалай жұмыс істейтінін түсінуге тырысайық? Әрине, бұл мысалдарсыз болмайды.

Бұл не: мақсат?

CSS-те:target - бұл HTML құжатының кейбір әрекетті орындау үшін кейбір тұтас «бөлігін» таңдауға мүмкіндік беретін псевдосынып. Бұл, мысалы, мәтіннің абзацы немесе тақырып болуы мүмкін.

Псевдосыныптарды псевдоэлементтермен шатастырмау керек, олар элементтің кейбір бөлігін ғана таңдай алады, мысалы, абзацтың бірінші әрпі немесе бірінші жолы.

Псевдо сыныптар:

• a:сілтеме(түс:#111)
• a: меңзерді апару(түс:#222)
• div:бірінші бала(түс:#333)

• p::бірінші әріп(түс:#444)
• p::бірінші жол(түс:#555)

Фрагмент идентификаторлары

Қысқасы, бұл біздің жалған таптың байланған нәрсесі. Бұл мекенжайдың соңында орналасқан сөз немесе сөз тіркесі бар хэштег. Бұл келесідей көрінеді:

Бұл әдісті мақала ішіндегі ауысулар үшін пайдалануға болады. Мысалы, мақаланың басында сіз шағын мазмұн кестесін жасайсыз, оның элементін басқан кезде адам сілтеме әкелетін бөлімге, бөлімге түседі, ал идентификаторды қосу керек.

Ол таза HTML тілінде жұмыс істейді, ешқандай айла қажет емес. Шағын идентификаторлар.

:target арқылы шертуді өңдеу

Енді оны біздің экспромт мәзірімізден қалаған бөлімді басқан кезде, тақырып стилі өзгеріп, абзацтардың қайсысы белсенді екенін көрсететін етіп жасауға тырысайық.

h1 (шрифт: 30px Arial sans-serif; ) h1:target (қаріп өлшемі: 50px; мәтінді безендіру: астын сызу; түсі: #37aee4; )

Код өте қарапайым - басқан кезде тақырып оның өлшемін, түсін және астын сызуды өзгертеді. Сіз өмірді (Руслан, сәлем) қосып, тақырып түсін өзгертетін анимация жасай аласыз:

H1 (шрифт: 30px Arial sans-serif; -webkit-өту: түсті 0,5 с жеңіл; -moz-өткізу: түс 0,5 с жеңіл; -o-өткізу: түс 0,5 с жеңіл; -ms-өткізу: түсті 0,5 с жеңіл; өту: түсті 0,5 с жеңіл; )

Белсенді тақырыпты бөлектеу жақсы нәрсе, бірақ одан кейінгі мәтіннің көрінісін өзгерту қажет болса ше? CSS бізге бұл мүмкіндікті береді. Бұл келесідей көрінеді:

H1:target + p (фон: #eaeaea; толтыру: 10px; )

Бұл жағдайда плюс стиль тақырыптан кейінгі абзацқа қолданылуы керек дегенді білдіреді. Осылайша, белсенді тақырыпты өзгерту кезінде біз бөлімнің дизайнын өзгертемізоған «тиісті» мәтінмен.

Браузерді қолдау

Мақсатты псевдо-сынып CSS үшінші басылымына жатады және 9-нұсқадан асқан IE-ден басқа барлық браузерлермен тамаша қолдау көрсетеді. Сондықтан аудитория осы шолғышты пайдаланса, оны қолданбау керек. Дегенмен, шығудың жолы бар - бұл Selectvizr, JS кітапханасы, оның көмегімен IE CSS3-пен жұмыс істеуге болады. Сценарийді қосыңыз, сонда ол жұмыс істейді.

Жалғыз нәрсе, егер сіз JQuery немесе MooTools қолданбасаңыз, бұл сценарий жұмыс істеуі үшін қосылу керек. Ресми веб-сайтта кітапханалар нені қолдайтыны туралы кесте бар. Егер сізді қызықтырса, оқыңыз. Бұл.

Қорытынды

Псевдо-сыныптарды пайдалану қиын міндет болып көрінуі мүмкін, бірақ олардың қалай жұмыс істейтінін түсінгеннен кейін, сіз тек CSS көмегімен таңғажайып нәрселерді жасай аласыз, басқа ештеңе жоқ. Псевдосынып: мақсаттымұның тамаша дәлелі. Оның көмегімен сіз беттің келушімен әрекеттесуін түбегейлі өзгерте аласыз. Жоғарыда келтірілген мысал ең қарапайым, бірақ ол сонымен қатар бетке біршама интерактивтілік қосады. Және бұл кодтың бірнеше жолы ғана.

Сұлулық пен браузерді қолдау арқылы оны асыра алмаңыз және бәрі жақсы болады.

Күніңіз сәтті болсын

Әдепкі бойынша, сілтемені басқан кезде құжат ағымдағы терезеде немесе жақтауда ашылады. Қажет болса, бұл шарт тегтің мақсатты атрибуты арқылы өзгертілуі мүмкін . XHTML бұл атрибутқа рұқсат бермейді.

Міндетті атрибут

Құндылықтар

Мән атау төлсипаты арқылы көрсетілген терезенің немесе жақтаудың атауы болып табылады. Егер жоқ атау орнатылса, жаңа терезе ашылады. Төмендегілер сақталған атаулар ретінде пайдаланылады.

Бос Бетті жаңа шолғыш терезесіне жүктейді. _self Ағымдағы терезеге бетті жүктейді. _parent Бетті негізгі жақтауға жүктейді, егер жақтаулар болмаса, бұл мән _self сияқты жұмыс істейді. _top Барлық кадрларды болдырмайды және бетті толық шолғыш терезесіне жүктейді, егер кадрлар болмаса, бұл мән _self сияқты жұмыс істейді.

Әдепкі мән

Валидация

Бұл төлсипатты пайдалану HTML спецификациясы арқылы ескірген, жарамды код тек өтпелі режимді пайдаланған кезде алынады. .

HTML5 IE Cr Op Sa Fx

Жаңа терезеде ашу

Сәлем, құрметті блог сайтының оқырмандары. Бүгінгі постты арнауды жөн көрдім маңызды аспектвеб-мастеринг, онда мен гиперсілтеменің не екенін егжей-тегжейлі түсіндіруге тырысамын, онымен ажырамас байланыста болады, ол өз кезегінде асыра сілтеусіз Интернеттің негізі болып табылады.

Бірақ гиперсілтемелерді дұрыс жасау және оларды веб-беттердің кодына енгізу үшін (мысалы, сіздің сайтыңыз) тілдің сәйкес аймағын зерттеу керек. гипермәтінді белгілеу() себебі бұл элементтер сілтемені қажетті көрініске модернизациялауға мүмкіндік беретін HTML a тегі арқылы жасалған.

Сонымен, бүгін біз гиперсілтеменің қандай бөліктерден тұратынын, мақсатты бос атрибутты пайдалану арқылы бетті жаңа терезеде (қойындыда) ашуға қалай мүмкіндік беретінін, кез келген суретті қалай сілтеме жасауға болатынын және басқа да көптеген маңызды мәліметтерді талдаймыз. Басқа нәрселермен қатар, бұл ақпарат сізді HTML тілін үйренуде алға жылжытады.

Гиперсілтеме дегеніміз не және оны сілтеме деп атауға бола ма?

Тақырыпта қойылған сұраққа жауап бере отырып, мен «сілтеме» терминінің кеңірек мағыналық спектрі бар екенін айтайын (Сібірге сілтеме, төлеушіні анықтау үшін банк қызметі, кітаптағы мәтін және т.б.), оның ішінде ұғымға тән мағына. Гиперсілтеме , ол тек гипермәтінмен байланысты, бұл ақпаратты сызықты емес қабылдауға мүмкіндік береді.

Осылайша, гиперсілтеме – сілтеменің ерекше жағдайы, сондықтан оларды бүгінгі тақырыпта тең дәрежеде қолдануға әбден болады. Осыны мен бүгінгі жарияланым барысында өзімнің жеке мүдделерім үшін қолданамын, қажетсіз кілт сөздер спамынан аулақ болу үшін осы екі терминді де қолданамын.

Бірақ көмегімен жасалған көрінбейтін сервистер де бар және ішіндегілері, олардың міндеті белгілі бір функцияны орындау үшін браузерлерге көптеген сигналдар мен пәрмендерді жіберу болып табылады.

Мысалы, сервистік гиперсілтемелердің көмегімен белгішені көрсетуге болады . Оларды тек HTML кодының бөлігі ретінде көруге болады (ол үшін браузерде ашылған кез келген бетті басыңыз):

Әзірге қызмет сілтемелерін жалғыз қалдырып, гиперсілтемелерді жасаудың жалпы үлгісін қарастырайық. Олардың ортақ қасиеті – барлығында бар қажетті href төлсипаты, оның мәні құжаттың мекенжайы болып табылады (). HTML сілтемесі екеуіне де әкелуі мүмкін ішкі бетсайтта және сыртқы құжатта.

Тағы бір маңызды ескерту. href атрибутын пайдалану гиперсілтемелерді басуға мүмкіндік береді, яғни пайдаланушыларға оларды басу нәтижесінде веб-сайттың сәйкес бетіне автоматты түрде өтуге мүмкіндік береді.

Href көмегімен HTML тілінде гиперсілтемені қалай жасауға болады

Сонымен, сілтеме жасау үшін параметрлері URL мекенжайлары болуы мүмкін a тегі және href атрибуты қажет екенін білеміз. әртүрлі түрі. Қаншалықты абұл, содан кейін ашу арасында және жабувеб-бетте көрсетілетін мазмұнды қамтиды.

Бұл мазмұны якорь деп аталадыжәне мәтін немесе сурет ретінде ұсынылуы мүмкін (төмендегі сілтемеде суретті қалай жасауға болатыны туралы көбірек айтатын боламыз). Жоғарыда атап өткенімдей, якорь басылатын болады. Мәтін мазмұны бар гиперсілтеменің мысалын қарастырыңыз. HTML кодында ол келесідей болады:

зәкірлер туралы аздап

HTTP-ге қосымша, қауіпсіз HTTP протоколы S. Сілтеме веб-бетке апармауы керек. Мұның бәрі href мәніне байланысты, ол кейбір файлға жол болуы мүмкін:

//website/wp-content/uploads/2012/05/giperssylqi-v-html.jpg

жүктеп алу

Веб-бетте бұл сілтеме келесідей болады:

Браузер .zip кеңейтімі бар нысанды пайдаланушыға ұсынатын жүктеп алу үшін ғана пайдалануға болатынын «түсінеді».

Айтпақшы, кез келген файлға жол кейде FTP () арқылы көрсетіледі. Содан кейін href атрибутының параметрі ретінде пайдаланылатын URL мекенжайында HTTP протоколын (HTTPS) FTP протоколымен ауыстыруыңыз керек. Файлға сілтеме келесідей болады:

серверден жүктеп алыңыз

Бірақ бұл бәрі емес. Сол сияқты сілтеме жасалады электрондық пошта mailto псевдопротоколын пайдалануүшін жылдам қол жеткізужазу құралына:

хаттар жазу

Мұндай сілтемені басқаннан кейін әдепкі терезе пайда болуы керек. пошта клиенті, онда хабардың мәтінін құрастыруға және оны бұрыннан көрсетілген мекенжайға жіберуге болады.

Іс жүзінде поштаға гиперсілтемелерді бұрын веб-шеберлер мен үлкен ресурстардың иелері пошта пішініне бір рет басу арқылы қол жеткізе алатын пайдаланушылар мен тұтынушылардың ыңғайлылығын қамтамасыз ету үшін жиі пайдаланды.

Бірақ веб-ресурстардағы байланыстың бұл түрі енді соншалықты танымал емес (әсіресе, мысалы, орнатуға болатындықтан), өйткені осылайша ашылған пошта мекенжайлары бағдарламалық жасақтаманың көмегімен белсенді түрде ұсталады және әртүрлі спам жіберушілер пайдаланады.

Мен мысал ретінде URL-мекенжайының бөлігі болып табылатын ең көп таралған хаттамаларды ғана келтірдім, бұл өз кезегінде гиперсілтемені құру кезінде href атрибутының параметрі болып табылады. HTTP (HTTPS), FTP және mailto-дан басқа, нақтырақ тапсырмалар үшін басқалары бар. Мүмкін, біз оларды басқа басылымдарда толығырақ қарастырамыз.

Гиперсілтемелердің түрлері

Ал енді сілтемелерді белгілі бір критерийлер бойынша жіктеуге тырысайық.

Олардың қолданылу аясына қарай:

1. Сыртқы- олар орналастырылған сайттан тыс орналасқан беттерге апару;

2. Ішкі- бір веб-ресурстағы веб-беттерді байланыстыру.

Пішім бойынша:

2. Графикалық түрде f — бұл жағдайда гиперсілтеменің якоры сурет (оның ішінде нобай), баннер, түйме және т.б.

href атрибутының мәні ретінде қызмет ететін URL түрі бойынша:

1. Абсолютті, оларда деректерді тасымалдау протоколының нақты көрсеткіші бар (мысалы, HTTP) және домен атауысайт (домендер туралы барлығында).

Мұндай сілтемелер сыртқы ресурстардың беттеріне сілтеме жасағанда жиі қолданылады. Бұл жағдайда href мәні толық жолды қамтиды қалаған файлнемесе веб-беттер. Мұнда абсолютті гиперсілтеменің мысалы келтірілген:

Контекст - бұл не

2. туыс, веб-сайттың түбірлік қалтасына қатысты көрсетілген жол болатын құру опцияларының бірі (осыдан гиперсілтеме түрінің атауы). Бұл жағдайда протокол (HTTP) және сайт домені URL мекенжайынан жойылады:

Контекст - бұл не

Веб-беттегі салыстырмалы гиперсілтемелер ішкі беттерге сілтемелер бере алады. Бұл пішінде олар қысқа, бұл HTML кодын жеңілдетеді. Әрине, бәрі соншалықты қарапайым емес және кеңірек қамтуды талап етеді, өйткені сіз берілген сілтемені орындасаңыз, көре аласыз.

тег атрибуттары

Енді міндетті href-тен басқа қандай атрибуттар бар екенін және олардың гиперсілтеме жасауға қалай әсер ететінін көрейік. Осыған байланысты ең толық деректерді, былайша айтқанда, «бірінші қолмен» халықаралық W3C консорциумының ресми сайтынан таба аласыз, мұнда өзекті ақпарат ең жылдам пайда болады.

Олар толығымен бірдей және ағымдағы қойындыда веб-беттің ашылуын бастайды. Сілтемелерді басқан кезде беттердің жаңа қойындыда ашылуын қаласаңыз, оны сілтеме жасау кезінде қосу керек. бос параметрі бар мақсатты төлсипат:

Контекст - бұл не

Кейбір веб-шеберлер мен SEO сайттары келушілерге таңдау мүмкіндігі берілсе (яғни мақсатты бос жазбаңыз) жақсы деп санайды, өйткені қажет болған жағдайда бетті жаңа қойындыда ашуға болады. контекстік мәзір(курсорды сілтеменің үстіне жылжытыңыз, басыңыз оң жақ түймешікті басыңызтінтуірді басып, тиісті элементті басыңыз):

Сонымен қатар, көріп отырғаныңыздай, бұл жағдайда пайдаланушының артықшылығы бар, ол веб-бетті тек жаңа қойындыда ғана емес, сонымен қатар жаңа терезеде(бұл опцияны HTML арқылы жүзеге асыру мүмкін емес, тек сценарийлер арқылы).

Бірақ менің ойымша, барлық жаңадан келген пайдаланушылар танымал браузерлердің мүмкіндіктері мен параметрлерімен толық таныс емес (). Оқырман сыртқы гиперсілтемені бақылап, бастапқы бетті көрмей (орнына алушы құжаты пайда болады) жүректеріндегі қойындыны жабуы әбден мүмкін.

Осылайша, веб-ресурс иесі болашақ келушіні жоғалтып қана қоймай, сонымен қатар нашарлауы мүмкін. мінез-құлық факторлары(), бұл рейтинг кезінде бет позицияларының жоғалуына әкеледі.

Сонымен қатар, іргелес қойындыда бетті ашу ыңғайлылық тұрғысынан өте ыңғайлы (). Қолданушы веб-бетке гиперсілтемені басып, қосымша ақпарат алады және ештеңе болмағандай негізгі материалды оқуды жалғастырады.

Объективті суретті жасау үшін кез келгенге "target="_blank" қолданбасын қосу керек сыртқы сілтемелер, ол белгілі бір қауіпсіздік қаупіне толы. Егер біреуді қызықтыратын болса, онда сіз мақсатты бос орынды пайдалану кезінде ақаулықтарды жою бойынша ұсыныстар берілген, сондай-ақ жаңа қойындыда веб-бетті ашу тапсырмасын орындаудың балама нұсқалары берілген.

Жаңа қойындыда гиперсілтемені ашу үшін бос мәнді пайдаланудың барлық артықшылықтары мен кемшіліктерін атап өткен сияқты. Егер сіз менің блогымдағы мақалаларды оқысаңыз, мақсатты атрибуттың осы параметріне деген көзқарасымды болжаған боларсыз.

Үстінде осы сәтМен үшін оның жақсы жақтары кемшіліктерінен асып түседі, мен оның сөзсіз жақтаушысымын. Жоғарыда келтірілген фактілерге сүйене отырып, сіз осы мәселе бойынша өз пікіріңізді қалыптастыра аласыз. Дегенмен ... жаңа жағдайлардың пайда болуын ескере отырып, ол өзгеруі мүмкін.

Хэш сілтемелерін, якорьлерді қалай жасауға болады және олар не үшін қажет?

Әрі қарай, мен сіздің назарыңызды гиперсілтемелердің басқа түріне аударамын, бұл веб-бетте орналасқан материал жеткілікті көлемді болса және навигацияны жақсарту үшін құрылымды болуы керек болса, пайдалы болуы мүмкін.

Мысал іздеудің қажеті жоқ, ең басында осы басылымның мазмұнын қараңыз. Қараңызшы, мақаланың бөлімдерінің тізімі бар ма? Бұл бөлімдерге гиперсілтемелер тек хэш сілтемелер болып табылады. Олардың кез келгенін басқаннан кейін браузер бетті сәйкес бөлік басталатын жерге жылжытады.

Мұндай сілтемелерді жасау өте қарапайым. Алдымен сіз жасауыңыз керек якорь, кез келген HTML тегіне қолданылатын ғаламдық атрибуттардың бірі болып табылатын идентификатор идентификаторы түріндегі сәйкес белгіні беттің қажетті орнына қою.

Идентификаторлардың әмбебаптығына байланысты мұндай анкерлік тегтерді веб-беттің кез келген жерінде дерлік орналастыруға болады. Мәтін әдетте абзацтарға бөлінгендіктен, оларды қолдануға болады. Мен негізінен мақалаларды логикалық бөліктерге бөлетін якорьлерді қойдым:

Осылайша HTML-кодта барлық қажетті орындарды белгілей отырып, біз оларға гиперсілтемелер жасаймыз. Мұны істеу үшін URL мекенжайындағы соңғы қиғаш сызықтан кейін «/» соңында (бұл сіз білетіндей href атрибутының мәні болып табылады) біз «#» фунт белгісін және жапсырма атауын (ID) ретімен жазамыз. :

Хэш сілтемелері мен якорьлерді қалай жасауға болады?

Сонымен қатар, егер мұндай якорь сілтемесі якорьдермен бір бетте орналастырылса, URL мекенжайының хэш белгісіне дейінгі соңғы қиғаш сызыққа дейінгі бөлігін, қоса алғанда, өткізіп жіберуге болады және тек «#» плюс ID атауын пайдалануға болады. href параметрі ретінде (шын мәнінде бұл салыстырмалы сілтемелердің опцияларының бірі):

Хэш сілтемелері мен якорьлерді қалай жасауға болады?

Яғни, HTML кодын оңтайландыруға арналған нұсқаулықтың мазмұнын құрастыру кезінде сіз бұл жеңіл опцияны оңай пайдалана аласыз. Егер URL мекенжайы ретінде идентификатордың атынсыз тек бір фунт белгісін қойсаңыз, онда мұндай сілтеме орналасқан жерден бет жоғары қарай жылжиды:

Жоғарғы

Шын мәнінде, бұл ресурстың ыңғайлылығы үшін қосымша плюс ретінде қызмет ететін ең қарапайым нұсқа, өйткені ол келушілер үшін өмірді жеңілдетеді. Тартымды сурет түймені жасау үшін якорь ретінде пайдаланылуы мүмкін.

Астын сызуды жою және сілтеме түсін өзгерту әдісі

HTML әзірлеушілері осы немесе басқа аспектілерді оңтайландыруға көмектесетін барлық дерлік нюанстарды ойластырды, бұл гиперсілтемелерге де қатысты. Мысалы, басқа веб-бетке гиперсілтемені орындаған кезде, содан кейін кері оралғанда, пайдаланушы гиперсілтеменің түсін өзгерткенін көреді.

Егер ол мұндай әрекеттерді қайта-қайта қайталау қажет болса, онда ол қай сілтемені басып, қайсысын баспағанын тез анықтай алады. Бұл опция әрбір дерлік браузерде орнатылған. Оның қаншалықты ыңғайлы екенін және қанша уақытты үнемдейтінін түсіндірудің қажеті жоқ.

Әдепкі және CSS гиперсілтемелері жоқ асты сызылған және үш түсті опция, олардың әрқайсысының өз атрибуты бар:

• сілтеме - веб-беттегі гиперсілтеме түсін орнатады (әдепкі - көк, ол #0000ff арқылы белгіленеді);
• alink – веб-браузер өңдеп жатқан уақыт аралығындағы белсенді гиперсілтеме түсі (қызыл #ff0000);
• vlink — пайдаланушы кірген сілтеменің түсі (күлгін, #800080).

Сонымен, сіздің сайтыңыз үшін браузерлер көрсететін сілтемелердің түсін қалай өзгертуге болады? Ал, беттер қолмен жасалатын қарапайым HTML сайты үшін (және менің ойымша, қарапайым күнделіктер мен қону парақтарын қоспағанда, қазіргі заманғы шындықта мұндай толыққанды ресурстар іс жүзінде жоқ деп ойлаймын), сізге тек ашу тегін табу керек. және оған қажетті параметрлерді орнатыңыз (айтпақшы, түсті белгілеу үшін оның атын пайдалануға болады), мысалы:

Веб-ресурсты басқару үшін мазмұнды басқару жүйесін () орнатқан болсаңыз, сіз пайдаланатын қозғалтқыш түріне қарамастан, тақырыпты (тақырыпты) көрсетуге жауапты файлды өңдеу үшін ашуыңыз керек, мұнда ашу тегі бар. .

Егер сіздің ресурста WordPress жұмыс істеп тұрса, онда практикалық жүзеге асыруБұл идеяны гиперсілтеме ішіне суретті автоматты түрде кірістіру құралы ретінде пайдалануға болады, мұнда алдымен кітапханадан таңдайсыз немесе қажетті суретті жүктеп алып, оны мәтінге енгізесіз:

Содан кейін алынған сурет кодын таңдап, редактордың «сілтеме» түймесін басыңыз, содан кейін пайда болған терезеде қажетті көшірілген гиперсілтемені қойыңыз:

:target псевдоклассы CSS3-тің тамаша мүмкіндіктерінің бірі болып табылады. Ол құжаттың URI кодындағы идентификатор көрсеткен элементке сәйкес келеді.

URI ішіндегі идентификатор төлсипат мәніне сәйкес келетін идентификатордың атауынан кейін «#» таңбасын қамтиды idқұжаттағы элемент.

Қолдау

Біз CSS3 туралы айтып жатқандықтан, псевдо классты барлығы қолдайды. заманауи браузерлер, IE 6 мен 8 нұсқаларын қоспағанда. Әдеттегі көңілсіздік :target пайдалану туралы шешім қабылдауға кедергі болмауы керек. Қазірдің өзінде IE9 :target псевдо класын қолдайды.

Қалай пайдалануға болады :target?

Бұл псевдосыныптың псевдосыныптар сияқты өзіндік стилі болуы мүмкін. : меңзерді апарыңыз, :белсендінемесе :фокуссілтемелер үшін. Жоғарыда айтылған псевдосыныптармен бірдей :мақсатвеб-сайтпен белгілі бір әрекеттер үшін пайдаланылады. Әсіресе фрагмент идентификаторы пайдаланылғанда, мысалы: http://example.com/index.html#lorem-ipsum .

Демонстрация

Демонстрациялық бет қалай және қашан пайдалану керектігінің өте айқын мысалын береді :мақсат. Псевдо класс :мақсатресурсыңызды пайдалану деңгейін жақсарта алады.

HTML белгілеу

Төменде демонстрациядан мысал келтірілген. Бізде 4 сілтеме және бірдей блоктар саны бар. Әр топтың өзінің бірегей идентификаторы болады.

• 1-блок
• 2-блок
• 3-блок
• 4-блок

css

Келесі CSS коды сәйкес идентификаторы бар жолақты бөлектеу арқылы қажетті әсерге жетеді (тіктөртбұрыштың айналасында көлеңке пайда болады).

/* Біраз бос орын қосыңыз */ ul, div (төменгі жиек: 10px; ) /* Әдепкі жолақ стилі */ div ( толтыру: 10px; жиек: 1px қатты #eaeaea; -moz-border-radius: 5px; шекара- радиус : 5px; ) /* */ div:target сәйкес келсе, оның сыртқы түрін өзгертіңіз ( жиек-түс: #9c9c9c; -moz-box-shadow: 0 0 4px #9c9c9c; -webkit-box-shadow: 0 0 4px #9c9c9c ; қорап-көлеңке: 0 0 4px #9c9c9c; )

Төменде код әрекетінің нәтижесі берілген. Сілтемені бассаңыз, сәйкес блок бөлектеледі және белсенді болады.