Kuidas kasutada CSS-i hüperlinkide laadimiseks veebilehtedel

Mai 3, 2024

Kui tunnete HTML-i, teate, et saate juhtida veebilehe teksti ja hüperlinkide värvi. Kuid Cascading Style Sheets abil saate teha palju enamat. Teatud siltidel, näiteks hüperlingi ankurmärgis, on sildi erinevate olekutega seotud nn pseudoklassid. Näiteks on hüperlingi sildil neli olekut; link, külastatud, hõljutage ja aktiivne.

Kui linki ei kasutata (pole valitud), siis see on link pseudoklass või olek. külastatud olek on pärast lingi kasutamist. hõljuma olek on siis, kui hiir läheb üle lingi ja aktiivne olek on siis, kui klõpsate lingil. CSS-i võlu on see, et iga lüli olekut kontrollitakse pseudoklasside kaudu iseseisvalt. Nii et saate iga oleku jaoks seada erinevad omadused. CSS-is saate kasutada mis tahes hüperlingi ankrumärgendiga seotud atribuuti.

Allolevas näites seome lingi oleku punaseks, külastatud oleku lillaks (# 400040), hõljutage kursorit ja aktiivseid olekuid punaseks, allajoonitud ja kaldkirjas.

Märge--Nool

näitab, et kood on mähitud teisele reale ja see peaks tõesti olema ühel real.

Nagu näete, oleme kõigi olekute jaoks värvuse atribuudiks määranud punase, välja arvatud külastatud oleku puhul, mille seadsime lillaks. Kuna me tahame, et hüperlingi rõhutatakse ainult hõljumise ja aktiivsete olekute puhul, oleme teksti kaunistamise atribuudiks määranud kahe ülejäänud oleku jaoks ühegi. Lõpuks oleme määranud fondi stiili kursiiviks hõljutatavale ja aktiivsele olekule, mis põhjustab teksti muutmisel kaldkirjaks, kui lingist üle lähete või sellele klõpsate, ja oleme teksti kaunistuse tagasi alla jooninud. See on vaid lihtne näide. Saate muuta oma stiilid nii lihtsaks või väljamõeldud, kui soovite. Siiski tuleb meeles pidada mõnda asja.

Veebibrauserid erinevad selle käsitluse poolest. Tavaliselt, kui määrate atribuudi teatud väärtuseks, pärandavad selle (edastavad selle) kõik pärast seda loetletud riigid. Ülaltoodud näites oli meie koodis esimene olek lingi olek ja seadsime värvi atribuudi punaseks. Enamasti kantakse see üle teistele kolmele osariigile, kui me seda koodiga ei muuda, nagu ka külastatud riigi puhul. Samuti, kui me poleks teksti kaunistamist tagasi allajoonimiseks seadnud, poleks hõljuki ja aktiivsete olekute tekst alla joonitud, sest lülitasime selle esimeses olekus välja. Kuid te ei saa selle jaoks arvestada kõigi brauseritega. Seetõttu on kõige parem seada kõik omadused iga oleku jaoks eraldi.

Väljamõeldud linkide kavandamisel ärge tehke olekute vahel suuri muudatusi, näiteks suurendage teksti suurust dramaatiliselt. See põhjustab veebibrauseri lehe uuesti laadimise ja teie külastajad on teiega väga ärritunud.

Nende pseudoklasside koodi loetlemise järjekorda mõjutab kaskaadide järjekord. Arutame kaskaadi järjekorda hilisemas õpetuses. Nüüd pidage lihtsalt meeles, et konfliktide vältimiseks kodeerige olekud ülaltoodud järjekorras; link, külastatud, hõljutage ja aktiivne.

Video Juhiseid: Web Development - Computer Science for Business Leaders 2016 (Mai 2024).

Kuidas kasutada CSS-i hüperlinkide stiilimiseks veebilehtedel, HTML-is, sildi erinevate olekutega seotud pseudoklassides, pseudoklassis, hüperlingis, hüperlinkide kodeerimisel CSS-is, CSS-i pseudoklassis, CSS-olekutes, sildi olekus, väljamõeldud linkides CSS-i veebilehel, väljamõeldud lingid

Eelmine Artikkel

Järgmine Artikkel

Seotud Artiklid

arvutid

Hitman 2: Vaikne palgamõrvar

Mai 2024

Hitman 2 on esimene laskur, kes premeerib kontrolli ja varjamist täieliku lõhkamise eest. Imeilus graafika ja vabavormiline mängimine muudavad selle suurepäraseks nii teismelistele kui ka...

arvutid

Tekst kõneks hariduslike rakenduste jaoks

Mai 2024

Võib-olla te juba teate, et teie Macil on teksti kõneks funktsioon. Paljud laste haridusrakenduste arendajad on seda funktsiooni oma rakenduste heli loomiseks kasutanud. See on suurepärane võimalus...