Mis on link ja kuidas HTML-is hüperlinki teha. Hüperlink - mis see on, kuidas luua linki ja sisestada HTML-i koodi (href, siht tühi ja muud sildi atribuudid) Kuidas luua hüperlinki HTML-koodide abil

Hüperlingid on HTML-dokumentide üks olulisemaid komponente. Tänu sellele komponendile ja tavalistele linkidele on Internetti nii lihtne kasutada. Vaatleme hüperlinkide sisestamise lihtsamaid võimalusi, mis aitavad teil algajate programmeerijatena seda õppetundi omandada.

Kuidas luua html-is hüperlinki?

See kood töötab ainult teie veebisaidil, väliste linkide puhul see ei tööta.

< a href=" *** ">***** < /a>

Näide:

< a href="https://сайт/">Ajakiri Kuidas kõike teha< /a>

Brauseris näeb see välja järgmine:

< a href="https://сайт/prigotovlenie-edy/368-kak-sdelat-malosolnye-ogurcy.html">Kuidas teha kergelt soolatud kurke?< /a>

Brauseris näeme järgmist:

Kuidas luua HTML-is hüperlinki välisele saidile?

Väliste linkide puhul tuleks koodi veidi muuta. Teisele saidile linkimiseks kasuta koodi:

< a href="*** ">***** < /a>

< a href="https://vk.com/kaksdelatvse">Oleme ühenduses “Kuidas kõike teha”< /a>

Vaatame hüperlinkide kasutamist näite nr 1 abil.

Hüperlinkide kasutamine

Vaata spetsifikatsiooni HTML 5 saate siin.
Leht avaneb uues aknas.

Siit saate alla laadida elementide ja atribuutide tabeleid.



Näide nr 1. Hüperlinkide kasutamine

Hüperlinkide kasutamine lehel ankrute loomiseks

Elementi "a" saab kasutada ka hüperlingina lehel navigeerimiseks. Selleks peate looma dokumendi õiges kohas ankur(inglise keelest ankur), st. järjehoidja ja määrake see hüperlingi sihtmärgiks. Ankur luuakse tühja "a" elemendi abil, mille avamärgend määrab atribuudi. Vajalikku märgistuselementi saab kasutada ka ankruna, kuhu hiljem viib sisemine hüperlink. Selleks peate lihtsalt määrama selles oleva atribuudi. Järgmisena on hüperlingi enda atribuudis href väärtuseks räsimärk "#" ja ankruatribuudi väärtus. Et see oleks selgem, kaalume kõike näite nr 2 abil.

Sisemiste hüperlinkide loomine

Mina olen esimene lõik.

Vaata atribuutide tabelit HTML 5 Saab
ametlikul veebisaidil siin.
Leht avaneb uues aknas ja avaneb
keritud atribuutidega tabelini.

Siin saate minna esimese lõigu juurde.



Näide nr 2. Sisemiste hüperlinkide kasutamine

Pange tähele ankrut absoluutaadressil, mis on määratud näite teises lõigus atribuudi href väärtusena. Sellise hüperlingi kasutamisel läheb brauser esmalt määratud aadressile ja seejärel kerib lehte määratud ankru asukohani. Kui lehel ankrut pole, näidatakse lehte algusest peale.

Suhtelised hüperlingid ja suhtelise adresseerimise konstrueerimine

Kokkuvõtteks vaatleme ehituse põhimõtet suhtelised aadressid. Olgu meie hüperlink dokumendis, mis asub kohalikus serveris aadressil http://localhost/site/doc_1/doc_2/ ... /doc_n/ web_page.html, kus doc_n on n-nda pesastustaseme kaust. Sel juhul võetakse kogu adresseerimise aluseks automaatselt kaust doc_n, milles asub meie hüperlingiga dokument. Niisiis:

  • Kui soovite, et link osutaks sihtdokumendile new_page.html, mis asub meie hüperlingiga lähtedokumendiga samas kaustas doc_n, peate lihtsalt määrama sihtdokumendi nime atribuudi href väärtuseks. link: href="uus_leht.html" .
  • Kaustas asuva sihtdokumendi new_page.html juurde liikumiseks http://localhost/site/ doc_1/ doc_2/ ... /doc_n/ doc_n_1/ ... doc_n_k/, peaks lingi href atribuudi väärtus sisaldama ainult doc_n all pesastatud kaustu ja loomulikult sihtdokumendi nime: href="doc_n_1/ ... doc_n_k/ new_page.html". Seega ütleme brauserile, et see peaks minema kausta doc_n_1, mis asub kaustas doc_n koos lähtedokumendiga, kuhu hüperlink on kirjutatud, seejärel kausta doc_n_2 ja nii edasi, kuni see jõuab kausta doc_n_k koos lingiga. seal asuv sihtdokument, mille see ja peab avama.
  • Algsest kõrgemal tasemel asuvasse kausta jõudmiseks kasutage spetsiaalset märgikombinatsiooni "../" . N taset ülespoole liikumiseks tuleb kirjutada kombinatsiooni "../" n korda järjest. Nii et meie puhul järgige sihtdokumendi linki http://localhost/site/doc_1/doc_2/ ... /doc_n-3/ new_page.html Lingi atribuudil href peaks olema väärtus "../../../new_page.html" . See ütleb brauserile, et see peaks minema kausta doc_n-1, seejärel doc_n-2 ja doc_n-3 ning seejärel avama seal asuva sihtdokumendi new_page.html.
  • Kui sihtdokumendile juurdepääsu saamiseks on vaja mitte ainult minna mitmele tasemele, vaid ka minna seal olevasse kausta (või mitmesse alamkausta), siis lingi atribuudi href väärtuses peate kõigepealt , et määrata vajalik arv tasemeid, kasutades sümboleid ". ./" ja seejärel lisada tee tulemuseks olevast kaustast sihtdokumenti. Näiteks kui sihtdokument asub kaustas new_doc ja selle aadressi tee näeb välja selline http://localhost/site/doc_1/doc_2/ ... /doc_n-3/new_doc/ new_page.html, siis peab lingi atribuudil href olema väärtus "../../../new_doc/new_page.html". Need. käsime brauseril hüperlingitud dokumenti sisaldavast lähtekataloogist doc_n kolm taset ülespoole minna ja seejärel minna kausta new_doc ja avada sihtdokument new_page.html

Näiteks saate alla laadida koolituse minisaidi, mis on ehitatud täielikult suhtelisele adresseerimisele. Pärast vaatamist katsetage, muutes ja luues uusi linke, kaustu ja lehti.

Suhtelised hüperlingid väga mugav brauseripõhiste võrguühenduseta rakenduste (nt abijuhendite) arendamiseks. Siiski peaksite meeles pidama, et kui teisaldate dokumendi praegusest kaustast teise, lakkavad kõik selles olevad suhtelised lingid töötamast. Seetõttu tuleb need ümber kirjutada. Kui suhtelised lingid osutavad failidele, mis asuvad ka praeguses kaustas või alamkaustades, siis pärast selle kausta teise asukohta teisaldamist jäävad kõik dokumendis olevad lingid tööle.

Kui peate alustama suhtelise tee loendamist saidi juurtest, kirjutage tee algusesse kaldkriips "/". Näiteks link " Kodu" osutab dokumendile, mis asub saidi juurkaustas (mitte praeguses!). Pidage meeles, et saidi juurkataloogist loendamine toimib ainult päris veebiserveri kontrolli all. Kohalikus serveris näiteks Xampp , loendamine peaks algama juurkausta nimest.

Head päeva kõigile, mu kallid sõbrad ja lugejad. Loodan, et olete otsustanud minu konkursil osaleda ja juba kirjutate oma blogimise teekonnast. Noh, ma tahaksin jätkata meie html-keele uurimist ja täna tahaksin teile rääkida ühest kõige olulisemast komponendist, nimelt hüperlinkidest.

Jah, ilma selliste hüperlinkideta poleks Internet nii mugav. Ei, ma valetan. Poleks üldse lihtne navigeerida. Kas kujutate ette Internetti ilma nendeta? Mina isiklikult mitte.

Ja täna õpime, kuidas html-i hüperlinki sisestada. Aga kõigepealt tahaksin küsida: kas sa tead, mis on isegi hüperlink ja mille poolest see erineb tavalisest lingist? Siin on tegelikult kõik lihtne: link on lihtne teave, mis viitab dokumendile. Samal ajal ei saa te sellel tekstil klõpsata (midagi ei juhtu), kuid teate, kust teavet otsida.

Näide: saate teada, kuidas Photoshopis juukseid esile tõsta aadressil //site/adobe-photoshop/kak-vydelit-volosy/

Hüperlink on sama tekst, ainult selle olemus on see, et saate sellel tekstil klõpsata ja jõuda soovitud lehele, saidile või mõnele muule objektile. Pealegi võib tekst ise olla ükskõik milline, samas kui aadress kirjutatakse sees eraldi ja see võib olla täiesti erinev. Aga olgu kuidas on, kõnekeeles nimetatakse neid ikka lihtsalt linkideks. Siin on näide hüperlingist:

Saate lugeda ühest minu õpetusest, kuidas Photoshopis juukseid õigesti esile tõsta.

Igatahes. Hea teooria. Liigume nüüd praktika juurde ja vaatame, kes kõigi nende asjade eest vastutavad.

Paaritud silt vastutab hüperlingi eest, kuid iseenesest ei esinda see midagi. See käib alati koos atribuudiga. Ja sel juhul peame pidevalt kirjutama seda sama href. Atribuudi väärtuses paneme lingi soovitud ressursi enda juurde. Ja sisusse endasse kirjutame teksti enda, mis peaks muutuma klikitavaks (klõpsamisel toimima). Vaadake näidet ja ma arvan, et saate kõigest aru.

Yandexi otsingumootor

Nagu aru saate, kirjutasin selles näites, et kui klõpsate tekstil "Yandexi otsingumootor", suunatakse inimene aadressile, mis on kirjutatud atribuudi href väärtuses.

Arvan, et paljud teist teavad, et on olemas sisemised ja välised lingid. Sisemised lingid viiakse läbi ühes kataloogis, st saidil, ja välised lingid viivad mõne kolmanda osapoole ressurssi. Ja nüüd ma näitan teile, kuidas mõlemat teha.

Sisemised üleminekud

Fail samas kaustas


Kuid selline üleminek toimib eeldusel, et lingitav fail asub samas kaustas failiga, kuhu lingi paigutate. Muude võimaluste puhul on kõik veidi erinev.

Fail teise kausta

  1. Avage fail pushkin.html rakenduses Notepad++
  2. Nüüd leidke sõna foto ja mähkige see siltidesse<a href> .
  3. Nüüd tähelepanu! Atribuudi väärtuses määrame redigeeritava faili tee, st pushkin.html enda. Peaksite lõppema millegi sellisega:
Foto

Mida me nüüd teinud oleme? Ja me tegime järgmist: kuna foto tee asub eraldi img kaustas, mis asub faili pushkin.html samas kaustas, siis atribuudi väärtuses peame kõigepealt kirjutama kausta nime ja seejärel läbi kaldkriipsu (/) dokumendi täisnimi (meie puhul fotod).

Nüüd salvestage ja käivitage fail pushkin.html oma brauseris. Näete, et sõna “Photo” on sinisega esile tõstetud ja muutunud klikitavaks, mis tähendab, et sellel lingil klõpsates suunatakse meid faili fofo.jpg, mis asub img kaustas.

Niisiis, kuidas? Kõik selge? Kui midagi juhtub, ärge kartke küsida.

Välised üleminekud

Ja muidugi ei saa mainimata jätta ka väliseid linke, mille peale klõpsamist suunatakse meid hoopis teisele saidile. Kuid siin pole midagi keerulist. Asi on selles, et lisate saidi või veebilehe täieliku aadressi href väärtusesse. Näitasin ülaltoodud näidet Yandexiga. Aga siin on veel üks näide:

Õpin sotsiaalprojektide magistriks.

Siin jõuame konkreetse saidi konkreetsele lehele.

Avaneb uues aknas

Vaikimisi avaneb dokument lingile klõpsates samas aknas, kus sinu leht, s.t. su leht läheb kinni. Ja see pole hea. Eelkõige reklaamitud sisuprojektide või ajaveebide puhul on soovitatav, et lingil klõpsates avaneks dokument uues aknas või vahekaardil ilma teie lehte sulgemata.

Sihtatribuut väärtusega “_blank” aitab meid selles. Siin pole midagi keerulist. Peate selle lihtsalt sisestama avasildi sisse pärast atribuudi href väärtust. Võtame selle väljavõtte failist lukomorye.html, kus tegime lingi pushkin.html lehele, alles nüüd kirjutame just selle atribuudi. See peaks välja nägema selline:

Luuletusest Ruslan ja Ljudmila (Autor - A.S. Puškin)

No siin on kõik selge. Nüüd, kui klõpsate sisul, avaneb soovitud leht uues aknas. See asi on väga vajalik, sest kui te seda ei registreeri, lahkub kasutaja lihtsalt teie lehelt. Ja nii jääb ta sellele igal juhul peale, ainult siis, kui ta seda spetsiaalselt ei sulge. Proovige kõike ise teha, lihtsalt tehke kõik oma kätega ilusaks. Pole vaja kopeerida ja kleepida.

Kuidagi niimoodi. Tundub, et ma rääkisin teile kõik kõige olulisemad asjad, kuid kui soovite selles suunas liikuda ja õppida HTML-i ja CSS-i, et luua professionaalseid veebisaite, ajaveebe ja isegi veebipoode, siis vaadake seda kindlasti suurepärane videokursus selle teema kohta. Õppetunnid on tõesti suurepärased ja mõeldud inimestele, kes on veebisaitide loomisega veel vähe tuttavad või pole üldse tuttavad.

Noh, see lõpetab meie tänase õppetunni. Loodan, et teile meeldis minu artikkel ja teil on hea meel, kui teist saab minu püsilugeja. Nii et ärge unustage tellida minu ajaveebi värskendusi, et te ei jääks millestki huvitavast ilma. Noh, soovin teile edu kõigis teie ettevõtmistes. Headaega!

Parimate soovidega Dmitri Kostin.

Hüperlingid leiutati võrgus olevate dokumentide omavaheliseks linkimiseks ja kui teie sait koosneb pigem mitmest kui ühest lehest, saate need omavahel linkida ainult hüperlinke luues. Vaatame otse näite abil, kuidas see välja näeb.

Lihtsa hüperlingi loomine








Minge teisele lehele




Siin on kõik lihtne, hüperlingi loomiseks kasutame silti kus href=”” on selle lehe aadress, kuhu üleminek toimub, meie puhul asub see leht samas kataloogis. Siia saate sisestada ka aadressi, näiteks href=”http://site.ru/page.html“ või see võib olla link arhiivile, mis asub teie saidi teises kaustas href=”arj/arhiv.zip” või mõnele muule dokumendile, millel pole tegelikult vahet. Samuti on iga hüperlingi kohustuslik atribuut pealkiri, see on lingi kirjeldus, see on väga oluline element otsingumootori optimeerimisel ja siia kirjutad lingitava lehe või dokumendi märksõnad. Teksti, mis asub sildi vahel, nimetatakse ankruks ja see on samuti väga oluline.

Lingi avamine uuel lehel

On veel üks huvitav atribuut, mis võib teile kasulik olla:

Minge teisele lehele

Sihtatribuut väärtusega _blank avab lingi uues aknas; seda kasutatakse sageli juhul, kui te ei soovi, et inimene teie lehte kaotaks ja samal ajal saaks vajaliku teabe lihtsalt uuel vahelehel või aknas.

Piltide lingid





Kasutame saidil hüperlinke









Tulemus brauseris:

Sisuliselt on siin kõik lihtne, pildisildi asetasin avava ja sulgeva hüperlingisildi vahele , aga jällegi ma ei sisestanud lihtsalt kahte pilti, määrasin img-klassi ühele, milles lähtestasin pildi ümber oleva raami, kuna kui sellest saab hüperlink, siis see ilmub, kuid mitte kõigis brauserites, näiteks näete seda IE-s, kuid mitte Google Chrome'is.

Allakriipsutamine linkides





Kasutame saidil hüperlinke



Minge teisele lehele
Minge teisele lehele




Selguse huvides andsin selle ülesande lahendamiseks kaks võimalust, määrasin need klassivalijale ja selle klassi registreerimisega eemaldate konkreetsetes kohtades mittevajalikud allakriipsud. Probleemi teine ​​lahendus on eemaldada allakriipsutus kõigilt sildi linkidelt<а>, mis tekitab muidugi harva vajadust, kuid siiski pole teadmised üleliigsed.

Lingid dokumendi sees

Ei ole harvad juhud, kui dokument on üsna pikk ja lehe alguses on väike menüü linkidega selle lehe alajaotistele. Neid linke nimetatakse dokumendisisesteks linkideks ja seda kõike rakendatakse üsna lihtsalt. Alustuseks asetatakse dokumenti ankrud, need on sildid, need asetatakse dokumenti, kuhu need tuleb teisaldada, kui klõpsate sisemisel lingil, reeglina on need jaotiste pealkirjad, silt näeb välja selline:

< /a>

Peatükk….< /a>

Ja viimane asi, mida peame hüperlinkide kohta teadma, on lingid elektroonilistele postkastidele, seda saab väga lihtsalt rakendada, lisage atribuudile href kirje nagu mailto: ja postkasti aadress:

Minu post< /a>

Siin lõpetan õppetunni “Hyperlinkide loomine html-is”, nagu olete ehk märganud, ei saanud me siin ilma CSS-ita hakkama, üldiselt on materjal üsna lihtne, ma arvan, et kõik on teie jaoks lihtne ja selge, kui kui on küsimusi, kirjutage.

Avaldamise kuupäev: 2014-04-23


Tere, kallid külastajad!

Selles artiklis näitan teile, kuidas lisada veebisaidile linki lihtsa hüperlingi, pildi ja ka nupu kujul, millele saate CSS-stiilide abil oma kujunduse määrata. Kõiki 3 võimalust kasutatakse väga sageli ja need mõjuvad külastajate poolt üsna hästi.

Alustame kõige lihtsamast ja jõuame kompleksini.

Tavaline link ja hüperlink

http://site/poleznoe/kak-sdelat-ssylku-na-sait.html

http: //site/poleznoe/kak-sdelat-ssylku-na-sait.html

Sellel valikul on oma koht, kuid sellel on märkimisväärne puudus, kui me räägime sellise lingi tõhususest. See pole klõpsatav, see tähendab, et te ei pääse selle juurde ühe hiireklõpsuga. Seda võimalust on külastajatel üsna raske tajuda.

Teine asi on hüperlink, millele klõpsates suunatakse Internetis teisele dokumendile, nii sisemisele (sama saidi sees) kui ka välisele (teisele saidile). Sellise lingi näidet näete allpool. Proovige klõpsata lingil.

Minu ressursi avaleht peaks avanema uuel vahelehel. Selle valiku rakendamiseks peate kas kasutama oma mootori tööriistu või kirjutama HTML-koodi järgmise rea.

Kliki siia

Link luuakse lihtsa sildi abil , mille sees on aadress ise, kuhu kasutaja tuleb ümber suunata, samuti lingi ankur (ülalolevas näites on ankur fraas "kliki siia"), mis näitab lingi teksti, mis selgitab, mida soovite saada, kui lähete sellele aadressile.

Kui teil on lihtne HTML-is tehtud veebisait, siis peaksite kirjutama lehe redaktorisse täpselt selle koodi, muutes minu aadressi teie omaks ja määrates ankru. See näeb välja selline.

Lingimärgendi sees Samuti on olemas atribuut lehe avamiseks uuel vahelehel.

sihtmärk = "_blank"

See on ka väga oluline, külastajat on soovitatav mitte ressursist välja visata, vaid ta lahkuda. Seda atribuuti kasutades tagate, et ühel lehel paljudel linkidel klõpsates ei lahku külastaja praeguselt, vaid avab samal ajal palju teisi lehti. See on oluline, kui reklaamite veebisaiti.

Saate lisada lingile pealkirja atribuudi, mis on pealkirja silt ja annab otsingumootoritele teada, kuhu link viib. Samuti kuvatakse see silt (kui see on registreeritud), kui osutame lingile kohtspikrina.


Soovitatav on lisada pealkirjasilt, et külastajad näeksid kursorit hõljutades seda vihjet ja mõistaksid, kuhu nad lähevad. Seda tehakse lihtsalt avatava sildi sees , nagu allolevas näites.

Mootori, näiteks WordPressi, kasutamisel on saidile lingi lisamine väga lihtne, ilma HTML-režiimis muudatusteta. Postitusredaktoril on spetsiaalne ühenduse ikooniga ikoon.

Pildil näitasin kogu teksti ja teise lehe vahelise seose lisamise protsessi.

  1. Esmalt valige fraas, mida soovite linkida;
  2. Klõpsake ühenduse lisamise ikooni;
  3. Määrame lingi parameetrid (lehe aadress, kuhu soovite kasutajat suunata, samuti lingi pealkiri, see tähendab vajadusel ankur).

Te ei pea sisestama lingi pealkirja, kuna see on esimeses etapis valitud tekst. Pildil näitasin linkide lisamist olemasolevatelt saidilehtedelt. Saate seda teha, siis kui klõpsate loendis mõnel kirjel, sisestatakse URL ja pealkiri automaatselt.

URL-i saab sisestada ka välisele saidile. Kui see on vajalik, sisestage lehe täielik (absoluutne) aadress. Lehe avamiseks uuel vahelehel ei ole vaja atribuuti käsitsi sisestada. Mootor pakub seda valikut ühe märkeruudu abil (vt ülaltoodud pilti).

Natuke kõrgemalt ütlesin absoluutaadressi kohta. See tähendab, et lingi sees on kirjas selle lehe täielik aadress, kuhu peate ümber suunama, olenemata sellest, kas see on meie või muu ressurss.

Samuti on suhteline aadress, kui pole vaja sisestada täielikku aadressi. Piisab lihtsalt saidi mõne kataloogi või lehe tee sisestamisest ilma domeeninime määramata. Sellised lingid töötavad ainult ühe ressursi lehtede puhul. Niimoodi välisele projektile viidata ei saa.

Kui soovite suhteliste aadresside loomise protsessi sügavamale sukelduda, soovitan seda soojalt lugege seda artiklit teisel ressursil. Kõik on seal väga lahedalt välja pandud.

Lingi pilt

Laialdaselt kasutatakse ka piltide kujul olevaid linke, kuigi neid tuleks kasutada ainult ettenähtud otstarbel. Kui oleme lihtsad lingid teistele meie saidi lehtedele, siis on parem mitte teha neid piltidega, kuna alati pole selge, et mõnele lehele pääsemiseks peate pildil klõpsama.

Seda on soovitatav teha siis, kui soovite kedagi reklaamida, näiteks kellegi videokursust. Sel juhul esitate tavalise hüperlingi, millele järgneb kohe pildilink. Sel juhul on selgem, et pilt viib kursuse veebisaidile, kust seda saab osta.

Kui võtame html-režiimi, siis on lingistruktuuri ülesehitamise põhimõte täpselt sama, kaasa arvatud kõik atribuudid. Ainus erinevus on lingi ankur, mis näeb välja nagu pildi enda kood. Eelmisel juhul oli lihtne tekst.

Praktikas näeb see välja selline.

Nagu näete, on avamis- ja sulgemislingi siltide sees pildikood, millel on samuti oma omadused. Peate sellesse lisama sama pealkirjasildi, märkima hostis või muus ressursis pildi tee. Samuti tasub täpsustada pildi mõõtmed (laius - laius, kõrgus - kõrgus). Ja kindlasti peaksite lisama atribuudi alt, mis toimib pildi kirjeldusena. Kui kõik kirja panna, on pildi optimeerimine tasemel.

Siin näeb see välja html-režiimis. Koodi jagasin 3 osaks, et lingi struktuur oleks arusaadavam (klikitav pilt).

Ainus raskus on siin ankruna kasutatava pildi koodi korrektne sisestamine.

Linkimisnupp, kasutades CSS-i stiile

Kui tahad midagi teisiti teha, siis on ka sellel valikul oma koht. Lisaks võimaldab see stiile muuta nii, et kui hõljutate kursorit nupu kohal, muutuvad nii nupp ise kui ka selle sees oleva pealdise värv. Kui pildistate, pole seda alati võimalik realiseerida. Stiilidega on kõik võimalik.

Teine väga hea eelis on see, et saame nupu asetada rangelt keskele ja see on klõpsatav ainult nupu piirkonnas. Kui teeme pildi, siis selle keskele asetades on klõpsatav kogu pilti ümbritseva sisuala laius. Mõnikord põhjustab selline defekt kogemata pildil klõpsamise ja on ausalt öeldes tüütu.

Näiteks lõin lihtsa nupu, mis viib saidi avalehele. Saate kontrollida selle funktsionaalsust.

Kui vaadata nupu lähtekoodi, on kõik väga lihtne. Ainus erinevus tavalisest hüperlingist on ID olemasolu, mis lisatakse avasildi sisse ja omakorda kirjutatakse sellele kujundusstiilid faili style.css.

Siin on nupu struktuur ise.

Näeme seda kohe pärast lingisildi avamist id="button" on määratud, millele on määratud oma kujundusstiilid. Ülejäänud struktuur on hüperlingiga identne.

Põhimõte on selge, seega annan sellele lingi nupule lisatud stiilid.

/* nuppude stiilid tavarežiimis */ #button ( ekraan: plokk; laius: 550 pikslit; /* nupu laius */ kõrgus: 60 pikslit; /* kõrgus */ taustavärv: #ff4343; /* taustavärv */ tekst- vari: 1px 1px #800909; /* teksti vari */ värv: #fff; /* teksti värv */ äärise stiil: ühtlane; /* nupu äärise joone tüüp */ äärise laius: 1px; /* paksus nupu ääris ( raam) rida */ äärise värv: #db3a3a; /* nupu äärise (raami) joone värv */ fondi suurus: 18 pikslit; /* teksti suurus */ rea kõrgus: 60 pikslit; /* lineaarse teksti kõrgus * / font- kaal: tavaline; /* teksti kaal */ fondiperekond: arial; /* fondi tüüp */ teksti joondamine: keskel; /* teksti joondus */ teksti kaunistamine: puudub; /* teksti allakriipsutus */ veeris: 40 pikslit automaatne ; /* taane nupp muudest lehe elementidest */ text-transform: suurtähted; /* nii, et kõik tähed oleksid suurtähtedega. Kui pole vaja, eemaldage rida */ ) /* nupu stiilid hiirekursori hõljutamisel */ # nupp:hover ( taustavärv: #f23333; fondi suurus: 19 pikslit; )